2023-02-17 10:56:14 +04:00
|
|
|
|
# Лабораторная работа №1 - Создание макета сайта (Figma)
|
|
|
|
|
|
|
|
|
|
|
|
## Цель работы
|
|
|
|
|
|
|
|
|
|
|
|
Освоение средств прототипирования веб-приложений.
|
|
|
|
|
|
|
|
|
|
|
|
## Ход выполнения работы
|
|
|
|
|
|
|
|
|
|
|
|
1. Выбрать тематику своего будущего сайта.
|
2024-04-14 23:59:09 +04:00
|
|
|
|
2. Зарегистрироваться в Figma или аналоге (например, Lunacy).
|
2023-02-17 10:56:14 +04:00
|
|
|
|
3. Создать макет сайта согласно требованиям.
|
|
|
|
|
|
|
|
|
|
|
|
## Выбор тематики будущего веб-сайта
|
|
|
|
|
|
|
|
|
|
|
|
В рамках данного курса вам необходимо будет создать небольшое веб-приложение.
|
|
|
|
|
|
|
2024-04-14 23:59:09 +04:00
|
|
|
|
> Разработка таких приложений обычно делятся на 2 части: разработка presentation layer (frontend) и business logic layer (backend).
|
2023-02-17 10:56:14 +04:00
|
|
|
|
>
|
|
|
|
|
|
> Frontend - это то, как веб-приложение (или веб-сайт) выглядит для пользователя.
|
|
|
|
|
|
> То есть визуальные стили, шаблоны страниц и т.д.
|
|
|
|
|
|
>
|
|
|
|
|
|
> Backend - это то, как веб-приложение работает внутри.
|
|
|
|
|
|
> То есть взаимодействие веб-сервера с системами управления базами данных, обработка логики приложения и т.д.
|
|
|
|
|
|
|
|
|
|
|
|
В рамках данной лабораторной работы важно определиться с тематикой будущего сайта.
|
|
|
|
|
|
|
|
|
|
|
|
На этом этапе рекомендуется ознакомиться с возможными аналогами и понять, какая тематика ближе вам.
|
|
|
|
|
|
Какой веб-сайт вам хочется сделать?
|
|
|
|
|
|
Такой и попробуйте.
|
|
|
|
|
|
|
|
|
|
|
|
Примерный список тем для сайтов предыдущих лет:
|
|
|
|
|
|
|
|
|
|
|
|
1. Портал медицинского учреждения.
|
|
|
|
|
|
2. Книжный интернет-магазин.
|
|
|
|
|
|
3. Автосервис.
|
|
|
|
|
|
4. Электронный дневник школьника.
|
|
|
|
|
|
5. Электронный журнал в вузе.
|
|
|
|
|
|
6. Учёт продукции на складе.
|
|
|
|
|
|
7. Домашний бюджет.
|
|
|
|
|
|
8. Гостиница.
|
|
|
|
|
|
9. Учёт вычислительной техники.
|
|
|
|
|
|
10. Суши-бар.
|
|
|
|
|
|
11. Строительная фирма.
|
|
|
|
|
|
12. Фирма по ремонту компьютерной техники.
|
|
|
|
|
|
13. Библиотека.
|
|
|
|
|
|
14. Отдел кадров.
|
|
|
|
|
|
15. Доска объявлений.
|
|
|
|
|
|
16. Фотогалерея.
|
|
|
|
|
|
17. Форум.
|
|
|
|
|
|
18. Новостной блог.
|
|
|
|
|
|
19. Учёт состояния здоровья сотрудников предприятия.
|
|
|
|
|
|
20. Компьютерная игра.
|
|
|
|
|
|
|
|
|
|
|
|
> Крайне рекомендуется, чтобы тема у вас не повторялась с другими студентами вашей группы.
|
|
|
|
|
|
> Преподаватель в таком случае может попросить изменить или самостоятельно назначить тему веб-приложения.
|
|
|
|
|
|
|
|
|
|
|
|
## Регистрация в Figma
|
|
|
|
|
|
|
|
|
|
|
|
В этой работе требуется создать макет будущего сайта.
|
|
|
|
|
|
Для этого существует множество программ, позволяющих прототипировать интерфейс.
|
|
|
|
|
|
|
|
|
|
|
|
Например, [Figma](https://www.figma.com/).
|
|
|
|
|
|
Чтобы создавать свой макет, там надо зарегистрироваться (Sign up).
|
|
|
|
|
|
К сожалению, приложение работает только на английском языке.
|
|
|
|
|
|
Однако, оно запускается прямо в браузере (в отличие от того же Adobe XD, который работает только под mac или windows и стал платным).
|
|
|
|
|
|
|
2024-04-14 23:59:09 +04:00
|
|
|
|
> В качестве альтернативы можете использовать Lunacy, Sketch, Gimp.
|
2023-02-17 10:56:14 +04:00
|
|
|
|
|
|
|
|
|
|
## Требования к макету
|
|
|
|
|
|
|
2024-04-14 23:59:09 +04:00
|
|
|
|
1. Вы можете сделать либо многостраничный сайт, либо одностраничный (его ещё называются landing-page).
|
|
|
|
|
|
2. Для каждой страницы необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 14).
|
|
|
|
|
|
3. На макете на любой странице должны быть следующие блоки:
|
|
|
|
|
|
|
|
|
|
|
|
- Блок с ссылками. Например, шапка сайта.
|
|
|
|
|
|
Ссылки можно оформить в виде текста с подчёркиванием.
|
|
|
|
|
|
Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужный frame или его часть (для landing-page).
|
|
|
|
|
|
- Блок с карточками.
|
|
|
|
|
|
В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое.
|
|
|
|
|
|
Карточки необходимо расположить в несколько столбцов для desktop-версии.
|
|
|
|
|
|
В мобильной версии обычно карточки располагаются друг под другом.
|
|
|
|
|
|
Пример карточек: блок с анонсами новостей и событий.
|
|
|
|
|
|
- Блок с формой.
|
|
|
|
|
|
Элементы формы для desktop-версии можно расположить в несколько столбцов.
|
|
|
|
|
|
Для мобильной - в один.
|
|
|
|
|
|
Не забудьте кнопку отправки формы!
|
|
|
|
|
|
Пример формы: обратная связь, подписка на новости, форма входа в систему.
|
|
|
|
|
|
|
|
|
|
|
|
4. Обязательно файл с Вашим макетом должен быть переименован в формат `Фамилия Имя, группа`.
|
