Элементы проектирования веб - ресурсов

1.

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

2.

План
● Понятие дизайна, эскиза, макета
● Прототипирование
● Позиционирование веб-элементов
● Стилизация веб-элементов
● Практика построения эскиза
● Практика работы с макетом/шаблоном сайта
● Вариант эскиза/макета ресурса по формированию таблиц спортивных
мероприятий
● Задание
● Материалы

3.

Понятие
дизайна, эскиза, макета

4.

При проектировании веб-ресурсов важно понимать различия между такими
понятиями, как дизайн, эскиз и макет.
Дизайн — это процесс создания визуальной и функциональной структуры сайта,
которая удовлетворяет потребности пользователей и достигает целей бизнеса.
Цель: Создать гармоничный и функциональный интерфейс, который будет привлекать
пользователей и обеспечивать их удовлетворенность.
Эскиз — это начальный набросок или черновой вариант дизайна, который
используется для визуализации идей и концепций на ранних стадиях проектирования.
Цель: Помочь команде визуализировать и обсудить основные идеи и концепции
дизайна до начала детальной проработки.

5.

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

6.

Прототипирование

7.

Прототипирование — этап в процессе проектирования веб-ресурсов, который
позволяет визуализировать и протестировать основные функции и элементы
интерфейса до начала их окончательной разработки.
Зачем нужно прототипирование?
Визуализация идей.
Тестирование пользовательского опыта (UX).
Экономия времени и ресурсов.
Улучшение коммуникации.

8.

Типы прототипов
1. Низкокачественные прототипы (Low-fidelity prototypes). Простые наброски или
схемы, которые показывают основные элементы интерфейса и их расположение.
2.
Среднекачественные
прототипы
(Mid-fidelity
prototypes).
Более
детализированные, чем низкокачественные, но все еще без окончательной графики и
стилей.
3. Высококачественные прототипы (High-fidelity prototypes). Детализированные
прототипы, которые максимально приближены к финальному продукту как визуально,
так и функционально.

9.

Процесс прототипирования
1. Исследование и сбор требований. Понимание потребностей пользователей и
бизнес-целей, которые должен удовлетворять веб-ресурс.
2. Создание каркасов (Wireframes). Разработка низкокачественных прототипов,
чтобы определить структуру и основные элементы интерфейса.
3. Разработка интерактивных прототипов. Создание среднекачественных или
высококачественных
прототипов,
которые
можно
протестировать
с
пользователями.
4. Тестирование и итерации. Проведение тестирования с пользователями для
выявления проблем и внесение необходимых изменений.
5. Утверждение и передача разработчикам. После утверждения прототипа он
передается команде разработчиков для реализации.

10.

Инструменты для прототипирования
Excalidraw
Figma
Adobe XD
Sketch
InVision

11.

Позиционирование вебэлементов

12.

Позиционирование веб-элементов — аспект веб-дизайна, который определяет, как
элементы интерфейса располагаются на странице.
Основные методы позиционирования
1. Статическое позиционирование (по умолчанию) (Static Positioning)
2. Относительное позиционирование (Relative Positioning)
3. Абсолютное позиционирование (Absolute Positioning)
4. Фиксированное позиционирование (Fixed Positioning)
5. Липкое позиционирование (Sticky Positioning)
Поток документа
Поток документа — это способ, которым браузер располагает элементы на странице по
умолчанию. Элементы располагаются сверху вниз и слева направо (в языках с таким
направлением чтения), следуя порядку их появления в HTML-коде.

13.

Управление потоком с помощью CSS
1. Flexbox
2. CSS Grid
3. Float
4. Clear
Практики и рекомендации
1. Использование сеток (Grids)
2. Адаптивный дизайн
3. Выравнивание и отступы
4. Консистентность
5. Тестирование на различных устройствах

14.

Стилизация веб-элементов

15.

Стилизация веб-элементов — это процесс применения визуальных стилей к элементам
интерфейса, чтобы создать привлекательный и функциональный веб-ресурс.
Основные аспекты стилизации
Цветовая палитра
Типографика
Границы и тени
Фоны
Анимация и переходы
Отступы и выравнивание
Инструменты и технологии
CSS (Cascading Style Sheets)
Sass/SCSS и LESS
Bootstrap и другие CSS-фреймворки

16.

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

17.

Практика построения эскиза

18.

Построение эскиза — этап в процессе проектирования, который позволяет визуализировать идеи и
структуру сайта на раннем этапе.
Зачем нужны эскизы?
Быстрое прототипирование. Эскизы позволяют быстро набросать идеи и оценить их
жизнеспособность без большого вложения времени и ресурсов.
Обсуждение идей. Они служат отличным инструментом для обсуждения с командой и
заинтересованными сторонами, помогая всем участникам проекта понять концепцию.
Гибкость. Эскизы легко изменять и адаптировать, что позволяет быстро вносить правки на
основе обратной связи.

19.

Процесс создания эскиза
Определение целей и требований.
Сбор информации.
Выбор инструментов.
Создание каркаса (Wireframe).
Добавление деталей.
Тестирование и итерации.
Практическая реализация
Сосредоточьтесь на функциональности.
Используйте сетки.
Будьте готовы к изменениям.
Сотрудничество.
Простота и ясность.

20.

Практика работы с
макетом/шаблоном сайта

21.

Работа с макетом или шаблоном сайта — этап в процессе веб-дизайна и разработки, который
помогает визуализировать и протестировать структуру и функциональность сайта до его
окончательной реализации.
Этапы работы с макетом
Определение целей и требований.
Создание каркаса (Wireframe).
Разработка макета.
Интерактивные элементы.
Тестирование и итерации.
Утверждение и передача в разработку.

22.

Практическая реализация
Использование сеток и направляющих.
Адаптивный дизайн.
Консистентность.
Доступность.
Документация.
Сотрудничество.
Работа с шаблонами
Выбор шаблона.
Кастомизация.
Интеграция с CMS.
Тестирование.

23.

Вариант эскиза/макета
ресурса по формированию
таблиц спортивных
мероприятий

24.

Основные компоненты макета
1.
Заголовок (Header)
○
Логотип. Размещен в верхнем левом углу для узнаваемости бренда.
○
Главное меню. Включает ссылки на основные разделы, такие как "Главная", "Мероприятия",
"Команды", "Результаты", "Контакты".
○
2.
Поиск. Поле поиска для быстрого нахождения событий или команд.
Боковая панель (Sidebar)
○
Фильтры. Возможность фильтрации мероприятий по дате, виду спорта, местоположению и другим
параметрам.
○
3.
Календарь. Интерактивный календарь для выбора даты и просмотра мероприятий.
Основной контент (Main Content)
○
Список мероприятий. Таблица или карточки с предстоящими и прошедшими спортивными событиями.
○
Колонки таблицы. Название мероприятия, дата, местоположение, участвующие команды, статус
(предстоящее, завершено).
○
Кнопка "Подробнее". Для перехода на страницу с подробной информацией о мероприятии.
○
Подробности мероприятия. При выборе конкретного события отображается информация о нем,
включая расписание, составы команд, результаты и т.д.

25.

Основные компоненты макета
4. Подвал (Footer)
○
Контактная информация. Адрес, телефон, email.
○
Ссылки на социальные сети. Иконки для перехода на страницы в соцсетях.
○
Политика конфиденциальности и условия использования.
Дизайн и стилизация
Цветовая палитра.
Типографика.
Иконки и визуальные элементы.
Интерактивные элементы
Всплывающие окна (модальные окна).
Анимации.
Адаптивность
Мобильная версия.
Тестирование.

26.

Примеры для реализации эскиза/макета
https://sportmail.ru/
https://www.championat.com/
https://www.sports.ru/
https://bsrussia.com/tournaments
https://www.metallurg.ru/matches/
https://nicepage.com/ru/st/6037536/raspisanie-shablon-sayta
https://nicepage.com/ru/st/6333520/begat-s-klubom-shablon-sayta
https://www.figma.com/design/8Cj77Mh1rekb3GkVl7NSR0/Responsive-Premier-League-Standings-Table-Template-(Community)?node-id=124-5722&nodetype=canvas&t=nt2SrfTDcqwWRqgY-0
https://www.figma.com/design/2jpAuSRsQXvINNtjNDjeEQ/evenplase?node-id=0-1&node-
type=canvas&t=vdnQFLwga65ZDafM-0

27.

Задание

28.

1. Описываем основные компоненты будущего или
имеющегося макета
2. Описываем дизайн и стилизацию
3. Описываем интерактивные элементы
4. Описываем адаптивность
5. Формируем эскиз в одной из программ (если нет макета)

29.

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

30.

Макеты
Макеты для вёрстки сайтов | Figma. https://t.me/build_html
Статьи и блоги
Smashing Magazine. Онлайн-журнал о веб-дизайне и разработке, публикующий статьи о
последних тенденциях и приемах. https://www.smashingmagazine.com/
CSS-Tricks. Ресурс для изучения CSS и веб-дизайна с множеством примеров и руководств.
https://css-tricks.com/
Инструменты
Excalidraw. Виртуальная доска с открытым исходным кодом для проектирования и
прототипирования,
поддерживает
совместную
работу
и
сквозное
шифрование.
https://excalidraw.com/
Figma. Популярный инструмент для создания макетов и прототипов, поддерживающий совместную
работу. https://www.figma.com/