Все мы бываем неправы. Такая уж человеческая природа. В настройках, типографике, заполнении и т.д. всего лишь одна мелочь может существенно навредить вашему дизайну. К счастью, если вы знаете, чего делать нельзя, или где искать неполадки, то несколько кликов помогут спасти тонущий проект. Все-таки, если проблема обнаружена, то полдела сделано. Главное, не упустить и идти по «горячему следу». Являетесь ли вы профи или новичком, работаете над первым в жизни проектом или же от заказчиков нет отбоя, в любом случае, эта статья для всех. Кто-то узнает новое, а кто-то просто закрепит.
ТИПОГРАФИКА
Типографика – одна из наиболее важных составляющих дизайна. Так как текст занимает в основном большую часть страницы, он должен быть качественно представлен. Но даже опытный дизайнер может «накосячить», испортив привлекательность своего контента. Но все поправимо.
ШРИФТ БЕЗ ЗАСЕЧЕК (SANS SERIF) ПРОТИВ ШРИФТА С ЗАСЕЧКАМИ (SERIF)
Каждый шрифт для своих целей. Тот, что с засечками (Serif), выглядит как-то элегантно, что ли. Если у вас возникла мысль использовать их оба одновременно – лучше не надо. Эти два эффекта не смешиваются. Принцип «два в одном» в большинстве случаев не станет примером для хорошей типографики. Это может привести к непонятным результатам, ну очень уж не привлекательными. Но это не значит, что соединение Serif и Sans Serif никогда не работает. На самом деле, в некоторых случаях это вполне уместно, особенно, если следовать правилам иерархии. Вот, например, https://alistapart.com/ прекрасно владеет данным методом.
КОЛИЧЕСТВО ШРИФТОВ
Другая распространенная ошибка – дизайнеры используют множество семейств шрифтов для «ошеломляющего» эффекта, а не пару какого-то одного. Это, конечно же, нарушает читаемость контента. Поэтому, пытайтесь использовать один набор, а не все подряд шрифты для разнообразия. Это непрофессионально. И не эстетично. Кроме того, если присутствует слишком много размеров букв, разные интервалы – остановитесь. Это приведет к неудаче. Используйте более-менее что-то знакомое и постоянное. Проверено.
НЕХВАТКА КОНТРАСТОВ
Это тоже частое явление. Ну а что, зрение-то у всех разное… Это очень важная проблема, ведь многим пользователям трудно отличать цвета. Вот вам пример в помощь.
Какой из этих текстов лучше читать? Наверняка тот, что на левой картинке. А не ярко ли, спросите вы? Хммм.. Если взглянуть на тот, который справа? Возможно, но скорее всего, нет. Еще отличный пример показывает The Ellipsis
ОБИВКА, ПОЛЯ, ИНТЕРВАЛЫ
Сейчас у дизайнеров намного больше работы, но и, параллельно, ответственности. Имеется ввиду, то, с каким разрешением требуется создавать тот или иной продукт: будь то монитор компьютера, смартфона, планшета… Нужно уметь сделать так, чтобы для каждого устройства, параметры были приемлемы. Таким образом, вы должны выделять больше пространства для заполнения и полей в целях лучшего визуального восприятия вашего дизайна. Возьмите, к примеру, Apple. Здесь используется много белого пространства, концентрируя внимание на контенте, о котором, собственно, прежде всего стоит думать. Но, поймите правильно, это не значит, что вы должны заполнять все белым. Также важно, чтобы расстояние интервалов, полей и т.д. были согласованы со всеми элементами вашего дизайна. Сравните: на второй схеме все сделано правильно, потому, что поля находятся на одном расстоянии – 18 px.
СОХРАНЕНИЕ СТАРЫХ ЦЕННОСТЕЙ
Индустрия веб-дизайна развивается довольно-таки быстро. Происходит внедрение новых разработок и т.д. Одной из худших вещей, которые могут навредить дизайну, есть то, что люди продолжают развивать и внедрять то, что было распространено раньше. В 2003 году у Microsoft Frontpage был инструмент для «разметки таблиц», но ни один хороший разработчик сейчас не осмелится открывать тег таблицы под именем макета. Точно так же, удивительные анимированные GIF-изображения, и почти вся музыка прошлого десятилетия не являются чем-то грандиозным. Нет. Точно также можно сказать и о фреймах (рамках). Все это, конечно, присутствует сейчас, но не в таком виде. Так как было раньше, мы больше не делаем. Следите за более современными подходами, чтобы достичь цели.
ПРОПОРЦИЯ И РАЗМЕР
Ваши проекты всегда должны придерживаться своего рода иерархии, чтобы были соблюдены правила размеров и пропорции. Одним словом, самые важные элементы должны быть самыми крупными и пусть они уменьшаются постепенно. Это должно стать вашим принципом по созданию масштабов элементов на странице. Всегда должны соблюдаться пропорции, независимо от устройства, для которого проектируете. Каждый элемент должен быт легко доступным. Пользователь не должен выполнять дополнительные команды: масштабировать, искать маленькие элементы на экране, щуриться и пр.
Вы также, вероятно, слышали о божественной пропорции или «Золотом сечении». Далеко не каждый дизайн следует ему. Но все должны стремиться к этому. Отношение 1:1,62 используется не только в веб-дизайне.
Золотое сечение – это баланс, к которому все мы привыкли, но не замечаем его. Например, соотношение руки к предплечью (1:1,62) или человеческая улыбка. Поиск кого-то привлекательного, возможно, также основывается на сечении, и может, это один из примеров красоты человека, естественности. Так и в дизайне. Нужно делать все, чтобы проект был более «естественным», «комфортным» для восприятия пользователя.
В заключение, еще несколько наблюдений:
– высота строки – примерно от 1,3 до 1,6 еm делает текст читаемым. Использование значения «EM» для измерения высоты строк также помогает соблюдать пропорции текста;
– визуальная иерархия – очень помогает пользователю выбрать главные сведения. Это особенно полезно для интернет-магазинов с целью привлечения внимания к элементам страницы;
– совместимость с браузерами – конечно, пользователь покинет сайт, если не учтен этот принцип. Убедитесь, что все основные браузеры охвачены, надлежащее тестирование должно быть обеспечено.
Надеемся, что информация полезна для размышления. Но помните, что все делают ошибки. И это нормально. Главное – учиться на них.
