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

Дизайн Ч.4 - Сторінка “Про мене” та коментарі

Надія Ковальська — Sun, 22 Jan 2023 07:59:26 +0000

Головна сторінка сайту візитки - це сторінка “Про мене”. Що на вашу думку вона повинна вміщувати?

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

Тож, я так і зробила.

Перший екран

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

Освіта/досвід

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

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

Блог, форма зв’язку та футер

Блог, форма зв’язку та футер повторюються з головної сторінки, тому детальніше можете прочитати у попередньому пості. А тут залишаю лише зображення.

Резюме

Раніше писала, що можна буде подивитись на Behance весь сайт, коли опишу всі сторінки. То так є і на зараз.

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

На цьому, поки що все.

Дизайн Ч.3 - Навігація, Головна сторінка та коментарі

Надія Ковальська — Sun, 15 Jan 2023 08:22:28 +0000

Настав час цікавенького: дизайну та текстів.

Давайте нагадаю навіщо це потрібно:
Щоб випробувати свої навички у сфері SEO-просування, мені на думку спало зробити сайт. Та звісно, сайт цей повинен приносити мені якусь користь. Навіщо ж просто так його робити? Тож я вирішила зробити сайт-візитку, що одночасно буде мої портфоліо та де я буду вести блог.
Детальніше ви можете почитати тут.

Розмітка

Спочатку скажу, що використовувала для Desktop версії 11-ти колоночну сітку з шириною колонки 100px та міжколоночним інтервалом у 20px. Для Mobile 4-ох колоночну сітку з шириною колонки 68рх та міжколоночним інтервалом у 20px.

Навігація та футер

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

Будь-яка навігація складається з логотипа та меню. Також я вирішила для зручності користувачів додати до навігації номер телефону та кнопку до поп-апу з формою.
У поп-апі крім форми також є контакти та соц. мережі. До речі, всі іконочки відмальовувала самостійно. Якщо вам здастя, що вони криві чи не пропорційні, то це так потрібно🤫.

Та у Mobile навігацію спростила до логотипа та бургер-меню, до якого винесла меню та контакти. Ще додала блок з посиланням на останню публікацію. Користувач буде бачити заголовок та напрямок (тег) і тоді можливо зацікавиться.

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

Головна

УТП

Як я вже писала раніше Головна повинна зацікавлювати, тому вирішила розпочати свій сайт з двох питань: Що цей сайт на справді? та Хто я на справді?
Здається, останнім питанням задаються всі джуни, особливо, коли намагаються знайти “той самий” напрямок для побудови своєї майбутньої кар’єри. То для мене це питання все ж таки залишається відкритим.
На перше ж питання не можливо відповісти однозначно, враховуючі скільки функцій сайт повинен виконувати.

Звісно, це не зовсім Унікальна Торгова Пропозиція, бо все ж таки я нічого не продаю, але в моєму розумінні перший екран повинен викликати у користувача запитання на кшталт: “Що воно значить?” чи “Навіщо це потрібно? Цікаво, подивлюсь ще”.

Концепція проєкту

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

Про мене

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

Історія створення

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

Результати

На певно це найцікавіший блок, бо тут можна дізнатись чи вдався мій проєкт, чи ні. Хоча звісно, якщо люди будуть якось на нього потрапляти, то на певно так, але ж циферки це завжди цікаво. Та наочно.
Також подумала, що можна зробити інтерактивчик. Не просто почитати та здивуватись (чи ні) циферкам, а й зробити зворотний зв'язок.

Останні пости

Цей блок виглядає майже як “Історія створення”, але показує останні виставлені пости.

Резюме

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

Намагалась викласти інформацію поступово та логічним ланцюжком: від ідеї і до результату.

Чекаю на ваші коментарі та пропозиції.
На цьому, поки що все.

Контент для блогу та все, що для цього потрібно

Надія Ковальська — Sun, 08 Jan 2023 08:06:29 +0000

Я почала вести блог. Що для нього потрібно? Та наскільки просто почати вести його?

Не знаю чи здогадуються люди, що контент робиться досить складно. А яку велику роботу потрібно зробити, щоб почати вести блог.

С першого погляду потрібно придумати тему та написати декілька постів, а потім дивитись далі та пробувати писати наступні. Це перша думка, яка виникла у мене на цю тему та з якої з’явились попередні 4 пости на тему сайту візитки-блогу-портфоліо.

Потім була велика перерва у моїх публікаціях та я замислилась: чи все настільки просто?

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

Тож з чого почати?

Продумати ідею блогу та навіщо він потрібен

У моєму випадку: я хочу показати себе як самостійного спеціаліста, що не залежить від компанії. Це повинен бути сайт, що розповість про мене та одночасно покаже мій досвід у SEO. Бо, якщо на нього будуть потрапляти люди, то значить в мене щось да й виходить. Також створила більш живий блог у Телеграм для спілкування з аудиторією. До речі, підписуйтесь у Telegram.

Проаналізувати конкурентів

Це потрібно для того, щоб:

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

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

Також, подивившись де водяться конкуренти, можна вибрати платформу/и для публікації постів.

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

У UXpub та на майбутньому сайті буду публікувати великі пости.
У Telegram буду показувати робочий процес, спілкуватись та ділитись власними думками з приводу роботи.
Створю 2-3 постійні рубрики.

Проаналізувати цільову аудиторію

Аналіз цільової аудиторії допоможе зрозуміти для кого ви будете писати та які теми будуть цікавити ваших підписників.

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

Побудувати контент-стратегію та контент-план

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

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

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

Висновки

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

Наступним етапом у В+Б=П буде створенням тексту для сайту та, власне, завершення дизайну.

Дизайн Ч.2 - (Т+К)*Те=Н

Надія Ковальська — Tue, 11 Oct 2022 14:50:07 +0000

Здогадуюсь, що у вас виникло деяке запитання: Що ж означає ця дивна формула? Та і як взагалі формули стосуються дизайну?

Відповідаю:

(Типографіка + Колір) * Текст = Настрій

З цього зрозуміло, що настрій сайту залежить від типографіки, кольорів та тексту. При використанні слова "Настрій" маю на увазі ті відчуття та емоції, які викликає сайт: чи то довіру, чи то спокійність, чи дружність, чи надійність і так далі. Все це виконується, якщо підібрати кольори та шрифти, а також написати відповідний текст.
Можна подумати: то на що так паритися? або на що це взагалі потрібно? Та відповідь дуже проста: від зручності читання або від приємного кольору людина отримує певне враження. І це враження вплине на те, чи купуватиме людина щось, якщо це інтернет-магазин, або буде читати далі статтю, якщо це блог.

Колір та Типографіка

Для цього я вирішила прочитати книжку "Типографіка кольору. Практикум" Т. Самари. Як виявилось існує дуже багато настроїв. Та не лише таких простих як Щирість, Дружність або Романтичність. Є ще різні концепції, історичні проміжки, вікові групи, яким відповідають властні кольори та типи шрифтів.

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

Тож я вирішила, що мій сайт повинен бути дружнім, щирим, викликати довіру та впевненість. Для цього найкраще підходять відтінки жовтого та синього. Також додати світло сірий для фону, а темно синій використати як основний колір та взяти 2 відтінки тепло-жовтого для акцентних елементів.
Зі шрифтів я вибрала жирний та закруглений Nunito для заголовків, а для тексту Lora - контрастний серіф з рубленими засічками.

Текстове наповнення

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

Логотип

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

Висновки

Тож тепер у мене є:
✔ приблизна структура
✔ кольорова гамма
✔ типографіка
✔ текстове наповнення
✔ настрій
✔ логотип

Наступним кроком буде створити прототип.

Чекаю ваші коментарі, зауваження та пропозиції.

З великою цікавістю,
Надія

Дизайн Ч.1 - Підготовка

Надія Ковальська — Sun, 02 Oct 2022 13:15:19 +0000

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

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

З цього витікає:

Портфоліо - це Головна сторінка, яка буде розповідати про сайт та його головну мету;
Візитка - це сторінка "Про мене";
Блог - це сторінка "Блог" та сторінки постів.

Контент

Головна сторінка повинна зацікавлювати з першого погляду, бо, як відомо, людина може покинути сайт продивившись його всього 3 секунди, якщо не знайде чогось цікавого. Тож УТП (унікальна торгова пропозиція) повинно чіпляти. Далі потрібно розповісти про концепцію проєкту: ціль створення, кроки до досягнення та цільову аудиторію. Коли користувач все ще зацікавлен, введу інформацію про себе та залишу посилання на детальну (сторінка "Про мене"). Наступне, що може зацікавити користувача це історія створення сайту, адже вона все ще не зрозуміла (сайт є - історії не має) - блок з постами у хронологічному порядку. Тепер маючи повне представлення про сайт, варто ввести результати, тобто деякі числові показники його успішності, які потрібні, крім того, що він просто існує. Та на при кінці це блок с останніми постами.

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

Гадаю, що зі сторінкою "Блог" все зрозуміло. На першому екрані вона повинна вміщати останній пост, а далі мати блок зі всіма постами. Також орієнтуватися по блогу можна буде за допомогою тегів: Дизайн, Front, Back, SEO та інші. Та в кінці буде блок з раніше переглянутими постами.

Та на кожній сторінці має бути футер, який буде складатися з форми зв'язку зі мною, контактів та соц мереж.

Наступні кроки

Маючи план контенту, далі потрібно зробити:

Текстове наповнення, оскільки текст буде переважати.
Настрій сайту.
Кольорову гамму.
Типографіку.
Логотип.

З великим ентузіазмом,
Надія

Планування

Надія Ковальська — Wed, 07 Sep 2022 15:57:29 +0000

Я люблю придумувати плани та не люблю, коли, щось не вдається передбачити.

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

Етап 0. Продумати інструменти
Тут я маю на увазі, мови програмування, бібліотеки, фреймворки та база даних. Я можу припустити, що звісно мені доведеться використати HTML та CSS. Без них нікуди, а ось з іншими речами все дуже і дуже цікаво.

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

Етап 2. Створити дизайн + написати тексти
Після приготування можна переходити до дизайну, але для мене все не так просто. Детальніше про етап створення дизайну розпишу у постах з заголовком типу "Дизайн Ч. Вженезрозумілояка".

Етап 3. Продумати SEO
Маю на увазі продумати ключові слова, подивитися схожі сайти, створити семантичне ядро і так далі. Розписати, що куди додавати на етапі програмування.

Етап 4. Зверстати сайт по дизайну
Зробити Front-end частину, тут пояснень не треба.

Етап 5. Продумати серверну частину
А саме, я припускаю, що для блогу мені буде потрібна серверна частина та база даних, яка в неї входить.

Етап 6. Зробити Back-end
Під'єднати до гарної картинки технічну частину та завантажити контент (мої пости).

Етап 7. Запустити сайт на домен
Для цього ще треба знайти де купити домен та повністю розібратися з цією темою.

Етап 8. Прикріпити Google Analytics та Google Tag Manager
Крім прикріплення звісно їх ще треба налаштувати.

Етап 9. Подивитися, що з цього вийде та внести поправки у частину SEO

Ось така стратегія розвитку в мене вже є.

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

Якщо у вас є якісь пропозиції чи зауваження, буду рада вислухати.

З повагою,
Надія

Маленька історія ідеї

Надія Ковальська — Mon, 05 Sep 2022 16:16:52 +0000

Історія про те, як мені на думку спало це зробити та, що було потім.

З чого все почалось

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

Я сіла все-таки їх передивитись. І колись давно я зберегла статтю про помилки при поданні резюме до компанії на посаду UX-дизайнера. Це дуже цікава стаття, описувати не буду, загалом я згодна зі всіма думками. Та в мене є одне "але".

Тож щоб зрозуміти краще, короткий екскурс до моєї біографії:
Я вчусь на 4 курсі в НТУ ХПІ, на спеціальності Інженерія програмного забезпечення, яка є досить технічною спеціальністю, а я є досить творчою людиною, тому 2 роки навчання я вчила самостійно вебдизайн. Тож маючи розуміння створення дизайну сайтів та аналітичний мозок, мене запросили на роботу до TurumBurum на посаду молодшого UX-аналітика. Зараз я стараюсь розвиватися у бік SEO.

Так, маючи представлення про мене, ви звісно зрозуміли, що стаття є для мене досить корисною. Але причину "але" поки ні.
Ось проблема:
Маючи деякий досвід в UX, я не маю портфоліо (можливо це поки що), бо як це часто буває багато клієнтів проти, щоб компанія або фахівці розповідали про роботу з ними. Тож зрозуміло, що моє резюме багато роботодавців не дивились би.

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

Ідея

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

Таким чином я як фахівець без досвіду покажу на наочному прикладі свої скілли зі знання створення та продумування структури сайту, UX/UI дизайну, розробки сайту та SEO просуванні.
Ось виходить перша складова сайту - портфоліо.

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

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

Завершення

Маючи таку досить масштабну ідею для однієї людини, я звісно поїхала за блокнотом, щоб вести записи розвитку проєкту. А на ux.pub буду викладати історію створення, а точніше як написала в описі свого профілю: вести "бортовий щоденник".

Ви спитаєте:

А що ти робиш тут? А я відповім:
Перевіряю свою ідею. Тому, якщо ви маєте запитання, поради чи зауваження, я з радістю вам відповім.

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

З повагою,
Надія