Разработка дизайна сайта

Разработка эффективного дизайна сайта.

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

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

Помним о деталях.

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

Ресурсы

Разработка дизайна сайта выполняется не за один день. Дизайнеру понадобится не менее трех недель плодотворной работы. В итоге вы получите полностью законченный дизайн главной и всех внутренних страниц, в формате psd. Дополнительно делается кроссбраузерная верстка сайта и сбор его html прототипа на базе javascript или flash.

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

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

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

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

Разработка дизайна сайта — 6 критериев качества

1. На первом месте удобоваримость и привлекательность сайта для пользователя. Он должен создавать позитивное впечатление и соответствовать своей тематике. Используйте распространенные шрифты, цвет текстов должен быть контрастным, максимально контрастировать с фоновым рисунком страницы, чтобы пользователь спокойно просматривал страницы ресурса, без перенапряжения зрения.
2. На втором месте удобство в пользовании. Интуитивный интерфейс и грамотное наполнение необходимой информацией. Посетитель без труда находит всю необходимую информацию, форму обратной связи, контакты, текст «О компании» и так далее.
3. Соответствие корпоративному стилю и рекламной стратегии компании, что в свою очередь формирует доверие и позитивное впечатление о компании.
4. Грамотная структура и сбалансированность информации. На сайте должна присутствовать визуальная иерархия распределения важной информации. Акцент должен ставиться на наиболее значимых моментах, отделяя их от второстепенной информации, чтобы сайт был понятным. Не перегружайте страницу большим объемом графики, вы рискуете вызвать раздражение посетителя.
5. Ориентация на конкретную целевую аудиторию – важный критерий, который полностью определяет конечный проект сайта, его основные цвета, стиль, дизайн, верстку и так далее.
6. Необходимо всегда помнить, что сайт — визитная карточка и лицо компании! Сегодня доверие внушают те компании, которые имеют хороший сайт. Продуманный и удачный дизайн сайта отражает уникальный образ и стиль компании, выделяет ее среди массы конкурентов.

Разработка дизайна сайта и целевая аудитория

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

Пользователи интернет ресурсов делятся на несколько типов.

1. Пионеры или новаторы. Таких посетителей мало, по результатам исследований – не более 5% от общей массы. Это продвинутые пользователи, быстро воспринимающие информацию и отслеживающие появление новинок в сфере технологий. Они имеют модернизированные компьютеры с новейшим программным обеспечением и пользуются высокоскоростным интернет соединением. Учитывая потребности этой группы нужно создавать современный, техничный и авангардный дизайн. Такие сайты динамичны, используют видео и flash-анимацию. Авангардный дизайн не стоит применять для сайтов, которые рассчитаны на широкую аудиторию, на компьютерах прошлого поколения такой сайт даже не загрузится. Например, на сайте учебной организации, фонда, интернет-магазина или почтовом сервисе, использование такого современного стиля будет неуместно. У интернет-магазина снизится прибыль, а почтовый сервис потеряет немало клиентов.
2. Основная масса пользователей ресурсов — 70% от общей массы. Эти люди часто совершают покупки товаров или услуг по интернету.
   Представители данного сегмента хорошо воспринимают дизайн, внушающий доверие и надежность. Им нравится четкий, классический дизайн, со строгой шапкой, обязательным присутствием логотипа, слогана и названия. Минимальное количество изысков графики или анимации, ее вообще лучше свести к минимуму. Навигация интуитивная и удобная. Как правило, цвета используются сдержанные и нейтральные. Такой стиль внушает доверие и создает ощущение стабильности и надежности, применяется для имиджевых и корпоративных сайтов.
3. Пользователи с устаревшими компьютерами любят простой текстовый дизайн, с минимумом графики и максимумом текста. Эти сайты быстро грузятся и совместимы с разными браузерами. Дизайн, состоящий в основном из текста, подходит для учебных заведений, благотворительных организаций, фондов, научных сайтов.
4. Возраст вашей целевой аудитории – один из важнейших факторов, серьезно влияющих на весь дизайн и стиль вашего сайта. Юная аудитория лучше воспринимает яркие и сочные цвета, графику, спецэффекты. Сайт, ориентированный на взрослых людей, не должен быть очень ярким, спецэффекты вообще не уместны.
5. Половая принадлежность посетителей также должна быть учтена при проектировании дизайна. Женщины и мужчины имеют разное восприятие цветовой гаммы. Научно доказано, что женщины лучше воспринимают красный, а мужчины — синий цвет. Если предложить мужчине выбрать желтый или оранжевый цвет, то он, в большинстве случаев, выберет желтый, а женщина, чаще всего, — оранжевый.

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

Выбор типа верстки на этапе дизайна сайта

Два основных типа html-верстки сайта:

1. Фиксированная или статичная верстка. Сайт не резиновый, ширина не меняется на разных мониторах.
2. Адаптивная или резиновая верстка дает возможность создать сайт, по-разному отображающийся на разных устройствах.

Разработка дизайна сайта — общие правила

1. Заполняем бриф на разработку дизайна сайта. Перечитываем, обдумываем, сответуемся с коллегами, обсуждаем с подрядчиком. После того, как все вопросы решены, концепция утверждена и цели обозначены – начинаем разработку.
2. Создание предварительного наброска на бумаге. Набросок чернового эскиза, с целью обрисовать сетку, композицию, расположение элементов и блоков.
3. Проработка общей композиции: хедер, основные блоки, футер.
4. Детализация, отработка цветовой схемы, проработка мелких элементов.

Ровно? По сетке!

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

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

Адаптивный дизайн.

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

При разработке резинового сайта нужно помнить:

• При растягивании или сжатии общая композиция сайта должна оставаться целостной и одинаковой.
• Все блоки сайта и его элементы меняют масштаб исходя из размеров монитора и размеров использованного шрифта.
• Блоки сайта, сетка и горизонтали масштабируются в %, а отступы, вертикали и шрифты — в em.
• Картинки могут быть исключением.
• Оптимально использовать «полу-резиновый» дизайн, т.е. растяжение или сжатие до определенного размера.

Минимально возможное сжатие сайта:

Сегодня существует два минимума: 760 px и 990 px. 760 px применяется согласно ресурсам, рассчитанным на широкую и массовую аудиторию, например, поисковики, новостные сайты, почта и так далее. 990 px применяется, как правило, для имиджевых и промо ресурсов.

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

Максимальное растяжение сайта:

Рекомендуемый диапазон растяжки не больше, чем 1,5-2 раза больше минимального сжатия, чтобы не разрушать композицию сайта.
Определяемся с тем, в какую часть экрана будет впоследствии выравниваться страница, если монитор пользователя будет шире максимального растяжения.

Запас на увеличение размера сайта

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

Особенности работы с текстом.

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

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

1. Поместить текст в виде картинки. Но растрирование оставляет на буквах заметные засечки, что делает их нечитабельными, а еще этот текст никогда на проиндексируется в поисковиках, что вредит продвижению. А также картинки много весят и ресурс будет дольше грузиться.
2. Подобрать более популярные шрифты, схожие с корпоративным шрифтом. После чего, прописать шрифты от более похожего на корпоративный к обычному и распространенному шрифту. Это должен сделать верстальщик.
3. Попробуйте использовать сервис Cufon от jquery. Он дает возможность подгрузить нестандартные шрифты на сайт. Это сработает только со шрифтами в формате .ttf.
4. В идеале вы должны убедить заказчика внести изменения в бренд бук его компании и, по возможности, поменять шрифт на один из распространенных, например, Arial.