6.0 KiB
Лабораторная работа №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.
Требования к макету
- Вы можете сделать либо многостраничный сайт, либо одностраничный (его ещё называются landing-page).
- Для каждой страницы необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 14).
- На макете на любой странице должны быть следующие блоки:
- Блок с ссылками. Например, шапка сайта. Ссылки можно оформить в виде текста с подчёркиванием. Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужный frame или его часть (для landing-page).
- Блок с карточками. В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое. Карточки необходимо расположить в несколько столбцов для desktop-версии. В мобильной версии обычно карточки располагаются друг под другом. Пример карточек: блок с анонсами новостей и событий.
- Блок с формой. Элементы формы для desktop-версии можно расположить в несколько столбцов. Для мобильной - в один. Не забудьте кнопку отправки формы! Пример формы: обратная связь, подписка на новости, форма входа в систему.
- Обязательно файл с Вашим макетом должен быть переименован в формат
Фамилия Имя, группа.