Ответ
Теория вкусного сайта Опции темы
Старый 04.02.2013, 21:47
  #1
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,370

Теория вкусного сайта
"Мы сделали кнопки на экране настолько хорошими, что вы будете хотеть их облизывать"
Стив Джобс (с)

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

Что делать, если ваши посетители прочитали текст и ушли безвозвратно? Может стоит взглянуть на внешний вид сайта глазами этого самого посетителя?

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

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





Хотите пробудить аппетит у ваших посетителей? Тогда несколько советов:

1.Подумайте о ваших гостях

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

Что вы должны знать о посетителях?

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

2. Говорите на языке типографики

Новый CSS3 позволяет вырваться из ограничений шрифтов в виде Helvetica, Times Roman, Tahoma и Verdana, которые мучили нас в течении многих лет, и чтоб выйти за эти рамки приходилось либо использовать рисунки, либо подключать кучу тяжелых библиотек, которые имели конфликт в разных браузерах. Но это время позади - вы можете представить свой логотип, слоган и прочее с помощью красивых шрифтов, не волнуясь как они отобразятся у посетителей.

Шрифты с засечками - те, с имеют "ножки" - это классические шрифты.
Рубленые шрифты - те, с имеют хорошо обтекаемые буквы - это современные.


Конечно, в обоих категориях есть исключения, но на них не стоит останавливаться.

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



3. Заменяйте картинки стилями



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

http://www.w3schools.com/css3/default.asp

4. Используйте цвета, которые характерны для вашего рынка

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

Как выбрать только два цвета из миллионов доступных?

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

Немного отойдя в сторону яркости, насыщенности, контраста вы сможете выбрать два УНИКАЛЬНЫХ цвета, который обеспечат запоминание

5. Используйте превьюшки с заманчивыми изображений

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

И второе: согласитесь, когда все рисунки на сайте играют в одном стиле с общим дизайном - это создает чувство уюта и стабильности.

6.Выводите информацию иерархически

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

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

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

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

7. Держите весь стиль в своих руках

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

И что теперь?

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

Итак:
  • Открываем блокнот и записываем какие цвета вы выбрали главными.
  • Какие шрифты и где вы используете
  • Какие изображения использовались в шапке, футере, какое оформление используется для заголовков H1, H2 И H3
  • Какой источник фотоматериала вы используете чтоб все фото в дальнейшем были тоже в одном стиле
  • Пополняйте этот список по мере того как вносите какие-либо дизайнерские изменения в свой проект


В завершение статьи хочется сказать несколько строк о психологии цвета.

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

Оранжевый: Здоровье, спокойствие, гармония.
Совет в применении оранжевого цвета: оранжевый цвет хорошо применять в детских сайтах или в фарме.

Желтый: Цвет равновесия, общения и открытости.
Этот цвет хорошо подойдет для туристических сайтов, детских (наделяет их "солнечностью")

Зеленый: Цвет релакса. Сайты такого цвета располагают к спокойной информации. Хорош для фармы

Розовый: "Женский цвет" - хорош для сайтов женской тематики, датинга, адалта...

Голубой: Цвет чистоты и гармонии. Хорош для сайтов связанных с водой, психологией, располагает к спокойности как и зеленый

Синий: Этот цвет хорошо применять там, где и голубой. Не вызывает негативных реакций и отрицательных эмоций.

Фиолетовый: Цвет стимулирующий в области креативности, творчества... В больших количествах не стоит использовать в вебдизайне, хорошо подходит для деталей призывающих к действию - как и красный.

Черный: Цвет одиночества и изоляции. Ассоциируется с меланхолией и унынием. Использовать много черного на сайте не стоит. Однако в разумных пропорциях хорошо сочетается с красным и фиолетовым, чем усиливает их эффктивность. Хорошо подходит для "полулегальных проектов", так как создает иллюзию мрака и скрытности.

Стильным будут сайты в темной гамме, т.е. темно синий, темно серый.... где черный идет в сочетании с "растворителем" другого цвета

Белый: противоположность черному - это символ открытости и честности. В последнее время получил применение как основной при стиле "минимализм". Можно использовать везде. Очень хорошо сочетается со всеми цветами без исключения. Тематика сайтов такой цветовой гаммы не ограничена
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 05.02.2013, 21:25
  #2
0pium
 
Аватар для 0pium
Регистрация: 04.01.2012
Сообщений: 600

Матрос коллеге дизайнеру за дельные советы плюс поставил... По цветам согласен на все 1000% вот бы еще заказчики понимали это, цены бы им не было! А то иногда как упрутся, все черное или все красное и никак ты их не переубедишь
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 06.02.2013, 15:57
  #3
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,370

Согласен, но умный заказчик всегда поддается аргументированному доводу, хотя есть и такие которым хоть кол на голове теши... Хотя в последнее время все больших людей которые слушают твои советы и готовы экспериментировать.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 06.02.2013, 16:01
  #4
0pium
 
Аватар для 0pium
Регистрация: 04.01.2012
Сообщений: 600

Матрос не знаю как у тебя, но у меня лично каждый 10й заказчик - это стабильно какой-то неадекват... сейчас как раз таки работаю с одним таким уникалом, которого абсолютно не волнует, что я говорю... это печально
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Метки
советы, стилистика, дизайн


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 01:54. Часовой пояс GMT +3.