Как стать дизайнером, не будучи дизайнером: практический чек-лист из 10 советов для новичков дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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