| .. | ||
| README.md | ||
Лабораторная работа №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.