Як оформити презентацію свого проекту топ 10 порад
Одного осіннього дня Анатолій Денисов спантеличив мене проханням провести першу глобальну ревізію розділу «Кейси» на CMSMagazine. З моменту старту накопичилося майже 193 проекту. Все ще ускладнилося тим, що треба не просто подивитися і закрити, але і вибрати кілька кращих. І все це під соусом UX / UI.
Взагалі, суть цього матеріалу трохи ширша. Смакуючи кращі приклади, паралельно, ми будемо розбиратися, що таке кейс і навіщо це взагалі потрібно.
А якщо потрібно, то як зробити з цього дійсно красиву і захоплюючу історію. Від безглуздих текстів і незрозумілих картинок до, як це модно говорити, Віжуал Сторітеллінга :). Поїхали!
Навіщо взагалі потрібен кейс?
У сфері веб-розробки були різні спроби підійти до цього формату. Пам'ятайте, що коли-то для портфоліо було досить просто картинок? Але, так чи інакше, еволюція взяла своє. Тепер у вас може бути не тільки Портфоліо, а й Кейси. Причому останні можуть бути фантастично різними. Оскільки ми можемо використовувати для цього всілякі цифрові примочки.
Часом досить зробити 5-7 соковитих і актуальних кейсів, щоб забезпечити стабільний трафік на ваш сайт і якусь ауру обговорень в соціальних мережах.
Кейси можуть бути різними. На старті створення вам потрібно зрозуміти, кого ви збираєтеся чіпляти цими історіями:
- Дизайнерів. Хочете, щоб до вас приходили за натхненням.
- Клієнтів. Щоб, приходячи, довго смакували і, нарешті, жали на кнопку «Замовити».
- Потенційних співробітників. Швидше за все, вони будуть і надихатися і смакувати. Але, не маючи таких навичок, попросяться до вас в компанію.
Безумовно, є якісь окремі прийоми для кожної з цих груп окремо. Але сьогодні ми розглянемо поради, як зробити так, щоб догодити всім відразу.
1. Зустрічають по обкладинці
Ми живемо в епоху інформаційного ожиріння через що Новомосковсктель став шалено ледачим. Тому наше головне завдання - потрапити в область уваги і викликати інтерес у перші 5-7 секунд. Саме стільки часу в середньому потрібно користувачеві для прийняття рішення: скролл далі або закрити відразу.
Для старту кейса критично важлива обкладинка. Зазвичай це яскрава, соковита, (часом не має зв'язку з реальністю) обкладинка, в який ви говорите, про що це взагалі.
Задній фон в більшості випадків повинен відрізнятися від білого. Або однотонний яскравий, або з контекстним бекграундом. Короткий і доступний для читання заголовок. Головний скріншот вашого проекту може бути в мокап пристрою. Цікава геометрія або композиція. Простий спосіб перевірити результат самому - подивитися на обкладинку з відстані 2-3 метрів. Повинно чіпляти, працювати як постер до фільму.
Пам'ятайте, що кейс - це не просто купа розкиданих картинок. З шматками розповіді, як же вам було добре разом з замовником на дачі або в фотошопі. Ваша мета - зачепити погляд користувача і тримати його в тонусі протягом усього скролла (а це, повірте, не просто).
Почніть кейс з внутрішньої структури. Зафіксуйте ключові моменти розповіді в блокноті і потім потихеньку розмотуйте її в прототип і в графічні деталі.
- Обкладинка
- Проект має на меті, коротко на 3-4 абзацу.
- Головна сторінка
- Проектування чи процес пошуку
- Ключові розділи
- макроплан
- Результати. Цифри і факти
- Закадровий, режисерське
- гайдлайн
3. Оптимальна довжина кейса
Як наситити користувача і не дати йому заснути? Досить важливий момент.
Я вірю, що бувають такі історії, які не можуть закінчитися просто. Такі вони красиві і солодкі для вас, що хочеться продовжувати нескінченно. Але саме тут криється підступ.
Читач готовий сприймати красиву і логічну історію, але в рамках розумного. Чому довжина хорошого художнього фільму - 1: 30м, серії в серіалі - 45 м, музичного кліпу - 3 м? Так само і з вашим кейсом.
Ключові прикмети: від 15 000 до 20 000 пікселів.
4. макроплан і детальки
Кейс живе ритмом. І наше завдання, задавши хороший тон на обкладинці, час від часу цей ритм підтримувати. Робиться це перш за все для того, щоб погляд Новомосковсктеля НЕ залипає. Не варто частити з превью макетів. Час від часу вам треба наближати на контрасті найсоковитіші моменти: віджети, графіки, показувати особливості стилю ілюстрацій.
Ключові прикмети: Ефект зебри. Протягом всього кейса, виділіть кілька контрастних зон, де ви покажете максимум смакоти. Для цього добре підійде: изометрия, великі іконки, інфографіка, анімаційні елементи і т. Д.
5. Текст необхідний, але настільки ж даремний
Зовсім відмовлятися від тексту, безумовно, не можна, але завжди перевіряйте, щоб його кількість була мінімально.
Ключові прикмети: Вдумливий і смачний копірайтинг. Короткі і великі заголовки. Розкривають підрядники. Місцями 1-2 абзацу тексту. Дрібні підказки та примітки.
6. Реалістичнішими і смачніше
Кейс - це особливий жанр. Ви просто зобов'язані упакувати свій проект максимально ефектно. Не важливо, що в реальному житті так не буває. Це повинно бути надзвичайно. Щоб Новомосковсктель повірив, хоча б в рамках цього кейса.
Ключові прикмети: Прототипи, схеми, проміжні рішення.
8. Без анімації не їдять
Ще одна успішна механіка для того щоб утримати Новомосковсктеля в тонусі протягом усього оповідання - анімація елементів. Формат GIF отримав друге життя.
Візьміть яскраві уривки вашого інтерфейсу, де ви хочете показати незвичайні мікро взаємодії. Покажіть, як це буде працювати, навіть якщо це неможливо. Це ваша казка, ваш концепт!
Самий писк, коли анімаційні елементи ідеально вживлені в структуру кейса, і здається, що елементи буквально оживають в потрібному місці.
Але не перестарайтеся. GIF-анімація багато важить і вимоглива до завантаження процесора. Ідеально використовувати 2-3 гифки, кожна з яких не більше 5-7 секунд за часом.
Ключові прикмети: GIF-анімація, де початок ролика майстерно збігається з його кінцем, утворюючи loop-секвенції.
9. Ми молодці, але про це коротко
Не забувайте розповісти ключові факти проекту, бажано, в вимірних показниках. Це як і раніше може привертати увагу і відрізняти вас серед інших. Але будьте обережні. Це контент-завдання, тому намагайтеся придумати щось незвичайне.
І друге, про що також варто розповісти в кінці, - це основні гайдлайн, елементи UI Kit. Технічні деталі роботи кнопок, хитрі дропдауни і т. Д. Всі ці дрібниці, особливо в кінці, підтверджують серйозність і увагу до деталей в вашої роботи.
Ключові прикмети: 160 макетів, 3 убитих мишки, 6 безсонних ночей Васі верстальника. І обов'язково загорніть ці шоколадні кнопки в UI Kit на десерт.
10. фінішує по-голлівудськи
Ну чим ще його переконати, що ваш проект дійсно особливий?
Ключові прикмети: шоурил проекту. Тривалість 1-1,5 хвилини.
Тільки AfterEffects, тільки хардкор.