Смотрю на работы начинающих web-дизайнеров: у всех приблизительно одни и те же проблемы при разработке макетов сайтов. Чтобы не повторять каждому решил описать в одной статье общие наиболее распространенные ошибки и пути их устранения.
Как правило у новичков в макете мало деталей. На сайте с таким дизайном чувствуешь себя как в квартире в которую еще мебель не завезли. Обычно чем меньше проработка, тем хуже смотрится.
Конечно же выслушайте сначала заказчика, какие сайты ему нравятся, может быть у него есть предпочтения в цветовых решениях, с стиле. Бывает такое что ему могут нравиться абсолютно простые с точки зрения web-дизайна вещи.
Лично у меня макеты страницы содержат по пол сотни слоев. Кстати для структурирования рекомендую слои раскладывать по группам-папкам.
Некоторые начинающие дизайнеры ждут от заказчика тексты и баннеры, а не получив вставляют пустые блоки. Поймите, что задача дизайнера показать как будет выглядеть сайт, для этого нужно вставить текст, пусть не совсем тот что будет в конечном счете размещен на сайте. Вам главное показать как будет смотреться сайт с текстом, ведь текст может быть написан разными шрифтами, разным размером, разным цветом, толщиной … Поэтому вставляйте какой-нибудь близкий по тематике текст с какого-нибудь сайта. Поменять текст при наличии CMS способен сам заказчик.
Что касается картинок, то их заказчик тоже как правило не предоставляет. Для этого используем сервис Яндекса — Картинки. Там есть удобная настройка поиска картинок — по размеру, по цвету и если нужно с вырезанным фоном (встречаются и такие), то выбираешь PNG формат — в этом формате есть канал отвечающий за прозрачность.
Обыгрывайте название, заголовки, телефоны: чтобы элементы хоть иногда тень отбрасывали, чтобы были градиенты, для каких-то элементов добавить бликов, разбавьте монотонно закрашенные прямоугольники более интересными — чтобы падала легкая тень на какую-то часть — играйте со светом, лучше добавить текстуру, пусть хотя бы добавлением монохромного шума в 1%. Для бликов скачай себе кисточки звездочек, искр и т.п. — ими просто пользоваться — выбираешь белый цвет, размер кисти, щелчок и готово!
Очень модно делать отражение названия и логотипов — стильно смотрится и несложно. Что касается теней, стыков разных картинок и прочего — пользуйся масками, меня очень выручает.
Еще начинающие дизайнеры грешат тем, что вся текстовая часть, например, контактных данных выполнена одним цветом, одним шрифтом — одним стилем. Разделяйте блоки по смыслу.
Хотя даже телефон можно разбить на две части: +7 (495) и другую более информативную: 782-28-85. Соответственно менее информативную можно приглушить выбрав для нее, например, серый цвет, который не будет в бросаться в глаза. Обычно приглушаю слова: «тел.:», «e-mail:», «http://».
Еще бывает ширина макета ровно по информативную часть, а зачастую у людей экран позволяет смотреть много больше по ширине, т.е. с боков должен быть фон. Ну и соотвественно фон может быть другого цвета нежели информативная часть страницы или вовсе быть картинкой или хотя бы градиентом и/или даже информативная часть может отбрасывать тень на этот фон.
По количеству цветов — обычно берется два цвета помимо цвета фона и этими цветами все пишется, меняется величина шрифта, иногда нужно сам тип сменить (например для логотипа), иногда отбросить тень, сделать обводку, чуть приглушить, но все равно придерживаться 2-х цветов. Плодить количество цветов для текста не нужно, но одного как-правило не достаточно, т.к. нужен обычный цвет для основной массы текста и тот который бы бросался в глаза — для выделения, например, заголовков, пунктов меню.
Еще раз повторюсь: не забывайте добавлять текст, например, новостной блок как правило есть на каждом сайте. Менее информативные вещи можно приглушить: дата новости мелким шрифтом и менее ярким цветом. Призыв к действию «Читать далее…» можно сделать жирным и ярким цветом, шрифт при этом можно уменьшить.
Бывает так что вставляют в качестве фона красивую картинку, а поверх пускают текст и на фоне этой картинки текст ну очень сложно читаем — буквы сливаются с некоторыми элементами картинки. Приглушите картинку, например, полупрозрачным слоем (по размеру текста) или «замыльте» картинку под текстом, чтобы она стала более однородной и можно было бы подобрать цвет текста который бы был читабельным над всей картинкой.
Ну и самое наверное главное: чтобы велосипеды не изобретать — перед тем как браться за проект, например, по строительным материалам я набираю в Яндексе «строительные материалы» и просматриваю 100-200 сайтов. Смотрю идеи которые реализованы в дизайне этих сайтов, понравившиеся оставляю в закладках и лишь затем приступаю к созданию макета.
Надеюсь информация, которую изложил будет полезна и вы избежите стандартных ошибок.
Навыки порождают мастерство! (китайская народная мудрость)
Успехов в творчестве! Дерзайте!
Денис Дениско (beyondd)
весьма информативно,молодца!