Основи Web-дизайну. Курс для новачків. Індивідуальне навчання.

Вступ у web design  ЧАСТИНА I

Теоретичне заняття № 1

• Дизайн як напрям в графічному дизайні.
• Завдання, що вирішуються веб-дизайнером.
• Ланцюг: макет сайту – верстка сайту –  програмування сайту.
• Веб-сайт як додаток.
• Етапи розробки веб-сайту.
• Функціональні стилі у веб-дизайні.
• Сучасні тренди у веб-дизайні.

Практичне заняття № 1

• Практичний розгляд і аналіз сайтів різного типу і стилів.
• Порівняння стилів, функціональних особливостей сайтів і сфери їх застосування.

Домашнє завдання

• Підібрати самостійно мінімум по два приклади різного виду сайтів із мережі Інтернет.
• Проаналізувати типові ознаки кожного стилю.

Типографіка і колористика у веб-дизайні

Теоретичне заняття № 2

• Вивчення особливостей підходу до типографіки у процесі розробки дизайну веб-сторінок.
• Обмеження в типографіці для веб-сторінок.
• Стандартні шрифти ОС.
• Нестандартні шрифти: як налаштувати й оптимізувати.
• Акцидентність.
• Художньо-образні особливості формоутворення акцидентного шрифту.
• Символіка графічного знаку, образність та емоційна дія шрифту.
• Ієрархія заголовків.
• Адаптація до швидкого перегляду сторінок.
• Контраст фону і кольору шрифту.
• Колористика у веб-дизайні.
• Особливості кольору на сайтах.
• Обмежена палітра.
• Психологія кольору (коротко).

Практичне заняття № 2

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

Домашнє завдання

• Підібрати в мережі приклади сайтів різного функціоналу, наприклад, сайту в американському бізнес-стилі і в промо-стилі.
• Підготувати короткий письмовий аналіз цих сайтів.

 Композиція і візуальна ієрархія на веб-сторінках

Теоретичне заняття № 3 

• Коротко про психологію сприйняття.
• Необхідність візуальної ієрархії на сайті.
• Поняття модульної сітки.
• Модульні сітки в графічних пакетах і у верстанні.
• Frameworks – сіткові структури (огляд).
• Прототипи сайту та ескізи.
• Початкові поняття про різні способи верстання й responsive (адаптивний дизайн).

Практичне заняття № 3

• Практичний розгляд різних елементів сайту в їх ієрархії і положенні один відносно одного.
• "Правильні" і "неправильні" сайти - аналіз і порівняння.
• Робота із зразком модульної сітки.
• Створення ескіза головної сторінки сайту-візитки.

Домашнє завдання

• Створити ескіз («від руки») головної сторінки інтернет-магазину торгової компанії на вибір слухача.

 Ергономіка сайтів. Інформаційна архітектура сайтів. Навігація

Теоретичне заняття № 4 

• Початкові поняття про ергономіку (юзабіліті) сайтів і інформаційну архітектуру.
• Визначення інтерфейсу.
• Взаємодія людина – комп'ютер.
• Особливості взаємодії.
• Поняття про ІА (інформаційну архітектуру) сайту.
• Необхідність розробки структури сайту при створенні професійного веб-проєкту, який здійснює продажі.
• Коротко про систему навігації на сайті.
• Області навігації і види меню.
• Рекомендації щодо розробки навігаційних елементів.
• Головна сторінка і її особливості.

Практичне заняття № 4

• Практичний розгляд різних елементів сайту, обговорення їх функціонального призначення.
• Аналіз (на прикладах) помилок у проєктуванні і реалізації інтерфейсів.

Домашнє завдання

• Самостійно знайти в мережі приклади сайтів ііз «поганим юзабіліті».
• Приготувати обговорення помилок, аналіз і шляхи виправлення.
• Знайти приклади ресурсів із трьома і більше сферами навігації.
• Проаналізувати їх особливості і цілі.

 Графіка у веб-дизайні

Теоретичне заняття № 5 

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

Практичне заняття № 5

• Практичний розгляд сайтів із переважно графічним контентом.
• Сайти-галереї.
• Пошук зображень для макету сайту на задану тематику.
• Підбір колірної гамми для цього макету.

Домашнє завдання

• Підібрати 5-6 зображень для майбутнього корпоративного сайту (компанія – продавець автомобілів) – логотип,
• малюнок для фону, декілька фото для слайдера і фотографії співробітників у визначених розмірах.

 Підсумкове зайняття. Робота за брифом (шаблоном для підготовки технічного завдання)

Теоретичне заняття № 6 

• Поняття брифу і технічного завдання.
• Особливості роботи із замовником.
• Позначення ідеї, цільова аудторія, збір інформації та аналіз сайтів компаній конкурентів.
• Створення й детальне опрацювання структури сайту.
• Підготовка «варфрейму» (прототипу) сайту.
• Поняття про посадкові сторінки та аналіз їх особливостей.

Практичне заняття № 6

• Практичний аналіз брифу від реального замовника.
• Проходження основних етапів прототипування сайту.
• Рішення завдань у сфері відповідальності веб-дизайнера.

Домашнє завдання

• Доопрацювання домашнього завдання із зайняття № 3.
• Промальовування детального прототипу сайту інтернет-магазину з елементами навігації і «кошиком».
• Підготувати ескіз головної сторінки та сторінки з візитівкою товару.

Знайомство з растровою графікою. Інтерфейс програми Adobe Photoshop ЧАСТИНА II

Теоретичне заняття № 7

• Створення макету сайту за допомогою програми Adobe Photoshop.
• Знайомство з програмою Adobe Photoshop.
• Палітри, навігація, інструментарій.
• Особливості растрової графіки.
• Формати документів, створення, відкриття, збереження.
• Розмір документа в пікселях.
• Управління розміром.
• Полотно.
• Робота з полотном.
• Лінійки, сітки як як допоміжний інструмент веб-дизайнера під час роботи з модульними сітками.
• Основні кольори.
• Робота з колірними зразками.

Практичне заняття № 7

• Практична робота з полотном.
• Налаштування інтерфейсу програми «під себе».
• Збереження зразків кольору.
• Робота з бібліотеками кольорів.

Домашнє завдання

• Встановити на домашньому ПК програму Adobe Photoshop.
• Створити документ розміром 1024х1000 пікселів.
• Створити допоміжні інструменти, що допомагають у створенні майбутнього макету сайту за заданими координатами.
• Зберегти власний колір як фон для сайту.

 Способи виділення в Adobe Photoshop. Шари

Теоретичне заняття № 8

• Основні інструменти виділення.
• Група «Ласо».
• Інструмент «Чарівна паличка».
• Виділення простих об'єкті в у програмі Adobe Photoshop.
• Модифікація виділення.
• Трансформація виділеної області.
• Швидка маска як спосіб створення складної форми виділення.
• Концепція шарів.
• Макет сайту як багатошарова і складна побудова.
• Прозорість і режими накладення.
• Угрупування шарів, зв'язування, злиття.
• Стилі шарів (огляд).
• Створення власного стилю й модифікація відомого.

Практичне заняття № 8

• Створення перших колажів із різних ділянок виділення.
• Практична робота із створення області навігації на сайті - низка кнопок меню.

Домашнє завдання

• Створити форму для реєстрації на сайті.
• Використати растрову підкладку під форму.
• Створити поля для логіна і пароля і кнопку входу.

 Робота з текстом. Експорт

Теоретичне заняття № 9 

• Основні поняття в типографіці.
• Особливості роботи з текстом у растровому редакторі.
• Палітра налаштування тексту й шрифтових властивостей.
• Модуль Safe for Web.
• 3 формати растрових зображень для веб-сторінок.

Практичне заняття № 9

• Практична робота із створення блоку з текстом для макету й стилізованих заголовків.
• Оптимізація растрових зображень.

Домашнє завдання

• Зробити макет рекламного банера з використанням растрової підкладки і текстового заголовка.
• Додати контактні дані.
• Підготувати картинки у 3-х форматах для веб-сторінки.

Теоретичне заняття № 10

• Векторні фігури в програмі Photoshop як основа для макету сайту.
• Шари-форми і їх особливості.
• Створення веб-елементів.
• Маски. Відсічні маски.
• Використання і редагування обтравочних масок у програмі Illustrator.

Практичне заняття № 10

• Практична робота зі створення блоку-контенту для сайту з використанням стилю-шару.
• Додавання текстового блоку й обтравочної маски для растрового зображення.

Домашнє завдання

• Створити макет «шапки» сайту з векторним логотипом за допомогою стандартних фігур із мережі Інтернет.
• Прикрасити шапку сайту стилізованим текстовим заголовком.

 Ретуш і корекція

Теоретичне заняття № 11 

• Поняття про ретуш і корекцію.
• Інструменти ретуші в програмі Photoshop.
• Клонуючий штамп.
• Коригувальні і заливальні шари і їх роль у створенні макету сайту.
• Поняття про текстури в програмі Photoshop.

Практичне заняття № 11

• Практична робота зі створення власної текстури в програмі.
• Робота з клонуючим штампом.
• Створення заливальних шарів для фону сайту.
• Використання коригувальних шарів для стилізації макету.

Домашнє завдання

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

 Верстання макету посадкової сторінки

Теоретичне заняття № 12 

• Особливості дизайну landing page.
• Послідовність верстання.
• Створення елементів веб-сторінки: шапка, контент, сайдбар, футер.

Практичне заняття № 12

• Практична робота з верстання макету посадкової сторінки для комерційного сайту в режимі майстер-клас.
• Опрацювання деталей.

Домашнє завдання

• Завершити верстання макету, додати стилі шарів, додати контактні дані у футере.

Векторна графіка. Інтерфейс програми Adobe Illustrator ЧАСТИНА IIІ

Теоретичне заняття № 13

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

Практичне заняття № 13

• Практична робота зі створення векторної ілюстрації – створення логотипу компанії з простих фігур.

Домашнє завдання

• Встановити на домашньому ПК програму Adobe Illustrator.
• Створити документ заданого розміру в моделі RGB.
• Створити нескладну векторну ілюстрацію – персонаж для майбутнього рекламного веб-банера.

 Заливки й обведення в програмі Adobe Illustrator

Теоретичне заняття № 14 

• Заливка векторного об'єкту.
• Види заливок.
• Налаштування бібліотек, створення власних зразків кольору.
• Градієнти. Види градієнтів.
• Створення й налаштування градієнта.
• Візерункові заливки.
• Збереження власної текстури і модифікація існуючої.
• Обведення. Види обведень.
• Налаштування і збереження зразка обведення.
• Палітра Оформлення.
• Створення багатошарової заливки та обведення.
• Стилі в програмі Adobe Illustrator.
• Створення, збереження, використання.
• Прозорість.

Практичне заняття № 14

• Створення векторної іконки для сайту або мобільного застосування.
• Використання готових стилів і завантаження стилів із мережі.

Домашнє завдання

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

 Робота з текстом. Символи в програмі Adobe Illustrator

Теоретичне заняття № 15 

• Текст у програмі Adobe Illustrator.
• Інструмент «текст».
• Заголовний і блоковий текст.
• Текст у контурі і по контуру.
• Налаштування блоків тексту, робота з фреймами, вставка зображень з обтіканням.
• Повторення понять "гарнітура шрифту", "інтерліньяж", "трекінг"  тощо.
• Символи в AI.
• Символ як веб-елемент.
• Палітра символів.
• Створення і модифікація символу.
• Експорт.
• Трохи про формат SVG.

Практичне заняття № 15

• Створення векторної кнопки як елементу макету сайту, що повторюється.
• Збереження її у форматі символу з використанням тексту.
• Зміна масиву через редагування головного зразка.

Домашнє завдання

• Створити набір векторних елементів сайту (на вибір) у двох різних стилях дизайну.
• Бажано використати стиль flat і web 2.0.
• Зберегти в бібліотеці стиль елементу, перетворити його на символ, експортувати у формат SVG.

Екзамен

• Підсумкова екзаменаційна робота.
• Складання практичної частини іспиту полягає в уявленні й захисті макету сайту-візитки, створеного слухачем упродовж навчання.
• Можливий варіант макету корпоративного сайту, інтернет-магазину або блогу за бажанням слухача.
• Під час іспиту необхідно відповісти на низку запитань про особливості цього макету, його основні елементи та його «юзабіліті».

Робота в графічному редакторі FIGMA ЧАСТИНА IV

Теоретичне заняття № 16

• Знайомство з графічним редактором Figma Інтерфейс, особливості роботи в онлайн-режимі, навігація, інструментарій.
• Створення макету сайту (лэндинг, сайт-візитка, сайт-портфоліо) засобами програми.
• Редагування і переналаштування готового шаблону сайту.
• Прототипи, презентація сайту.