Интерфейс сайта

интерфейс сайта

От автора: Хотя основа основ дизайна — это творчество, всё-таки некоторые элементы интерфейса сайта будет полезно иметь в запасе. В этой статье я покажу 15+ самых важных деталей пользовательского интерфейса сайта, которые пригодятся каждому. Используя эти небольшие подсказки, вы сможете получить красивый и практичный дизайн, используя меньше сил и времени.

1. Сетка

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

автор

Автор: Найко Михаил

Всем привет, я — Найко Михаил — дизайнер, иллюстратор и блоггер. Живу и работаю в Москве. Кроме страсти к дизайну и веб-технологиям, люблю кино, спорт и свою девушку) Также смотрите мой блог о веб-дизайне.
Сайт: http://naikom.ru/blog/ – «Блог о веб-дизайне»

Бренд (логотип, слоган и т.д.), в левом верхнем углу

Навигация — в верхней части сайта, а также желательно слева

Основное содержание — центр страницы

Объявления — справа страницы

Footer не содержит в себе важной информации (либо содержит её дубликат), обычно это ссылки на внутренние страницы и контактные данные.

На этом примере я нарисовал воображаемую сетку

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

И ещё один пример использования сетки в дизайне .

2. Вертикальная навигация

Мы встречаем левую и правую панель навигации всё реже, т.к. сейчас наметилась тенденция в упрощении меню и перехода на горизонтальный вариант. Однако, вертикальная навигация не исчезнет просто потому, что не всегда горизонтальный вариант так уж универсален. Так, вертикальный вариант удобней для меню со сложной или длинной структурой дерева. Возьмём, к примеру, molotok.ru.

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

Хороший простой пример вертикальной навигации

Вертикальное меню расположено слева, под логотипом

3. Горизонтальная навигация

Горизонтальная навигация обычно используется для несложных и не длинных списков ссылок. Очень удобно разместить её над или под логотипом. Кроме своей заметности, горизонтальное меню имеет и ещё один плюс — это экономия места. Вертикальное меню забирает пространство, исходя из длины самого длинного слова. А вот горизонтальное меню «растёт» разве что немного в высоту, да и то всегда можно поиграть margin’ами и padding’ами.

Обычное (с хорошим дизайном) горизонтальное меню

Авторы этого меню пошли дальше, и добавили подкатегории

Ещё один пример хорошего оформления горизонтального меню

4. Выпадающие списки

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

Элегантное выпадающее меню

Модифицированное меню, добавлено оформление картинками

Выпадающее меню бывает не только горизонтальным, но и вертикальным

5. Хлебные крошки

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

Текущая страница выделяется цветом

Текущая страница никак не выделяется. Авторы сыграли на логике посетителя)

Текущая страница никак не выделяется. Зато выделены корневые страницы

6. Список записей

Блоги всё популярней, и у каждого есть список постов, что логично. Каждый такой список состоит из «превьюшек» постов. А «превьюшки» , в свою очередь, из заголовка статьи, краткого содержания, количества комментариев и тому подобной общей информации. Главный акцент мы всегда делаем на названии. Оно должно быть крупным, раскрывающим тему, без лишних слов и содержаться в тегах h1 или h2. «Превьюшка» должна заинтриговать читателя, чтобы у него появился интерес посмотреть пост, полазить по сайту.

Отличный дизайн: содержит заголовок, автора, категорию, количество комментариев и ретвитов, сам текст, картинку и кнопку «читать далее»

В развёрнутом виде отображается только последняя запись, остальные — в виде небольших «превьюшек». Такой вариант экономит место .

Каждая запись оформлена в виде страницы блокнота

7. Архивы

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

Подробный архив, где есть сортировка записей по категориям и тегам

Этот архив включает удобную временную навигацию

Отличный пример, где сочетается архив по датам и по записям

8. Футер с контентом

Времена простеньких футеров, похоже, уходят, и в моду входят футеры красивые и полезные. Туда можно поместить те же архивы, контакты, информацию об авторе (владельце) блога, меню и ещё кучу разной полезной информации. В функции футера вполне может входить привлечение посетителей для просмотра других страниц сайта. Конечно, желательно его красиво оформить. Как вариант, многие используют 3-4 колонки, в которых содержаться внутренние ссылки и информация, а так же подписки на RSS и Email.

Трехколоночный информативный футер

Пример отличного графического оформления футера сайта

Футер с интересным элегантным дизайном

9. Нумерация страниц

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

Тут я, наверное, никого не удивил, т.к. эта схема довольно распространена. Здесь чётко выражена текущая страница, её соседи, а также есть доступ сразу к последним (и первым) записям.

Один из самых часто-встречающихся вариантов оформления прокрутки страниц

А вот более интересный вариант оформления

10. Модальные вкладки

Модальные вкладки в компактном виде содержат дополнительный контент, который становится открытым только тогда, когда этого захочет пользователь. Когда возраст блога позволяет ему, например, иметь большой архив с большим количеством тегов и категорий, можно распределить их в несколько вкладок, чтобы они не занимали много места. Разумеется, выводить таким способом можно всё, что угодно, и способы оформления могут быть самыми разными.

На этом примере на каждой новой вкладке — разный тип блюд ресторана

Здесь автор предпочёл разместить в одном месте свои работы, разбив их по категориям

Журнал предлагает выбрать посетителю тот контент, который ему нужен

11. Участвуйте в системе оценок.

Большинство современных сайтов/блогов направлены на взаимодействие с пользователем. И многие стремятся сделать свои странички всё более интерактивными.
Помещайте на сайт кнопки Stumbleupon / Twitter / Vkontake и т.д. — и вы увидите, как страницы оживут.

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

Пример, в котором авторы делают упор на социальные сети

Здесь читатель может как поделиться статьей с друзьями, так и отложить себе в закладки

12. Информационная панель

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


Google Analytics — один из самых ярких примеров хорошо сделанной информационной панели.

Ещё один пример хорошего дизайна и юзабилити при работе с данными.

Графики используются и в отображении котировок акций. Это — один из примеров оформления.

13. Простая регистрация

Все мы встречаемся с формой регистрации на сайтах, и многие из нас вынуждены по тем или иным причинам регистрироваться часто. Думаю, все согласятся, что предложение ввести подтверждение e-mail или сложный непонятный текст защиты на 3-й странице формы регистрации нагоняет тоску. Все эти излишества совсем не упрощают жизнь посетителей. Вот почему важна максимально простая форма регистрации. Пользователь не должен думать, что он что-то забыл вписать, или вглядываться в символы . Если же вам хочется вытянуть максимум информации из пользователя , сделайте так:
Чтобы зарегистрироваться он должен ввести логин, почту и пароль. А после регистрации предложите ему заполнить другие поля анкеты.

Отличный пример просто формы регистрации, хотя и не максимально короткий

На Vimeo размещён вариант самой короткой формы регистрации — всего три(!) поля

Facebook — ещё один пример хорошего исполнения формы

14. Акценты

Оживите свою страницу. Акцентируйте важные слова/фразы. Играйте размером, шрифтом, цветом, оформлением. Ведь первым делом посетитель должен увидеть то, на что вы ему укажите. Правда, немного сложнее заставить его увидеть части страницы в нужном ПОРЯДКЕ. Но и это решаемо.

Важные фрагменты текста выделены бирюзовым цветом

Главная надпись страницы максимально увеличена и написана другим шрифтом

Каждая новая строка «затухает» относительно предыдущей

15. Отображение Коллекций

Многие из нас любят похвастаться своими друзьями, коллекциями картинок, ресурсами, фотографиями и т.д. Чтобы отобразить эти коллекции, используются несколько разных способов.
Кто-то использует сетку из «превьюшек», а кто-то — некий список из картинок.

Автор отобразил свою коллекцию фотографий вот в такой сетке

На этом примере мы видим такое своеобразное отображение дружеских ссылок

Простое и стильное отображение последних работ дизайнера

16. Поиск

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

Простая и мягкая по тонам форма поиска

Пример необычного оформления формы поиска

И ещё один пример нестандартного оформления нашей формы

17. Формы

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

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

На этой странице вы можете наблюдать процесс поэтапного заполнения формы

Ещё один пример поэтапного заполнения формы. Активная стадия выделяется цветом

Другой вариант оформления — активный процесс открывается в новой вкладке

18. Подписки

В то время как блоги и социальные сети набирают популярность, появилась тенденция размещать несколько кнопок подписки. Как правило, минимум это RSS и Twitter. Люди стараются сделать страницы более живыми и коммуникативным, максимально облегчая читателям возможность следить за новостями.

Вместе с кнопками подписки сразу же указано и количество подписчиков

Когда я увидел этот вариант — мне сразу бросился в глаза элегантный дизайн

Максимально простой вариант — лишь кнопки подписки, плюс ссылки на социальные сети

19. Слайдеры

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

Отличный, простой, стильный слайдер.

А это — довольно распространённый пример слайдера

Хороший необычный пример оформления слайдера

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

Успехов!

С уважением Найко Михайл.

киберсант-вебмастер

Автор: Найко Михаил

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Хотите узнать, что необходимо для создания сайта?

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (16)

  1. Николай

    Андрей, хорошо то, что в меру; об этом я уже дискутировал с Вами. Ваш курс достаточен, для оживления «сухого» делового ресурса. К сожалению, красивые но безсодержательные сайты — беда в интернете — это перспективы борьбы для поисковиков. Такие сайты пригодны лишь для размещения рекламы. Кому что надо в интернете; я, например, ищу страницы, содержащие основательную информацию по интересующей меня предметной области и «перетерплю» если это текст на белом поле. Раздражают сайты с красивыми не относящимися к делу картинками, где с трудом можно найти содержание, совпадающее с заявленной тематикой (это «воровство» времени пользователя).
    С огромным уважением к Вашему творческому коллективу; извините, если что-то не так высказал.
    Николай Исаев.

  2. Виктор

    Спасибо, Михаил (или Михайл)! Всё-таки есть на Земле добрые люди, которые всегда придут на помощь. Особенно важно, чтобы помощь была своевременной. Всё прекрасно, но нет главного — в какой программе всё это делается? Если Java Web Start будет достаточно, я буду просто счастлив!… Ещё раз спасибо за бесплатные уроки, мне, как человеку имеющему проблемы с позвоночником, это будет неоценимой помощью. Всех Вам благ !!!

  3. Василий Сенченко

    Благо дарю вам, Михаил! Впервые я встретил такую подборку визуальных штучек оформления сайтов и подробную аналитическую проработку. Ваш, сайт Михаил, тоже можно воспринимать примером удачного оформления. Мне очень пригодятся ваши рекомендации в моем проекте «Сайт — за 12 часов!»

  4. Александр

    Мне вот интересно: индексируется ли информация в скрытых модальных вкладках. Экономия места — хорошо. Но, что если скрытый контент не индексируется поисковиками?

    • Сергей

      Спасибо создателям этого сайта за множество полезной инфы!
      Присоединяюсь к вопросу Александра по поводу модальных вкладок.
      Уважаемые гуру веб-дизайна, подскажите индексируются ли вкладки всеми поисковиками т.к. я ими также люблю пользоваться, но гложут смутные сомнения…. И еще вопрос: почему при пользовании на сайте проги Google-translate эти самые вкладки перестают листаться и открыта только первая притом в разных браузерах, как это можно устранить?
      Заранее благодарю ;)

  5. Алексей

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

  6. naikom

    Николай:

    Вы утверждаете, что сайтам интересные решения не нужны, так я понимаю?

    Виктор:

    Для начала вам будет досточно владение Photoshop, HTML и CSS. Остальное придёт)

  7. Сергей

    Все это о чем Вы пишите давно отлажено и настроено,я хочу предложить абсолютно новый подход,так скажем замануха покупателя на торговой сайте,мимо которого он не сможет пройти,не заказав что-то за «2 копейки» при стоимости 3 рубля,далее самое интересное,ПСИХОЛОГИЯ ЧЕЛОВЕКА, который живет там где ему нравится,удобно.
    Схему я представляю,психологию знаю,а вот как раскрутить нет…
    Пример: размещаем электричесике схемы на сайте,далее товары,далее услуги,стоимость на схемы копейки,товары дорогие но
    качественные,услуги по регионам…. взять масштаб региона при обращении 5000-7000 в сутки ,при стоимости 10 рублей….
    Интересно пишите….

    • Аня

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

  8. Dima

    Спасибо Михаил! Доступно и познавательно.

  9. naikom

    Александр

    индексируется

  10. рома

    а поставте поисковик на Ваш сайт а то тяжело (Web for my Self) пожалуйста

  11. Димко

    Спасибо большое вам Михаил! ..За ваши уроки. Я обязательно поставлю на свой сайт ваш баннер.Много чего понятного и читабельного рассказано! .. Но я не думал что есть бесплатные уроки. С наилучшими пожелания! Дмитрий.

  12. TRSteep

    Хорошие примеры дизайна, сразу начинаешь что хорошее на заметку брать, что подходит для проекта ;)

  13. Егор

    Полезная информация. Спасибо, не зря подписался!

  14. Евгений

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree