Вебдизайн з нуля: Створіть сайт для свого портфоліо

Що ви зможете після курсу

• Вести бриф і аналітику: готувати питання замовнику, аналізувати конкурентів і збирати портрети аудиторії в mind map
• Проєктувати структуру сторінки, що працює на заявку: УТП, заклики до дії, тарифи, квізи та елементи довіри
• Збирати прототип у Axure або Moqups і переносити його в Photoshop
• Малювати екрани макета — кнопки, форми, плитки, попапи та ховери — з обробкою фотографій під стиль сторінки
• Адаптувати десктопний макет до мобільної версії на вузькому полотні
• Збирати презентаційний кейс для Behance і здавати файли верстальнику: групи шарів, SVG-іконки, favicon

Кому підійде курс

Курс не вчить верстці та програмуванню — макети готуються для передачі верстальнику; малюванню ілюстрацій теж: графіка береться зі стоків.

Як проходить навчання

• Один наскрізний проєкт на весь курс — Кожен прийом показано на своєму місці в реальному лендінгу — від шапки до футера
• Шлях від прототипу до кейсу — Видно весь цикл роботи дизайнера, а не окремі прийоми
• Конверсійний розбір структури — Зрозуміло, чому блок влаштований саме так і як він працює на заявку
• Домашні завдання та матеріали у PDF — Теорія одразу закріплюється на власному проєкті
• Підготовка макета для верстальника — Файли здаються в порядку: групи шарів, ховери, SVG-іконки, favicon

Що знадобиться

• Adobe Photoshop — у ньому йде вся практика курсу
• Axure або Moqups для складання прототипу — у Moqups є безкоштовна версія
• Фотостоки та сервіс іконок для підбору графіки

Чому самотужки зазвичай не виходить

Без системи макет збирається на око: колонки «приблизно», кольори та шрифти навмання, структура — як піде. Така сторінка виглядає неохайно, не веде відвідувача до заявки та викликає питання у верстальника.

Друга пастка — починати одразу «з краси»: без прототипу та продуманих смислів передробок виходить більше, ніж роботи з нуля. Курс веде за етапами, на яких будуються замовні проєкти: бриф і аналітика, план смислів, конверсійний прототип і лише потім малювання — кожен крок із поясненням, навіщо він потрібен.

Що зміниться

Як влаштований шлях

1. Теорія Модульна сітка, композиція, колір, типографіка та графіка — правила, на яких тримається макет сайту.
2. Прототип Бриф із замовником, аналітика в mind map та складання конверсійної структури сторінки в Axure або Moqups.
3. Малювання Перший екран і всі наступні у Photoshop: кнопки, форми, плитки, фотографії, попапи та ховери.
4. Мобільна версія та кейс Адаптація макета під вузьке полотно та складання презентації готового проєкту для Behance.

Програма курсу

21 урок · 6 модулів · 12 годин 24 хвилини відео · Від перших правил до кейсу в портфоліо — модулі йдуть у порядку роботи над проєктом.

• База веб-дизайну: сітка, композиція, колір, шрифти 5 уроків

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

  • Урок 1 – Модульна сітка14:33

    Урок пояснює, що таке модульна сітка і чому сторінка, зібрана за колонками, виглядає впорядкованою. Показано, як сітка будується в графічному редакторі за кілька дій і чому зручною є сітка на дванадцять колонок. Тема відкриває теоретичну частину та готує до практики.

  • Урок 2 – Композиція12:00

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

  • Урок 3 – Колір11:46

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

  • Урок 4 – Типографіка17:26

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

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

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

• Конверсійний шар: сторінка, яка веде до заявки 4 уроки

  Підготовка до прототипу — бриф, аналітика конкурентів та аудиторії в mind map, план смислів. Далі устрій сторінки, що працює на заявку, — від першого екрана та УТП до тарифів, квізів і попапів — та практичне складання прототипу в Axure або Moqups.

  • Підготовчий етап40:10

    Покрокова підготовка до створення прототипу: бриф із замовником за списком відкритих запитань, аналіз конкурентів, компанії та цільової аудиторії зі зведенням результатів у mind map. Окремо — план смислів, який затверджують короткими порціями, і огляд програм для складання прототипу.

  • Структура прототипу. Частина 158:42

    Три тенденції продаючої сторінки — конверсія, довіра, турбота — і розбір перших елементів лендінгу. Перший екран із меню, дескриптора та УТП, заклики до дії з формами й елементи довіри: кейси, приклади робіт, відгуки та документи.

  • Структура прототипу. Частина 21:10:33

    Друга частина про структуру прототипу: коли показувати ціни й як вибудовувати тарифи зі знижками, які з елементів конверсії — калькулятор, лічильник, квіз, акція, попап на виході — доречні на одному сайті. Також вимоги до блоку питань, сторінці «Дякуємо» та текстам, написаним про відвідувача, а не про компанію.

  • Створення прототипу45:56

    Практичне складання конверсійного прототипу лендінгу в Axure або Moqups: від напрямних і першого екрана до форми бронювання, соціальних доказів і підвалу. Кожен крок розглядається з логікою його побудови та зі зниженням стресу відвідувача.

• Перший екран: налаштування та старт макета 4 уроки

  Робоче середовище Photoshop та документ із розмірами під сайти, далі чорнова та чистова промальовка першого екрана: асоціації теми, шрифтова пара, логотип, кнопки та фонова фотографія з затемненням.

  • Налаштування робочої області1:55

    Перший практичний крок роботи з макетом: створення нового документа з назвою проєкту, шириною, висотою та роздільною здатністю 72 пікселі на дюйм. Вмикається лінійка, напрямні від нульової позначки та від позначки 1170 позначають робочу область сайту, далі полотно розширюється до 1920 пікселів через Canvas Size. Зрештою виходить макет зі стандартними для сайтів розмірами, розмічений для подальшої роботи.

  • Налаштування Фотошопа5:25

    Photoshop налаштовується під роботу над макетами сайту: на вкладці продуктивності встановлюється рекомендоване значення, а глибина історії дій зростає до 150 кроків. Лінійки перемикаються на пікселі, для напрямних задається сірий пунктирний вигляд, зайві панелі закриваються, а потрібні — навігатор, шари, робота з текстом, історія — збираються в компактні групи. Відображення пензлів перемикається на великі значки, а в інструмент фігур завантажується вбудований набір користувацьких фігур.

  • Промальовка першого екрана. Частина 121:41

    Прототип першого екрана переноситься в Photoshop як чорнове компонування: документ створюється шириною 1170 пікселів і розширюється до 1920, тексти набираються одразу з підбором кегля, накреслення та міжрядкових інтервалів. Тема розкладається на ланцюжки асоціацій, з яких виводиться характер сайту — тепла жовто-помаранчева гама, світлий фон, яскраві фотографії, — а орієнтири шукаються у своїй та суміжній ніші на Behance і Pinterest. Шрифти беруться із заздалегідь зібраного власного набору, для підзаголовків підбирається гарнітура, яка поєднується із заголовковим Gotham.

  • Промальовка першого екрана. Частина 21:10:15

    Екран добудовується з чорнового компонування: збирається логотип з іконкою із сервісу іконок, кнопки з градієнтом, світінням через Drop Shadow і тінню з ефектом 3D, проставляються ціни з перекресленою старою, додаються іконки, лінія-роздільник і підпис про прокручування з мишкою. Фотографія фону підбирається на Shutterstock за темою їжі та вина, відбраковується за композицією кадру, прив’язується обтравною маскою до темної підкладки, балансується затемнення, а різкість підвищується копією шару з High Pass у режимі Overlay. Підсумок — перший екран у чистовому вигляді, де всі елементи вирівняні між собою та по лініях і перевірені без напрямних.

• Усі екрани лендінгу: від плиток до попапів 6 уроків

  Малювання решти екранів десктопного макета: плитки з ховерами, блок вартості з хмарними переходами, перенос прототипу, форма бронювання, календар турів, попапи, ховери та favicon.

  • Малювання другого й третього екранів43:27

    Продовження малювання макета: екран із плиток збирається з підбором та обробкою фотографій через High Pass, Unsharp Mask і Camera Raw Filter, а заголовок блогу заливається знімком за контуром літер. Окремо малюються блок блогу з табами, капсом із розрядкою та стрілками за контентною областю, а ховери плиток відкладаються в окремий файл — верстальнику достатньо одного зразка.

  • Оформлення екрана вартості42:15

    Збірка блоку вартості туру: фоновий пейзаж вставляється в білу підкладку через Create Clipping Mask, зайві деталі прибираються штампом і латкою, а стик між секціями закривається переходом із накладених хмарних PNG. Списки включеного та доплат оформлюються векторними галочками й мінусами — верстальнику віддається SVG, перелік обрамляється ледь помітною рамкою, ціна виділяється кольором, між блоками залишається повітря.

  • Перенесення прототипу51:03

    Готовий прототип переноситься в Photoshop: для кожного блоку підбирається розкладка, стилі копіюються з першого екрана, а заголовки на наступних екранах робляться трохи меншими. Перебираються варіанти блоку вражень, програма поїздки збирається на табах із днями, список включеного об’єднується з тарифами, між секціями ставиться фраза з фотографією в літерах. Сторінка ціликом поміщається в чорнове компонування — підписна форма та футер із соцмережами заготовляються перед детальним малюванням.

  • Дизайн форми бронювання та фотоблоків50:37

    Форма бронювання ставиться на пейзаж із мандрівником: знімок вставляється через Create Clipping Mask, пробіли в тлі закриваються копіями самого пейзажу, а людина розвертається обличчям уперед — так напрям погляду читається краще. Оформлюються блоки галереї із запасними знімками-заглушками та портрет організатора: фото освітлюється в Camera Raw без пересвіту обличчя, різкість додається дублем шару з High Pass.

  • Календар турів і фінальна форма23:40

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

  • Попапи та ховери32:51

    Фінальна збірка макета перед версткою: усі спливаючі вікна збираються в одному файлі, екран перед показом затемнюється чорним шаром із заданою прозорістю, а хрестик закриття робиться великим, щоб у нього легко влучити. Для кнопок задаються ховери — при наведенні основна кнопка темніє, звужується й отримує тінь; шари групуються за блоками з кольоровим розміченням, файл зберігається в JPEG і доповнюється favicon.

• Мобільна версія макета 1 урок

  Десктопний макет переноситься на вузьке полотно: що прибрати з маленького екрана, як підігнати шрифти та кнопки і в якому вигляді віддати блоки верстальнику.

  • Адаптація десктопного макета під мобільний екран53:21

    Готовий десктопний макет переноситься на вузький холст шириною 320 пікселів із контентною областю 280 пікселів, яку задають напрямні. З маленького екрана прибираються декоративні написи та об’єкти-прикраси, шрифти зменшуються, кнопка дії звужується так, щоб уміститися на першому екрані без прокручування. Внутрішні екрани, форми та футер перебудовуються за єдиною схемою, після чого шари групуються за екранами та блоками для передачі верстальнику.

• Кейс для Behance 1 урок

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

  • Збірка презентаційного кейсу в Photoshop58:22

    Фінальна збірка презентаційного кейсу в Photoshop із готових екранів лендингу: робоче полотно шириною 1200–1500 пікселів з напрямними, шапка з назви проєкту, опису та перефарбованого логотипа в смарт-об’єкті, перший екран на плашці із заокругленими кутами. Екрани макета розміщуються на плашках із тінями, окремі блоки показують цільову аудиторію, зразки шрифтів з накресленнями та чотири кольори палітри із кодами відтінків; попапи склеюються та розкладаються по макету, мобільна версія показується в світлому мокапі iPhone. Текст для Behance вставляється частинами — короткі абзаци чергуються зі зображеннями, наприкінці кейсу — подяка та контакти.

Часті запитання

Про цей курс

• Чи потрібен досвід у дизайні або Photoshop?

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

• У яких програмах проходить навчання?

  Вся практика — в Adobe Photoshop. Прототипи збираються в Axure або Moqups, програми взаємозамінні, у Moqups є безкоштовна версія.

• Чи залишиться готовий проєкт для портфоліо?

  Так, курс завершується складанням кейсу для Behance: шапка з описом проєкту, типографіка та палітра, всі екрани, попапи та мобільна версія в макапі телефона.

• На якому проєкті проходить практика?

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

• Чи буде верстка та програмування?

  Ні, верстка залишається за межами курсу: макет готується для передачі верстальнику — з групуванням шарів за блоками, намальованими ховерами, SVG-іконками та favicon.

• Що потрібно для старту?

  Adobe Photoshop і комп’ютер для практики. Для етапу прототипу — Axure або Moqups, для графіки — доступ до фотостоків і сервісу іконок. Налаштування робочого середовища Photoshop входить у курс.

Доступ і матеріали

• Коли і як я отримаю доступ до курсу?

  Одразу після оплати, тієї ж секунди й автоматично. Чекати на підтвердження не потрібно. Доступ надходить двома шляхами водночас. Перший: на пошту, вказану при оформленні замовлення, приходить лист із посиланням на матеріали. Другий: те саме посилання з’являється у вашому акаунті на сайті, у розділі «Завантаження», і залишається там назавжди.

• Де зберігаються матеріали курсу?

  Усі відео та додаткові файли лежать у хмарному сховищі. Посилання на нього — у вашому акаунті на сайті, розділ «Завантаження», і в листі, який надійшов після оплати. Акаунт тут не формальність, а спосіб доставки: курс залишається в ньому назавжди. Навіть якщо лист загубився або ви згадали про купівлю через рік, посилання буде на місці.

• Чи можна завантажити матеріали, чи тільки дивитися онлайн?

  Завантажувати можна і варто. Радимо зберегти відео на комп’ютер і дивитися звідти. Причина проста: хмарне сховище не розраховане на перегляд відео. Іноді воно дозволяє увімкнути ролик просто у браузері, але якість при цьому помітно гірша за вихідну. На своєму комп’ютері ви побачите курс таким, яким його записували.

• Як довго діє доступ?

  Безстроково. Курс залишається вашим назавжди, повертатися до нього можна скільки завгодно разів. Якщо через рік чи два посилання раптом перестане відкриватися з технічних причин — напишіть на info@siluette.com.ua, ми його відновимо.

• Лист із доступом не надійшов — що робити?

  Насамперед: доступ у вас є в будь-якому разі. Увійдіть на сайт і відкрийте розділ «Завантаження» — посилання на курс уже там, незалежно від того, дійшов лист чи ні. Найчастіше лист губиться через одруківку в адресі під час оформлення замовлення. Ще варто заглянути до теки «Спам». Не виходить розібратися — не витрачайте час: напишіть на info@siluette.com.ua або в чат у правому нижньому куті сайту, ми допоможемо.

• На яких пристроях дивитися курс?

  Найкраще на комп’ютері або ноутбуці: завантажте відео й відкрийте будь-яким звичним плеєром. Знадобляться встановлені відеокодеки — на більшості комп’ютерів вони вже є. Завантажити курс можна на скільки завгодно пристроїв. А от телефон ми не радимо, і з двох причин. На маленькому екрані погано видно деталі, особливо якщо в уроці показують інтерфейс програми. І на телефонах часто немає кодеків для форматів, у яких записані відео.

Оплата та повернення

• Якими способами можна оплатити?

  Банківською карткою Visa, MasterCard або «Простір», через Google Pay, Apple Pay, Masterpass, Visa Checkout, платіжний QR-код, Botpay у Telegram чи Privat24. Є й оплата частинами: Монобанк (3 або 4 платежі), А-Банк (2, 3 або 4 платежі та розстрочка), Банк Глобус (8 платежів), «Скибочка» від OTP Bank (3 платежі), миттєва розстрочка та оплата частинами від ПриватБанку.

• Чи приймається картка, випущена не в Україні?

  Так. Платіжна система приймає картки з Євросоюзу та будь-яких інших країн. Одна деталь, про яку часто забувають: банк може попросити підтвердити платіж — у мобільному застосунку або кодом із СМС. Якщо оплата не проходить, перевірте застосунок банку та повідомлення.

• Як працює знижка 20% при купівлі кількох курсів?

  Додайте до кошика два курси або більше — знижка застосується автоматично до всіх товарів у кошику. Два курси: мінус 20% на обидва. П’ять курсів: мінус 20% на всі п’ять. Знижка поєднується з будь-якими акційними цінами й діє на весь каталог без винятків.

• Чи можна повернути курс або гроші?

  Цифрові товари поверненню та обміну не підлягають. Це загальне правило для всіх електронних товарів в Україні — постанова Кабінету Міністрів № 172 від 19 березня 1994 року. При цьому ми завжди на зв’язку. Якщо доступ не відкривається, посилання перестало працювати або файли пошкоджені — напишіть на info@siluette.com.ua, вкажіть дату та номер замовлення. Відновимо. Якщо щось незрозуміло в самому курсі, теж пишіть — підкажемо.

• Чи можна оплатити від організації за рахунком?

  Поки що ні. Ми працюємо лише з приватними покупцями — безготівкової оплати за рахунком від юридичних осіб зараз немає.

Як проходить навчання

• Чи є зворотний зв’язок із викладачем і перевірка завдань?

  Ні. Усі курси — це записи уроків для самостійного вивчення: викладач не відповідає на запитання і не перевіряє домашні завдання. Саме тому курси коштують значно дешевше за навчання з куратором. Ви отримуєте той самий матеріал, але займаєтеся самі та у своєму темпі.

• Чи видається сертифікат?

  Так, цифровий сертифікат — на запит і безкоштовно. Напишіть на info@siluette.com.ua, вкажіть ім’я та прізвище саме в тому вигляді, в якому хочете бачити їх у сертифікаті, і ми надішлемо його протягом доби.

• Чи потрібен досвід, щоб почати?

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

• Чи є терміни проходження курсу?

  Ні. Ані дедлайнів, ані розкладу, ані доступу, що згорає. Завантажили — дивіться коли зручно, з будь-якими перервами.

• Чи можна поділитися курсом з іншою людиною?

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

Підтримка

• Куди писати, якщо щось не працює?

  Найкраще на info@siluette.com.ua. Є й чат у правому нижньому куті сайту, але пошта надійніша: там можна все описати докладно та додати знімки екрана. Прохання: опишіть, що саме ви робили і що пішло не так, та додайте знімок екрана з помилкою. Так ми вирішимо питання одразу, а не з’ясовуватимемо півдня, що сталося.

• Як швидко відповідає підтримка?

  У робочий час, з 9:00 до 19:00, на пошту зазвичай відповідаємо протягом години, у чаті — за кілька хвилин. Після 19:00 теж буває, але час відповіді не обіцяємо.