От автора: индивидуальность превращает скучный сайт во что-то привлекательное, зазывающее. Такие сайты убеждают новых посетителей исследовать сайт, а старых пользователей – возвращаться. Однако после придания индивидуальности очевидным вещам – тексту, визуальной составляющей, цветовой схеме – вы, скорее всего, не представляете, как же можно сделать ваш сайт еще более необычным.
Если вас интересует эта тема, то просмотрите ниже составленный список из 5 мест, с помощью которых вы можете придать своему сайту еще большую индивидуальность.
1. Страница ошибки
Ваша ли это вина или самих пользователей, однако последние при виде страницы с ошибкой начинают немного нервничать. Полезные, визуально привлекательные и немного забавные страницы ошибок 404 или 500 помогут пользователям забыть о раздражении, а вам сохранить общую привлекательность вашего бренда. Рассмотрим парочку хорошо спроектированных страниц ошибок.
На странице GitHub’s 500 все идеально.
Первое, иллюстрация идеально передает личность сайта GitHub: причудливость, нешаблонность, легкая несерьезность. При движении мыши, иллюстрация также двигается – хороший пример отличного кода. Текст также выполнен в стиле всего сайта: от «Oops!!!» не с одним восклицательным знаком, а с тремя и до вспомогательного текста внизу.
Страница Muse’s 404 page также отлично проработана.
Сложно не улыбнуться грустному щенку и его объяснению («Введенный вами адрес неверен, или я его съел») – очень мило. Вместо предоставления простых ссылок на различные секции сайта нам говорят «У нас есть несколько идей, куда вам нужно попасть с этой страницы! ».
Даже у NASA необычная страница ошибки.
Так как аудитория агентства варьируется от маленьких детей до профессионалов, было умным шагом подать сообщение в космической тематике, не выходя при этом за рамки.
2. Страница FAQ
Страницы часто задаваемых вопросов, как правило, немного «сухие». И это можно понять: на данных страницах необходимо доходчиво, последовательно и как можно более сухо передать большой объем информации. И все же, если вы сможете передать большие объемы текста понятным образом, придав странице индивидуальности, то пользователи скажут вам спасибо. На сайте Casper одна из лучших виденных мной страниц FAQ.
На данной странице представлено 5 основных тем, у каждой из которых есть своя очаровательная картинка. Такой подход делает процесс чтения про «специальную смесь из трех пен» в матрасах Casper увлекательным, а не скучным. Для оживления страницы поддержки конкурент Squarespace Jimdo использует пояснительные иконки.
Эта техника дизайна не только позволяет интуитивно находить нужные секции сайта, но она также хорошо соответствует остальной стилистике сайта Jimdo. На сайте Product Hunt реализован другой подход. Стилизация страницы FAQ довольно традиционная (хотя и придерживается общего внешнего вида сайта), однако индивидуальность здесь спрятана в тексте.
К примеру, первый вопрос «Что здесь происходит?». Это пример очеловеченного вопроса «что такое Product Hunt?». Есть также пара вопросов-пасхалок, типа «Где мои ключи?». Product Hunt это сайт, управляемый пользователями с контентом, генерируемым пользователями – а значит, сайт очень сплоченный. Обычная страница FAQ выглядела бы до странного «нормальной».
3. Всплывающие окна
У всплывающих окон на сайтах очень плохая репутация. Тем не менее, если вы хотите предоставить пользователям что-то ценное (промо код, бесплатное руководство, крутая новостная подписка и т.д.), то они не рассердятся. Всплывающие окна это еще одна возможность продемонстрировать свою уникальность. Посмотрите на всплывающее окно с сайта Stick in a Box – бесящая форма подписки.
Разработчики Stick in a Box непростительно бестолковые (все-таки их сайт не зря называется Stick in a Box). Пример очень тупого всплывающего окна. Deny Designs, компания по производству мебели и декора обращается к совершенно другой аудитории: девушки от 16 до 28 лет.
Всплывающее окно прекрасно адаптировано к аудитории сайта, начиная от вежливого текста (например «ideas that are totally dance-worthy» и «besties») и заканчивая яркими цветами и пальцем вверх. При просмотре остальных разделов сайта вы будете замечать ту же энергичность и дружелюбность. К примеру, на странице Contact Us говорится:
Greatist – сайт, посвященный фитнесу и здоровью, пошел другим путем.
У них более резкое всплывающее окно: строка текста и две кнопки. Здоровый образ жизни здесь подразумевается не только в хорошей стилистике фотографий и тематической последовательности, а также в простоте вопросов. Casper заслуживает двойного внимания за свои всплывающие окна.
Хотя всплывающие окна, прерывающие работу в сети, это очень легкий способ разозлить пользователей, данное окно слишком забавное, чтобы быть раздражающим. Мне особенно нравится связь белки с подарком в виде ореха. На сайте Arsenal все довольно просто, всплывающее окно заставляет вас почувствовать себя членом команды, понимающим внутренние шутки. Текст написан в целенаправленном мужественном тоне.
И наконец, всплывающее окно при выходе с Brad S. Knutson’s portfolio это один из лучших примеров индивидуальности личных сайтов.
Брэд Натсон четко знает, что он разговаривает с определенной группой людей, хорошо знающих интернет мемы.
4. Иконка загрузки
Когда необходимо придать сайту индивидуальности, определенно могу сказать, что иконка загрузки используется недостаточно. Если вы решили оставить у себя на сайте стандартное колесо загрузки или прогрессбар, то вы упускаете возможность развлечь пользователя во время ожидания. Во время загрузки сайта Google’s Santa Tracker улыбающийся Санта машет вам рукой.
После загрузки сайта вы видите, насколько близко дизайн интерфейса совпадает с этой иллюстрацией. Отличный способ придать ощущение продолжающегося путешествия.
Европейская компания авиалинии Ryanair обновила крутящуюся иконку загрузки, добавив на нее самолет – отличная отсылка к направленности сайта. Цвета иконки совпадают с цветовой палитрой бренда Ryanair. Еще один вариант загрузки на сайте Digital Kitchen.
Девиз агентства — «Expect Greatness» появляется на черном фоне. По мере загрузки серый занавес отодвигается, раскрывая перед глазами красочный коллаж из последних работ. Данная загрузка показывает все самое важное для DK: направление работы, слоган и философию дизайна. К концу загрузки сайта вы уже полностью настроены на совместную работу с данным агентством (или на работу для него). The Charles – еще одно цифровое агентство; но их страница загрузки более утонченная.
Во время просмотра сайта понимаешь, что именно такая загрузка и нужна. Дизайн выстроен по принципу одностраничного макета, в котором преобладает минимализм, большие пробелы и абсолютно черный текст. Если заменить на сайте The Charles страницу загрузки на загрузку с сайта Digital Kitchen, то люди будут быстро закрывать вкладку из-за слишком резкого перехода.
5. Страница команды сайта
Отличный способ создать связь между пользователями и веб-сайтом это показать людей, стоящих за данным сайтом. Но не забывайте, что данная страница нужна в большей степени для галочки. Т.е. даже если это технически страница «О нас», убедитесь, что вы описываете свою команду, ваши цели, историю и т.д. в стилистике остального сайта. На сайте Kickstarter замечательная страница «Team» page.
Можно буквально фильтровать команду по их интересам от поэзии до игры в Dungeon & Dragons. Данный подход очень уместен здесь, так как Kickstarter предназначен для финансирования любимых проектов. Фильтрация также уместна на данной странице, она дает отсылку к разделу Discovery, в котором можно просматривать запущенные компании по сбору средств по категориям.
Если навести указатель мыши на работника, то можно увидеть, сколько проектов они поддержали, а также их любимые категории. Очень тонкий, но эффективный способ показать, что команда Kickstarter использует свой же продукт. У небольшой пекарни в Огайо Kittie’s Cakes очень хорошая страница «Story» page.
Дизайн страницы выполнен в стиле записки; однако не только этот фактор придает сайту очарование, Kittie’s предлагает классическую американскую выпечку. Еще большую индивидуальность данной странице придают фото владельцев пекарни Молли и Келли с кратким пересказом их истории. И напоследок страница «About» сайта Munchery.
На изображении в шапке страницы показан коллаж работников сайта Munchery в достаточно простой манере: забавный способ показать культуру компании.
Текст страницы еще больше усиливает личную, дружелюбную атмосферу. К примеру, в одной секции написано «Вы загрузили себя работой, пьете слишком много кофе, а папка входящих сообщений как назло пустует. В один прекрасный момент, вам придется решить, а что же сегодня на обед.»
Некоторые вещи лучше добавлять в умеренных количествах – но когда речь заходит о вашем личном сайте, индивидуальность не входит в эти рамки. Чем более привлекательным, интересным и живым выглядит ваш сайт, тем сильнее ваши пользователи полюбят его.
Автор: Aja Frost
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
