ЧЕк-лист
Шрифты
Делятся на гротески (без засечек), антиквы (с засечками) и декоративные (старославянские, рукописные и тд).
Бывают акцидентные (для заголовков) и универсальные (для заголовков и для текста).
Как правило, в 1-м проекте используется не более 3-х шрифтов (для заголовков, для текста, дополнительный).
Функции шрифта:
Для подбора шрифтов мы собираем базу (кириллица, латиница, цифры, символы) и потом уже в зависимости от проекта выбираем шрифты оттуда.
У шрифтов крайне рекомендуем проверять лицензию, тк если в коммерческом проекте используем платный шрифт, который скачали бесплатно — можно нарушить авторские права и нарваться на штраф (для проверки смотрим на разных сайтах или берём 100% бесплатные шрифты, например, с Google Fonts).
Список моих любимых бесплатных шрифтов, которые подходят как для заголовков, так и для текстов:
Делятся на гротески (без засечек), антиквы (с засечками) и декоративные (старославянские, рукописные и тд).
Бывают акцидентные (для заголовков) и универсальные (для заголовков и для текста).
Как правило, в 1-м проекте используется не более 3-х шрифтов (для заголовков, для текста, дополнительный).
Функции шрифта:
- быть понятным (это самое главное)
- создавать стиль и настроение сайта
Для подбора шрифтов мы собираем базу (кириллица, латиница, цифры, символы) и потом уже в зависимости от проекта выбираем шрифты оттуда.
У шрифтов крайне рекомендуем проверять лицензию, тк если в коммерческом проекте используем платный шрифт, который скачали бесплатно — можно нарушить авторские права и нарваться на штраф (для проверки смотрим на разных сайтах или берём 100% бесплатные шрифты, например, с Google Fonts).
Список моих любимых бесплатных шрифтов, которые подходят как для заголовков, так и для текстов:
- Manrope
- Inter
- Raleway
- Rubik
- Tilda Sans
- Graphik
- Merriweather
- Ubuntu
- Noto Sans
- IBM Plex Sans
- Montserrat
- Futura PT
- Mediator
- Circe
- Comfortaa
- SF Pro Display
- Gilroy
- Jost
- Golos Text
- Proxima Nova
Типографика
К типографике относится все, что связано с параметрами текста:
Давайте разберем каждый из них по отдельности:
1. Заголовок 1 уровня — самый важный текст на сайте. От того, насколько внятно он сформулирован, зависит, останется ли человек на сайте или уйдет искать к конкурентам. Поэтому он должен иметь самый крупный размер на сайте (как правило, 50-120 пикселей) и максимальную насыщенность (Bold, Semibold, реже Medium или Regular).
2. Заголовок 2 уровня — заголовки блоков сайта (например, «Преимущества», «Отзывы», «О компании» и тд). Они также достаточно крупные по размеру (примерно 40-80 пикселей) и насыщенности (Semibold, Medium), но меньше, чем заголовок 1 уровня.
3. Заголовки 3 уровня — заголовки важных мыслей внутри блока. Они еще меньше по размеру и насыщенности, чем заголовки 2 уровня, и чаще всего эти параметры зависят от шрифта и в целом проекта (иногда их может и не быть).
4. Заголовки 4-5 уровня также могут присутствовать на больших проектах; на небольших проектах их они, как правило, встречаются редко.
5. Подзаголовки, описания, тексты, сноски — более подробно раскрывают мысли, заявленные в заголовках 2, 3 … уровней и поэтому они еще меньше по размеру и насыщенности.
Что касается межбуквенного расстояния, мы его как правило оставляем без изменения, за исключением заголовков, где его можно либо чуть уменьшить (сжать) либо чуть увеличить (разрядить буквы). Есть некоторые шрифты, у которых изначально межбуквенное расстояние слишком большое, такие шрифты рекомендуем использовать либо в заголовках, либо вообще не использовать (замучаетесь каждый раз менять межбуквенное расстояние).
Для межстрочного расстояние есть простое правило — чем крупнее текст, тем меньше у него должна быть межстрочка, чтоб он хорошо читался. Межстрочку задаем либо в пикселях (чуть более профессионально, но непрактично с точки зрения верстки на Тильде) либо в процентах.
Для удобства мы создали небольшую шпаргалку с основными параметрами типографики для самых частых типов текстов в иерархии (для десктопа).
К типографике относится все, что связано с параметрами текста:
- Размер шрифта
- Насыщенность (жирность)
- Межбуквенное расстояние
- Межстрочное расстояние
Давайте разберем каждый из них по отдельности:
1. Заголовок 1 уровня — самый важный текст на сайте. От того, насколько внятно он сформулирован, зависит, останется ли человек на сайте или уйдет искать к конкурентам. Поэтому он должен иметь самый крупный размер на сайте (как правило, 50-120 пикселей) и максимальную насыщенность (Bold, Semibold, реже Medium или Regular).
2. Заголовок 2 уровня — заголовки блоков сайта (например, «Преимущества», «Отзывы», «О компании» и тд). Они также достаточно крупные по размеру (примерно 40-80 пикселей) и насыщенности (Semibold, Medium), но меньше, чем заголовок 1 уровня.
3. Заголовки 3 уровня — заголовки важных мыслей внутри блока. Они еще меньше по размеру и насыщенности, чем заголовки 2 уровня, и чаще всего эти параметры зависят от шрифта и в целом проекта (иногда их может и не быть).
4. Заголовки 4-5 уровня также могут присутствовать на больших проектах; на небольших проектах их они, как правило, встречаются редко.
5. Подзаголовки, описания, тексты, сноски — более подробно раскрывают мысли, заявленные в заголовках 2, 3 … уровней и поэтому они еще меньше по размеру и насыщенности.
Что касается межбуквенного расстояния, мы его как правило оставляем без изменения, за исключением заголовков, где его можно либо чуть уменьшить (сжать) либо чуть увеличить (разрядить буквы). Есть некоторые шрифты, у которых изначально межбуквенное расстояние слишком большое, такие шрифты рекомендуем использовать либо в заголовках, либо вообще не использовать (замучаетесь каждый раз менять межбуквенное расстояние).
Для межстрочного расстояние есть простое правило — чем крупнее текст, тем меньше у него должна быть межстрочка, чтоб он хорошо читался. Межстрочку задаем либо в пикселях (чуть более профессионально, но непрактично с точки зрения верстки на Тильде) либо в процентах.
Для удобства мы создали небольшую шпаргалку с основными параметрами типографики для самых частых типов текстов в иерархии (для десктопа).
Цвета
Бывают основные (черный, белый и их оттенки) и акцидентные (красный, синий, желтый и тд) — для кнопок, выделения текста, UI-элементов и тд.
Первым делом, мы должны выяснить, хочет ли заказчик сайт в светлом или в темном стиле (по нашему опыту, ок. 70-80% светлый и 20-30% темный).
Акцентные цвета берём либо из материалов заказчика (логотип, фотографии, брендбук и тд) либо из его пожеланий (например, ему нравится красный цвет, мы заходим в палитру цветов Tilda Colors и выбираем на свое усмотрение).
Если хотим использовать несколько цветов, то рекомендуем проверить их на сочетаемость при помощи цветового круга.
Также можно делать оттенки цветов в Figma при помощи настроек непрозрачности (0-100%).
Для текстов (не заголовков) основной цвет лучше делать не 100% непрозрачности, а 70-80% — так он будет «мягче» и приятнее глазу.
Бывают основные (черный, белый и их оттенки) и акцидентные (красный, синий, желтый и тд) — для кнопок, выделения текста, UI-элементов и тд.
Первым делом, мы должны выяснить, хочет ли заказчик сайт в светлом или в темном стиле (по нашему опыту, ок. 70-80% светлый и 20-30% темный).
Акцентные цвета берём либо из материалов заказчика (логотип, фотографии, брендбук и тд) либо из его пожеланий (например, ему нравится красный цвет, мы заходим в палитру цветов Tilda Colors и выбираем на свое усмотрение).
Если хотим использовать несколько цветов, то рекомендуем проверить их на сочетаемость при помощи цветового круга.
Также можно делать оттенки цветов в Figma при помощи настроек непрозрачности (0-100%).
Для текстов (не заголовков) основной цвет лучше делать не 100% непрозрачности, а 70-80% — так он будет «мягче» и приятнее глазу.
Кнопки и формы
95% кнопок — прямоугольник + текст (призыва к действию).
Разновидности:
Формы, как правило, состоят из заголовка (иногда еще бывает подзаголовок), поля для ввода (чаще всего, имя, телефон, емейл) и кнопка.
95% кнопок — прямоугольник + текст (призыва к действию).
Разновидности:
- Кнопка с обводкой
- Круглая кнопка
- Текст с подчеркивание
- Кнопка с доп элементами (стрелочки и тд)
Формы, как правило, состоят из заголовка (иногда еще бывает подзаголовок), поля для ввода (чаще всего, имя, телефон, емейл) и кнопка.
UI-элементы
К ним относятся иконки, градиенты, линии, тени, скругления углов и любые другие стилеобразующие элементы.
Их задачи — формировать стиль сайта.
Как правило, на сайтах используются 1-2-3 решения, которые потом обыгрываются с небольшими изменениями в разных блоках.
Для работы мы формируем свою базу решений, откуда можем черпать идеи и вдохновение для работы над проектами.
При работе над коммерческими проектами мы либо используем готовые решения (например, как мы делали с иконками с сайтам Flaticon), либо создаем их самостоятельно в Figma (или других графически редакторах) или, если позволяет бюджет проекта, заказываем у графических дизайнеров.
При использовании готовых решений нужно быть внимательным к соблюдению авторских прав (иначе может прилететь штраф).
К ним относятся иконки, градиенты, линии, тени, скругления углов и любые другие стилеобразующие элементы.
Их задачи — формировать стиль сайта.
Как правило, на сайтах используются 1-2-3 решения, которые потом обыгрываются с небольшими изменениями в разных блоках.
Для работы мы формируем свою базу решений, откуда можем черпать идеи и вдохновение для работы над проектами.
При работе над коммерческими проектами мы либо используем готовые решения (например, как мы делали с иконками с сайтам Flaticon), либо создаем их самостоятельно в Figma (или других графически редакторах) или, если позволяет бюджет проекта, заказываем у графических дизайнеров.
При использовании готовых решений нужно быть внимательным к соблюдению авторских прав (иначе может прилететь штраф).
Адаптивы
Любой сайт должен быть адаптивным — хорошо и правильно отображаться на любом устройстве, будь то большой монитор, планшет или мобильный телефон. Для этого мы должны адаптировать контент под каждый тип устройства.
Универсальные размеры главных экранов, для которых мы рисуем адаптивы в Figma:
Как правило, если мы сами верстаем макет в Tilda, то мы создаем в Figma только десктопную версию, а адаптивы делаем сразу в Тильде.
Если же наш проект — только дизайн в Figma, то нужно обязательно сделать адаптивы для планшета, мобилки, а также версию для больших экранов (1920х1080).
Любой сайт должен быть адаптивным — хорошо и правильно отображаться на любом устройстве, будь то большой монитор, планшет или мобильный телефон. Для этого мы должны адаптировать контент под каждый тип устройства.
Универсальные размеры главных экранов, для которых мы рисуем адаптивы в Figma:
- Десктоп 1600х900 (из него мы легко получаем как версию для больших экранов 1920х1080, так и для ноутбуков 1366х768 при верстке)
- Планшет 740х900
- Мобилка 380x760
Как правило, если мы сами верстаем макет в Tilda, то мы создаем в Figma только десктопную версию, а адаптивы делаем сразу в Тильде.
Если же наш проект — только дизайн в Figma, то нужно обязательно сделать адаптивы для планшета, мобилки, а также версию для больших экранов (1920х1080).
Сетки, отступы
Сетка — это способ выравнивания контента на сайте по вертикали, то есть оси X.
Выравнивание по сетке означает, что элементы в разных блоках будут иметь одинаковое или похожее значение по оси X.
Как правило, на большинстве сайтов используется 2-3-4 колоночная сетка. Бывают и сложные сетки, но они встречаются достаточно редко.
Чтобы выделить сетку, мы используем инструмент «Направляющие», который позволяет увидеть, как расположен контент на сайте.
Также для того чтобы сайт был логичным и информацию на нём было удобно воспринимать, мы практически всегда делаем единые отступы между блоками, заголовками, подзаголовками, карточками и тд. То есть отступы между похожими элементами сайта (например, заголовком и карточками) во всех блоках будут одинаковые.
И наконец ещё одно важное правило, к которому нужно стремиться — это чтобы один блок помещался в один экран.
Сетка — это способ выравнивания контента на сайте по вертикали, то есть оси X.
Выравнивание по сетке означает, что элементы в разных блоках будут иметь одинаковое или похожее значение по оси X.
Как правило, на большинстве сайтов используется 2-3-4 колоночная сетка. Бывают и сложные сетки, но они встречаются достаточно редко.
Чтобы выделить сетку, мы используем инструмент «Направляющие», который позволяет увидеть, как расположен контент на сайте.
Также для того чтобы сайт был логичным и информацию на нём было удобно воспринимать, мы практически всегда делаем единые отступы между блоками, заголовками, подзаголовками, карточками и тд. То есть отступы между похожими элементами сайта (например, заголовком и карточками) во всех блоках будут одинаковые.
И наконец ещё одно важное правило, к которому нужно стремиться — это чтобы один блок помещался в один экран.
Референсы
Референсы — это примеры других сайтов, на которые мы ориентируемся при создании своих макетов.
Работа по поиску и подбору референсов также называют развитием насмотренности.
Вообще насмотренность — один из ключевых hard-скиллов дизайнера. Чем больше сайтов вы изучили за свою карьеру, тем лучше вы понимаете, как можно располагать элементы, как делать дизайн более стильным, сочным и продающим. В этом плане действительно правило — количество переходит в качество.
Для работы с референсам мы ищем на просторах интернета интересные сайты, блоки, решения, сетки и сохраняем их скриншоты в одном месте (в Фигме или других сервисах).
Также рекомендуем сохранять ссылки на все сайты, чтобы можно было при необходимости вернуться и пересмотреть некоторые интересные приемы, которые вы сохранили.
На начальном этапе карьеры нам для хранения подойдет обычный файл в Фигме с тремя вкладками:
Референсы — это примеры других сайтов, на которые мы ориентируемся при создании своих макетов.
Работа по поиску и подбору референсов также называют развитием насмотренности.
Вообще насмотренность — один из ключевых hard-скиллов дизайнера. Чем больше сайтов вы изучили за свою карьеру, тем лучше вы понимаете, как можно располагать элементы, как делать дизайн более стильным, сочным и продающим. В этом плане действительно правило — количество переходит в качество.
Для работы с референсам мы ищем на просторах интернета интересные сайты, блоки, решения, сетки и сохраняем их скриншоты в одном месте (в Фигме или других сервисах).
Также рекомендуем сохранять ссылки на все сайты, чтобы можно было при необходимости вернуться и пересмотреть некоторые интересные приемы, которые вы сохранили.
На начальном этапе карьеры нам для хранения подойдет обычный файл в Фигме с тремя вкладками:
- Блоки (основные — главный экран, контентный блок, карточки, подвал; дополнительные — формы / призыв к действию, галерея / слайдер, видео, хедер / меню и тд)
- Решения (сохраняем 3-4 скрина, объединяем в группу и подписываем, что конкретно нам понравилось)
- Сетки (делаем скриншот целого сайта и добавляем направляющие, по которым расположен контент)
- Не собирать базу насмотренности, а искать примеры сайтов / блоков непосредственно под проект
- Копировать 1-в-1 все с референса
Алгоритм работы над проектом
В целом, работу над созданием дизайна сайта можно разделить на условные 9 шагов.
0-4 шаги — подготовительные (сбор и обработка информации, подготовка контента и тд). От того, насколько качественно проработан каждый из них, зависит насколько легко или сложно будут проходить дальнейшие этапы по созданию сайта.
5-7 шаги — «дизайнерские», где мы непосредственно рисуем дизайн-макет нашего проекта (как правило, главной страницы сайта).
8-9 шаги — «завершающие» (адаптивы, UI-кит). Если верстаете сайт самостоятельно, то их можно опустить, но на начальных этапах вашей карьеры, рекомендуем их также прорабатывать (только если не горят сроки).
0 шаг. Для начала, еще до получения оплаты от клиента, необходимо составить структуру будущего сайта (это поможет понять объем работы и обосновать заказчику стоимость сайта). Проще всего это сделать в Фигме, указав названия блоков и отделив их линиями друг от друга (см. первый урок, где перенесли структуру сайта в Фигму).
1 шаг. Мы немного детализируем структуру сайта, более подробно расписываем каждый блок, примерно понимая из каких составляющих он будет состоять: заголовки, тексты, фото, видео, кнопки и тд.
2 шаг. Далее нам необходимо согласовать предварительную структуру сайта с заказчиком и получить от него информацию о проекте (для каждого блока).
К сожалению, заказчики редко присылают готовый текст для сайта, чаще всего им удобнее либо наговорить информацию голосом, либо прислать информацию, которая скопилась у них за годы работы — брендбук, листовки / брошюры, фото / видео, ссылки на соцсети, старый сайт (если есть) и тд
Поэтому нам, как дизайнерам, необходимо структурировать информацию, кое-где написать тексты с нуля и наполнить структуру нашего сайта текстом (пока без фото).
3 шаг. После этого мы приступаем к «дизайнерской» стадии — подбираем под каждый блок референсы из нашей базы насмотренности, шрифты, цвета для проекта. На этом этапе (если до этого не обсуждали) нужно поинтересоваться у заказчика, какие сайты ему нравятся, в каком стиле ему хочется сайт (светлый / темный), какие ему нравятся цвета и тд.
4 шаг. Затем мы подбираем фотографии / видео для проекта — либо из тех, которые есть у заказчика, либо находим самостоятельно на фотостоках.
5 шаг. Только после этого начинаем рисовать!
Начинаем всегда с главного экрана: у нас уже есть примеры-референсы, которые мы подобрали в прошлых этапах, поэтому нам есть от чего отталкиваться (но мы не копируем под чистую!))
Когда мы нарисовали главный экран, обязательно нужно проверить, хорошо ли читаются все тексты и понятно ли, о чем идет речь на сайте (если нет, нужно доработать дизайн, чтоб стало понятно; в идеале — чтоб глядя на главный экран, вам самим хотелось проскроллить дальше и узнать, что же там такое)).
6 шаг. Далее рисуем еще 1-2 блока и скидываем заказчику на согласование. Если все нравится — продолжаем рисовать дальше до конца.
Если заказчику что-то не нравится, нам необходимо выяснить, что именно:
Как правило, итоговое восприятие на 50% зависит от фотографии (часто бывает достаточно заменить фото, чтоб заказчику все понравилось).
Этот этап — самый сложный. Задача сделать 2-3 экрана, которые будут нравиться заказчику и вам как дизайнерам (бывает такое, что заказчикам нравится откровенный шлак, ваша задача минимизировать кол-во ошибок и сделать все максимально аккуратно).
7 шаг. После того, как вы согласовали стиль, дальше дело за малым — дорисовать остальные блоки по образу и подобию.
Потом отправляете заказчику десктопную версию сайта; если возникают правки — исправляете, пока все не будет устраивать и заказчика, и вас.
8 шаг. Когда десктоп готов и согласован, можно сразу переходить к верстке, но на первых 5-6 проектах мы рекомендуем также отрисовать планшетную и мобильные версии (если делаете только дизайн без верстки, этот этап обязательный).
Также согласовываете их с заказчиком (как правило, все согласовывается с первого раза или с небольшими корректировками).
9 шаг. Можно также в качестве тренировки сделать UI-кит проекта (если позволяют сроки). Если делаете только дизайн — этот этап обязательный.
После этого приступаете к верстке.
В целом, работу над созданием дизайна сайта можно разделить на условные 9 шагов.
0-4 шаги — подготовительные (сбор и обработка информации, подготовка контента и тд). От того, насколько качественно проработан каждый из них, зависит насколько легко или сложно будут проходить дальнейшие этапы по созданию сайта.
5-7 шаги — «дизайнерские», где мы непосредственно рисуем дизайн-макет нашего проекта (как правило, главной страницы сайта).
8-9 шаги — «завершающие» (адаптивы, UI-кит). Если верстаете сайт самостоятельно, то их можно опустить, но на начальных этапах вашей карьеры, рекомендуем их также прорабатывать (только если не горят сроки).
0 шаг. Для начала, еще до получения оплаты от клиента, необходимо составить структуру будущего сайта (это поможет понять объем работы и обосновать заказчику стоимость сайта). Проще всего это сделать в Фигме, указав названия блоков и отделив их линиями друг от друга (см. первый урок, где перенесли структуру сайта в Фигму).
1 шаг. Мы немного детализируем структуру сайта, более подробно расписываем каждый блок, примерно понимая из каких составляющих он будет состоять: заголовки, тексты, фото, видео, кнопки и тд.
2 шаг. Далее нам необходимо согласовать предварительную структуру сайта с заказчиком и получить от него информацию о проекте (для каждого блока).
К сожалению, заказчики редко присылают готовый текст для сайта, чаще всего им удобнее либо наговорить информацию голосом, либо прислать информацию, которая скопилась у них за годы работы — брендбук, листовки / брошюры, фото / видео, ссылки на соцсети, старый сайт (если есть) и тд
Поэтому нам, как дизайнерам, необходимо структурировать информацию, кое-где написать тексты с нуля и наполнить структуру нашего сайта текстом (пока без фото).
3 шаг. После этого мы приступаем к «дизайнерской» стадии — подбираем под каждый блок референсы из нашей базы насмотренности, шрифты, цвета для проекта. На этом этапе (если до этого не обсуждали) нужно поинтересоваться у заказчика, какие сайты ему нравятся, в каком стиле ему хочется сайт (светлый / темный), какие ему нравятся цвета и тд.
4 шаг. Затем мы подбираем фотографии / видео для проекта — либо из тех, которые есть у заказчика, либо находим самостоятельно на фотостоках.
5 шаг. Только после этого начинаем рисовать!
Начинаем всегда с главного экрана: у нас уже есть примеры-референсы, которые мы подобрали в прошлых этапах, поэтому нам есть от чего отталкиваться (но мы не копируем под чистую!))
Когда мы нарисовали главный экран, обязательно нужно проверить, хорошо ли читаются все тексты и понятно ли, о чем идет речь на сайте (если нет, нужно доработать дизайн, чтоб стало понятно; в идеале — чтоб глядя на главный экран, вам самим хотелось проскроллить дальше и узнать, что же там такое)).
6 шаг. Далее рисуем еще 1-2 блока и скидываем заказчику на согласование. Если все нравится — продолжаем рисовать дальше до конца.
Если заказчику что-то не нравится, нам необходимо выяснить, что именно:
- цвета
- шрифты / типографика
- расположение элементов
- фотографии / видео
- наличие или отсутствие элементов стиля (UI-элементов) и тд
Как правило, итоговое восприятие на 50% зависит от фотографии (часто бывает достаточно заменить фото, чтоб заказчику все понравилось).
Этот этап — самый сложный. Задача сделать 2-3 экрана, которые будут нравиться заказчику и вам как дизайнерам (бывает такое, что заказчикам нравится откровенный шлак, ваша задача минимизировать кол-во ошибок и сделать все максимально аккуратно).
7 шаг. После того, как вы согласовали стиль, дальше дело за малым — дорисовать остальные блоки по образу и подобию.
Потом отправляете заказчику десктопную версию сайта; если возникают правки — исправляете, пока все не будет устраивать и заказчика, и вас.
8 шаг. Когда десктоп готов и согласован, можно сразу переходить к верстке, но на первых 5-6 проектах мы рекомендуем также отрисовать планшетную и мобильные версии (если делаете только дизайн без верстки, этот этап обязательный).
Также согласовываете их с заказчиком (как правило, все согласовывается с первого раза или с небольшими корректировками).
9 шаг. Можно также в качестве тренировки сделать UI-кит проекта (если позволяют сроки). Если делаете только дизайн — этот этап обязательный.
После этого приступаете к верстке.
Loading...