Основи WEB-design

№

Теми

Заняття

(зміст, підтеми)

Кількість годин

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

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

програмування сайту. Веб-сайт як додаток. Етапи розробки веб-сайту. Функціональні стилі у веб-дизайні. Сучасні тренди у веб-дизайні.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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