Сегодня мы хотим поговорить о создании дизайна, о том, как должна быть организована работа любого дизайнера, каких ошибок нужно избегать, и на какие аспекты обращать особое внимание для того, чтобы дизайн получился действительно красивым, а реализация заняла минимум времени.
Изложите свои идеи на бумаге
Казалось бы, совет очевидный. Но очень многие начинающие дизайнеры сразу стараются открыть Photoshop и начинают экспериментировать с фоном, различными оттенками, текстурами и элементами. А ведь первое, что нужно сделать, это создать четкий план, где будут отображены:
- Расположение элементов;
- Иерархия;
- Функциональность;
- Компоновка.
Перед тем, как выбирать оттенки и текстуры, продумайте содержание будущей страницы!
Первыми рисуйте элементы верхнего уровня
Удобнее всего при проектировании определяться с внешним видом и расположением элементов верхнего уровня фреймворка, так как от них напрямую зависят другие решения в процессе проектирования.
Фреймворк – это ваш интерфейс, в котором заключается основной контент. Именно он определяет положение контента на странице, помогает управлять им, редактировать и т.д. Фреймворк включает в себя основные элементы «шапки сайта», меню навигации, «подвал», а также боковые элементы.
Если вы начнете проектирование дизайна сайта с такой точки зрения, то сразу будете понимать, какие разделы будут на вашем сайте, какие элементы понадобятся в разных частях страницы, что еще будет присутствовать на сайте.
Применяйте в PSD сетку
Сетка в Photoshop – это очень просто. И нужна она будет при создании любого макета. Так вы сможете удобно структурировать ваш макет, сможете работать с разными размерами экранов устройств пользователей, создавать адаптивный дизайн.
Выбор шрифтов
К этому моменту при проектировании дизайна надо отнестись максимально внимательно. Оптимальным считается использование не более 2 шрифтов для одного сайта, но на самом деле, этот вопрос решается индивидуально в каждом случае.
Главные правила:
- Шрифтов должно быть как можно меньше, новый шрифт добавляется, только если он действительно необходим.
- Шрифты должны хорошо читаться в разных размерах, а также при большом объеме текстовой информации.
- Шрифты должны хорошо выглядеть в заголовке, в обычном тексте, в разных подсказках, вызовах действий и пр.
Цветовая гамма
Здесь нет каких-то строгих правил. Но все же стоит применять ограниченный набор цветов и оттенков, чтобы избежать перенасыщенности. Лучше всего заранее определить цвета для основных элементов интерфейса и объектов, которые от них зависят. И постараться сделать так, чтобы они гармонично смотрелись друг с другом.
Структура сайта
Чем проще будет ваша структура сайта, тем легче пользователям будет на нем ориентироваться. Следуйте этому правилу всегда. Каждый раздел вашего сайта должен нести какую-то идею, пользователь должен видеть основные составляющие дизайна и понимать, что он здесь может сделать. Проще всего начинать разработку с самой простой структуры, и добавлять элементы по мере их необходимости.
Переосмысливайте каждый элемент
Именно дизайнер часто формирует тот путь, который будет проходить пользователь при просмотре сайта. А потому нужно стремиться, чтобы количество действий всегда было минимальным.
Существуют готовые конвенции и шаблоны разработки, которые можно и даже нужно применять. Но все же важно переосмысливать каждый раз использование того или иного элемента, так как всегда есть вероятность, что его добавляют только по привычке.
Самый яркий пример – это кнопка «Поиск». На самом деле, пользователям достаточно окна для поискового запроса и клавиши Enter. Но дизайнеры ее продолжают привычно добавлять на сайты, усложняя себе работу и утяжеляя дизайн.
Оттачивайте все компоненты, не забывайте о деталях
Если вы хотите, чтобы ваш дизайн выглядел достойно на самых разных экранах, оттачивайте каждый, даже самый мелкий компонент. Относитесь к отрисовке каждой кнопки, каждой рамки, как к отдельному проекту. Помните, что дизайн складывается из отдельных компонентов, и чем привлекательнее и лучше прорисованы будут все «кирпичики», тем лучше будет смотреться и сайт целиком.
Работайте над читаемостью и четкостью каждого элемента
Устанавливайте правильный контраст между цветами фона и элемента, не забывайте оптимизировать различные кромки, рамки, надписи. Это важно не только с эстетической точки зрения, но и с практической. Четкие линии даже при большом увеличении каждой детали помогут пользователям работать с сайтом с самых разных экранов при самом разном разрешении.
Наводите порядок в вашем PSD
Всегда содержите ваши PSD файлы в порядке, независимо от того, насколько крупный проект вы ведете, какое количество дизайнеров в нем задействовано. Это правило, как и применение сетки, должно быть для вас обязательным всегда.
Подобные привычки позволяют снизить ваше время на поиски нужного компонента и рисунка, эффективно взаимодействовать с коллегами, ускорит работу с общими файлами и т.д.
Проверяйте макет в разных условиях
Практика показывает, что самые лучшие дизайнерские решения получаются тогда, когда дизайнер стремится к максимально привлекательному внешнему виду макета в идеальных условиях (на больших экранах с хорошим разрешением), но при этом не забывает проверить, как все это будет выглядеть в экстремальных условиях. Например, стоит посмотреть, как ваш дизайн будет смотреться, если сайт будут загружать с действительно маленького экрана. И если структура при этом плывет, нужно постараться найти оптимальное решение.
Проверьте еще раз все элементы перед версткой
Помните правило «7 раз отмерь»? При работе над дизайном его также очень важно применять. Экономьте время и силы верстальщика, перепроверьте каждый элемент и наведите порядок перед передачей файлов в верстку. Это также и вам сэкономит время и поможет избежать правок и недовольства заказчика. Кроме того, аккуратный дизайн без «невидимых» слоев и другого «мусора» намного корректнее будет обработан при автоматической верстке дизайн макета с помощью сервиса верстки сайтов.
