Дизайн сайту від брифа до готових макетів

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

Що дизайнер питає на старті

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

• Хто ваш клієнт. Приватна особа чи компанія, вік, як він зазвичай ухвалює рішення.
• Що людина має зробити на сайті. Залишити заявку, зателефонувати, вивчити й повернутися пізніше.
• Чим ви відрізняєтеся. Відповідайте фактами, які можна показати.
• Що є з фірмового стилю. Логотип, кольори, шрифти, готові матеріали.
• Які сайти вам подобаються. Три-п’ять прикладів із поясненням чому.
• Які точно не підходять. Цей список часто корисніший за перший.

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

Прототип і навіщо він потрібен перед макетом

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

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

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

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

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

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

Перший екран і головна

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

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

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

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

Внутрішні сторінки й типові шаблони

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

Скільки унікальних макетів насправді потрібно

Сайт із тридцяти сторінок може складатися з шести макетів.

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

Сторінки й випадки, яких немає в структурі

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

• Сторінка подяки. Після відправки форми людина має розуміти, що сталося.
• Помилка й відсутність сторінки. З посиланням назад, а не з голим текстом.
• Порожні списки. Немає результатів пошуку, немає кейсів у категорії.
• Вигляд кнопок і полів. Наведення, натискання, помилка заповнення.
• Довгі тексти. Що буде, якщо назва послуги в три рядки, а не в один.

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

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

Адаптив під смартфон

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

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

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

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

Скільки триває дизайн

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

• Прототип. Кілька днів для сайту компанії, тиждень для інтернет-магазину.
• Головна сторінка. Від трьох днів до тижня, з урахуванням ітерацій.
• Кожен наступний макет. Близько дня, коли стиль уже затверджений.
• Мобільні версії. Паралельно, додає приблизно третину часу.
• Збірка комплекту для верстки. Один-два дні наприкінці.

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

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

Що передають у верстку

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

• Макети всіх унікальних сторінок. Для десктопа й для смартфона.
• Вигляд елементів. Кнопки, поля, повідомлення про помилки.
• Набір кольорів і шрифтів. З точними значеннями, а не на око.
• Ліцензії на шрифти. Шрифти мають бути ліцензовані для використання на сайті.
• Іконки й зображення. У потрібних форматах і розмірах.
• Пояснення поведінки. Що анімується, що розгортається, що завантажується частинами.

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

Як приймати макети й скільки правок закладати

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

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

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

Що робити з фотографіями

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

Варіантів тут три, і в кожного своя ціна.

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

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

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

Помилки, через які дизайн переробляють двічі

• Погоджують кілька людей одночасно. У кожного своя думка, і вони суперечать одна одній.
• Правки збирають частинами. Три листи за тиждень замість одного списку.
• Обговорюють смак замість завдання. «Мені не подобається синій» замість «незрозуміло, куди натискати».
• Немає реальних текстів. Макет робиться на прикладах, а коли приходять справжні тексти, блоки розсипаються.
• Показують родичам і знайомим. Люди не з вашої аудиторії дають поради з іншого світу, і кожна така порада відкидає проєкт на коло назад.

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

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

Скільки це коштує

Дизайн входить у загальну вартість сайту, і його частка залежить від кількості унікальних макетів.

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

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

Висновки

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

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

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

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