Секрет качественного дизайна

Стоит понимать, дизайн в коммерческом плане - это не всегда всегда полёт воображения. Безусловно дизайнеры это творческие люди, но творчество у всех разное. История с: “я художник - я так вижу” тут к сожалению не работает, т.к. веб-дизайн это всё таки про маркетинг, про удобство для клиента, про повышение дохода.

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

Нельзя так же говорить о том, что какой-нибудь начинающий дизайнер, с подобным подходом, не может выдать качественный продукт под требования клиента. Конечно может! Но это скорее “ошибка выжившего” которая на дистанции даст сбой. Дизайнер не сможет постоянно выдавать один и тот же уровень, если у него не будет основы, за счет которой можно оставаться стабильным.

Основа - это в первую очередь знания, полученные на тех же курсах, которые к счастью на сегодняшний день, достаточно неплохие. В понятие “Основа” так же входит и самый важный аспект разработки - UI-кит.

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

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

Основная задача UI-кита как уже известно - не дать дизайнеру намешать всего подряд. Благодаря этому набору правил дизайн получается консистентным: отдельные части не перетягивают на себя внимание, а все элементы служат во благо пользователю.

Структура кита может выглядеть так:

Подробнее про каждый пункт, на примере реального проекта.

Выбранная палитра, показывает какие цвета будут использоваться на всём проекте. А его название например: “04162С” - применяется для простоты последующего использования. Но это уже больше в сторону удобства для дизайнера.

Размер шрифта - один из мощнейших инструментов для построения повествования в проекте. Тексты помогают структурировать содержимое страницы, и доносить до пользователя информацию в последовательности, которой желаете именно вы, у них есть три уровня восприятия.

Реальный пример - разработанный нами сайт стоматологии ExcellentDent которое сделала наш дизайнер Аня. Повествование строится по той же цепочке:

Крупный заголовок, выделенный жирным. Его задача — заинтересовать читателя, кратко дать ему самую главную информацию.

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

Текст написан обычным маленьким шрифтом. Он объясняет суть заголовка и подзаголовка.

Текстовые стили макета, заголовки и размеры, задаются заранее в отдельно подготовленном блоке.

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

Как пример это набор вариантов из нескольких состояний кнопки. Подобный переход будет повторятся на каждой странице. Тем самым пользователь быстрее ориентировался и не путался на сайте.

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