[Книга] Refactoring UI - Complete Package + Видео

Сделайте так, чтобы ваши идеи выглядели потрясающе, не полагаясь на дизайнера. Узнайте, как создавать красивые пользовательские интерфейсы самостоятельно, используя особую тактику, объясненную с точки зрения разработчика.

«Я знаю, это выглядит ужасно, но я понятия не имею, почему».

Привет! Меня зовут Адам Ватан, я фулстек разработчик, который раньше не любил дизайн.

Я дружил со Стивом Шогером в течение многих лет, и мы вместе работали над несколькими побочными проектами - он занимался дизайном пользовательского интерфейса, а я заботился о разработке.

Как и многие разработчики, я всегда хотел, чтобы мои идеи выглядели потрясающе, не полагаясь на дизайнера, но каждый раз, когда я пытался что-то разработать самостоятельно, я всегда разочаровывался и сдавался.

Я всегда относился к правому полушарию - я логичен и аналитичен, поэтому я хорош в программировании, а такие люди как Стив, интуитивны и креативны, поэтому он хорош в дизайне.

Но после тесного сотрудничества со Стивом я начал понимать маленькие хитрости. Трюки, которые не требовали какого-либо художественного таланта, но заставляли вещи выглядеть лучше сразу по причинам, которые имели смысл для меня как разработчика.

Дизайн с тактикой, а не талантом.

Вот конкретная тактика проектирования, которую, я уверен, вы применяете каждый день, но явно не заметили:

Используйте меньше границ.

Границы (бордеры) - отличный способ отличить два элемента друг от друга, но использование слишком многих из них может заставить ваш дизайн чувствовать себя занятым и загроможденным.

Вместо этого попробуйте добавить тень для блока, используя контрастные цвета фона или просто добавив больше места между элементами: Подобные изменения не требуют никакого таланта - если вы знаете тактику, вам просто нужно заметить проблему и применить решение.

Разные курсы по дизайну так много внимания уделяют принципам высокого уровня, таким как теория цвета и типографика, которые, хотя и важны, никогда не помогали мне мгновенно вносить улучшения, такие как конкретная тактика действия, которую я подбирал у Стива.

Работая вместе, мы знали, что можем создать что-то лучшее.

За последние несколько лет мы помогли тысячам разработчиков улучшить дизайн с помощью быстрых советов, подробных статей и видеоуроков.

Refactoring UI объединяет все, что мы знаем о дизайне, и объединяет его в один комплексный пакет, включающий книгу, скринкасты, галерею компонентов, специально разработанные ресурсы и многое другое.

Это именно то, что мне было нужно, когда я изо всех сил старался, чтобы мои проекты выглядели потрясающе.

Что мы собрали

Это не просто книга - это все, что вам нужно, чтобы начать создавать лучшие дизайны сегодня.

Когда мы впервые начали работать над этим проектом, наши амбиции были довольно скромными - взять все советы и рекомендации, которыми мы поделились в Твиттере, объединить их в один ресурс и выпустить в мир.

Но чем больше времени мы тратим на планирование, тем больше понимаем, что у нас есть возможность создать что-то лучше этого. То, что было не просто книгой, а скорее полным набором средств выживания для веб-дизайна.

Вот что у нас получилось ...

Книга

Прекрасный PDF-файл, содержащий 50 невероятно визуальных глав, распространяется на 250 тщательно набранных страницах.

Эта книга содержит буквально все, что мы знаем о веб-дизайне, разбита на короткие, легко читаемые главы.

Каждая глава разработана настолько независимой, насколько это возможно, поэтому вы можете читать их практически в любом порядке. И если вы захотите сесть и прочитать все сразу, у вас не будет проблем с тем, чтобы пройти через это всего за пару часов.

Мы ненавидим книги, которые повторяют одни и те же идеи снова и снова, чтобы заполнить счетчик страниц. Эта книга написана во многом как наши посты в блоге - каждое предложение достойно внимания.

Видео уроки

Книга научит вас многому, но есть некоторые вещи, которые лучше всего узнать, наблюдая, как эксперт делает это самостоятельно.

Мы собрали три подробных видео-урока, в которых рассказывается, как взять все идеи из книги и применить их к трем распространенным сценариям проектирования пользовательского интерфейса:

• Разработка интерфейса сложной формы
• Создание информационной панели, ориентированной на данные
• Стилизация текстовой целевой страницы

Каждое видео тщательно отредактировано и имеет правильный темп, поэтому не теряйте времени на то, чтобы посмотреть их.

Галерея компонентов

Сколько раз вам приходилось смотреть на другие приложения, чтобы получить идеи для таких вещей, как стили кнопок, макеты форм или процедуры навигации? Это всегда было огромной проблемой для нас с нашей собственной работой, поэтому мы создали галерею компонентов для ее решения.

Галерея компонентов - это огромный ресурс, содержащий более 20 категорий компонентов / макетов и более 200 отдельных стилей компонентов.

Он включает в себя макеты средней точности каждой идеи, о которой мы могли думать, для каждого компонента, о котором мы могли думать, включая такие вещи, как:

• Стили кнопок
• Макеты страницы входа
• Разделы маркетинговой страницы
• Макеты карт
• Табличные стили
• Схемы навигации
• ... и многое, многое другое.

Вам больше никогда не придется просматривать другой сайт для вдохновения верстки.

Цветовые палитры

Если вы когда-либо использовали онлайн-генератор цветовой палитры, вы знаете, что пяти образцов, которые они дают, вам никогда не хватит для создания реального интерфейса.

Мы решили решить эту проблему, создав вручную более дюжины полных цветовых палитр, включающих 10 оттенков для каждого включенного цвета, а также пример пользовательского интерфейса, показывающий, как эти цвета предназначены для использования: Мы также собрали огромную библиотеку индивидуальных цветовых шкал, которые вы можете использовать для создания своих собственных палитр, не выбирая вручную каждый отдельный оттенок.

Рекомендации по шрифтам

Попытка выбрать идеальный шрифт для проекта - это кошмар. Есть тысячи шрифтов на выбор, и попытка принять обоснованное решение, не видя конкретного шрифта в правильном контексте, требует вечности.

Мы собрали список из более чем 30 шрифтов, которые нам очень нравятся, и разбили его на три категории: пользовательский интерфейс, заголовки и копии статей.

Каждый шрифт показан в качестве примера пользовательского интерфейса для этой категории, так что вы можете точно понять, как он будет выглядеть там, где вы собираетесь его использовать, без необходимости пробовать каждый шрифт самостоятельно.

Если вы когда-нибудь чувствовали себя неловко, пытаясь выбрать шрифт, это сэкономит вам массу времени.

Пользовательские иллюстрированные иконки

Refactoring UI также включает в себя набор из 200 прекрасно иллюстрированных иконок SVG: SVG предварительно оптимизированы, и цвета могут быть легко настроены в соответствии с вашим брендом с помощью всего лишь CSS - знание инструментов проектирования не требуется.

Complete package

• 250-страничная книга в формате PDF
• Все три подробные видеоуроки
• Галерея вдохновения для компонентов, включающая более 200 идей компонентов и макетов
• Более десятка полных цветовых палитр, адаптированных для пользовательских интерфейсов приложений
• Витрина шрифтов, в том числе более 30 рекомендаций по категориям шрифтов
• Эксклюзивная библиотека иконок, включающая 200 легко настраиваемых иконок SVG