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

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

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

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

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

– Що робить веб-дизайнер
Веб-дизайнер створює макети будь-яких сайтів: візиток, лендінгів, інтернет-магазинів, корпоративних ресурсів тощо. Крім цього, він може займатися створенням іконок та інших зображень для вебовикористання, логотипів і фірмового стилю компанії, може створювати рекламні банери, шаблони листів для 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.
Frame 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.
Share 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