У вас есть свод правил, когда речь заходит о дизайне сайта? Существуют некоторые правила, которые применяются ко многим проектам веб-дизайна — назовем их «заповедями веб-дизайна».
Независимо от того, насколько большой или маленький сайт, эти правила являются основой для хорошего дизайна. Если вы будете следовать этим основным принципам и сделаете их частью своего мышления для каждого проекта, который вы начнете, вы избежите многих подводных камней, на которые дизайнеры могут наткнуться!
1. Вы должны быть последовательным
Последовательный дизайн прост для использования и понимания дизайна. Пользовательские действия и взаимодействия, а также визуальные эффекты должны быть внешне одинаковыми по виду и использованию в рамках одного проекта
Это означает, что кнопки имеют один и тот же цвет и используют одни и те же состояния зависания, чтобы помочь пользователям понять, как взаимодействовать. Заголовки имеют одинаковый размер и используют один и тот же шрифт во всем дизайне, а такие элементы, как цвета, соответствуют палитре, которая идентифицируется и связана с брендом.
Другие визуальные элементы тоже должны соответствовать последовательному стилю, а также стилю и плану использования таких элементов, как иконки или фотографии, видео или иллюстрации. Дизайн должен иметь голос, который используется для блоков текста, которые соответствуют общей эстетике.
Все эти элементы последовательности вносят вклад в общее удобство использования, делая дизайн максимально простым для пользователей.
2. Вы должны использовать пробелы
Нет необходимости втискивать каждый элемент в пространство над скроллом. Используйте пробелы, чтобы установить ритм и поток, создать визуальную иерархию и помочь пользователям перемещаться по дизайну.
Если контент хорош, они будут прокручивать.
И пробелы могут действительно помочь стимулировать это действие пользователя, перетягивая глаза вниз по экрану.
Пробелы еще более важны, поскольку размеры экрана становятся меньше. Дополнительное пространство вокруг элементов может помочь создать разделение и облегчить их чтение. Подумайте о том, насколько выгодным может быть немного дополнительного места, когда дело доходит до нажатия кнопок с легкостью.
Не знаете, где включить пробелы в дизайн? Начинайте отсюда:
- Вокруг кнопок или других интерактивных элементов
- Пространство между строками шрифта, чтобы облегчить чтение
- Между элементами, чтобы отличить их друг от друга, например, обтекание на фотографиях, встроенных в текстовые блоки
- В полях формы, чтобы на них легко было нажимать на мобильных экранах
- Вокруг любого элемента, на котором вы хотите, чтобы пользователи сфокусировались
3. Вы должны использовать сетку
Сетка — это основа пользовательского опыта. Когда вы разрабатываете с сеткой, окончательный веб-сайт является более точным, последовательным и элементы размещаются в порядке, который имеет визуальный смысл.
Сетки бывают как горизонтальными, так и вертикальными, хотя наиболее известной сеткой веб-дизайна может быть вертикальная сетка на 12 столбцов для выравнивания элементов.
Сетка — это то, что вы видите только в процессе проектирования, и если у вас есть проблемы с поиском мест размещения элементов или созданием организованной схемы, сетка может стать настоящим спасением.
4. Вы не должны забывать про пользовательские шаблоны
Пользователи делают вещи определенным образом и ожидают определенных вещей от вашего дизайна. Для того чтобы иметь как можно больший успех, дизайн должен использовать общепринятые пользовательские шаблоны (повторяющиеся решения для проблем дизайна), чтобы люди точно знали, как работает дизайн.
Общие пользовательские шаблоны включают в себя:
- Порядок информации в формах, начиная с имени или адреса электронной почты и заканчивая «отправить”
- Размещение навигационных меню
- Расположение и кликабельный характер значка корзины для сайтов электронной коммерции
- Как работают уведомления
- Иконки для поиска и чата, среди прочего
5. Вы должны использовать сходство в действиях пользовательского интерфейса
Каждый элемент в дизайне сайта должен работать как любой другой элемент того же типа. Эти элементы также должны иметь визуальную идентичность, то они представляют и что они делают с первого взгляда.
Есть так много действий пользовательского интерфейса, которые могут быть встроены в дизайн, что соблюдает принцип Гештальта в сходстве. Группирование визуальных элементов и действий таким образом, чтобы они были визуально идентифицируемыми, поможет создать лучший общий опыт для пользователей.
6. Вы должны хорошо использовать типографику
Вам не обязательно быть мастером-типографом, но это определенно помогает.
Так много из того, что составляет хороший дизайн коренится в удобочитаемости и разборчивости. И эти понятия зависят от того, как вы выбираете и используете шрифты.
Если вы сомневаетесь, выбирайте простые пары шрифтов, такие как serif и sans serif. Отойдите от дизайна и посмотрите, легко ли читать надпись издалека. Затем посмотрите на надписи на небольшом холсте, например, на экране телефона, чтобы убедиться, что его легко читать с первого взгляда.
Попробуйте использовать шрифт в высококонтрастной среде, например светлый шрифт на темном фоне или темный шрифт на светлом фоне, чтобы каждое слово было легко читать.
7. Вы не должны забывать экраны Retina
Даже самые маленькие экраны могут отображать элементы и изображения с с точностью до пикселя.
Вам нужно подумать, как вы будете обрабатывать изображения, иконки и другие элементы, чтобы все было красиво, независимо от размера экрана. Когда это возможно, использование векторного формата может быть идеальным решением, что является одной из причин роста популярности SVG.
Если у вас нет изображения с разрешением, соответствующим общим размерам экрана, не используйте его. Лучше, вообще, без него, чем плохое или пиксельное изображение.
8. Вы должны быть честным
Ваш дизайн должен быть верен бизнесу, информации или бренду и прозрачен в том, что он делает. Не крадите дизайн или изображение, не набивайте ложными ключевыми словами, чтобы управлять трафиком и будьте честным в том, о ком и о чем ваш контент.
С таким большим количеством веб-беспорядка, пользователи хотят взаимодействовать с проектами, которые являются настоящими. Обман пользователей в выполнении чего-либо, подписке на продукт или услугу, просто введение их в заблуждение относительно темы или информации, должны противоречить вашему персональному коду этики. Не беритесь за проекты, которые ожидают этого от дизайна.
9. Вы не должны игнорировать доступность
Веб-сайт должен использоваться как можно большим количеством людей. И хотя это может показаться трудным, гарантировать доступность дизайна, это не так сложно, как вы могли бы подумать.
У Google есть отличное руководство по доступности веб-сайта, которое оно определяет следующим образом:
В широком смысле, когда мы говорим, что сайт доступен, мы имеем в виду, что контент сайта и его функциональность может работать, буквально у любого. Как разработчику, легко предположить, что все пользователи могут видеть и использовать клавиатуру, мышь или сенсорный экран и могут взаимодействовать с содержимым страницы так же, как и вы. Это может привести к опыту, который хорошо работает для некоторых людей, но создает проблемы, которые варьируются от простых раздражений до остановки показа для других.
Таким образом, доступность относится к опыту пользователей, находящимися за пределами узкого диапазона «типичного» пользователя, который может получить доступ или взаимодействовать с вещами иначе, чем вы ожидаете. В частности, это касается пользователей с некоторыми типами нарушений или инвалидности — и имейте в виду, что этот опыт может быть нефизическим или временным.
Многие принципы хорошего дизайна, такие как размер, контраст и пространство, способствуют общей доступности.
10. Вы должны быть отзывчивым
Это, пожалуй, то без чего вы просто не можете продвигаться дальше в 2018 году, но ваш сайт должен быть отзывчивым. Это включает в себя каждый элемент, от текста до изображений, от кнопок до общей структуры.
Каждый дизайн должен работать на каждом устройстве.
Вывод
Твердый набор правил может помочь вам быстрее окунуться в дизайн-проект и работать более последовательно. Обратите внимание, что ни одна из этих заповедей не говорит вам, как должен выглядеть проект; они коренятся в теории того, как вы описываете и создаете каждый веб-сайт.
0 комментариев