Rework lw01

README.md

@@ -18,7 +18,7 @@
 
 Frontend:
 
-- [Лабораторная работа №F1 - Макет сайта (Figma)](#)
+- [Лабораторная работа №F1 - Макет одностраничного сайта (Figma)](#)
 - [Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)](#)
 - [Лабораторная работа №F3 - Стилизация веб-приложения (React)](#)
 - [Лабораторная работа №F4 - Взаимодействие с API (Axios)](#)

lw01/README.md

@@ -1,4 +1,4 @@
-# Лабораторная работа №1 - Создание макета сайта (Figma)
+# Лабораторная работа №1 - Макет одностраничного сайта (Figma)
 
 ## Цель работы
 
@@ -68,22 +68,39 @@
 
 ## Требования к макету
 
-1. Вы можете сделать либо многостраничный сайт, либо одностраничный (его ещё называются landing-page).
+1. Сайт должен быть выполнен в стиле langing-page, то есть являться одностраничным и состоять из блоков (о компании, цены, отзывы, обратная связи и т.п.).
-2. Для каждой страницы необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 14).
+   Допускается наличие нескольких вкладок на одной странице, но лучше блоки с информацией располагать друг под другом с общей навигацией по всей странице, например, в шапке.
-3. На макете на любой странице должны быть следующие блоки:
+2. Необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 16).
+3. Обязательна для использования готовая дизайн система.
+   Например, [Consta Design](https://consta.design/) ([figma](https://www.figma.com/community/file/853774806786762374)), [Ant Design](https://ant.design/) ([figma](https://www.figma.com/community/file/831698976089873405)) или [Material UI](https://mui.com/material-ui/) ([figma](https://www.figma.com/community/file/912837788133317724)).
+4. Все элементы на frame-ах должны быть выполнены при помощи компонентов, скопированных из макета выбранной дизайн-системы.
+   Если соблюдать это правило, дальнейшая вёрстка будет сильно проще.
+5. Разрешается использовать нестандартные иконки, если их нет в дизайн-системе.
+   Однако они должны быть добавлены в компонент корректно.
+6. В вашем макете должны быть расположены следующие блоки:
 
 - Блок с ссылками. Например, шапка сайта.
-  Ссылки можно оформить в виде текста с подчёркиванием.
+  Обычно за это отвечает группа компонентов *Navigation* или *NavBar*.
-  Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужный frame или его часть (для landing-page).
+  Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужную часть frame-а.
 - Блок с карточками.
   В каждой карточке можно использовать svg-иконку или какое-либо иное изображение, в т.ч. растровое.
   Карточки необходимо расположить в несколько столбцов для desktop-версии.
   В мобильной версии обычно карточки располагаются друг под другом.
   Пример карточек: блок с анонсами новостей и событий.
+  Обычно за это отвечает группа компонентов *Stack*, *Grid* и *Card*.
 - Блок с формой.
   Элементы формы для desktop-версии можно расположить в несколько столбцов.
   Для мобильной - в один.
   Не забудьте кнопку отправки формы!
   Пример формы: обратная связь, подписка на новости, форма входа в систему.
+  Обычно за это отвечает набор компонентов *Form*, *Input*, *Label*.
 
-4. Обязательно файл с Вашим макетом должен быть переименован в формат `Фамилия Имя, группа`.
+7. Обязательно файл с Вашим макетом должен быть переименован из `Untitled` в формат `Фамилия Имя, группа`.
+8. Ваш page с двумя frame (см. п. 2) должен быть самым первым.
+
+## Некоторые советы
+
+- Чтобы создать свой frame в выбранной дизайн-системе в Figma, достаточно скопировать нужный макет к себе, создать новый Page (в меню слева), сделать его первым в списке всех страниц. После этого в панели инструментов (снизу) выбрать *Frame* (или нажать `F` на клавиатуре) и на панели справа выбрать тип нового фрейма. Он добавится на страницу автоматически.
+- Для копирования компонентов необходимо найти нужную страницу с компонентами, затем выделить нужный компонент, скопировать его через `Ctrl-C` и вставить на свой frame через `Ctrl+V`.
+- Для изменения свойств компонента (например, необходимо поменять вид кнопки или её текст) необходимо его выделить, и в панели *Design* (справа) сверху появится список свойств компонента, которые можно свободно менять.
+- Это учебный макет. Он не должен выглядеть супер-круто и не должен содержать **всю** информацию, что была бы полезна на сайте выбранной вами темы. Ограничьтесь минимальным набором информации и полей ввода на форме.