Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

10 напоминаний по дизайну  

by
Length:ShortLanguages:

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

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

Давайте рассмотрим несколько простых рекомендаций и советов, чтобы избежать такого в дальнейшем.

Расслабьтесь

Может, вы слышали:

“Хороший дизайн не заметен, только плохой бросается в глаза.” - Jared Spool

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

Указатель # 1: пытаясь углубиться в стилистику, остерегайтесь нагромоздить лишнего. Будьте проще. Главное, чтобы всё работало.

Если что-то «не так смотрится», удалите детали, которые вы, возможно, добавили (например, тени, границы, эффекты) и вернитесь к началу.

После сделанного напутствия можно перейти к практическим рекомендациям!

Избегайте грязной палитры

Ничто так не оскорбляет глаз, как плохой выбор цвета. Как правило, цветовые решения разбираются процессе проектирования UI, но всегда есть соблазн сделать смелый выбор заранее.

no clearly not
Это явно не то, что нам нужно

Для разработки каркаса UI начинайте с простых форм, линий, цветов. После создания основы макета можно заняться деталями, уточнениями, пока, в конечном счёте, целенаправленно не займётесь цветом. Итак, некоторые указания:

Указатель # 2: старайтесь делать монохромные демо. Придерживайтесь оттенков серого (пятьдесят?), пока не будете готовы использовать цвет, чтобы прояснить ситуацию.

Даже если ничего больше не делать, так лучше

Указатель # 3: избегайте насыщенных цветов (то есть: чистых, без разбавления). Возможно, при просмотре на ярком экране они будут плохо сочетаться.

Указатель # 4: то же самое касается чёрно-белых изображений. Избегнув крайних контрастов, вы не утомите своих пользователей.

Добавьте оттенок цвета в чёрное и серое. Как сказал Ian Storm Taylor в 2012 году:

“Тени не чёрные”

Его уроки из художественной школы напоминают мои - я помню, как учитель предложил мне найти чёрную точку в Georges Seurat’s A Sunday Afternoon on the Island of La Grande Jatte.

detail from a sunday afternoon on the island of la grande jatte
Спойлер: ты не найдёшь

Указатель # 5: цвета к монохромному дизайну добавляйте по одному. Каждый дополнительный цвет будет отвлекать зрителя. Мы говорили о необходимости избегать высокой насыщенности, но не об оттенках одного цвета. Это даст вам нужные разнообразие и глубину безо всякого риска.


Не усложняйте типографику

Если мы говорим о демо и прототипах, то действительно нет необходимости выходить за рамки использования системных шрифтов (см. указатель #1). Однако учтите следующее:

Указатель # 6: обойдитесь sans-serif ("без" засечки). Serif-шрифты - это те, у которых есть детали в окончаниях штрихов (некоторые термины для сведения).

These are serifs

Засечки могут придать индивидуальности в дизайн и даже сделать текст более лёгким для чтения. Но они традиционно не используются в дизайне UI, особенно при меньших размерах.

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

Roboto Noto
Roboto & Noto

Google применяет “человеческий” Droid Sans в своих Android интерфейсах, и всё чаще Roboto and Noto. Apple ставит San Francisco, а до этого брал Neue Helvetica. Firefox OS Fira Sans. Обратите внимание, все без засечек.

Указатель # 7: избегайте двусмысленности. Комбинации символов, такие как O0, aeo, 8B, Il1, 5S, 2Z, 6b и 9g, иногда трудно различить, в зависимости от шрифта. Проверьте их; если вы изо всех сил пытаетесь их разделить, тогда лучше выбрать другой шрифт.

Fira Sans from Firefox OS is pretty darn clear
Fira Sans (из Firefox OS) более-менее ясный

Дайте воздуха

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

Имея дело с обилием информации, заманчиво сжать её как можно больше, но какой из этих двух примеров легче для глаз?

cramped ui
Сплющенная таблица
added space
Свободное место для ячеек таблицы и вокруг 

Указатель # 8: что касается воздуха, «больше» почти всегда лучше. Добавляйте отступы, добавляйте поля, увеличивайте высоту строк, распускайте всё.

Указатель # 9: делайте последовательные пробелы. Возьмите базовую единицу, добавляя интервал с шагом (например) 10 пикселей. Слитность - ключ к ритму и гармонии.

consistent grid
Шрифт без засечек, монохромный с цветным акцентом, много места, согласованное расстояние

Живите проще

Не стыдитесь; пусть за вас работают Bootstrap и Foundation. Их часто критикуют за невообразимые сайты, но для прототипов они абсолютно идеальны, прямо из коробки.

Все решения, которые мы обсуждали до сих пор, уже сделаны: типографика, цвета, интервал, последовательность, даже некие детали, такие как формы, вы не сможете испортить.

Указатель #10: встаньте на чужие плечи. Возьмите готовые Bootstrap templates, Foundation templates, или Material Design Lite, или Skeleton, или Pure CSS, или UIKit, или любой из миллионов фреймворков CSS, которые вам нравятся! Не бойтесь добавлять свои собственные стили, имея в виду все те моменты, которые мы обсуждали.

From ZURBs building blocks
От ZURB’s Building Blocks

Эти frameworks всеобъемлющи. Убедитесь в полной комплектации; вы, вероятно, столкнетесь с проблемами, если выберете всего несколько элементов.

Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.