Портфоліо на Behance. Як оформляти кейси? [гайд+ідеї]
Що таке Behance і портфоліо на ньому? Це вікно, через яке потенційні клієнти та спільнота побачать ваші найкращі роботи. Важливо підготувати портфоліо зі смаком і одночасно з розумінням того, як привернути увагу. Саме тоді клієнти знайдуть вас або приймуть рішення про співпрацю.
Готові дізнатись секрети ефективного портфоліо разом з конструктором сайтів Weblium – тоді починаємо.
Як заповнювати профіль на Behance?
Почніть з фундаменту – вашого профілю на Behance. Він має бути міцним, адже перше враження має значення. Враховуйте, що мова Behance – англійська. Саме на ній ваші кейси більше переглядатимуть.
Вибір професійного фото
Оберіть якісне, проте не формальне фото. Покажіть свій стиль і характер, але не втрачайте професійність. Також застосовуйте фільтри або художньо оформлюйте аватар, щоб відобразити вашу особистість.
Опис профілю
Хто ви? Що вас надихає? Які ваші сильні сторони? Будьте стислими, але відкритими – це ваш шанс розповісти свою історію. Використовуйте ключові слова, які допоможуть клієнтам вас знайти.
Досвід та освіта
Не забудьте вказати, де ви працювали, де навчалися, а також ваші досягнення. Врахуйте, що короткі описи проєктів та компаній, з якими ви співпрацювали, можуть бути корисними для розуміння вашого досвіду.
Як вибрати проєкти для портфоліо на Behance
- Чим пишаєтеся. Забудьте про просто нормальні роботи – вони зайві. Подумайте про свого ідеального клієнта і те, які проєкти він міг би шукати. Наприклад, якщо ви хочете працювати додатково над мобільними додатками, то покажіть кілька яскравих прикладів таких проєктів.
- Різноманітність. Покажіть свою унікальність, демонструючи різні стилі та напрямки. Ви маєте створити відчуття, що здатні виконати різноманітні завдання. Можливо, у вас є досвід роботи з UX/UI, анімацією або навіть рекламою – покажіть це, оформлюючи портфоліо вебдизайнера.
- Кількість робіт. Не перевантажуйте портфоліо на Behance. Обмежтеся 10-15 цікавими проєктами. Це дозволить підкреслити ваші найкращі роботи та не відштовхне відвідувачів через занадто велику кількість матеріалів.
Кейс та робота: у чому різниця?
Кейс та робота – два різних аспекти вашого портфоліо на Behance. Їх важливо розрізняти, щоб правильно оформити портфоліо вебдизайнера.
Кейс – це ваша можливість розповісти історію проєкту, від початку до кінця, з акцентом на процесі та викликах. Кейс містить як візуальні матеріали (скриншоти, макети, прототипи), так і текстові описи, які розкривають вашу думку та додають контекст.
Натомість робота – це окремий проєкт, який ви створили. Робота фокусується просто на візуальному аспекті вашої творчості. Зазвичай роботи представлені у формі зображень, ілюстрацій або відео, і вони менше зосереджені на контексті та процесі роботи, ніж кейси.
Стандартна структура оформлення кейсу на Behance
Оформляйте кейси з розумінням, дотримуючись послідовної структури. Розкажіть про задачу, процес, інструменти, що використовували, та, звісно, про результати. Це допоможе відвідувачам легше сприймати інформацію.
1. Назва проєкту. Додайте виразну та лаконічну назву, яка відображає суть вашого проєкту та привертає увагу аудиторії.
2. Завдання. Опишіть основну мету проєкту, проблеми, які ви вирішували, та очікувані результати.
3. Клієнт. Вкажіть, для кого був розроблений сайт, та коротко опишіть суть бізнесу, особливості неприбуткової організації або особистого бренду.
4. Ідея, типографіка, кольори. Розкажіть про концепцію дизайну, вибір шрифтів та кольорову палітру, а також те, як вони підкреслюють ідею проєкту.
5. Використані елементи. Опишіть ключові елементи дизайну, такі як навігація, ілюстрації, фотографії, іконки тощо.
6. Візуалізації. Презентуйте вашу роботу через візуальні матеріали, такі як скріншоти сторінок сайту, мокапи, відео, анімації тощо.
7. Підсумок. Зробіть підсумок вашого проєкту, розкажіть про досягнуті результати, отримані відгуки від клієнта та можливі покращення.
8. Інструменти. Зазначте софт, який використовувався під час розробки сайту. Це можуть бути графічні редактори, інструменти для прототипування, CMS, бібліотеки, мови кодування. Якщо це конструктор (наприклад, Weblium) – зазначте це.
9. Ключові слова. Додайте релевантні ключові слова, які допоможуть користувачам Behance знайти ваш проєкт під час пошуку.
10. Співавтори. Також не забудьте вказати співавторів, якщо в проєкті брали участь інші дизайнери чи спеціалісти, зазначивши їхню роль у реалізації проєкту.
Як правильно завантажувати роботи на Behance: поради щодо зображень, анімацій та відео
Не забувайте, що велика кількість користувачів переглядає кейси на Behance з мобільних. Тому при оформленні кейса завжди думайте, як він виглядатиме на мобільних девайсах.
[кількість блоків] Для зручного перегляду ідеальна кількість блоків у кейсі від 7 до15, проте для змістовних кейсів можна збільшити кількість блоків.
[довжина кейса] Загальна довжина блоків у кейсі має становити близько 15 000-20 000 пікселів; уникайте створення надто довгих кейсів без необхідності.
[довжина кейса] Behance сам оптимізує ширину зображень у кейсі до 1400 пікселів. Але ви можете завантажувати зображення високої якості для перегляду в повноекранному режимі по кліку.
[побудова блоків] Будуйте кейс з окремих змістових блоків, експортуйте кожний блок як окреме зображення для швидкого завантаження.
[формат зображень] Завантажуйте статичні блоки на Behance у форматі PNG або JPG, вибираючи формат, який краще зберігає якість зображення для кожного конкретного випадку.
[поділ зображень] При сильному погіршенні якості зображення в публікації, розбивайте його на частини для покращення якості і зменшення розміру файлу.
[GIF-анімація] Інтеграція гіфок в кейс проста (як звичайних картинок), але їх якість нижча, ніж у відео; максимальний розмір зображень на Behance – 50 МБ.
[завантаження відео] Для високоякісної анімації використовуйте відеоформат та вбудовуйте відео в кейс з Vimeo для гнучкого налаштування відтворення.
[налаштування відтворення] Під час вбудовування відео використовуйте ключі autoplay=1, muted=1 та autopause=0 для автовідтворення, вимикання звуку та одночасного відтворення декількох відео.
Як створювати превʼю для кейсів на Behance
Мокапи
Використовуйте мокапи для демонстрації вашого дизайну у реальному середовищі, тобто на екрані комп'ютера або смартфона.
Колажі
Створюйте колажі, які поєднують різні елементи вашого дизайну, а також візуальні акценти, щоб привернути увагу.
Key Visual
Використовуйте віжуал, який передає основну ідею вашого проєкту та створює емоційний зв'язок з аудиторією.
Графічні рамки та оверлеї
Використовуйте стильні рамки та оверлеї, щоб надати вашим прев'ю єдиний вигляд та підкреслити важливі елементи.
Один екран
Виберіть найяскравішу частину вашої роботи над сайтом і покажіть її на прев'ю, доповніть ділянку екрана стильною типографікою.
Реальні фото
Розмістіть пристрій з відкритим сайтом у красивому інтер'єрі та зробіть реальне фото, щоб надати теплоти реального світу вашій роботі.
Як правильно підбирати ключові слова для кейсів на Behance
Ключові слова допоможуть вашому проєкту ранжуватись за пошуковими запитами наBehance та траплятися у рекомендаціях. Використовуйте підібрані ключові слова в заголовку, описі, тегах, а також в тексті вашого кейсу, якщо це можливо та доречно.
Як підібрати найкращі ключові слова, щоб оформити портфоліо вебдизайнера правильно? Все просто.
Визначте тематику вашого проєкту. Перед тим, як підбирати ключові слова, уточніть тематичні аспекти вашої роботи. Чи створювали ви дизайн магазину, блогу або лендингу? Запишіть специфіку вашого вебпроєкту.
⬇️
Вивчайте конкурентів. Пошукайте успішні кейси, що стосуються вашої ніші на Behance. Зверніть увагу на ключові слова, які використовують інші дизайнери.
⬇️
Визначте ключові елементи дизайну. Відобразіть основні елементи дизайну вашого проєкту, такі як кольорова схема, типографіка та ілюстрації. Це допоможе вам сформулювати специфічні ключові слова, пов'язані з вашим проєктом.
⬇️
Згадайте використані інструменти. Включіть ключові слова, які стосуються софту або технологій, які ви використовували під час створення вашого проєкту, таких як "Figma", “Weblium”, “CSS”.
⬇️
Узагальніть методи в роботі. Запишіть ключові слова, які характеризують ваш підхід до дизайну, такі як, наприклад, "responsive design", "mobile first" або "minimalism".
Виберіть 5-10 найбільш релевантних і цікавих ключових слів для вашого кейса. Після публікації, слідкуйте за відгуками, лайками та переглядами, щоб зрозуміти, чи ефективно ви використовували ключові слова. Якщо ваш кейс не отримує бажаних відвідувань, не вагайтеся експериментувати з ключовими словами та вносити зміни.
Як креативно оформити портфоліо вебдизайнера на Behance
Розповідь історії проєкту викличе емоції та покаже вашу здатність знаходити оптимальні рішення. Придумайте змістовну історію, яка об'єднає всі елементи вашого кейса та залучить читачів.
Ось кілька ідей, як сторітелінг може зробити ваші кейси цікавими та змістовними.
Редизайн сайту (або “до та після”)
Демонструйте вплив дизайну на продукт, демонструючи сайт "до" та "після" реалізації ідей. Зіставте структуру, юзабіліті та візуальні аспекти сайту, показуючи поліпшення в навігації, типографіці та кольорах. Відобразіть додаткові можливості, такі як інтеграції з соціальними мережами, фільтри для продуктів або форми зворотного зв'язку тощо.
Демонстрація процесу розробки сайту
Візуалізуйте процес розробки дизайну, включаючи знімки екрана з різних етапів роботи, інструментів та коментарів про кожен крок. Підкресліть співпрацю з командою, врахування зворотного зв'язку. Використовуйте прототипи для презентації ідей. Ваші короткі описи продемонструють систематичний підхід до розробки.
Вплив вашої роботи на результати клієнта
Підкресліть результати вашої роботи та вплив на клієнта, демонструючи конкретні показники зростання трафіку, збільшення продажів або покращення користувацького досвіду. Розкажіть, як ваші рішення сприяли залученню нових клієнтів, покращенню взаємодії з брендом або оптимізації конверсії. Також акцентуйте на тому, чи відповідали ваші дизайнерські рішення стратегічним цілям клієнта.
Пошук концепції та референси
Розказуйте історію вашого проєкту у кейсі, тобто як відбувалося формування ідеї та вирішення проблем. Що надихнуло вас, звідки ви черпали ідеї? Згадайте про референси та ключові концепції, що допомогли вам на шляху до фінального дизайну. Відкрито діліться особистими враженнями та думками, роблячи свою розповідь більш емоційною та зрозумілою для читача.
Використання вебтехнологій
Опишіть, як ви використовували вебтехнології, такі як HTML, CSS, JavaScript або різні фреймворки та бібліотеки, для створення дизайну. Розкажіть, як ви працювали з адаптивним дизайном, оптимізвували швидкістьі завантаження або створювали інтерактивні елементи. Це покаже вашу технічну обізнаність та допоможе клієнтам краще оцінити ваші навички.
Відеопрезентація вашої роботи
Створюйте презентації, щоб показати процес роботи над сайтом та найцікавіші моменти. Відео може містити швидку зйомку вашої роботи (speed art) на екрані комп'ютера. Не забудьте додати голосовий коментар, де ви можете пояснити свої дії та розкрити свої творчі процеси. Також можна використовувати відео, щоб продемонструвати фінальний продукт в дії.
Weblium на Behance
Ми постійно оновлюємо шаблони нашого конструктора сайтів. Зараз на Weblium понад 300 шаблонів. Деякі з них ми показуємо на нашому Behance. Подивіться на шаблони та наш підхід до їхнього оформлення. Можливо, якийсь із них ви використаєте під час швидкого створення сайтів для ваших клієнтів за допомогою Weblium.