17 принципов создания идеальной дизайн-концепции. Арт-директор агентства DEFA Interaktiv Назир Хасавов к выступлению на международном форуме Closed Town подготовил презентацию, которая охватывает не только аспекты современного веб-дизайна, но и вопросы общего рабочего процесса, следуя которым, вы достигните качественного результата.
1. Коллекционируйте интересные и оригинальные мудборды, которые могут помочь при решении различных задач. За основу могут быть взяты ваши наработки или удачные примеры коллег.
Если у вас пока нет своих коллекций образов, на помощь придут два ресурса: imgspark.com и pinterest.com
2. Как дизайнер вы должны твердо верить в то, что вы делаете, но не зацикливайтесь на своих удачных приемах — постоянно ищите что-то новое и совершенствуйтесь, чтобы быстро забыть одну идею и перестроиться к новым условиям. Любите каждую свою идею, но не становитесь слишком привязанными к ним.
3. Прежде всего, отразите все свои мысли на бумаге: подумайте о содержании, расположении элементов и функциональности. Не обязательно весь интерфейс пытаться отобразить на бумаге — это могут быть какие-то идеи для промо-блока, навигации, интерактивных элементов.
А чтобы вас не смущал белый лист, начните рисовать окно браузера, это может стать хорошим толчком для начала.
4. Сетка поможет вам структурировать расположение различных элементов относительно друг друга, облегчит работу с разрешением экрана, поможет быть последовательным с точки зрения дистанций, а также во многих других вопросах дизайна. С технической стороны, сетка дает возможность быстрого и простого способа автоматизации верстки. Если у вас имеются веские причины против того, чтобы начинать работу по сетке, обязательно включите ее на какой-нибудь стадии, проверьте и выстройте все элементы по ней.
5. Если посмотреть на оформление современного сайта — это порядка 70–80% текстовой информации, а то и больше. Из этого следует, что дизайнер обязан иметь хорошую подготовку в основной дисциплине — в формировании текстовой информации, другими словами — в типографике. Умейте обосновать выбор того или иного шрифта. Зачастую, выбор шрифтов бывает ограничен фирменным стилем, в иных случаях я бы не рекомендовал использовать более двух различных шрифтов, но в зависимости от характера проекта, их количество можно варьировать. В любом случае, выбирайте базовый шрифт, с которым легко прочитать большие объемы текста, и шрифт более неформальный, который бы призывал к действию (особенно в заголовках). И не бойтесь использовать крупный шрифт.
6. Используйте ограниченный набор цветов и оттенков, чтобы избежать визуальной перегруженности.
7. C эстетической точки зрения есть некоторые моменты, которые следует избегать, чтобы создать чистую и аккуратную работу, например: размытые края в графических элементах, размытые шрифты — некоторые, в зависимости от их кегля, выглядят более четкими, выбирайте наилучшее отображение. Примеров можно приводить бесконечное множество, поэтому анализируйте каждый элемент дизайна в отдельности более тщательно.
8. Прежде всего, нужно понимать, что не все из информации должно быть вывалено на главной странице. Сайты имеют разделы, так что делить информацию — это мудро.
Чем проще структура страницы, тем легче навигация.
Каждый раздел на сайте должен раскрывать какую-то тему. Дизайн должен помогать пользователю обращать внимание на наиболее важные блоки в содержании. В целом, не должно быть слишком много призывов на одной странице. Всё должно сводиться к ответу на вопрос: «Что я тут могу найти для себя».
9. Спросите у себя: этот элемент действительно такой важный? Вы должны задавать себе этот вопрос по поводу каждого элемента дизайна. Посмотрите, какие декоративные элементы в вашем дизайне могут быть удалены. Необязательно убирать абсолютно все декоративные элементы из дизайна, стоит избавиться хотя бы от некоторых из них. Часто это способствует тому, что ваш сайт становится более легким для восприятия и более элегантным. Элементы, которые могут быть удалены или упрощены: например, границы изображений, тени, дополнительные изображения в шапке/в футере.
10. Инновации не всегда приходят в качестве требования к проектам, так что, чаще всего, это вопрос к самим себе, чтобы придумать какое-нибудь интерактивное или дизайнерское решение к той или иной задаче. Поэтому я призываю каждого дизайнера к тому, чтобы бросать вызов самому себе на каждом новом проекте. В качестве примеров это может быть: использование новой сетки для расположения блоков, пересмотр общепринятых элеметов интерфейса или даже незначительные установки типа: избегать режима наложения или использование одного определенного цвета.
11. В зависимости от выбранной концепции проекта, «любовь к деталям» проявляется по-разному. Это может быть небольшая интерактивность, неожиданные анимации или эстетические «фишки», как: легкий градиент на кнопках или тонкий контур вокруг контентной области. Но в общем они должны выглядеть неотъемлемыми элементами одного целого и также естественно вписываться в него. Дизайн — он ведь в мелочах. Поэтому обращайте внимание на детали: на тени, на текстуры, прозрачность/непрозрачность, ховеры и т. д.
Нужно добиваться того, чтобы каждый функциональный элемент дизайна создавался так, чтобы он мог самостоятельно выступать как лучший. Иногда я оставляю некоторые спорные части сайта напоследок и оказываю им немного больше внимания в самом конце.
12. Избегайте того, чтобы тратить слишком много времени на одну концепцию. Принцип Парето общепризнанно является одним из величайших открытий в экономике и социологии. Также известный как «закон 20/80», который утверждает, что 20% усилий дают 80% результата, а соответственно 80% усилий — лишь 20% результата. Цифры, конечно же, условные. В любом случае, советую стараться не тратить много времени на одну концепцию, сделайте несколько вариантов, потратив небольшое количество времени, а потом выберите тот, который имеет наиболее лучший курс, и доведите его до идеальной концепции, учитывая все то, что было сказано до этого.
13. Этот принцип наряду с использованием сетки — один из самых важных в работе непосредственно с редактором. Несмотря на масштабы проекта и число дизайнеров, работающих над ним, вы должны держать ваши исходники «чистыми» и структурированными. Это позволит сделать их удобнее для экспортирования различных блоков, для ускорения процесса проектирования и работы с общими файлами с другими дизайнерами.
14. Дизайн не может считаться законченным без хорошей подачи. Презентуйте свою концепцию, как будто бы перед вами дети.
Это так же важно, как совершить большую работу. Ваша идеальная дизайн-концепция может быть проигнорирована или как минимум не понята, если вы не представите ее должным образом. Всегда имейте в виду: все, что совершенно ясно вам, не значит, что ясно для тех, кто видит эту концепцию впервые.
15. Технологи — безусловно, творческие люди. Они любят свою работу настолько, насколько вы, как дизайнер, делаете ее хорошо. В этом и кроется ваша с ними тайная дружба или вражда. Они не всегда включены в проект с самого начала и зачастую включаются, когда концепция уже утверждена, и их творческая роль не нашла своего применения. Этот процесс является неверным. Некоторые из лучших идей могут исходить от технолога, поэтому убедитесь в том, что вы объединены с ним с самого начала проекта. Общий доступ к концепции приведет к совершенствованию идеи и к лучшему результату.
16. Вопреки общему убеждению, ваша работа над проектом не заканчивается в тот момент, когда вы передаете исходные файлы разработчикам. Если вас действительно заботит судьба сделанного вами дизайна и интерактивных идей, чтобы они были хорошо выполнены, время от времени навещайте своих друзей-разработчиков, объясняя им важность для вас каждого пикселя.
17. Как часть сообщества, все мы любим смотреть не только на конечные результаты, но и на работу в процессе. Иногда лучшая часть проекта не учитывается по нескольким причинам и теряется в архивных папках. Пока проект не завершен, вы можете делиться с сообществом фрагментами каких-то дизайнерских наработок текущего проекта в Dribble, а как только проект будет завершен, сделайте кейс, демонстрирующий процесс, включив в него элементы, не вошедшие в окончательный вариант релиза, и поделитесь им в Revision или Behance. Вы будете только помогать, внося вклад в знания сообщества, а в ответ вы получите ценнейшую обратную связь.