Урок №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.Простое и заметное закрытие окна (крестик в верху поп-апа).
Видео-уроки:
1) Дизайн внутренних страниц и всплывающих окон в веб-дизайне.
2) Практическое занятие в фотошопе по созданию дизайна внутренних страниц и всплывающих окон.
3) Завершающий видеоурок в фотошопе по созданию дизайна внутренних страниц и всплывающих окон сайта.
4) Зачем нужны всплывающие окна на сайте. Создание "pop-up" в фотошопе.
5) Оформление проекта в фотошопе для портфолио на Behance.
Мы разобрали модуль №4 Уроки веб-дизайна. Дизайн внутренних страниц и всплывающих окон
Дальше интересней и насыщенней, следующей урок - Дизайн интернет-магазина (часть 1). Подписывайся чтоб ничего не пропустить.
Урок №3 Веб-дизайн колледж. Создание главной страницы сайта
