Чек-лист по дизайну для недизайнеров

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

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

Совет 1: Используйте модульную сетку

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

Вот один из подобных примеров: 

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

Подобную сетку можно реализовать где угодно – на сайте, баннере или в постере. Если избегать использования сетки, то макет может получиться небрежным. Не будет никакой структуры, элементы будут располагаться как попало. Человек сразу обратит на это внимание, и у него сложится ощущение, что дизайн плохой.

Как работать с сеткой

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

Вот как это может выглядеть: 

Не обязательно использовать только две направляющие линии, их может быть гораздо больше. Все зависит от контента и от того, как он будет расположен. Однако, чем их меньше, тем «чище» будет выглядеть дизайн. В последующем придерживайтесь установленных линий во всем макете. Если того требует дизайн, то вы можете добавлять новые направляющие. 

Совет 2: Работайте с типографикой

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

Несколько правил при работе с типографикой: 

• Не используйте странные шрифты, которые могут вызывать непонимание. Профессиональный дизайнер может найти применение любому шрифту, но на начальных этапах лучше придерживаться стандартных решений – таких шрифтов, как Inter, Helvetica, Neue Machina и прочих. 
• Не увеличивайте межбуквенный интервал для строчного текста. Это снижает удобочитаемость. 

• Выделения в тексте. Выделить важную мысль или слово, на которое нужно обратить внимание, можно самыми разными способами. Не переусердствуйте с ними.

• Не используйте больше двух шрифтов. Экспериментировать с большим количеством шрифтов на начальном этапе не стоит. Двух вполне достаточно.
• Разбивайте текст на абзацы. Так будет проще воспринимать информацию.

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

• Следите за размером основного текста. Чтобы пользователю было удобно читать информацию на сайте, делайте текст не меньше 16 пикселей и не больше 20. 
• Старайтесь сокращать текст. Много текста никто не любит читать, лучше сжать информацию так, чтобы она занимала примерно 2-3 абзаца. 

Найти бесплатные шрифты для своего проекта вы можете на Google Fonts, в шрифтотеке «Мы с котом» либо на RuFonts. 

Совет 3: Познакомьтесь с теорией цвета

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

Для этого дизайнеры используют цветовой круг: 

Давайте разберем каждую из формул: 

1. Монохромные цвета. В такой палитре используются цвета одного оттенка – их легко сочетать, а применить подобный вариант можно в любом минималистичном проекте. 
2. Комплиментарные цвета. Это такие цвета, которые расположены в круге противоположно друг другу. Вы можете выбрать два таких цвета, и они всегда будут сочетаться между собой. 
3. Аналоговые цвета. Такая палитра подразумевает три цвета, которые расположены рядом. Подобное сочетание позволяет добиваться гармонии в любом проекте. 
4. Триада цветов. Последняя палитра, где цвета на круге равноудалены друг от друга. Она включает в себя богатые цвета с хорошим контрастом. 

Для работы с цветовым кругом вы можете воспользоваться онлайн-инструментом от Adobe. А если нет времени искать подходящие цвета, можно взять готовую палитру – для этого есть еще один сервис от Adobe. 

Совет 4: Используйте свободное пространство

Начинающие дизайнеры часто заполняют весь макет различными элементами – текстом, кругами, картинками и прочим. В результате получается пересыщенный дизайн, отталкивающий аудиторию. Чтобы этого избежать, старайтесь на первых порах использовать по минимуму элементов. Со временем можно начинать делать более сложные макеты, но когда вы только начинаете, лучше обойтись простотой. Такой подход любят использовать даже профессионалы. Отличный тому пример – сайт Apple:

Совет 5: Следите за контрастом

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

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

Совет 6: Используйте акценты

Акцент – это любая деталь в дизайне, привлекающая внимание к себе или месту, где она расположена. Его основная задача – добавление индивидуальности и привлекательности. Также с помощью акцентирования вы можете побудить пользователя совершить определенное действие, например нажать на кнопку. 

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

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

Совет 7: Пользуйтесь качественными изображениями и иконками

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

Все это можно найти на бесплатных сервисах: 

• Unsplash – огромная библиотека изображений;
• unDraw – иллюстрации под любой проект, цвет которых можно менять прямо на сервисе;
• Shapefest – площадка с библиотекой бесплатных 3D-элементов;
• Freepik – еще одна популярная платформа для дизайнеров с библиотекой картинок и иллюстраций;
• Foodiesfeed – простой фотосток с изображениями еды в высоком качестве.

Для поиска иконок используйте сервис Flaticon – там можно найти все что угодно. Еще одна подобная платформа – icons8.

Совет 8: Сохраняйте баланс между текстом и дизайном

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

Один из хороших примеров:

Совет 9: Изучайте чужие работы

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

Вот как можно улучшать насмотренность: 

1. Давайте откроем Pinterest, найдем какую-нибудь классную работу и посмотрим, какие фишки из нее можно «подцепить». Для примера введем запрос «dribble web design».

2. Откроем одну из понравившихся работ.

3. Итак, что мы здесь видим? Характерные линии, которые используются во всем макете. Яркие цвета, придающие акцент. Простая типографика, которую легко читать. Фотография используется не в простом круге, а в волнистом элементе – такие объекты принято называть блобсами. Далее идет бегущая строка, а после нее блок располагается ровно по центру, что позволяет управлять вниманием пользователя.

Таким образом просматриваются сотни различных макетов, в результате чего формируется насмотренность. В совокупности это позволяет генерировать множество различных идей, которые можно использовать в своих работах. Чтобы результат был эффективным, рекомендуем ежедневно просматривать по 10-15 работ и сохранять их себе. Сохраненные макеты помогут через некоторое время вспомнить что-то интересное – то, что зацепило. 

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

• Behance;
• Awwwards;
• Шаблоны от Craftum;
• Dribbble;
• Land-book;
• Siiimple.

Совет 10: Придерживайтесь единого стиля

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

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

Выводы

Освоить базовые дизайнерские навыки может каждый. Для этого следует разобраться в цветовой палитре, типографике и модульной сетке. После этого начинайте смотреть чужие работы и улучшайте свою насмотренность, которая поможет находить классные идеи для любых проектов. Не забывайте и о качестве фотографий – оно должно быть на высоте, иначе у пользователя может сложиться впечатление, что весь дизайн выглядит «дешево». Главное – не бойтесь пробовать и совершать ошибки, любой профессиональный дизайнер достигает своих успехов с опытом.