+7(919)219-14-03
Персональный менеджер
Уроки веб-дизайна. Дизайн внутренних страниц и всплывающих окон

Уроки веб-дизайна. Дизайн внутренних страниц и всплывающих окон

Взаимодействие между страницами сайта. Когда вы создаете сложный проект с несколькими страницами, важно продумать взаимодействие между всеми страницами. Каждый функциональный элемент (кнопка, кликабельные иконки, ссылки и т.д.) должны вести пользователя на:

14 июля в 17:45

  • другую страницу сайта
  • другой раздел этой же страницы
  • сторонний сайт(например, иконки соцсетей)

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

Навигация.

Система навигации на сайте–это набор гипер ссылок, созданный для переходов по разделам сайта для поиска конкретной информации.

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

Виды ссылок:

  • текстовые (чаще всего их подчеркивают и выделяют цветом, чтобы пользователь их заметил)
  • графические (иконки, кнопки, фотографии, логотип)

Урок №4 Уроки веб-дизайна. Дизайн внутренних страниц и всплывающих окон

Элементы навигации:

  • Меню
  • Поисковое поле
  • Логотип
  • Скроллинговые стрелки
  • Кнопки
  • Иконки
  • Текстовые ссылки
  • Блоки с фотографиями

Меню.

1. горизонтальное:

  • закрепленное невыпадающее
  • незакрепленное невыпадающее
  • закрепленное выпадающее
  • закрепленное невыпадающее

2. вертикальное

-гамбургер

3. смешанное

Поиск.

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

  • развернутая строка
  • раскрывающиеся из иконки
  • отдельная строка для поиска

Логотип.

Служит не только для идентификации компании сайта, но и ведет на главную страницу сайта.

Скролл-стрелки.

1. Скролл вверх-необходимы для быстрого возврата к началу страницы и приемлемы на длинных сайтах (чаще всего встречаются в социальных сетях и длинных лендингах).

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

Кнопки.

1. Отправить информацию (используется вместе с инпутами в форме заявки).
2. Ознакомиться с информацией (кнопка "далее", "подробнее", "читать полностью", и так далее).
3. Купить продукт (переводить на страницу покупки или автоматически добавляет товар в корзину).
4. Авторизация (кнопки Log ln, Sign up, Join и так далее).

Иконки.

-образные (элементы декора и подкрепления текстовых блоков)
-сервисные (кликабельные и играют функциональную роль)-именно они являются элементами навигации:

Примеры сервисных иконок:
1. иконки соцсетей
2. корзина
3. сообщения/уведомления

Текстовые ссылки.

Чаще всего встречаются в статьях новостных порталов для перелинковки или же как альтернатива кнопкам.

Блоки с фотографиями.

Кроме текстовой информации дают визуальное подкрепление.

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

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

Основные правила юзабилити.

1. Хорошо продумайте структуру навигационного меню, так как именно от его понятности и однозначности будет зависеть скорость нахождения информации пользователем.
2. Не используйте на сайте тяжелые файлы (долгие видео-ролики, флеш-презентации так далее), так как скорость загрузки сайта и отдельных его элементов из-за этого сильно снизится.
3. С главной страницы до любой внутренней страницы должно вести максимум три клика (последовательные ссылки). Во-первых, благодаря этому сайт лучше индексируется поисковыми системами, а во-вторых это не дает пользователю запутаться в функционале.
4. Делайте акцент на функциональных элементах сайта - кнопки, иконки, ссылки - все они должны быть заметны и понятны по смыслу пользователю.
5. Самая важная информация на вашем сайте должна находиться в самом начале, так как до самого конца сайта (особенно очень длинного лендинга) доходит лишь 10% пользователей.

Как же понять, удобный ли у вас проект?

Дайте ваш макет коллегам и друзьям и ничего о нем не рассказывайте. После того, как они его посмотрят и протестируют, спросите “О чем был проект? Насколько легкой или сложной было это понять? Какие основные действия на нем можно выполнить?”.

Это помогает добраться до сути юзабилити и правильного подхода к проектированию макетов: как пользователи справляются с задачами и насколько сложно им это дается? Суть юзабилити-упростить решение задачи для пользователя.

Длинный одностраничник VS небольшой многостраничник.

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

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

Всплывающие окна (pop-up).

Окна, появляющиеся в центре экрана и несущие определенную информацию на сайте:
-автоматически появляющиеся в независимости от пользователя (реклама, акции)
-появляющиеся пожеланию пользователя (регистрация на сайте)

Преимущества использования всплывающих окон:

1. Экономят место в макете, т.к. по сути они накладываются на текущую страницу сайта.
2. Не переводят пользователя на другую страницу, а значит не отвлекают от работы (вероятность того, что юзер продолжит находится на сайте и выполнять на нем свои задачи, намного выше, чем если бы он перешел на другую страницу и прервал свою работу).

Основные правила создания всплывающих окон:

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

Видео-уроки:

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/uroki-vebdizaina-dizain-vnutrennih-stranic-i-vsplyvaiuscih-okon-60b36bfbbf8e387a92225992

1) Дизайн внутренних страниц и всплывающих окон в веб-дизайне.

2) Практическое занятие в фотошопе по созданию дизайна внутренних страниц и всплывающих окон.

3) Завершающий видеоурок в фотошопе по созданию дизайна внутренних страниц и всплывающих окон сайта.

4) Зачем нужны всплывающие окна на сайте. Создание "pop-up" в фотошопе.

5) Оформление проекта в фотошопе для портфолио на Behance.

Мы разобрали модуль №4 Уроки веб-дизайна. Дизайн внутренних страниц и всплывающих окон

Дальше интересней и насыщенней, следующей урок - Дизайн интернет-магазина (часть 1). Подписывайся чтоб ничего не пропустить.

Урок №3 Веб-дизайн колледж. Создание главной страницы сайта https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-kolledj-sozdanie-glavnoi-stranicy-saita-60ae8a38156c7c57e2ba5f5a

Уроки веб-дизайна. Дизайн внутренних страниц и всплывающих окон


Подарок внутри! Подписка на обновление блога по Web-дизайну.
Бесплатный подарок для подписчиков нашего блога->
Курсы по Веб-дизайну!
* Поля, обязательные для заполнения
Нажимая "Подписаться", Вы принимаете условия обработки персональных данных.
Теги: Web-дизайн

Другие статьи блога

Способы разрешения конфликтных ситуаций
Способы разрешения конфликтных ситуаций
Заказать Landing
Заказать Landing
Как выбрать цвет
Как выбрать цвет

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(14) "34.226.244.254" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "0e744b439b03d01aadfccdcc2f9b50c9" }