Лабораторная работа №1 - Создание макета сайта (Figma)

Цель работы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Два frame: для desktop и для мобильного устройства (например, iPhone 14).
На макете должны быть следующие блоки:

Блок с ссылками. Например, шапка сайта. Ссылки можно оформить в виде текста с подчёркиванием.
Блок с компонентами. На каждом компоненте можно использовать svg-иконку. Компоненты необходимо расположить в несколько столбцов для desktop-версии.
Блок с таблицей. Для мобильной версии можно добавить горизонтальную прокрутку.
Блок с формой. Элементы формы для desktop-версии можно расположить в несколько столбцов. Для мобильной - в один.

Обязательно черновик должен быть переименован в формат Фамилия Имя, группа.

Сдача лабораторной работы

Для очной защиты достаточно показать работающий макет преподавателю.

В случае дистанционной сдачи л/р необходимо скинуть ссылку на макет (проверьте её в режиме инкогнито / приватного окна) в эту форму и написать об этом в чате telegram.

5.7 KiB Raw Blame History Unescape Escape