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