Завдання

Використовуючи технічне завдання на розробку сайту для компанії CozyHouse, розроблену структуру сайту й вайфрейм, створіть дизайн-макет  сторінки Проєкти з такими складовими:  Хедер, Блок «Наші проєкти», Футер.

Технічне завдання на розробку сайту CozyHouse

Структура сайту CozyHouse

Вайфрейм сторінки «Проєкти сайту компанії CozyHouse»

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr2_figma.

2. Розархівуйте в дану папку архів Додаткові матеріали_ПЗ2, який містить логотип, шрифти, фото проєктів, іконки соціальних мереж, усе, що необхідно буде розмістити в дизайн-макеті сторінки сайту.

3. Детально ознайомтеся з технічним завданням і структурою сторінки Проєкти.

4. Перейдіть до Figma на сайт figma.com.

5. Створіть обліковий запис.

6. У середовищі Figma cтворіть новий файл, використовуючи команду Desig file/Drafts з ім’ям  Design(CozyHouse).

7. Створіть новий фрейм, використовуючи інструмент Frame (Фрейм) на панелі інструментів.

8. На Панелі властивостей праворуч (вкладка Design) у розділі Frame задайте розміри фрейму й координати:

9. Додайте 12-стовпчикову сітку. Для цього на Панелі властивостей (вкладка Design), оберіть розділ Layout grid і натисніть + , задайте наступні налаштування:

10. На панелі ліворуч (вкладка Layers) Frame 1 перейменуйте на projects.

11. Установіть необхідні фірмові шрифти.

12. Підготуйте палітру фірмових кольорів за межами фрейму.

Сторінку Проєкти  можна розбити на такі блоки:

• Шапка сайту, що містить логотип, меню та іконки соціальних мереж.
• Основний контент : Блок «Наші проєкти», що містить заголовки, текст і зображення проєктів.
• Футер сайту, що містить логотип, текстовий блок: коротка інформацію про компанію, пункти меню, перелік основних послуг й іконки соціальних мереж.

Частина I. Проєктування HEADER

Порядок створення шапки сайту

1. Додайте прямокутник, використовуючи інструмент Rectangle (Прямокутник)   розмірами 1280х100 px, колір — білий, і розмістіть у верхній частині фрейму. Він слугувати плашкою (підкладкою) для нашої навігаційної панелі.

2. На вкладці Layers (Ліворуч) перейменуйте його на menu-bg.

3. Праворуч на вкладці Design оберіть розділ Effects і додайте легку тінь цьому прямокутнику з наступними параметрами:

4. Розмістіть у верхньому правому кутку логотип компанії у форматі .svg, просто перетягнувши із папки Додаткові матеріали до Figma файл, що містить логотип.

5. Зробіть логотип компонентом, скориставшись кнопкою Create Component (Cтворити компонент)  або комбінацією клавіш Ctrl+Alt+K, попередньо виділивши. Це дасть можливість перевикористовувати його в інших частинах макета.

6. Створіть меню сайту, яке згідно вайфрейму, містить п’ять пунктів: Головна, Проєкти, Послуги, Блог, Компанія. Меню має бути розміщене зверху по центру, на одній лінії з логотипом. Для того щоб створити меню. дотримуйтеся наступного алгоритму:

1) Оберіть інструмент Text (Текст) і наберіть із клавіатури Головна. Задайте наступні параметри форматування: колір — темний (for text), взяти зі створеної палітри, шрифт — Raleway Medium, розмір шрифту — 14 рx. Усі параметри форматування тексту зібрані на вкладці Design (праворуч) у розділі Text:

2) Зробіть даний пункт меню Autolayout. Для цього виділіть елемент і в контекстному меню виділеного елемента оберіть команду  Add auto layout (Додати автолояут) або натисніть комбінацію клавіш Shift +A. Це дасть можливість легко налаштувати поля, відступи й інтервали для елементів майбутнього меню.

3) На вкладці Design (Праворуч) задайте наступні параметри Auto layout:

4) На вкладці Layers (Ліворуч), перейменуйте створений пункт меню на menu-item.

5) Зробіть menu-item компонентом (Ctrl+Alt+K ), і це дасть можливість створити інші пункти меню.

6) На вкладці Layers (Слої) зробіть копію menu-item (комбінації Ctrl+С і Ctrl+V).

7) У створеній копії елемента меню замініть текст на Проєкти. Змініть колір тексту на білий. У розділі Fill (праворуч) задайте колір фону  # f88500.

А також заокруглення для двох протилежних кутів.

8) Розмістіть пункти меню на відстані 20 px. Нагадаємо, що для того щоб побачити відстань від одного елемента до іншого, потрібно один із них виділити й натиснути клавішу Alt, а далі навести курсор на той елемент, до якого хочемо визначити відстань.

9) Об’єднайте два створених пункти меню в Auto layout із наступними параметрами:

10) На вкладці Layers (Ліворуч),  перейменуйте створений auto layout на menu. Якщо все виконали правильно — маємо такий проміжний результат:

11) Скопіюйте ще тричі перший пункт меню і введіть текст Послуги, Блог, Компанія відповідно.

12) Зробіть menu компонентом (Ctrl+Alt+K ). Вирівняйте по горизонталі по центру.

13) Якщо чітко дотримувалися всіх кроків алгоритму, то в результаті маєте отримати ось таке меню:

7. Перегляньте вайфрейм, і наступним кроком буде створення блоку з іконками соціальних мереж, де представлена компанія. Даний блок має бути розміщений у шапці сайту праворуч.

8. Для того щоб створити блок із соціальними іконками, дотримуйтеся наступного алгоритму :

1) Створіть прямокутник розміром 120x30 px, колір фону —  #c4c4c4, прозорість — 25 %. Розмістіть у верхньому правому кутку Шапки сайту. Він слугуватиме контейнером для іконок соц. мереж.

2) Вставте іконки соціальних мереж у форматі .svg у макет дизайну (документ). Зменшіть розміри іконок до 18х18 px. При зменшені розмірів не забувайте утримувати клавішу Shift, щоб зменшення відбувалося пропорційно.

3) Змініть колір кожної іконки на #6d6D6d із прозорістю    75 %.

4) Розмістіть першу іконку соціальних мереж instagram в створеному прямокутнику, виділіть ці два елементи й визначте Auto layout з ім’ям social-icons і наступними налаштуваннями:

5) Додайте ще іконки  facebook і twitter у створений auto layout і приховайте фон для прямокутника, у якому знаходяться іконки:

6) Зробіть social-icons (блок з іконками) компонентом (Ctrl+Alt+K)  для подальшого використання.

9. Вирівняйте меню по горизонталі по центру. Відступ зверху від краю фрейму для всіх елементів має бути однаковим. Так само і логотип, і блок з іконками соціальних  мереж теж мають знаходитися на однаковій відстані зліва і справа від краю фрейму. У результаті маємо отримати таку Шапку сайту:

10. Згрупуйте всі елменти в групу з назвою Header.

Частинна II. Проєктування блоку

Порядок створення основного контенту web-сторінки

1. Використовуючи інструмент Text, нижче логотипу, додайте заголовок Наші проєкти.

2. На Панелі властивостей у розділі  Text укажіть наступні параметри форматування:

3. Розмістіть заголовок на відстані 70 px від Header (шапки сайту).

4. Нижче заголовка додайте ще один текстовий блок і введіть наступний текст: Представляємо вам найкращі роботи нашої студії. Від чудових віталень до надзвичайно цікавих і неординарних рішень.

5. Задайте наступні параметри форматування для даного тексту:

6. Задайте відстань між заголовком і підзаголовком 25 px.

7. Згрупуйте ці два текстові блоки в групу з ім’ям page-header.

8. Далі створіть колекцію зображень. Для цього використайте інструмент Rectangle (Прямокутник), куди потрібно буде помістити зображення.

9. Додайте прямокутник розміром 360х230 px.

10. Помістіть у нього підготовлене зображення. Для цього виділіть прямокутник і на вкладці Design (праворуч) у розділі Fill оберіть команду зображення і завантажте підготовлене.

11. Перейменуйте прямокутник із зображенням на bg.

12. На вкладці Layers виділіть bg  і в контекстному меню оберіть команду  Group Selection, або комбінація клавіш Сtrl+G, і назвіть групу item.

13. Скопіюйте item і змініть зображення. Відстань між зображеннями має бути 20 px. А відстань від верхнього зображення до тексту (підзаголовку) має бути 50 px.

14. На вкладці Layers (ліворуч) виділіть 2 елементи item  і згрупуйте їх. Групу назвіть items.

15. Скопіюйте ще 3 елементи item і розмістіть їх так, як показано нижче, і змініть зображення. Cітка має бути обов’язково ввімкнена (Shift+G). Так простіше вирівнювати елементи макета. Відстань між зображеннями має бути всюди 20 px.

16. На вкладці Layers (ліворуч) виділіть всі 5 елементів item  і згрупуйте їх. Групу назвіть  type-1. Вона має знаходитися всередині групи items.

17. Скопіюйте групу type-1 й перейменуйте на type-2 і розмістіть нижче.

18. Змініть розташування елементів item у групі type-2 , вилучіть зайві елементи,  так як показано на рисунку нижче. А також замініть зображення.

19. У групі type-1 виділіть перший item і перейменуйте його на item-active.

20. Для елемента item-active створіть оверлей, так як показано в вайрфреймі даної сторінки.

21. Створимо прямокутник 340х210 px, колір — білий, прозорість — 97 %.

22. На вкладці Layers (Cлої) перейменуйте прямокутник  на overlay й перемістіть в групу item-actiive.

23. Розмістіть overlay над елементом item-active (поверх першого зображення). Далі необхідно додати текст.

24. Отже, додайте текстовий блок : Замовник: Компанія «Крига» з наступним форматуванням:

25. Додайте наступний текстовий блок із текстом : Вітальня для гостей. Задайте такі параметри форматування:

26. Додайте третій текстовий блок із текстом: Ознайомитися. Задайте такі параметри форматування:

27. Усі ці три текстові слої перемістіть в групу item-active.

28. Якщо все зробили правильно, то отримаєте наступний результат:

Відключіть сітку й перегляньте поточний вигляд макета. Він має бути наступним:

Частинна IIІ. Проєктування Footer

1. Додайте прямокутник, використовуючи інструмент Rectangle (Прямокутник)  розмірами 1280х375 px і розмістіть  у нижній  частині фрейму під основним контентом на відстані 70 px.

2. Зафарбуйте прямокутник у темний колір  (dark). Для цього виділіть прямокутник, а далі викличте інструмент Піпетка (клавіша I) і клацніть піпеткою у створеній  палітрі з кольором dark.

3. Перейменуйте прямокутник Rectangle 1 на footer-bg.

4. Вставте логотип, вибравши його на вкладці Assets (праворуч). Розмістіть логотип у лівому верхньому кутку футера.

5. Змініть колір значка логотипу на білий.

6. У розділі Fill (праворуч) для логотипу задайте прозорість 50 %.

7. На панелі ліворуч, вкладка Layers (Слої), виділіть логотип і footer-bg, утримуючи клавішу Shift й об’єднайте в групу (комбінація Ctrl+G).

8. Назвіть групу footer. Надалі всі об’єкти футера мають бути у цій групі.

9. Використовуючи інструмент Text, нижче логотипу, додаємо заголовок Коротко про нас.

10. Праворуч у розділі  Text укажіть наступні параметри форматування:

11. Перейменуйте даний елемент на footer-title й перемістіть у групу footer. Зробіть елемент компонентом (комбінація Ctrl+Alt+K), щоб  його можна було надалі використовувати при створенні подібних заголовків.

12. Використовуючи інструмент Text, нижче заголовка, додайте текстовий блок із наступним вмістом: Ми ретельно обробляємо, а потім обговорюємо з нашим клієнтом зовнішній вигляд кожного виробу. Ми намагаємося не повторюватися, адже знаємо, що ви цінуєте індивідуальність

13. На панелі властивостей (праворуч) у розділі Text укажіть наступні параметри форматування для даного текстового блоку:

14. Перейменуйте даний елемент на footer-text і перемістіть у групу footer.

15. Розмістіть логотип і текстові блоки в футері так, як показано нижче:

16. Скопіюйте елемент footer-title й розмістіть його напроти логотипу, ближче до середини футера. Уведіть текст заголовка: Меню.

17. Далі йде дублювання нашого меню. На вкладці Assets  (ліворуч) оберіть компонент menu. Але потрібно,  щоб елементи меню йшли не горизонтально, а вертикально.

Для цього на вкладці Layers (Слої) виділяємо у групі footer дочірній компонент menu. Далі правою кнопкою миші викликаємо контекстне меню й обираємо команду  Detach instance. Перейменуйте на menu-footer.

18. Далі необхідно трішки змінити наше меню. На панелі властивостей (праворуч ) у розділі auto layout змініть розміщення елементів меню з горизонтального на вертикальне. Задайте вирівнювання по лівому краю, відстань між елементами

19. Далі попрацюйте з кожним пунктом меню (елементом menu-item) окремо. Змініть колір тексту на білий, приберіть заливку з пункту Проєкти.

Знову зробіть menu-footer компонентом (Ctrl+Alt+K).

20.  Cкопіюйте елемент footer-title й розмістіть його напроти заголовку меню. Уведіть текст заголовка: Послуги.

21.Cкопіюйте елемент menu-footer і розмістіть його під заголовком Послуги. Унесіть зміни (додайте перелік послуг), як показано нижче:

22. Наступним кроком буде додавання заголовка Ми в соц. мережах. Та нижче текстового блоку зі вмістом: Підписуйтеся на нас в соціальних мережах, щоб не пропустити вихід нових проєктів, які створюються для наших клієнтів по всьому світу.

23. Залишається додати іконки соціальних мереж. Для цього перейдіть на вкладку Assets (ліворуч), оберіть компонент  social-icons і розмістіть його знизу під останнім текстовим блоком.

24. Далі правою кнопкою миші викличте контекстне меню елемента social-icons й оберіть команду  Detach instance. Перейменуйте на social-icons-footer.

25. Модифікуйте блок з іконками соціальних мереж. Збільшить розміри кожної іконки 30х30 px, колір — accent (у нашому макеті це оранжевий).

26. На панелі властивостей (праворуч) змініть налаштування Auto layout:

27. Перевірте, чи всі елементи, що знаходяться у футері, розміщені в групі footer на вкладці Layers (Слої).

Якщо всі попередні кроки виконано правильно, то маєте отримати такий футер:

Ви завершили дизайн сторінки «Проєкти».

У результаті отримаємо готовий дизайн-макет сторінки

28. Для того щоб поділитися створеним макетом, натисніть на кнопку (праворуч). У результаті з’явиться діалогове вікно:

Натисніть на , це покликання на ваш проєкт (дизайн-макет сторінки сайту).

29. Результат роботи (покликання на створений дизайн-макет, наприклад, https://www.figma.com/file/AhxUbP6QhzWrG96o5JjA4c/Unit-2_Lesson-4?type=design&mode=design&t=t3wyCsDl3rp1UlC8-0) збережіть у текстовому файлі з ім’ям pr-2_макет сайту_Ваше прізвище.txt і завантажте в область під умовою завдання (позначену написом Для додавання файлів, ви можете просто перетягнути його сюди).