Лабораторная работа №1 - Макет одностраничного сайта (Figma)

Цель работы

Освоение средств прототипирования веб-приложений.

Ход выполнения работы

Выбрать тематику своего будущего сайта.
Зарегистрироваться в Figma или аналоге (например, Lunacy).
Создать макет сайта согласно требованиям.

Выбор тематики будущего веб-сайта

В рамках данного курса вам необходимо будет создать небольшое веб-приложение.

Разработка таких приложений обычно делятся на 2 части: разработка presentation layer (frontend) и business logic layer (backend).

Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя. То есть визуальные стили, шаблоны страниц и т.д.

Backend - это то, как веб-приложение работает внутри. То есть взаимодействие веб-сервера с системами управления базами данных, обработка логики приложения и т.д.

В рамках данной лабораторной работы важно определиться с тематикой будущего сайта.

На этом этапе рекомендуется ознакомиться с возможными аналогами и понять, какая тематика ближе вам. Какой веб-сайт вам хочется сделать? Такой и попробуйте.

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

Портал медицинского учреждения.
Книжный интернет-магазин.
Автосервис.
Электронный дневник школьника.
Электронный журнал в вузе.
Учёт продукции на складе.
Домашний бюджет.
Гостиница.
Учёт вычислительной техники.
Суши-бар.
Строительная фирма.
Фирма по ремонту компьютерной техники.
Библиотека.
Отдел кадров.
Доска объявлений.
Фотогалерея.
Форум.
Новостной блог.
Учёт состояния здоровья сотрудников предприятия.
Компьютерная игра.

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

Регистрация в Figma

В этой работе требуется создать макет будущего сайта. Для этого существует множество программ, позволяющих прототипировать интерфейс.

Например, Figma. Чтобы создавать свой макет, там надо зарегистрироваться (Sign up). К сожалению, приложение работает только на английском языке. Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).

В качестве альтернативы можете использовать Lunacy, Sketch, Gimp.

Требования к макету

Сайт должен быть выполнен в стиле langing-page, то есть являться одностраничным и состоять из блоков (о компании, цены, отзывы, обратная связи и т.п.). Допускается наличие нескольких вкладок на одной странице, но лучше блоки с информацией располагать друг под другом с общей навигацией по всей странице, например, в шапке.
Необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 16).
Обязательна для использования готовая дизайн система. Например, Consta Design (figma), Ant Design (figma) или Material UI (figma).
Все элементы на frame-ах должны быть выполнены при помощи компонентов, скопированных из макета выбранной дизайн-системы. Если соблюдать это правило, дальнейшая вёрстка будет сильно проще.
Разрешается использовать нестандартные иконки, если их нет в дизайн-системе. Однако они должны быть добавлены в компонент корректно.
В вашем макете должны быть расположены следующие блоки:

Блок с ссылками. Например, шапка сайта. Обычно за это отвечает группа компонентов Navigation или NavBar. Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужную часть frame-а.
Блок с карточками. В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое. Карточки необходимо расположить в несколько столбцов для desktop-версии. В мобильной версии обычно карточки располагаются друг под другом. Пример карточек: блок с анонсами новостей и событий. Обычно за это отвечает группа компонентов Stack, Grid и Card.
Блок с формой. Элементы формы для desktop-версии можно расположить в несколько столбцов. Для мобильной - в один. Не забудьте кнопку отправки формы! Пример формы: обратная связь, подписка на новости, форма входа в систему. Обычно за это отвечает набор компонентов Form, Input, Label.

Обязательно файл с Вашим макетом должен быть переименован из Untitled в формат Фамилия Имя, группа.
Ваш page с двумя frame (см. п. 2) должен быть самым первым.

Некоторые советы

Чтобы создать свой frame в выбранной дизайн-системе в Figma, достаточно скопировать нужный макет к себе, создать новый Page (в меню слева), сделать его первым в списке всех страниц. После этого в панели инструментов (снизу) выбрать Frame (или нажать F на клавиатуре) и на панели справа выбрать тип нового фрейма. Он добавится на страницу автоматически.
Для копирования компонентов необходимо найти нужную страницу с компонентами, затем выделить нужный компонент, скопировать его через Ctrl-C и вставить на свой frame через Ctrl+V.
Для изменения свойств компонента (например, необходимо поменять вид кнопки или её текст) необходимо его выделить, и в панели Design (справа) сверху появится список свойств компонента, которые можно свободно менять.
Это учебный макет. Он не должен выглядеть супер-круто и не должен содержать всю информацию, что была бы полезна на сайте выбранной вами темы. Ограничьтесь минимальным набором информации и полей ввода на форме.

9.4 KiB Raw Blame History Unescape Escape