UXPUB 🇺🇦 Дизайн-спільнота: Антон Солодовников

Чому я навчився за місяць в Blender

Антон Солодовников — Thu, 06 Apr 2023 11:48:52 +0000

📖 Вступ

Всім привіт! Останнім часом я захопився 3D моделюванням, пройшов приблизно місяць з початку активного вивчення цієї сфери. По закінченню цього спринту мені захотілося підбити підсумки. Тому в цій статті мова буде йти саме про це.

В мене немає на меті якось похизуватись. Головна ціль — надихнути вас і показати, що 3D не така складна галузь, як деякі її описують.

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

🌊 Poolrooms

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

На роботу пішло не так багато часу. Найскладнішим виявився шейдер реалістичної води.

📚 Матеріали:

👹 Демон темряви (Людина-бензопила)

В цій роботі я захотів перенести сцену з манги "Людина-бензопила". Яка є посиланням на зображення екіпажу «Аполлона-1» у складі Еда Вайта, Гаса Ґріссома та Роджера Б. Чаффі.

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

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

📚 Матеріали:

⛓ Денджи (Людина-бензопила)

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

Для більш точного перенесення героя в 3D скористався референсними зображеннями. За таким методом можна переносити будь-які об'єкти в 3D.

📚 Матеріали:

Моделювання за референсами

👕 Симуляція одягу

На цю тему я вже писав статтю, почитайте, якщо вас цікавить створення одягу.

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

📚 Матеріали:

Більш детальна стаття

🛩 Lockheed SR-71 Blackbird

Ідея візуалізувати цей літак засіла в голові, і я не міг її ігнорувати. В цілому, Blackbird було доволі просто зробити, геометрія у нього проста. А ось з текстурами була проблема, в той момент я погано володів Substance Painter, що було великою помилкою.

Для зручної симуляції атмосфери скористався аддоном Physical Starlight And Atmosphere.

📚 Матеріали:

Приклад створення SR-71

🤖 Evangelion Unit-01

Дуже давно хотілось зробити цю модель, але я вагався у своїх навичках. І нарешті час настав, модель була зроблена не повністю (лише голова, тіло та руки). На моделінг було витрачено 4 дні. Текстури, знов не ідеальні, є над чим працювати.

📚 Матеріали:

Приклад створення Eva-01

😇 Ліліт

Поки це моя остання робота. Ліліт — янгол з всесвіту Evangelion. Це найскладніше, що я робив. Більшу частину процесу займав скульптинг тіла, в цілому це не так складно, як мені здавалось раніше. На цей раз я підійшов більш професійно до процесу текстурування, Substance Painter дивовижний софт.

📚 Матеріали:

📑 Висновок

За цей спрінт, довжиною в місяць, я навчився текстуруванню, скульптингу, композиції та всього потрохи. 3D не є чимось неймовірно важким, навчання може зайняти доволі мало вашого часу. Замість використання ассетів у своїх дизайн роботах, ви можете самі створювати їх. Я сподіваюсь, що когось надихнув цією статтею.

Дякую за увагу!

Як створити постер з використанням 3D

Антон Солодовников — Fri, 17 Mar 2023 10:09:43 +0000

📖 Вступ

Всім привіт! Багато хто з вас бачив гарні постери з 3D елементами, але не всі знають як їх робити. В цій статті будуть розкриті таємниці цього процесу. Наберіться терпіння, тексту буде немало.

👨‍🔬 Чому ви навчитесь, прочитавши статтю

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

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

🎨 Скетч та робота з 2D частиною

Для початку, зробимо скетч, щоб полегшити подальшу роботу. Автор цієї роботи використовував свій шрифт, ви його можете знайти у нього на сайті (€25). Але ви можете застосувати інші схожі шрифти. Або піти іншим шляхом, як я, та зробити напис за допомогою кривих. Благо в Фігмі це доволі зручно робити.

Задній фон майже білий, а саме #EBEBED. Хочу нагадати, що використання кольорів #FFFFFF та #000000 не є бажаним. Білий робіть трошки темнішим, а чорний трошки, у свою чергу, світлішим.

Після створення ескізу тексту, прийшов час для деталей, які автор так полюбляє використовувати у своїх роботах. Різноманітні іконки в стилі Y2K, надписи і т.д. Все це надає вашому постеру життя.

Посилання на паки іконок, які ви можете використовувати для ваших робіт (в PNG та SVG форматах) — Google Drive

🏗 Моделювання в Blender

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

Декілька порад перед початком:

використовуйте найновішу версію програми
звертайте увагу на кількість полігонів, їх занадто велика кількість, може впливати на продуктивність вашого комп'ютера

Імпорт SVG

Для початку, треба експортувати наш текст у форматі SVG. Після чого імпортувати в Blender. Далі налаштуємо ширину тексту, в правій панелі "Object Data Properties".

Модифікатор Remesh

Наступним кроком буде додавання модифікатора Remesh. Треба вказати таке значення, щоб на моделі не було артефактів. Хочу зауважити, чим менше значення, тим більше полігонів буде у моделі.

Конвертація в Mesh

Тепер треба конвертувати об'єкт в Mesh. Натискаємо правою кнопкою миші на об'єкт та обираємо пункт "Visual Geometry to Mesh".

Скульптінг

Переходимо в режим "Sculpt Mode" та обираємо пензлик під назвою "Cloth Filter" в панелі інструментів. Далі натискаємо клавішу "N", в панелі "Tool" ставимо такі налаштування:

Тепер наводимо пензлик на об'єкт, затискаємо кнопку миші та тягнемо вправо. Текст починає надуватись, чим далі ви тягнете курсор вправо, тим більше текст збільшується в об'ємі. Якщо результат вас не задовольнив, натисніть комбінацію клавіш "Ctrl + Z", та спробуйте ще раз.

Деталі

Додаємо криву у формі кола, налаштовуємо їй ширину в правій панелі "Object Data Properties" -> "Geometry" -> "Bevel" -> "Depth". Конвертуємо в Mesh: "Ctrl + a" -> "Visual Geometry to Mesh". Додаємо модифікатор "Subdivision surface" та натискаємо правою кнопкою миші -> "Shade Smooth".

Освітлення

Прийшов час виставити освітлення. Схема доволі проста: по боках освітлення типу "Area" великих розмірів (щоб світло було більш м'яке); згори освітлення того ж типу, але меншого розміру; попереду таке ж саме освітлення, але значення "Spread" знижено, для більшої контрастності (бліків).

Матеріали

Переходимо до матеріалів. Верхній текст має доволі простий шейдер, змінюємо колір та знижуємо показник "Roughness".

З нижнім текстом трохи складніше. Скористаємось нодами "Voronoi Texture" та "Glossy BSDF", поєднаємо їх за допомогою ноди "Mix Shder".

Для кола та куль створимо доволі простий шейдер скла.

Камера

Виставемо камеру, з великим значенням "Focal Length" (я ставив 155mm). В правій панелі обираємо "Output Properties" -> "Format", змінюємо розширення на 1080х1080 (тут на ваш смак).

Далі вирівнюємо камеру, так, як нам потрібно. Тепер треба імпортувати наш постер, з іконками, але без скетчу. Для цього активуємо аддон: "Edit" -> "Preferences" -> "Add-ons" -> "Import Images as Planes" (ставимо галочку).

Після цього можемо спокійно імпортувати картинку, як mesh: "Shift + A" -> "Image" -> "Images as Planes". Трошки поміняємо шейдер нашої картинки.

Під'єднаємо текстуру напряму до ноди "Material Output" та в ноді текстури оберемо "Color Space", як "Filmic sRGB". Залишилось лише вирівняти картинку.

Ховаємо задній фон

Ми майже закінчили, додамо трохи магії. На правій панелі переходимо в меню "Render Properties" -> "Film" -> "Transparent" (ставимо галочку).

Далі натискаємо на нашу картинку, яку ми імпортували і на правій панелі переходимо в меню "Object Properties" -> "Visibility" -> "Ray Visibility" -> "Camera" (забираємо галочку).

Рендер

Нарешті останній крок в Blender — налаштування рендеру. Права панель -> "Render Properties":

Чим більше значення "Max Samples", тим довше буде проходити рендер, але і якість буде вища. Хоча ставити занадто високі значення немає сенсу.

Ось і все, натискаємо "F12" та чекаємо. Далі "Image" -> "Save As".

🦶 Фінальний крок

Залишилось найпростіше — поєднати наш пустий постер, на який ми додавали Y2K іконки, та наш рендер. Ви можете додати текстуру шуму або інші текстури, це все на ваш смак.

📚 Корисні джерела

Шрифти від Grafikonelu (платні) - сайт
Пак іконок в стилі Y2K - Google Drive
Проєкт в Figma (зробіть дублікат) - Figma
Проєкт Blender - Google Drive

📑 Висновок

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

📞 Зв'язок з автором

Instagram — у "вибраних" можете подивитись мої роботи
Behance — тут далеко не все, але щось є :D
Telegram

Дякую за увагу.

Створення одягу в 3D

Антон Солодовников — Sun, 12 Mar 2023 19:48:19 +0000

У вільний час я займаюсь тим, що реалізую свої ідеї в 3D софті під назвою Blender. Доволі часто це допомагає в дизайні інтерфейсів, тому я стараюсь розвиватись в цій сфері.

Вступ

Доволі довго симуляція тканин/одягу, залишалась для мене складною та не вивченою темою. Все ж таки, я вирішив зануритись в це та поставити крапку на цій темі.

Вибір софта

Спочатку для створення одягу було обрано Blender, через те, що я вже був з ним знайомий. Але через певний час зрозумів, що це не найкращий софт для симуляції тканин. Доволі швидко наткнувся на програму під назвою Clo3D, цей софт ідеально підходить для створення моделей одягу. Його великою перевагою є зручні викройки, які в майбутньому можна втілити в реальні речі.

Початок роботи

Для початку, я вирішив створити простий образ, який складається зі штанів та футболки. Намалював ескіз, зробив пару правок та почав проєктувати викрійку.

Вийшло не з першого разу, але фінальна модель мене цілком задовольнила.

Рендер

Після того, як робота з моделюванням одягу була закінчена, прийшов час рендерів. На цьому етапі я обираю Blender, через його більшу функціональність в цьому плані. Експортую модель та налаштовую освітлення. При цьому, додаю принт на футболку.

Анімація

Перший етап завершився, але ще треба навчитись анімувати фізику одягу. Для цього я експортував аватар з Clo3D та на сайті Mixamo обрав анімацію ходьби. Після чого імпортував анімований аватар в програму та зробив симуляцію. Як і раніше, для рендеру скористаюсь Блендером.

Для швидкого рендеру анімації хотів скористатись рендер-фермою SheepIT, але через технічні труднощі в моделі, не зміг це зробити. Прийшлось рендерити 16 годин на ноутбучній gtx 1050.

Результат

На жаль, не зміг завантажити сюди відео. Тому ось посилання: відео

Корисні матеріали

Висновок

Отже, Clo3D - це чудовий софт, але є доволі багато мінусів. Доволі проблематично експортувати анімації в Блендер, та імпортувати їх в саму програму. Вона має не найкращий інтерфейс та засоби управління, в порівнянні з тим же Блендером (доволі суб'єктивно).

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

Дякую за увагу!

Інклюзивний дизайн

Антон Солодовников — Wed, 19 Oct 2022 12:38:54 +0000

Вступ 📖

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

Для більшої наочності звернемося до цифр. Коли ми говоримо про людей з інвалідністю чи певними порушеннями, то маємо на увазі від 15% до 20% населення планети.

Типи 📜

Звернемо увагу на типи порушень, які треба враховувати при проєктуванні інтерфейсів:

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

Колірна сліпота 🚦

В цій статті мова буде йти про адаптацію інтерфейсу для людей, які мають дальтонізм (нездатність розрізняти один або декілька кольорів).

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

Як адаптувати кольори 🌈

На попередньому прикладі можна побачити чітку проблему з контрастом сусідніх кольорів. Це можна вирішити зміною параметра світимості для кожного кольору.

Інструменти 🛠

ColourSimulations (PC) - цей додаток я використовував у прикладах.
Sim Daltonism (Mac) - альтернатива для Mac.
colorable - перевірка контрасту кольорів.
Color Contrast Analyzer (Chrome) - це плагін для Google Chrome. Ви можете зайти на сайт і далі або обрати всю сторінку, або виділити конкретну зону, яку хочете проаналізувати.

Джерела 📄

https://prjctr.com/mag/why-inclusive

Висновок 🧮

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

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

Проєктування веб-портфоліо. Сторінка редагування

Антон Солодовников — Mon, 26 Sep 2022 19:40:33 +0000

План 📝

Структура сторінки
Розділи
Верхня частина редактору
Поле вводу тексту та панель інструментів

Структура сторінки 🏗️

Надихнувшись (~~вкрав~~) uxpub, вирішив розробити схожу за структурою сторінку, яка буде складатись із двух розділів: редагування та попередній перегляд.

Розглянемо більш детально розділ редагування. Він складається з форми завантаження обкладинки, поля заголовка, поля тегів та редактора тексту з панеллю інструментів.

Розділи 🕹️

Як я вже казав, сторінка складається з розділу редагування та розділу попереднього перегляду. Це зроблено для покращення користувацького досвіду. Для навігації між розділами було використано перемикач "Edit/Preview".

Верхня частина редактору 🤯

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

Наступні два поля слугують для задання заголовка та тегів. Пам'ятайте, що гарною практикою є стилізація поля при вводі даних. Крім того, не забувайте про плейсхолдери.

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

Поле вводу тексту та панель інструментів 📝

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

Чому використання моноширинного шрифту в редакторі є гарною практикою? Є декілька відповідей:

Легше бачити тонкі розділові знаки, такі як: () {}
Однакова ширина символів Це все полегшує написання текстів та мінімізують можливі помилки.

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

Не забувайте про контраст тексту, він повинен бути, як мінімум, на 5 стопів вище ніж фон.

Висновок 🧮

Підсумовуючи, редактор тексту повинен бути максимально зрозумілим, розбірливим та простим. Сподіваюсь вам допомогла ця невеличка стаття.

Підписуйтесь та тикайте вподобайку, щоб не пропустити нові статті. Бажаю вам гарного для 👋

Проєктування веб-портфоліо. Сторінка статті

Антон Солодовников — Sat, 17 Sep 2022 12:38:46 +0000

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

План 📝

Структура сторінки
Верхня частина
Блок з текстом
Best practices

Структура сторінки 🏗️

В першу чергу, треба звернути увагу на максимальну ширину контенту статті (іншими словами контейнер). Для знаходження ідеальної ширини, подивимось на такі сайти, як medium — контейнер 692 px. На uxpub контейнер дорівнює 679 px. Слідуючи з цих прикладів, можна зробити висновок, що розмір контейнера повинен бути від 600 до 700 px.

У треді про типографіку на StackExchange один коментатор надає чудове емпіричне правило – перевірте ширину стовпця самостійно:

«Якщо вам доводиться рухати шиєю/головою, щоб прочитати текст в одній колонці, то, мабуть, вона занадто широка. В ідеалі читач повинен мати можливість переглядати кожен рядок, просто рухаючи очима. Звичайно, різні носії/пристрої зчитуються на різних відстанях, і різні люди також можуть віддавати перевагу різним відстаням зчитування, тому це не точна наука».

Після того, як було визначено розмір контейнера, перейдемо до анатомії самої статті. Візуально сторінку можна поділити на head та body.

Верхня частина 🤯

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

Блок з текстом 📜

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

Best practices 💎

Речі, які зроблять вашу статтю краще:

1. Ієрархія

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

2. Висота рядка (Line height)

Коли справа доходить до читання вмісту, висота рядка відіграє вирішальну роль. це стосується не тільки дизайну, але й документів і книг. Рекомендована висота рядка: 150%.

3. Інтервал між абзацами

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

4. Відстань між словами

Основна роль проміжку між словами — зменшити кількість тексту, який користувач бачить одночасно.

5. Контраст

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

Висновок 🧮

Підсумовуючи, стаття повинна бути легка для читання та простою для сприйняття. Всього цього можна досягнути, якщо дотримуватись best practices.

Дякую, що дочитали до кінця та бажаю вам гарного для 👋

Проєктування веб-портфоліо. Каталог

Антон Солодовников — Thu, 15 Sep 2022 19:01:14 +0000

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

План 📝

Як завжди починаю з плану, завдяки якому ми пройдемося по всьому життєвому циклу створення каталогу.

Структура сторінки
Вкладка з фільтрами та пошуком
Блок карток
Анатомія картки
Скелетон лоадер

Вступ 📖

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

Структура 🏗️

Візуально каталог можна поділити на дві частини:

вкладка з фільтрами
список товарів

Вкладка навігації в каталозі 🧭

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

Грубо кажучи ця вкладка є панеллю керуванням списку.

Фільтр
Фільтри будуть виконані в формі dropdown списків. Детальніше про ці поля, ви можете прочитати в цій статті.

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

Пагінація
Переді мною стояв вибір: пагінація чи "infinite scroll". Обдумавши плюси та мінуси, я зупинився на пагінації. З недоліків нескінченної прокрутки, можу виділити такі: нерелевантність скролл-бару, відсутність футеру. Читайте цю статтю та обирайте те, що вам підійде.

Список товарів 📄

Список товарів буде у вигляді карток, на одній сторінці будуть відображатися лише 6 карток. Для навігації між сторінками ми будемо використовувати пагінацію.

Анатомія картки 🧠

Картка — це візуалізація певного товару, в моєму випадку це роботи з дизайну та вебу (у вигляді статей). Мета картки - презентувати в стислому форматі роботу автора (статтю).

Картка містить:

прев'ю статті (картинка)
заголовок
теги
частину тексту
дату створення
кнопку для переходу на роботу

Скелетон лоадер 💀

Деякі блоки інтерфейсу завантажуються, тільки тоді, коли з сервера приходить інформація. Іншими словами, вебсайт чекає деякий час, а потім вже відображає дані. В цей проміжок часу, юзер побачить пустий екран, замість очікуваного контенту. Нам треба згладити цей перехід, тому звертаємо увагу на "Skeleton loader" (більше про це).

Підсумок 🧮

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

Бажаю вам гарного дня 👋

Проєктування веб-портфоліо. Домашня сторінка

Антон Солодовников — Sat, 10 Sep 2022 10:10:23 +0000

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

План 📝

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

Контейнер
Структура
Навігація
Головний блок тексту та кнопка
Анімований Сатурн
Блок карток
Футер

Вступ 📖

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

Контейнер 📦

Почнемо з розмітки контейнера, він буде поміщати в себе всі елементи сторінки. Максимальна ширина контейнера — 1000 пікселів. Внутрішні відступи — 20 пікселів.

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

Структура 🏗️

Було вирішено розмістити елементи сторінки за F-патерном. Більше про це ви можете прочитати в цій статті.

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

Навігація 🧭

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

В моєму випадку, навбар буде складатися з логотипа, посилань та панель вибору мови.

Головний блок з текстом та кнопка 📜

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

Для заголовка я обрав шрифт Gilroy, 80 пікселів, з кольором Primary-80 (див. кольорову систему в першій частині).

Своєю чергою, для підзаголовка було обрано шрифт SF Pro Text, 16 пікселів, колір — Primary 50. При цьому, звертайте увагу на контраст тексту. В моєму випадку, контраст — 4.3, що не є ідеальним показником (тримайте контраст не менше 4.5). Я порушив правило 4.5, виправдовуючи це тим, що текст є другорядним.

Виміряти контраст можна на цьому сайті.

Анімований елемент на фоні 🪐

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

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

Якщо комусь цікаво, анімація обертання по орбіті буде здійснена за допомогою CSS властивості offset-path.

Блок карток 🎴

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

Футер 🏢

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

Раджу прочитати чималу статтю на тему футера.

Підсумок 🧮

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

Навбар
Блок із заголовками та кнопкою
Анімований елемент на фоні
Блок карток
Футер

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

Бажаю вам гарного дня 👋

Проєктування веб-портфоліо. Концепт

Антон Солодовников — Thu, 08 Sep 2022 14:32:12 +0000

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

Так сталося, що думка про веб-портфоліо надійшла не тільки мені, а й ще одній людині. Найкумедніше, що вона так само пише статті про створення свого портфоліо, рекомендую прочитати.

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

Кінцеві цілі 🎯

Головна мета сайту: презентувати свої роботи потенційному замовнику та змусити його зв'язатися зі мною. Для презентації робіт буде створений каталог з пошуком, фільтрами та пагінацією. Кожна робота буде мати вигляд картки (як стаття в блозі) із заголовком, тегами та описом. Крім того, на сайті повинно бути CV, яке у формальній формі презентує вас.

План розробки проєкта 📝

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

I. Проєктування макета вебсайту.
Саме про це будуть декілька наступних статей.

Концепт
Логотип
Кольорова система та шрифти
Основні компоненти інтерфейсу
Десктопна версія
Мобільна версія

II. Написати клієнтську частину (Front-End).
Front-End планується написати на Next.js + Redux Toolkit.

III. Написати серверну частину (Back-End).
Серверна частина буде створена на Node.js: Express.js + Multer + Sharp + MongoDB

IV. Задеплоїти апку.
До цього поки ще далеко, але розглядався Netlify з Heroku.

Концепт 🖼️

В першу чергу я почав з розробки концепту. На меті було створити таке, що я ніколи не робив, щось абстрактне.

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

Зупинився на монохромному дизайні з темною темою. Час переходити до наступного кроку.

Логотип 🔳

Логотип - це невіддільна частина кожного сайту. Він повинен бути впізнаваним та асоціюватися з проєктом. Для портфоліо було обрано доволі банальний логотип з літерою "S" всередині (перша літера мого прізвища). Але мені здалося це доволі невигадливо, тому був вибраний стиль піксель-арту.

Кольорова система та шрифти 🎨

Прочитавши статті на uxpub (стаття #1, стаття #2), розпочав роботу. Для початку вибрав основний колір HSL(240, 2, 5). Після чого підвищував світимість на 10 при кожній ітерації (крім першої, в ній я підвищив світимість на 5).

Як основний шрифт, було обрано San Francisco Pro Text, а для заголовків Gilroy.

Основні компоненти інтерфейсу 🧩

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

Спочатку були розроблені кнопки та поля вводу.

На сторінці каталогу, планується зробити пошук та сортування, для цього були створені dropdown поля (фільтри) та пагінація.

Каталог буде складатися з карток, які представлені у двох варіантах (для десктопу та для мобайлу). Крім того, управляти сайтом можна з адмін-панелі. Для того, щоб зайти в неї, треба пройти авторизацію.

Навігацію для мобільних девайсів, було вирішено зробити у виді панелі вкладок. Раджу прочитати ці матеріали, в яких описуються переваги такого підходу (стаття #1, стаття #2).

Довершення ✒️

На додаток до всього написаного у цьому пості, хочу підсумувати. Я розробив концепт, створив кольорову систему, підібрав шрифти та створив найважливіші компоненти з логотипом. Це лише один з етапів, які ще треба пройти, далі ще буде багато цікавого.

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

Бажаю вам гарного дня 👋