1

Дизайн сайта. Рекомендации начинающим по web-дизайну

Смотрю на работы начинающих web-дизайнеров:  у всех приблизительно одни и те же проблемы при разработке макетов сайтов. Чтобы не повторять каждому решил описать в одной статье общие наиболее распространенные ошибки и пути их устранения.

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

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

Лично у меня  макеты страницы содержат по пол сотни слоев. Кстати для структурирования рекомендую слои раскладывать по группам-папкам.

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

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

Обыгрывайте название, заголовки, телефоны: чтобы элементы хоть иногда тень отбрасывали, чтобы были градиенты, для каких-то элементов добавить бликов, разбавьте монотонно закрашенные прямоугольники более интересными — чтобы падала легкая тень на какую-то часть — играйте со светом, лучше добавить текстуру, пусть хотя бы добавлением монохромного шума в 1%. Для бликов скачай себе кисточки звездочек, искр и т.п. — ими просто пользоваться — выбираешь белый цвет, размер кисти, щелчок и готово!

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

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

Хотя даже телефон можно разбить на две части: +7 (495) и другую более информативную: 782-28-85. Соответственно менее информативную можно приглушить выбрав для нее, например, серый цвет, который не будет в бросаться в глаза. Обычно приглушаю слова: «тел.:», «e-mail:», «http://».

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

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

Еще раз повторюсь: не забывайте добавлять текст, например, новостной блок как правило есть на каждом сайте. Менее информативные вещи можно приглушить: дата новости мелким шрифтом и менее ярким цветом. Призыв к действию «Читать далее…» можно сделать жирным и ярким цветом, шрифт при этом можно уменьшить.

Бывает так что вставляют в качестве фона красивую картинку, а поверх пускают текст и на фоне этой картинки текст ну очень сложно читаем — буквы сливаются с некоторыми элементами картинки. Приглушите картинку, например, полупрозрачным слоем (по размеру текста) или «замыльте» картинку под текстом, чтобы она стала более однородной и можно было бы подобрать цвет текста который бы был читабельным над всей картинкой.

Ну и самое наверное главное: чтобы велосипеды не изобретать — перед тем как браться за проект, например, по строительным материалам я набираю в Яндексе «строительные материалы» и просматриваю 100-200 сайтов. Смотрю идеи которые  реализованы в дизайне этих сайтов, понравившиеся оставляю в закладках и лишь затем приступаю к созданию макета.

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

Навыки порождают мастерство! (китайская народная мудрость)

Успехов в творчестве! Дерзайте!

Денис Дениско (beyondd)

Поделиться с друзьями с соц.сетях :
Добавлено в: Без рубрики Метки: 

Последние записи

Закладки и Отметки

Один Ответ к "Дизайн сайта. Рекомендации начинающим по web-дизайну"

  1. септик:

    весьма информативно,молодца!

Оставить ответ

Вы должны Войти , чтобы добавить комментарий.

© 2019 Территория Beyondd. Все права защищены. .
Powered By Wordpress Hackz.