Сайт – нечто большее, чем просто возможность рассказать некую информацию об услугах, продуктах, интересных событиях в мире и предоставить к этому доступ всем желающим. Обычно веб-мастерами создается нечто наподобие истории (рассказа), чтобы привлечь, тем самым, посетителей и привести их в восторг, способствовать их заинтересованности и возращению на сайт. Иными словами, создавая интернет-магазин и наполняя страницы списком категорий товаров, можно оформить это так, будто человек реально посещает магазин и выбирает что-то по душе. Но и не только.
Веб-дизайн – способ выражения наших мыслей, наших идей, стремлений и ожиданий. Он своеобразно передает визуальные сообщения посетителям и рассказывает истории о компании, например, о той или иной деятельности. Именно поэтому дизайнерам так часто приходится убеждаться ясна ли окружающим их мысль, их дизайн, ибо истории, рассказанной на холсте, необходимо соответствовать компании в целом. Если вы создаете дизайн для сайта производителей напитков, то история про тяжелую жизнь некоторых африканских племен будет явно некстати. Это уже к благотворительности ближе, к иным тематикам.
Идея обычно приходит в наши умы и начинает свою жизнь с ручки и бумаги. Но до этого мы выстраиваем в своих мыслях огромную конструкцию, которая и формирует эту идею. И прежде чем начинать проектировать элементы, с помощью которых будет вестись повествование, стоит задуматься, а какая она, эта история? Динамическая или спокойная, веселая или трагичная, грустная или счастливая, интерактивная. Стоит подумать обо всех ассоциациях с брендом и логотипом, найти общие темы, слова, рассказы из жизни друзей.
Так как же веб-мастерам удается создавать истории с помощью веб-дизайна? Неужели принципы создания даже обычного небольшого рассказика могут использоваться в веб-дизайне?
Могут, и еще как.
Зачем это сайтам и заказчикам?
Как минимум творческое воплощение веб-дизайнера, максимум – идеальное, насыщенное и информативное представительство компании в интернете в виде сайта, который способен поражать взор и заинтересовать умы, дарить восхищение.
И это есть в мире?
О, дааа… и еще как…
Важно: мы представим скриншоты некоторых проектов, но чтобы увидеть, как передаётся история, рекомендуем посетить эти сайты.
Фотоснимки и видео
Поскольку задача дизайна – визуально привлекать пользователей, то работа с фотоснимками для мастеров – явление обычное. И трендам дань, и удобство разработки. Но и фотографии, и видео используются интересными и манящими. Здесь существуют герои и события, и конечно, текст, который рассказывает историю, делая её понятной. Не забывают мастера и о соответствующей палитре цветов, сочетающейся с фотоматериалами, тематикой или логотипом.
И не обязательно это бывают реалистические фотографии и видео. Посещая самые разные сайты можно видеть иллюстрации, арты, мультипликацию, 3D-графику. Если говорить о количестве «картинок», то обычно используют три и более, что наиболее наглядно рассказывают о компании.
Отличный пример веб-дизайна сайтов бренда обуви TOMS, где каждая фотография рассказывает отдельную и самостоятельную историю об обуви, насыщенную и понятную всем.
Или рассказ о сенсорном устройстве Tinke, которое подключается к смартфонам и способно вести учет и контроль физического состояния человека. Схемы, фотографии и видео рассказывают об устройстве, о том, как использовать и зачем оно нужно. Наглядно, просто и понятно.
Корпоративный сайт компании из Берлина, занимающейся решениями для био- и фармацевтических фирм в области исследования лекарственных препаратов – KCR CRO. Польские разработчики использовали фотографии: яркие, тематические, украшенные эффектами.
Аналогично истории с помощью фотографий и иллюстраций рассказываются на Ice and sky, Story Chief, DESIGNLOVR, Aquamarine hotel
Персонажи
В любой истории существуют герои, персонажи. Обычно их бывает много и именно они (пусть и не реальные личности) присутствуют на фотографиях и видео. Но иногда веб-дизайн создают с использованием одного героя-талисмана. Он может присутствовать в том или ином виде на каждой странице сайта, может вести закадровое повествование. Но иногда таких активных героев может быть несколько.
Самый известный пример – персонаж для платформы MailChimp – обезьянка Фредди. Она не появляется на каждой странице, но присутствует на лэндингах, страницах промо-акций, на логотипе, в блоге. Аналогично используют появление талисмана-кролика Ubisoft, который являясь персонажем одной из игр, «ведет активную деятельность в компании» на страницах 404, в разделах поддержки, почтовых рассылках, группах в соцсетях, мероприятиях в реальной жизни и так далее.
Аналогично герои использовались и в Supremo Academy, Take’n’Go, Eurovet.
Существует мнение, что персонажи важны и для компании, и для веб-дизайна. Они олицетворяют название фирмы, олицетворяют собой простоту и легкость деятельности, надежность и доступность для пользователей. И, разумеется, сами посетители любят такую «изюминку» на сайте, ибо дизайн в целом становится более занятным, любопытным.
Приглашение в гости
Хорошо рассказанная история всегда позволит слушателю/зрителю самому поучаствовать в ней. Это могут быть непосредственно взаимодействия или фантазии, мысли: яркие и словно бы живые. Именно поэтому так часто можно видеть на разных проектах прокручиваемые страницы, эффекты параллакса, легкую анимацию на кнопках и элементах навигации, забавные курсоры., открывающие доступ к чему загадочному и сокровенному. Например, прокручивая страницу вниз или слева-направо, перед взором посетителя появляется новая и новая информация, которая связана с предыдущей. Но среди этой инфорации появляется та, что казалось бы, не для широкого круга, а она тут. Это как раз и есть, история.
Важно помнить – что рассказ не должен быть сложным. Например, проект Humaan рассказывает разные истории людей, работающих в данной компании. Но выбрать рассказ посетитель может при наведении на фотографию человека. При этом поза, взгляд, действие людей всегда разные и передают основные черты характера. Все они в совокупности дают представление о компании и об «атмосфере внутри неё».
Ubisoft тоже не поленились и рассказали о руководителях отделов и компании. Прокручивая страницу, так или иначе, мы попадаем в секцию представителей, а потому имеем возможность ближе узнать компанию. На фотографиях они все выглядят по-разному, можно очень явно увидеть их черты и характеры.
Проекты Alvista, Альфа-Банк, chekotin рассказывают о своих сотрудниках и управленцах. В то же время, если в совокупности рассмотреть многие фирменные сайты, то такое явление редкость. Не все руководители хотят публиковать информацию о своих работниках. Причины тому разные, но предложить это заказчикам бывает не лишним, так как пользователь получает возможность стать своеобразным гостем в компании, где хозяева и есть сотрудники фирм, а место встречи – сайт.
Микровзаимодействия
Обратите внимание на крошечные элементы веб-дизайна, позволяющие посетителям взаимодействовать как с самим сайтом, так и стать немного ближе к компании и её деятельности. Соцсети, в частности, используются веб-дизайнерами всегда, и именно они представляют самый простой способ взаимодействия на микроуровне.
Но также это относится к тем моментам, когда пользователи взаимодействуют с дизайном в целом. Например, мы часто видим проекты с возможностью изменения языка локализации, отправки сообщений, входа в систему, нажатия на соцкнопки «поделиться» и наблюдения за всплывающими окнами. Известно, что все эти моменты способствуют взаимодействию с сайтом. Но особенно они интересны, если сочетаются с целями и контентом проекта.
Веб-мастера используют что угодно: от обмена ссылками на продукты, до возможности расшарить ссылку на магазин или товар после его приобретения, добавление в список желаемого, подписку на отсутствующий товар и прочее, и прочее.
Проекты GooglereCAPTCHA, wildberries, EvoEnergy, Магнит, Kerama Marazzi, Dunlop WinterMAXX позволяют взаимодействовать по-разному, но каждый из них, тем самым, проводит посетителя через историю, через рассказ о компании или продукции.
Простота и естество
И, конечно, любой рассказ или история имеют четкую структуру: начало, середина и конец. Иными словами, в данном случае в веб-дизайне это знакомство с логотипом компании, названием, затем рассказ о продукте, о его особенностях, для кого он и прочее, и логическое завершение в виде призыва к действию: купить/заказать, поделится ссылкой.
Да, это стандарт и ничего особенного могло бы и не быть, если бы не фантазия веб-дизайнеров.
И вот одни из красивейших примеров реализации обычного стандарта: Красавица и Чудовище , candccoffee, Магнит, Wild Nature In Kazan, Sberbank First.
А что же еще…
Не забывают веб-дизайнеры и о тексте (поверх фото/видео/арта), ибо без него передать информативность попросту невозможно, и о фотоэффектах, что придают совсем иное визуальное восприятие, и о навигации тоже, ибо она позволяет всю историю систематизировать и является ничем иным, как аналогом «Содержания» в книгах.
Например, дизайн Nike используется все это, как и Магнит, и Cross Production. Это яркие и красивые примеры веб-дизайна, что позволяют рассказывать истории.
Завершение
Когда веб-мастера проектируют историю, то главное для них и, пожалуй, самое сложное – придумать свой собственный рассказ. Уникальный, в какой-то степени, непохожий на прочие, а может, и с некоторыми знакомыми моментами, но именно, что «свой». И не стоит волноваться, если начинает все идти как-то не так. Посетителям куда важнее достоверность, поэтому на некоторые детали или малое несоответствие они могут закрыть глаза, зато информация о продукте, услуге или компании правдива. Порой правды так редко можно найти в нашей реалии и так часто она подменяется.
Ручка и блокнот – основное оружие веб-дизайнера, если он планирует создать историю. Связать все страницы воедино, представить всю совокупность информации в виде рассказа о том, что все это делает одна компания и что всё это имеет множественные связи внутри и с внешним миром. Записывайте все, что придет на ум о том, как ваш гендиректор ведет бизнес, чем данный продукт лучше аналогов. Поверьте, у всего вокруг нас можно найти что-то интересное.
И только после этого стоит задумываться о цвете, эффектах, о реализации в целом, типографике, фотографиях или артах.