diff --git a/README.md b/README.md index 49e3800..fb67e5f 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Frontend: -- [Лабораторная работа №F1 - Макет сайта (Figma)](#) +- [Лабораторная работа №F1 - Макет одностраничного сайта (Figma)](#) - [Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)](#) - [Лабораторная работа №F3 - Стилизация веб-приложения (React)](#) - [Лабораторная работа №F4 - Взаимодействие с API (Axios)](#) diff --git a/legacy/lw01/README.md b/lw01/README.md similarity index 54% rename from legacy/lw01/README.md rename to lw01/README.md index f3cc0d7..954f6f4 100644 --- a/legacy/lw01/README.md +++ b/lw01/README.md @@ -1,4 +1,4 @@ -# Лабораторная работа №1 - Создание макета сайта (Figma) +# Лабораторная работа №1 - Макет одностраничного сайта (Figma) ## Цель работы @@ -68,22 +68,39 @@ ## Требования к макету -1. Вы можете сделать либо многостраничный сайт, либо одностраничный (его ещё называются landing-page). -2. Для каждой страницы необходимо создать два frame: для desktop и для мобильного устройства (например, iPhone 14). -3. На макете на любой странице должны быть следующие блоки: +1. Сайт должен быть выполнен в стиле langing-page, то есть являться одностраничным и состоять из блоков (о компании, цены, отзывы, обратная связи и т.п.). + Допускается наличие нескольких вкладок на одной странице, но лучше блоки с информацией располагать друг под другом с общей навигацией по всей странице, например, в шапке. +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. В вашем макете должны быть расположены следующие блоки: - Блок с ссылками. Например, шапка сайта. - Ссылки можно оформить в виде текста с подчёркиванием. - Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужный frame или его часть (для landing-page). + Обычно за это отвечает группа компонентов *Navigation* или *NavBar*. + Должна быть настроена интерактивность, чтобы при нажатии на ссылку пользователя переносило в нужную часть 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* (справа) сверху появится список свойств компонента, которые можно свободно менять. +- Это учебный макет. Он не должен выглядеть супер-круто и не должен содержать **всю** информацию, что была бы полезна на сайте выбранной вами темы. Ограничьтесь минимальным набором информации и полей ввода на форме.