Довідка
Довідка
ЛКЛАУД ІД 456
Loading...

Макетування та верстка графічного документа. Макетування для Web.

Дізнаємось

Макетування vs Верстка:
Макетування — це творчий пошук розташування елементів.
Верстка — це технічне виконання макета з урахуванням стандартів.
Модульна сітка (Grid): Навіщо потрібні напрямні лінії та як сітка допомагає тримати структуру документа цілісною.
Візуальна ієрархія: Як за допомогою розміру, кольору та розташування спрямувати погляд користувача від найважливішого до другорядного.
Особливості Web-макетування:
Адаптивність: Чому макет має «дихати» та змінюватися під розміри
смартфонів, планшетів і ПК.
Інтерактивність: Роль кнопок, меню та посилань (те, чого немає в
друкованому буклеті).
Піксельна сітка: Робота з роздільною здатністю 72/96 DPI замість
друкарських 300 DPI.
Колірні моделі: Чому для друку ми використовуємо CMYK, а для Web — RGB.

Навчимось

Створювати прототипи (Wireframes): Малювати «скелет» майбутнього сайту чи документа без використання кольорів та фото, лише блоками.
Працювати з напрямними (Guides): Вирівнювати логотипи, тексти та зображення за єдиною лінією.
Верстати багатосторінкові макети: Створювати єдиний стиль для всіх сторінок (єдині шрифти, відступи, кольори).
Оптимізувати графіку для Web: Зберігати файли у форматах SVG (для іконок) та WebP/PNG/JPG (для фото) з мінімальною вагою без втрати якості.
Використовувати безпечні зони: Враховувати поля під обрізку для друку та «безпечну зону» для мобільних екранів.

Матеріали

Доступно тільки для зареєстрованих користувачів

Проблемні питання
  • Доступно тільки для зареєстрованих користувачів

Д.з.

Доступно тільки для зареєстрованих користувачів

Тема
1 лекції
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2 лекції
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Загальнонаціональна хвилина мовчання за загиблими внаслідок збройної агресії рф проти України
60