Курс Веб-дизайн і верстка

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

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

Веб-дизайн сьогодні - це не просто зовнішній вигляд сайту, а й те, наскільки сайтом зручно користуватися, наскільки він зрозумілий цільовій аудиторії, як швидко відвідувач ресурсу досягає мети, з якою прийшов сюди.

Відповідно, і веб-дизайнер - це не просто той, хто створює зовнішній вигляд сайту. Веб-дизайнер - це той, хто проєктує і створює зрозумілий і зручний для використання дизайн на основі аналізу даних про цільову аудиторію.

— Что делает веб-дизайнер
Веб-дизайнер створює макети будь-яких сайтів: візиток, лендінгів, інтернет-магазинів, корпоративних ресурсів тощо. Крім цього, він може займатися створенням іконок та інших зображень для вебовикористання, логотипів і фірмового стилю компанії, може створювати рекламні банери, шаблони листів для email-розсилок тощо.

Робочий процес дизайнера має такий вигляд.

Спочатку дизайнер отримує ТЗ (технічне завдання на розробку сайту) від замовника. У ТЗ зазначено, який сайт потрібно створити: для чого і як планується його використовувати, яке завдання має вирішувати ресурс, ким будуть його основні відвідувачі, з якою метою вони будуть заходити, який контент має бути розміщений на сайті. Якщо будь-якої інформації для створення дизайну не вистачає, то дизайнер ставить запитання замовнику або самостійно проводить необхідне дослідження. На цьому етапі може бути корисно вивчити сайти конкурентів, а також інші ресурси в даній або в суміжних тематиках.

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

— Инструменты веб-дизайна
У цій статті не будемо детально зупинятися на всіх інструментах під різні платформи, які існують для веб-дизайнерів, тому що їх дуже багато. Навіть сайти з іконками, різною графікою для сайтів і Google Fonts - теж, свого роду, інструменти для веб-дизайнера.

Довгий час лідером і чи не єдиною масовою програмою для створення макетів сайтів був Photoshop. Потім з'явився Sketch. Хтось перейшов на використання Sketch, хтось залишився на Photoshop. Але сьогодні є ще один дуже хороший інструмент для створення дизайну, який добре зарекомендував себе серед інших інструментів і заслужив любов багатьох дизайнерів - це Figma.

Figma - це нова програма для веб-дизайнерів. За допомогою неї можна створювати не тільки прототипи, а й самі інтерфейси (сайти, додатки, панель управління). Вагомою перевагою цієї програми є її простота. Саме за рахунок цього Фігма завойовує серця фахівців у сфері веб-дизайну.

— Преимущества Figma
Доступність - Figma працює прямо в браузері. Не потрібно нічого завантажувати, встановлювати. Просто з будь-якої платформи заходьте на сайт figma.com, авторизуйтесь і починайте працювати в програмі. Є, звичайно, і десктопна версія, але вона зовсім небагато відрізняється функціоналом від веб-версії програми. Мабуть, найкритичніше - це те, що в десктопній версії можна працювати без підключення до інтернету.

— Удобные инструменты — Photoshop изначально создавался как редактор фотографий, поэтому инструменты именно для рисования в нем — не самые удобные для дизайнеров. В Figma совершенно иной подход: удобный Pen Tool, удобное создание эффектов и т. д.

— Работа со шрифтами — в Photoshop или другой графической программе нельзя использовать для дизайна шрифт, который не установлен в системе. В Figma шрифты подтягиваются из Google Fonts либо автоматически подгружаются в проект.

— Удобный бэкап — все версии и изменения хранятся в Figma. Можно в любой момент откатиться на нужную версию. Больше нет необходимости хранить много версий одного проекта на компьютере.

— Совместная работа — в Figma очень продумано сотрудничество над одним проектом. У каждого есть возможность оставлять комментарии, есть настройка прав для отдельных пользователей. Курсоры всех пользователей проекта окрашиваются разными цветами и подписываются. Работа отслеживается в режиме реального времени.

— Хранение файлов — все файлы Figma хранит в облаке. Поэтому теперь не нужно пересохранять файл в формат .png перед тем, как скинуть на согласование заказчику. Достаточно просто дать ссылку на файл в Figma.

Це основні переваги Figma. Звісно, список не вичерпний. Кожен, хто спробує Figma, знайде щось корисне і зручне саме для себе.

Так, наприклад, Figma - зручний інструмент і для верстальників, які згодом верстають створений макет. Верстальник у Figma може одразу зручно виміряти відступи чи відстані між елементами, переглянути всі стилі для елемента та коди кольорів.

Розділ 1. Веб-дизайн
Блок 1. Figma від А до Я

Хронометраж: 1 година 1 хвилина 18 секунд

Урок 1.
Завантаження програми 01:05

Урок 2.
Огляд інтерфейсу 04:23

Урок 3.
Фрейм 02:18

Урок 4.
Move та Scale 02:43

Урок 5.
Інструмент форми 06:30

Урок 6.
Перо та олівець 01:36

Урок 7.
Інструмент текст 05:00

Урок 8.
Коментарі 01:04

Урок 9.
Експорт 01:24

Урок 10.
Смарт-вирівнювання 03:23

Урок 11.
Маска шару 02:12

Урок 12.
Доля 01:57

Урок 13.
Модульна сітка 01:27

Урок 14.
Режим змішування 03:33

Урок 15.
Стилі для тексту 03:31

Урок 16.
Стилі для кольору 04:13

Урок 17.
Компоненти 07:47

Урок 18.
Адаптивні елементи 03:58

Урок 19.
Прототипування 03:14

Розділ 1. Веб-дизайн
Блок 2. Дизайн. Десктоп версія

Хронометраж: 3 години 25 хвилин 5 секунд

Урок 1.
Frame і Grid 10:52

Урок 2.
Перенесення ТЗ 11:31

Урок 3.
Основні елементи 19:27

Урок 4.
Перший екран 10:30

Урок 5.
Другий екран 13:30

Урок 6.
Третій екран 20:23

Урок 7.
Четвертий екран 11:33

Урок 8.
П'ятий екран 13:12

Урок 9.
Шостий екран 13:41

Урок 10.
Додавання кольору 15:27

Урок 11.
Додавання графіки 16:16

Урок 12.
Спливаючі меню 15:41

Урок 13.
Підготовка макета для верстки 15:38

Урок 14.
Інтерактивні елементи 17:24

Розділ 1. Веб-дизайн
Дизайн. Мобільна версія

Хронометраж: 2 години 5 хвилин 30 секунд

Урок 1.
Теорія про мобільну версію та бутсрап-сітка 17:04

Урок 2.
Перший екран 17:29

Урок 3.
Другий екран 12:33

Урок 4.
Третій екран 17:47

Урок 5.
Четвертий екран 11:48

Урок 6.
П'ятий екран 12:04

Урок 7.
Шостий екран 19:39

Урок 8.
Меню 17:06

Розділ 2. Верстка сайту

Хронометраж: 6 годин

Урок 1.
Підготовка до верстки 12:00

Урок 2.
Розмітка фіксованого меню та першого екрана 09:48

Урок 3.
Стилізація фіксованого блоку 13:30

Урок 4.
Адаптивність фіксованого блоку 17:49

Урок 5.
Стилізація першого екрану 19:40

Урок 6.
Адаптивність першого екрану лендинга 20:52

Урок 7.
Підключення бібліотеки Fullpage 13:19

Урок 8.
HTML-розмітка для екрана з проектами 12:37

Урок 9.
Стилізація другого екрану 29:01

Урок 10.
Адаптивність другого екрану 23:02

Урок 11.
Розмітка екрану Details 03:28

Урок 12.
Стилізація блоку Details 09:38

Урок 13.
Адаптивність блоку Details 22:29

Урок 14.
HTML-розмітка блоку List-of-works 05:10

Урок 15.
Стилізація блоку List-of-works 09:53

Урок 16.
Адаптивність блоку List-of-works 08:08

Урок 17.
HTML-структура екрана з калькулятором 15:40

Урок 18.
CSS-стилі для калькулятора 16:23

Урок 19.
Адаптивність калькулятора 23:17

Урок 20.
HTML-розмітка для екрана контактів 04:21

Урок 21.
Стилізація контактів 12:46

Урок 22.
Адаптивність контактів 05:14

Урок 23.
Реалізація точкової навігації 22:39

Урок 24.
HTML-структура головного меню 05:58

Урок 25.
Повна стилізація головного меню 22:58