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

Вот на днях попался один дизайн

01_index

Все исходники не выкладываю по понятным соображениям.

Как вам, кстати? Честно говоря, мне он изначально не понравился. А ведь дизайнер получил за это довольно приличные деньги (ай-ай-ай). Но не в этом суть.

На основе этой работе будем рассматривать признаки непрофессионального дизайна. Итак…

1. Структура PSD-файла

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

folders

что, надо сказать, очень порадовало. Не часто такое встретишь. Однако называть слои и папки все же рекомендуется латиницей, а не кириллицей.

2. Ширина контента

На момент написания данной статьи наиболее часто используемая ширина контентной части (не путать с шириной всего макета), как правило составляет 960px, 980px, 1000px или 1024px (ширина планшета).

Если в psd-файле ширина контента составляет 999px или 1189px, сразу отправляйте на переработку.

В данном случае ширина контентной части (от левого до правого края белого блока) составляет 1000px, что вполне нас устраивает.

3. Сетка

Основу профессионального дизайна составляет сетка, т.е. наличие четких визуальных вертикальных и желательно горизонтальных линий в общей схеме дизайна. Идеальным примером считаю 960 grid system, в соответствии с которой контентная часть визуально разбивается на 12, 16 или 24 равных части. Однако приветствуется наличие хоть какой-нибудь сетки. Проще говоря, чем меньше вертикальных и горизонтальных линий, тем проще восприятие. Что можно считать линией? Это верхний левый угол каждого из блоков (его начало).

lines

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

Большим плюсом является наличие и горизонтальной сетки, но в данном дизайне она также отсутствует

hor-rules

В идеале заголовки в соседних блоках должны начинаться на одном уровне (за некоторым исключением ), и расстояние от заголовков к тексту должно быть одинаковым.

4. Логотип

В верстке правилом хорошего тона является текстовый логотип.

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

logo

5. Шрифты

О шрифтах в web-дизайне мною уже была написана большая статья, поэтому лишь вкратце опишу основные ошибки.

1) Использовано 6 (или даже более) шрифтов.
2) Некоторые из шрифтов являются платными, что вообще из ряда вон плохо, поскольку необходимо предоставлять номер лицензии на использование данных шрифтов в коммерческих целях, а таковой вообще не имеется.
3) Нестандартные шрифты (а их здесь 4) взяты не из коллекции Google Web Fonts, что требует подключения дополнительных скриптов.
4) Некоторые из использованных нестандартных шрифтов очень близки по начертанию к стандартным, что позволяет исключить их из использования.
5) Использована комбинация двух стандартных шрифтов без засечек, близких по начертанию.

6. Склеенные слои

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

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

Рассмотрим еще один пример склеенных слоев

layers

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

7. Ссылки

Ховер – это поведение ссылки или кнопки при наведении на нее мышью (например, изменение цвета). Все ссылки и кнопки на сайте должны иметь ховер, так пользователь понимает, что данный элемент – это не обычный текст. Самый простой ховер — это изменения подчеркивания: в обычном состоянии ссылка не подчеркнута, при наведении на нее курсора мыши становится подчеркнутой.

В данном дизайне довольно проблематично определить, что является ссылкой, а что нет (так, например, не понятно, является ли выделенный другим шрифтом текст или элементы списков  ссылками).

links

Некоторые ховеры все же прорисованы, но далеко не все. Чуть выше уже говорилось, что нет ховера на кнопке формы, ховера так же нет на баннерах, нет ховера и в меню в футере

hovers

8. Изображения

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

Итак, смотрим.

На фоне — два изображения. Одно из них – с кружочками – в нормальном качестве и не обрезано, второй — угловое свечение — обрезано слева. Таким образом пользователи с широкоформатным монитором (в зависимости от фантазии верстальщика) либо увидят данное свечение в левом верхнем углу, далеко от фона с кружочками, либо будут наблюдать отцентрованное и обрезанное слева свечение.

bg

Изображения в дизайне в целом в хорошем качестве, хотя попадаются и нюансы

images

images2

В данном случае присутствие на изображении цветового и яркостного шума недопустимо.

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

slider

9. Элементы, которые невозможно или очень сложно повторить средствами HTML + CSS

Создавая макет сайта, дизайнер должен думать не только о том, на сколько это красиво, но и на сколько это реально воплотить в верстке (для этого каждому web-дизайнеру следует знать хотя бы основы HTML и CSS).

Итак, какие же элементы дизайна вызывают трудности у верстальщика.

9.1. Нестандартные тени

К нестандартным теням в дизайне можно отнести все тени, которые рисуются в ручную, а не через стили слоя. Некоторые из них (наиболее простые) можно сделать с помощью CSS, но 100%-ной схожести добиться практически невозможно. Более сложные тени невозможно повторить иначе, как вырезать картинкой.

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

shadow

9.2. Диагональные градиенты

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

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

Самым ужасным примером диагонального градиента считаю блок с вкладками на подстранице.

gradient

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

9.3. Градиентные и цветные бордеры

В средствах верстки существуют только одноцветные бордеры. Ни о каких градиентных (тем более с диагональным градиентах) речи быть не может. Один из таких бордеров мы уже обсуждали в начале статьи. Бордеры не могут появляться в начале блока и исчезать к середине блока, как показано на изображении ниже:

border

9.4. Нестандартные инпуты, селекты, чекбоксы, кнопки

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

В данном дизайне все элементы формы являются нестандартными. Ситуация здесь обстоит очень печально.

forms

В данном случае чекбоксы имеют градиентные бордеры, что опять-таки заставляет вырезать его целой картинкой. К тому же, здесь подпись к чекбоксу является его частью, что требует дополнительных манипуляций (пояснение, в верстке чекбокс (квадратик с галочкой) и подпись к нему — это два разных элемента). Стилизация данного элемента требует подключения дополнительного скрипта.

Инпуты имеею двойной бордер — цветной внешний и белый внутренний. Данное свойство нельзя повторить кроссбраузерно без дополнительных элементов.

Нестандартные селекты требуют подключения дополнительного скрипта.

Кнопка имеет двойной бордер — оба градиентные. На фоне кнопки диагональный градиент.

9.5. Эффекты наложения

На сегодняшний день в верстке отсутствует понятние «наложение слоев», поэтому использование их в дизайне крайне не желательно.

К сожалению, и такой деффект в данном дизайне попадается.

overlay

Также стоит обращать внимение на то, чтобы картинки, которые следует сохранять прозрачными, были аккуратно вырезаны.

cut-images

Такого быть не ддолжно.

10. Прочие недочеты, юзабилити.

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

Далеко не лишним будет взглянуть на дизайн с точки зрения обычного пользователя Интернета.

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

Предназначение многих элементов не ясно с первого взгляда. Например, баннер на главной. Заголовок баннера совпадает с названием первой кнопки, что наталкивает на мысль, что кнопки под баннером — это пагинация к слайдеру. Однако это не так. Кнопки под баннером — это всего лишь дополнительная навигация сайта.

slider

Меню в футере просто теряется (первые секуды времени я вообще не обращала на него внимания, потому как думала, что это заголовки к спискам). Второй список в футере имеет пустой элемент, что заставляет задуматься

footer

Как уже говорилось выше, при всем обилии кнопок очень тяжело понять, какой элемент сайта является ссылкой, скорее всего пользователь будет определять это «методом тыка».

Можно найти недочеты и с точки зрения дизайна. Например, на подстраницах основное меню и дополнительное имеют одинаковые разделители. Эти разделители в некторых местах сходятся, в друших расходятся, создавая не очень приятное впечатление.

menu

Заключение

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

В выбранном дизайне встречаются почти все типы недоработок, что свидетельствует о низком уровне обознанности дизайнера в специфике web-разработки и принципов юзабилити.

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

На этом все. Творческих вам успехов!

Реклама