5 незвичайних місць, здатних надати вашому сайту індивідуальність

54

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

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

1. Сторінка помилки

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

5 незвичайних місць, здатних надати вашому сайту індивідуальність

На сторінці GitHub’s 500 все ідеально.

Перше, ілюстрація ідеально передає особистість сайту GitHub: примхливість, нешаблонність, легка несерйозність. При русі миші, ілюстрація також рухається – хороший приклад відмінної коду. Текст виконаний в стилі всього сайту: від «Oops!!!» не з одним знаком оклику, а з трьома і до допоміжного тексту внизу.

Сторінка Muse’s 404 page також відмінно опрацьована.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Важко не посміхнутися сумного цуценяті і його пояснення («Введену вами адресу невірний, або я його з’їв») – дуже мило. Замість надання простих посилань на різні секції сайту нам кажуть «У нас є кілька ідей, куди вам потрібно потрапити з цієї сторінки! ».

Навіть у NASA незвичайна сторінка помилки.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

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

2. Сторінка FAQ

Сторінки часто задаються, як правило, трохи «сухі». І це можна зрозуміти: на даних сторінках необхідно дохідливо, послідовно і якомога більш сухо передати великий обсяг інформації. І все ж, якщо ви зможете передати великі обсяги тексту зрозумілим чином, надавши сторінці індивідуальності, то користувачі скажуть вам спасибі. На сайті Casper одна з кращих бачених мною сторінок FAQ.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

На даній сторінці представлено 5 основних тем, у кожної з яких є своя чарівна картинка. Такий підхід робить процес читання про «спеціальну суміш з трьох пен» в матрацах Casper захоплюючим, а не нудним. Для пожвавлення сторінки підтримки конкурент Squarespace Jimdo використовує пояснювальні іконки.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Ця техніка дизайну не тільки дозволяє інтуїтивно знаходити потрібні секції сайту, але вона також добре відповідає решті стилістиці сайту Jimdo. На сайті Product Hunt реалізований інший підхід. Стилізація сторінки FAQ досить традиційна (хоча і дотримується загального зовнішнього вигляду сайту), однак індивідуальність тут захована в тексті.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Наприклад, перше питання «Що тут відбувається?». Це приклад очеловеченного питання «що таке Product Hunt?». Є також пара питань-сюрпризів, типу «Де мої ключі?». Product Hunt це сайт, керований користувачами з контентом, утворюваним користувачами – а значить, сайт дуже згуртований. Звичайна сторінка FAQ виглядала б до дивного «нормальної».

3. Спливаючі вікна

У спливаючих вікон на сайтах дуже погана репутація. Тим не менше, якщо ви хочете надати користувачам щось цінне (промо-код, безкоштовне керівництво, крута новинна підписка тощо), то вони не розсердяться. Спливаючі вікна-це ще одна можливість продемонструвати свою унікальність. Подивіться на спливаюче вікно з сайту Stick in a Box – бесящая форма підписки.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Розробники Stick in a Box непробачно безглузді (все-таки їх сайт не даремно називається Stick in a Box). Приклад дуже тупого спливаючого вікна. Deny Designs, компанія з виробництва меблів та декору звертається до зовсім іншої аудиторії: дівчата від 16 до 28 років.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Спливаюче вікно чудово адаптоване до аудиторії сайту, починаючи від ввічливого тексту (наприклад «ideas that are totally dance-worthy» і «besties») і закінчуючи яскравими квітами і пальцем вгору. При перегляді інших розділів сайту ви будете помічати ту ж енергійність і дружелюбність. Наприклад, на сторінці Contact Us йдеться:

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Greatist – сайт, присвячений фітнесу та здоров’ю, пішов іншим шляхом.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

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

5 незвичайних місць, здатних надати вашому сайту індивідуальність

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

5 незвичайних місць, здатних надати вашому сайту індивідуальність

І нарешті, спливаюче вікно при виході з Brad S. Knutson’s portfolio це один з кращих прикладів індивідуальності особистих сайтів.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

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

4. Іконка завантаження

Коли необхідно надати сайту індивідуальності, виразно можу сказати, що іконка завантаження використовується недостатньо. Якщо ви вирішили залишити у себе на сайті стандартне колесо завантаження або прогрессбар, то ви втрачаєте можливість розважити користувача під час очікування. Під час завантаження сайту google’s Santa Tracker усміхнений Санта махає вам рукою.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

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

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Європейська компанія авіалінії Ryanair оновила круглу іконку завантаження, додавши на неї літак – відмінна відсилання до спрямованості сайту. Кольори іконки збігаються з колірною палітрою бренду Ryanair. Ще один варіант завантаження на сайті Digital Kitchen.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Девіз агентства — «Expect Greatness» з’являється на чорному тлі. По мірі завантаження сірий завісу відсувається, розкриваючи перед очима барвистий колаж з останніх робіт. Дана завантаження показує все найважливіше для DK: напрямок роботи, слоган і філософію дизайну. До кінця завантаження сайту ви вже повністю налаштовані на спільну роботу з даним агентством (або на роботу для нього). The Charles – ще одне цифрове агентство; але їх сторінка завантаження більш витончена.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

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

5. Сторінка команди сайту

Відмінний спосіб створити зв’язок між користувачами та веб-сайтом це показати людей, що стоять за даним сайтом. Але не забувайте, що дана сторінка потрібна більшою мірою для галочки. Тобто навіть якщо це технічно сторінка «Про нас», переконайтеся, що ви описуєте свою команду, ваші цілі, історію і т. д. в стилістиці іншого сайту. На сайті Kickstarter чудова сторінка Team page.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Можна буквально фільтрувати команду за їх інтересам від поезії до гри в Dungeon & Dragons. Даний підхід дуже доречний тут, так як Kickstarter призначений для фінансування улюблених проектів. Фільтрація також доречна на цій сторінці, вона дає відсилання до розділу Discovery, в якому можна переглядати запущені компанії щодо збору коштів за категоріями.

Якщо навести вказівник миші на працівника, то можна побачити, скільки проектів вони підтримали, а також їх улюблені категорії. Дуже тонкий, але ефективний спосіб показати, що команда Kickstarter використовує свій же продукт. У невеликої пекарні в Огайо Kittie’s Cakes дуже гарна сторінка «Story» page.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

Дизайн сторінки виконаний в стилі записки; однак не лише цей чинник надає сайту чарівність, Kittie’s пропонує класичну американську випічку. Ще більшу індивідуальність цій сторінці надають фото власників пекарні Моллі і Келлі з коротким переказом їх історії. І наостанок сторінка «About» сайту Munchery.

5 незвичайних місць, здатних надати вашому сайту індивідуальність

На зображенні в шапці сторінки показаний колаж працівників сайту Munchery в досить простій манері: кумедний спосіб показати культуру компанії.

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

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