stepanzh

Adam Wathan and Steve Schoger — Refactoring UI

Refactoring UI это супер-практичная книга по веб-дизайну. Идеальный вариант для новичка, которому не терпится начать. В книге обо всём понемногу: поработав с материалами, вы научитесь дезигнить нормально выглядящие сайты. Мне нравится структура книги, множество примеров как надо и как не надо, а ещё мне импонируют изложенные принципы.

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

Стив Круг — Не заставляй меня думать

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

Google — Google Fonts: Knowledge

Существует много материалов по типографике, но Google Fonts: Knowledge один из самых доступных и классных. Ликбез по шрифту, который всегда под рукой.

Ричард Пулман — Школа дизайна

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

В классике макета центральное место занимают сетки, составить представление о них можно ещё здесь и тут.

Ещё

На сайтах дизайн-студий и дистрибьютеров шрифтов можно позалипать, натренировать насмотренность в шрифтах и почитать статьи. Например, type.today и студия Паратайп. Тут же стоит искать тёмных лошадок среди профессионально-выполненных шрифтов.

Можно учиться у современных и стройных дизайн-систем: Apple Developer — Design, Google — Material 3, Microsoft — Fluent UI.

Поискать вдохновения и тренды можно на dribbble.com.

Базу по анимации я подсматривал у skytskyi.

Напоследок моя слабость, Дэвид Харрис — Искусство каллиграфии. Книга вряд ли научит выбирать шрифты, но переполнена эстетикой европейского письма. Каллиграфия и создание шрифтов для интересующихся, лукбук — для остальных.

Что я использую

Если мне понравился шрифт на сайте, то я лезу в инструменты разработчика в браузере. А беру шрифты обычно с Google Fonts.

Мои спасательные круги в мире цвета это. Tailwind CSS Color generator и coolors.co. Для текста проверяю контрастность на WebAIM.

Прототипирую дизайн в Figma. Это лучший на рынке кроссплатформенный и бесплатный инструмент для дизайна сайтов и приложений. Супер удобная. Вещь. В Figma много плагинов, но самое ценное для начинающих это официальные тулкиты для дизайна под конкретную платформу (Google, Apple и Microsoft тут).

Если векторный редактор, то Inkscape. Опенсурс, хорошо работает, да и я привык. Для программистов ещё один плюс — автоматизация и экспорт в LaTeX.

За стоковыми фото хожу на Unspash.

Иконки для сайта беру из коллекций, чтобы сочетались. Моя любимая — heroicons, она для интерфейсов. Чего не хватает, беру на simpleicons (обычно иконки соцсетей). Также удобно использовать иконочные шрифты, например, Material Icons.

Что я не использую

Type scaler. Он строит сетку размеров для шрифта на каком-то отношении (например, 1.2). В конечном итоге вы приходите к дробным значениям, а они не кроссплатформенны (системы по-разному их округлят, и будет по-разному выглядеть). Надёжнее взять готовую сетку из целых чисел.

Сетки для макетов в диджитале. Тут много за и против, я сетки не люблю. Мне нравится подход из Refactoring UI: отталкиваемся от контента (feature first), берём хороший отступ, и следим за шириной.