Основы успешного веб дизайна часть II

Автор:Дата:обсуждаем современный взгляд на веб дизайн такого элемента, как шапка сайта

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

Шапка сайта

Еще издавна народ говорил: «По шапке – встречают!» — Вот и современный веб дизайн чтит эту мудрость. Некоторые из нас еще помнят времена, когда шапка сайта или блога являла собой некий изыск красоты и графических возможностей дизайнера. Сегодня в этой области намного больше смысла.

Важность шапки сайта или блога

За несколько последних лет были проведены многочисленные исследования, которые, наконец, открыли глаза разработчикам сайтов. Согласитесь: первый экран страницы блога или сайта – самая лакомая ее часть. Здесь авторы должны попытаться сосредоточить всю наиважнейшую информацию. И, даже не отрицая вовсе красоту шапки, ее стараются сделать более полезной с точки зрения интернет-маркетинга. Нередко здесь располагают call to action – призыв к действию, интерактивный элемент, ведущий прямиком на целевую страницу.

call to action в шапке сайта

Здесь нет ни красот, ни эффектов! Все запредельно просто и ясно: логотип и кнопка, ведущая к регистрации + упоминание о том, что 15 дней можно испытывать сервис бесплатно 

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

Интерактивные элементы

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

 интерактивный веб дизайн

Многообразие интерактивных элементов в шапке сайта ИКЕЯ: каждый человечек играет свою роль, на каждый предмет можно кликнуть — в общем, можно «залипнуть» минут на пятнадцать…

Крупные элементы шапки сайта

Скажите — громко, нарисуйте – крупно! – Как и в случае с фонами для блогов, в веб дизайне шапки сайта размер имеет значение. Лаконичное высказывание идеи ресурса – это одно, максимально качественное и максимально крупное изображение. Можно назвать это изображение супер-идеей или сверхзадачей. Покажите человеку, подыскивающему себе шкаф, четкое, яркое, максимально реалистичное изображение шкафа – и он почувствует, что здесь его ждали.

фото людей в шапке сайта

Здесь нас встречают Шеф и его поманда. Причем, повара заняты делом, а Шеф готов к общению с клиентом…

крупные изображения в шапке сайта

Хотите привлечь внимание людей? — Покажите им милых щеночков и котят. И покрупнее!!!

Если же мы не занимаемся продажей конкретных предметов – крупное изображение в шапке сайта должно представлять идею, автора. Часто – это некий аватар, образ, который должен символизировать и персонализировать наш ресурс. Вспомните Мурзилку – это прекрасный пример подобного аватара.

аватар в веб дизайне

Вот забавные рисованные персонажи — аватары сотрудников. Вероятно, здесь нет портретного сходства. Это архетипы специалистов IT бюро:) Именно такими нам их приятно представлять!

Фото в шапке сайта

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

фото-абстракция в шапке сайта

Где шапка в этом шаблоне? Вы наблюдаете тут хоть одну шапку? — Это же просто фото на фоне!

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

совпадение элементов веб дизайна

Что это, еще фон или уже шапка? — И то, и другое. Хорошее решение для масштаба 

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 23.07.2012


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Основы успешного веб дизайна часть II" оставлено 13 коммент.

  1. Насчёт мимишных котят — это в точку!

  2. Блоготей кнопки меняет как перчатки! А у меня все время вкусы меняются. То мне такие шапки нравятся, то такие. И фоны тоже.

    • Точно, такая красотища — эти кнопки. Вот у кого нужно учиться! Прям белая зависть разбирает — очень красиво и гармонично по дизайну.

      • katyaru:

        Спасибо! Просто вчера, наконец, сложился образ дизайна — и сразу все сделалось)

  3. О шапках — вот так бы сидела и смотрела, сидела и смотрела, даже забыв, чего, собственно, сюда заглядывала!.. ))) Замечательные старцы! )))

  4. Во! И я пришла сказать — ТАК лучше всего!!! Красиво)

  5. Мне себе шапку трудно подобрать: в магазине, на рынке тысячу перемеряю — всё, что-то смущает. Также и шапку для блога — долго ищу :)

  6. Ирина:

    Я тоже обращаю на шапку и кстати очень люблю фото, без них скучно.

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

  8. Сейчас, как раз, думаю над шапкой сайта, полезно и вовремя.

Оставить свой комментарий


+ 9 = восемнадцать

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

Наверх.