Начинающие веб дизайнеры довольно часто в погоне за красивой картинкой допускают множество ошибок, которые не просто сделают сайт неудобным, или не функциональным, а могут привести к тому, что их макет не примет заказчик, или веб студия.
Прежде всего нужно помнить, что главной целью любого сайта является передача информации и привлечение посетителя. Поэтому веб дизайнеру нужно не забывать, что макет сайта – это не полет его фантазии, или способ самовыражения, как картина, или другое произведение искусства, макет – это способ функционально, понятно и красиво донести информацию… Да, именно в таком порядке.
Итак, поговорим об ошибках:
Размер макета сайта
Примерно 50% начинающих дизайнеров, если не видят конкретных требований клиента к размеру макета, делают его каких вздумается размеров. Иногда выбранные размеры настолько невероятны, что сложно найти монитор, на котором такой сайт выглядел бы не ущербно. Итак, если нет конкретных требований, то оптимальная рабочая область сайта это 960px. Такой сайт будет хорошо смотреться и на маленьких и на больших мониторах, иначе все будет или слишком мелко, или “не влезет” на экран большинству пользователей.
Все элементы под линеечку
Пользуйтесь направляющими и сеткой, она не только упростит жизнь Вам, но и не даст сделать кривой дизайн. Следите за тем, чтобы все элементы дизайна были ровными, симметричными и на одном уровне. Ни в коем случае, создавая новый блок, ни на пиксель не выходите за разметку рабочей области, если визуально Вам и удастся обмануть глаза клиента, то верстальщик сверстает как положено. (А это “как положено” будет сильно отличаться от того, что Вы хотели изобразить), или же такой макет будет отправлен назад на доработку. Кривой дизайн говорит не только о не профессионализме, но и о элементарной лени.
Пропорции и размеры в макете
Довольно часто повторяющиеся одинаковые элементы на разных страницах неопытные дизайнеры делают разных размеров. Это не лучшее решение. Во-первых такой ход усложнит верстку, во-вторых визуально это не красиво, в-третьих… Зачем? Если у вас блок новостей 120х400, то пусть он на всех страничках сайта таким остается и очень желательно, в той же части страницы. Та же проблема с расстояниями между одинаковыми блоками: они должны быть неизменными на каждой страничке, на которой повторяются.
Цвета и формы
Во всем должна быть мера: 3-4 цвета для маленького сайта вполне достаточно. Будущий сайт не должен раздражать и вызывать желание побыстее его закрыть. Не нужно использовать для фона яркие цвета, поверьте, очень редко это выглядит красиво. И еще: черный цвет это стильно, но далеко не всегда 🙂
Помните, что если вы решили, что код Вашего желтого цвета, к примеру #FFDEAD, то таким он должен быть везде, никаких подборов цвета тыканьем в цветовую панель “на глаз”.
Также, не нужно невообразимых форм – это не только утяжеляет восприятие, но и элементарно невыполнимо при верстке. “Красота в простоте” – это утверждение наиболее актуально для веб дизайна.
Шрифты в веб дизайне
Пожалуй шрифты, это отдельная болезненная тема, которая заслуживает целой статьи, но если кратко, то:
1. Шрифты должны быть бесплатными. Не используйте платные шрифты, или шрифты для некоммерческого использования.
2. Не используйте больше двух, в некоторых случаях, трех шрифтов в одном макете. Это не только портит внешний вид сайта, но и усложняет верстку.
3. Цвет и размер шрифта должны быть читабельными, как уже говорилось выше, основное предназначение сайта это передача информации. Никому не нужен очень красивый но непонятный шрифт.
4. Количество пикселей должно быть целым числом, никаких 15,5 и 18,3… При верстке попросту нет возможности сделать такой текст.
Не стандартные формы поиска, чекбоксы и т.д.
Практически все веб дизайнеры без опыта пытаются делать подобные элементы, позаковыристей и посложнее, совсем не задумываясь о том, как потом это сверстает верстальщик и отобразит браузер. Не стоит изобретать велосипед заново (чаще всего велосипед, которые не едет), пользуйтесь уже существующим и легковоплотимым в верстке. Ведь если поискать, можно найти множество доступных стильных элементов, которые относительно стандартны для верстки, просто поменяйте цвет. Не в этом ли мастерство дизайнера, из обычного и простого создавать гармоничную картинку?
Состояния кнопок
На всех сайтах кнопки имеют несколько состояний: обычное состояние, при наведении мышки, при нажатии на кнопку. Об этом нужно не забывать при прорисовке дизайна, все что можно нажать, развернуть, отметить, в общем, все с чем можно взаимодействовать должно быть отрисовано.
Эффекты наложения слоя
Здесь все очень просто, забудьте о внутреннем и внешнем свечении, обводке, куче разных теней и все это одновременно. В Вашем распоряжении есть только тень, внутренняя и внешняя, причем вместе их использовать нельзя. Зато можете менять ее цвет.
Текстовая страница в веб дизайне
Очень распространенной ошибкой молодых дизайнеров является отсутствие в дизайне текстовой страницы. Казалось бы все продумано, кроме того, как будет выглядеть самое основное – контент. Обязательно нужно изобразить текст во всех его проявлениях: все заголовки, жирный текст, курсив, список, ссылка. Это не менее важно, чем сам дизайн сайта.
И напоследок, не замечание, а скорее совет: помните, макет, который отдает веб дизайнер – это не конечный продукт, это только начало и дальше с ним будет работать верстальщик и программист. Не усложняйте работу другим, попытайтесь вникнуть в основы работы верстальщика, чтобы понимать, что реально воплотить в жизнь, а что нет, не стесняйтесь спрашивать и советоваться, это покажет Вас только с лучшей стороны и оставляйте комментарии к макету (эта функция есть в Photoshop). Если Вы будете относиться с уважением к чужой работе, Вас будут ценить, как специалиста и соответственно, за Ваши услуги будут готовы платить больше в разы.