Лекция_1.3_Презентация_Приемы_художественного_построения_веб-ресурсов

1.

Лекция 1.3.
Приемы художественного
построения веб-ресурсов
Преподаватель: Сигаренко Андрей Александрович

2.

План
● Приемы художественного построения
● Структурные компоненты веб-ресурсов
● Модели навигации
● Особенности разработки в зависимости от предметной области
● Задание
● Материалы

3.

Немного о предыдущей лекции
Разработка онлайн-сервиса музея ЗИЛ от идеи до реализации

4.

Приемы художественного
построения

5.

Создание художественно привлекательных веб-ресурсов требует сочетания
эстетики и функциональности.
Минимализм. Использование простых и чистых дизайнов с минимальным
количеством элементов. https://referest.ru/sites/minimalizm
Цветовая палитра. Подбор ограниченной цветовой палитры, которая
соответствует бренду и создает нужное настроение.
https://practicum.yandex.ru/blog/cvetovaya-palitra-dlya-sayta-kak-podobrat-cvet/
Типографика. Использование различных шрифтов для создания визуальной
иерархии и акцентирования внимания. https://habr.com/ru/articles/324944/
Визуальная иерархия. Организация элементов на странице так, чтобы
пользователи могли легко определить их важность.
https://blog.skedraw.ru/articles/ierarhiya-v-veb-dizajne

6.

Использование изображений и графики. Включение качественных
изображений и графики для улучшения визуального восприятия.
https://lpgenerator.ru/blog/2020/06/08/50-besplatnyh-resursov-s-grafikoj-dlya-vashihlendingov/
Анимация и интерактивные элементы. Добавление анимаций и интерактивных
элементов для улучшения пользовательского опыта.
https://habr.com/ru/articles/846542/
Адаптивный дизайн. Обеспечение корректного отображения сайта на
устройствах с различными разрешениями экрана.
https://skillbox.ru/media/design/adaptivnyy-dizayn-responsiv-i-mobilnaya-versiya/

7.

Использование сеток и модульных систем. Применение сеток для
организации контента и создания гармоничного дизайна.
https://craftum.com/blog/setki-v-web-dizajne/
Консистентность и единый стиль. Поддержание единого стиля и
консистентности во всех элементах дизайна. https://vc.ru/design/357032konsistentnost-v-dizaine
Фокус на пользовательском опыте (UX). Дизайн, ориентированный на удобство
и удовлетворенность пользователей. https://practicum.yandex.ru/blog/kak-provoditux-issledovaniya/
Данные приемы художественного построения веб-ресурсов позволяют создавать
сайты, которые не только эстетически привлекательны, но и функциональны.

8.

Структурные компоненты
веб-ресурсов

9.

Структурные
компоненты
функциональных
и
удобных
веб-ресурсов
сайтов.
Эти
являются
основой
компоненты
для
помогают
создания
организовать
информацию и взаимодействие с пользователем. Рассмотрим на примере сайта:
https://www.travelline.ru/
Заголовок (Header). Верхняя часть страницы, содержащая ключевые элементы
навигации и идентификации.
Навигация (Navigation). Система ссылок и меню, которая позволяет
пользователям перемещаться по сайту
Основной контент (Main Content). Центральная часть страницы, содержащая
основную информацию, которую ищет пользователь.
Боковая панель (Sidebar). Дополнительная область на странице, часто
расположенная сбоку.

10.

Подвал (Footer). Нижняя часть страницы, содержащая вспомогательную
информацию и ссылки.
Формы (Forms). Интерактивные элементы для ввода данных пользователем.
Мультимедиа (Multimedia). Включает изображения, видео и аудио, которые
дополняют текстовый контент.
Кнопки и ссылки (Buttons and Links). Элементы интерфейса, которые
позволяют пользователям выполнять действия и переходить по страницам.
Баннеры и рекламные блоки (Banners and Ads). Графические элементы для
продвижения контента или рекламы.
Инструменты обратной связи (Feedback Tools). Компоненты, позволяющие
пользователям оставлять отзывы и комментарии.

11.

Модели навигации

12.

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

13.

Особенности разработки в
зависимости от предметной
области

14.

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

15.

Электронная коммерция
Привлекательный и современный дизайн, который способствует продажам, с быстрой
загрузкой страниц и простотой в использовании.
Оптимизация для мобильных устройств (мобильная коммерция).
Визуальная иерархия. Важно выделить ключевые элементы, такие как кнопки "Купить" или
"Добавить в корзину", чтобы они были легко заметны.
Высококачественные изображения. Использование качественных изображений продуктов
помогает привлечь внимание и повысить доверие покупателей.
Анимация. Легкие анимации, такие как увеличение изображения при наведении курсора,
могут улучшить взаимодействие с пользователем.

16.

Задание

17.

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

18.

Материалы к лекции

19.

Онлайн-курсы и образовательные платформы
Skillbox. Онлайн-университет, предлагающий курсы по веб-дизайну, графическому дизайну и
UX/UI. https://skillbox.ru/course/profession-webdesigner/
Статьи и блоги
Habrahabr (Habr). Популярная платформа для публикации статей на темы IT и дизайна,
включая веб-дизайн и UX. https://habr.com/ru/hub/web_design/
Smashing Magazine. Один из ведущих онлайн-журналов о веб-дизайне и разработке,
публикующий статьи о последних тенденциях и приемах. https://www.smashingmagazine.com/
Книги и публикации
"Веб-дизайн: книга Стива Круга". Русскоязычные издания книги Стива Круга "Don't Make Me Think",
адаптированные для российских читателей.
Подкасты
Подкаст "Дизайн на слух". Подкаст, посвященный различным аспектам дизайна, включая
веб-дизайн и UX.
Доступен на платформах, таких как https://podcasts.apple.com/ru/ и
https://music.yandex.ru/