Вы когда-нибудь задумывались над тем, как много нюансов и особенностей существует в сфере веб-дизайна? Как многое нужно учитывать и помнить, когда создаешь всего-то один простенький проект? И речь не о крупном интернет-магазине, наподобие 1C-Interes или сайта компании, а-ля Microsoft. Но, например небольшое кафе, доставка пиццы или лендинг о… новых наушниках. Весовые категории проектов разные, но вот подход к созданию их, реализации, воплощению мыслей заказчика и создателя практически одинаковый.
Существует тонна правил проектирования, что находятся в наших головах. Это те вещи, что мы узнаем самостоятельно, что предлагают нам старшие дизайнеры, элементы уроков и теории дизайна. Но представьте на мгновение, что в мире есть веб-дизайнеры, которые не стремятся следовать всем правилам строго «до последней запятой». Представьте себе, что они вполне себе преспокойно нарушают многие правила и при этом создают проекты, что являются весьма отличными и по дизайну, и по интерфейсу, и по удобству использования.
Вполне возможно, что вы уже подумали: «ну и бред, такого быть не может, и нет такого». Но, знаете, такое есть, и мы об этом расскажем.
Ситуация в веб-дизайне такова, что со временем тенденции дизайна и концепции постоянно изменяются. И в частности, именно технологические достижения изменили многие правила. Дизайн (любой) – это постоянно развивающийся процесс и то, что работает сегодня, завтра уже с большой вероятностью изменится. Именно осознание данного факта привело к тому, что веб-мастера смогли выделить некоторые правила и тенденции, которые всегда «ломаются», изменяются, преломляются, когда их используют для того или иного проекта.
Использование шрифтов Sans Serif в веб-дизайне
Почти каждый веб-дизайнер утверждает, что нужно использовать в онлайне Sans Serif. Но это ведь не так. Хорошим сочетанием читаемых шрифтов является нечто среднее, что объединяет стили с засечками, без засечек, курсивный, с эффектом новизны. И ключом к выбору правильного шрифта (или шрифтовой пары) является выбор стиля надписей. Стиля и начертания, которые будут легко читаться, визуально восприниматься.
Эту идею поддержал в исследовании Nielsen Norman Group Якоб Нильсен, который основное внимание уделял опыту взаимодействия. Он подчеркивал, что развитие технологий экранов мониторов влияют на изменения руководств по использованию типографики в веб-дизайне.
Старое руководство для удобного использования типографики в онлайн было простое: придерживаться шрифтов sans-serif. Поскольку экраны компьютеров в то время были отвратительными для правильного отображения засечек, предпринималась попытка «прикрыть» их другим шрифтом, подгоняя его по размеру. Что, в свою очередь, приводило к размытости букв.
К сожалению, новые ориентиры не столь ясны и понятны, как старые. Исследования удобочитаемости выглядят неубедительными относительно того, действительно ли шрифты с засечками лучшие визуально для усвоения контента, чем без засечек.
Но разница в скорости чтения между засечками и без засечек, по-видимому, очень мизерная. Таким образом, нет одного строгого руководства по использования того или другого вида шрифта, поэтому веб-дизайнеры вполне могут сами делать выбор, основываясь на исследованиях, соображениях, личном опыте, брендинге, настроении, что передает тот или иной стиль типографики.
Так что, несмотря на тенденции типографики 2018, несмотря на то, что многие просто таки обожают sans serif, его можно и не использовать. Вот несколько вещей, которые нужно искать, о которых нужно думать, когда речь заходит о выборе шрифта для удобства читаемости контента.
- Выбирайте равномерную ширину между буквами относительно жирного начертания. Сверхлегкий (тоненький) шрифт может быть очень трудно прочитать.
- Придерживайтесь средней высоты строчных букв. Если шрифт имеет высокие буквы и тонкие, опять же, их тяжело читать.
- Ищите адекватный промежуток между буквами, не злоупотребляя сочетаниями, написаниями и лигатурами.
- Используйте декоративные шрифты для заголовков, небольших текстовых блоков. При этом пользователь должен четко понимать, почему такой витиеватый шрифт использовался в этом месте.
- Для больших блоков текста можно использовать шрифты с засечками или без, различной формы и размера, но все они должны читаться легко и быстро с первого раза.
И вот как подобрали шрифты Известия, undertheskin, Мир фантастики, wonderthebook, scissorsandclippers, unplug, fubiz
Только не яркий фон
В течении последних лет казалось, что единственными приемлемыми фоновыми цветами для страниц сайтов являются белый, пастельные оттенки цветности и нейтральные. Но тенденции уже этого года стремятся к тому, чтобы смелые, яркие, «живые» цвета и сочетания использовались в веб-дизайне повсеместно и в невообразимом количестве.
Насыщенный, яркий цвет в фоне на странице или блоке/секции действительно способен создать отличный элемент дизайна. Цвет способен произвести впечатление на пользователей, привлечь их внимание, задать тон всему сайту, отразить его характер, направленность тематическую, интересным способом разбить весь контент, и позволить самому дизайнеру отойти от использования надоевших всем шаблонов. Но это еще смотря, какой именно фон. Зачастую весьма яркий, смелый, контрастный только уничтожит весь дизайн «на корню», и каким бы инновационно-модно-трендовым он бы не выглядел, для конечного пользователя он будет, проще говоря, «никаким».
Поэтому есть еще одна часть правила и тенденции – ограничение количества цветов в палитре с удалением части ярких оттенков. Да, никто не оспаривает того, насколько отлично иметь палитру бренда и всю (именно всю) её использовать в веб-дизайне. Это даже хорошо, когда уже есть четко определенная палитра бренда, но, даже имея ее, можно пойти гораздо дальше и создать действительно индивидуальный проект.
Цветовые палитры Material Design в сочетании с более смелыми решениями и яркими, представили то, что стали считать стильным и броским. Большое количество цветов – это, наоборот, приемлемо вполне. Сейчас все больше сайтов крупных брендов и не очень используют цвет, чтобы помочь создать интересный и привлекательный дизайн; дизайн, который понравится пользователям и который захочется исследовать. Безусловно, посетители от такого только в восторге.
Но при этом вам все еще нужна для начала самая простая палитра цветов, так как работа начинается со стандартов. Стандартов, необходимых для согласованности и построения гармоничной композиции. Но затем попробуйте, добавьте некоторые дополнительные (яркие) цвета. Такой вариант подойдет не для каждого сайта или лендинга, но задуматься об этом стоит.
Веб-дизайнерам даже не требуется заниматься перепроектированием проекта и брендовых материалов, если есть необходимость в добавлении зеленого фона или ультрафиолетового. В целом, все будет гармонировать, дополнительные оттенки подчеркнут цвета бренда, сделают на них акцент. Добавлять такие яркие и смелые цвета в уже имеющийся проект можно самыми разными способами.
- Рассмотрите вариации наложения и тонирования цветных фотографий.
- Сделайте яркий заголовок.
- Поменяйте уже имеющийся нейтральный фон на что-то более захватывающее и запоминающееся.
- Используйте более яркий оттенок цвета для кнопок или элементов призыва к действию. Но не стоит их все и всегда делать либо ярко-синими, либо ярко-красными. Почему бы им не стать оранжевыми, насыщенно зелеными, ультрафиолетовыми? Смысл от этого они не потеряют, если контент и без них понятен.
- Добавляйте градиенты, цветовые переходы и анимацию радуги для поощрения взаимодействия с интерфейсом сайта.
И вот что получилось у дизайнеров при работе над buysellads, neverbounce, scissorsandclippers, foodserver, capitalplaza, communitysectorbanking, cremationforpets.
Симметрия и только симметрия
Почти повсеместно можно слышать и читать о том, что веб-дизайн должен строиться строго симметрично. И многие веб-дизайнеры-ветераны до сих пор не представляют того, как же можно отходить от этого правила. И главное: зачем, ведь именно симметрия способна создать идеальную гармонию и баланс, сделать проект удобным для изучения.
Но давайте вот о чем подумаем. Многие концепции симметрии сейчас кажутся очень скучными и очень простенькими, безопасными, неинтересными. Нет, никто не спорит, что симметрия удобна, но кто говорит о том, что асимметрия неудобна? Кто говорит о том, что её не рады видеть пользователи?
Асимметрия вполне себе удачно может помочь веб-дизайнеру создать больше визуально-интересных мест на странице сайта, и при этом сбалансировать все элементы без разделения экрана на две-три части. Хотя, впрочем, место и время для симметрии все же остается, ибо требуется сбалансировать пространство и элементы, но это становится еще более интересным. Без интереса создавать дизайны невозможно ведь…
Чтобы максимально использовать асимметрию в веб-проектах, давайте рассмотрим те моменты, которые можно применять для создания визуального потока и гармонии:
- Противопоставление пространства и элементов друг против друга. Тяжелые элементы могут чувствовать себя более сбалансированными, если окружены большим количеством пустого пространства. Особенно, если оно еще имеет и светлый цветовой тон.
- Задумайтесь и уделите немного времени тому, как наши с вами глаза двигаются по дизайну сайта. Задумайтесь, правильно ли это движение идет по вашему сайту, и так ли вы сами все задумывали изначально. Подумайте о том, как люди читают, начните работу с расстановки больших (тяжелых) элементов и выравнивания текста по левому краю, ибо все-таки читает большая часть населения планеты слева направо.
- Используйте цвет при работе и для создания фокусных точек и моментов привязки. Если у вас где-то в общем контенте существуют некоторые важные детали, кнопки и прочее, отделите их цветом, акцентируйте на них внимание.
- Выложите все элементы дизайна одной страницы на сетке, дабы создать ощущение организованности и поточности, гармонии симметрии и правильности.
- Задумайтесь о весе каждого элемента. Ассиметричные конструкции не должны ощущаться «односторонними». Пользователь должен легко и быстро перемещаться по контенту и схватывать его, понимать, осознавать, где и что находится и куда ведут ссылки. Поэтому статические элементы (навигация, например), могут стать контейнером для элементов асимметрии.
Чтобы было более понятнее, давайте посмотрим на такие проекты, как: olivier-guilleux, papercast, lmgonzalves, onero, agency, resultaten2017
Таким образом, асимметрия используется, как ярко выраженная, так и не очень заметная. Но при этом визуально мы воспринимаем каждый отдельный взятый дизайн сайта, как уникальный и не шаблонный.
Послесловие
Отметим, что многое из сказанного не является для некоторых чем-то новым и особенным. Но дело в том, что зачастую мы думаем, если что-то в моде и тренде, то обязательно это должно быть тут и там, это нужно применять и так далее. Причем, использовать в явном, простом виде, дабы большинству было сразу видно и понятно, о чем речь. Наглядный пример, сайт lowproteinconnect, на котором кроме ультрафиолетового трендового цвета практически никакой другой и не используется. Весь сайт фиолетовый. С одной стороны, это вовсе недурно, но задумайтесь на секунду, как мог бы он преобразиться, если бы цветов было больше, если бы фоны были иными.
Вот именно об этом и говорили мы сегодня. О том, что, несмотря на существование правил, трендов, стандартов, иногда стоит немного от них отклоняться и посмотреть на веб-дизайн конкретного сайта несколько иначе. Создать разные вариации и прикинуть, что большинству может понравиться больше, то же самое, что и вам?
Выводы
Нарушение правил веб-дизайна может очень сильно бодрить и будоражить мысли. Но может стать и катастрофическим. Если не понимать, не осознавать смысла нарушения, и даже эти нарушения не выполнять строго по их уже правилам, то дизайн можно никогда и не доделать, провалить всю работу! Сделайте правильный выбор относительно того, какое правило стоит нарушить и когда, думайте о целях проекта или веб-дизайна.
Разумеется, что необходимы ваши мысленные ответы на вопросы: как нарушить правила, чтобы проект работал еще лучше? Будет ли он также удобен или станет более удобным, поймет ли пользователь, что вы хотите до него донести?
Если «да», то ваш проект действительно стал идеальным полотном для нового творчества, для того, чтобы попробовать нечто новое и другое. Главное, не просто нарушайте правила проектирования, а творите. Тогда не будет скучно и уныло, а станет ярким и будоражащим.