Все участники работы над сайтом, будь то веб-дизайнеры, художники, верстальщики, контенщики и прочие лица, всегда хотят, чтобы их работа выделялась на фоне конкурентов и их сайтов. Заказчики желают оставить хорошее впечатление на потенциальных клиентов, дизайнеры стремятся к оригинальности и радуются возможности соперничества с другими веб-мастерами, верстальщики и разработчики желают создавать свою историю успеха в портфолио. И всем им оригинальный и выделяющийся веб-сайт может помочь с этим.
Вспоминая разговор двух героев одной книги: «зависть слишком обременительна… Проще стать первым или признать чужое первенство. Ты же не обгонишь лошадь и не переживешь черепаху, так зачем им завидовать?». Чтобы не завидовать, лучше добиться того, чтобы результаты работы были на уровне или лучше. И различных рекомендаций этому безграничное множество, но почти везде встречаются моменты, которые катастрофически неверны.
У каждого из нас бывает ощущение, что работа создана недостаточно хорошо. Проверяем, перепроверяем, сравниваем, прикидываем. Кажется, да, все есть, все в норме. Но нет упоения души. Где вдохновение? Где творчество? Все работы за последнее время – кальки друг друга. Где оригинальность хотя бы в мелочах? Если такой сайт чувствует себя хорошо и получает результаты, аналогичные сайтам конкурентов, это вовсе неплохо.
Но ведь можно создать нечто лучшее, «стать первым». Можно создать сайт, который будет действительно выделяться среди себе подобных. Да, для этого требуется много планирования, усилия и каждая такая работа будет обладать своими плюсами и минусами.
Возможно примеров и идей (скриншотов) будет в этот раз не так много, как обычно, но цель материала не в копировании, не в поиске идей для создания сайтов-клонов.
Структура
Это одна из основных возможностей выделить свой сайт. Трудная возможность. Подумайте над тем, чего еще не было в интернете, пофантазируйте на тему макета или структуры, что может где-то вы видели ранее в иных областях деятельности человека. Попробуйте после пятидесяти вариантов работы с тремя колонками макета смешать их расположение.
В реалии существует огромное число способов расположить информацию на холсте, прежде чем пользователь начнет терять доступность и удобство поглощения контента. Время работы над созданием действительно удобного макета огромно, а сумасшедшие проекты веб-мастеров зависят преимущественно от JavaScript. Хотя в идеале и не должно.
Посмотрите на сайт narrowdesign и угадайте, что было реализовано в структуре. Прокручивайте страницу колесиком мышки или стрелками на клавиатуре, изучаем навигацию и контент. Это поистине впечатляюще. Аналогично выглядят и POM WONDERFUL, LAMP IN ROOM. В них есть нечто, что нечасто увидишь в интернете. Вроде, все по старому, интернет-магазин, карточки товаров, эффекты глубины, параллакс. Но реализация иная, свежая.
Брендинг
Брендинг – еще один весьма очевидный способ выделить сайт среди конкурентов. И этот способ намного более простой и легкий. Просто пообщайтесь с заказчиком/клиентом и выясните у него принципы компании, бренда, особенности идей и деятельности, а затем, придерживаясь их, воплощайте в дизайне. Полюбите этот бренд, «обнимите пространство вместе с ним». Сделайте так, чтобы клиенту надоело видеть цвета логотипа везде и всегда, а затем возьмите оттенки чуть слабее или насыщеннее, давая ему тем самым простор изучения информации на сайте.
Но такой метод уникальности сработает только в том случае, есть у клиента очень и очень оригинальный брендинг. Если стиль базируется на Helvetica и более ничего не признается, то веб-мастер окажется в весьма невыгодном положении. Попробуйте предложить вариации замены или сочетания.
Проект Verge как нельзя кстати представляет бренд в сочетании шрифтов, цветов, оттенков и…да, даже структуры, о которой мы писали выше. Обратите внимание на то, как использовались цвета и шрифты на MONODOM ST. PETERSBURG, THE BUYER, NEW VISTA BEHAVIORAL HEALTH. На каждом из них логотип либо выделяется, либо нейтрален, но по цветности не сливается. Когда как шрифты уникальны и различны для бренда и контента. В целом же каждый сайт выглядит, как маленький уголок только этой компании, в котором хочется задержаться и уже не пытаться сравнить с чем-то еще, поскольку и так красиво, понятно и впечатляюще.
Графика
Если структуры и брендинга недостаточно, то можно использовать графику/изображения/фотографии, создавая, тем самым, особый визуальный стиль. Почему возникла тенденция создавать сайты с большими изображениями во всё окно браузера? Они привлекают внимание, они воздействуют на эмоции пользователей, стимулируют на изучение контента. Кроме того существует огромное множество стилистических вариантов оформления графики (в целом), а потому это просто, быстро и интересно.
С другой стороны, красивые, оригинальные, с впечатляющими «wow»-фотоэффектами изображения стоят дорого. И обычно такую графику заказывают на стороне у художников. Отчасти именно поэтому в нашем блоге мы рассказываем принципы того, как самим научиться создавать такие первоклассные изображения. И причина в том, что каждое уникальное изображение убирает все различия и элементы клонирования, которые вы могли бы использовать при обычном стиле дизайна сайта.
Сайт kennardlilly использовали оригинальную графику, состоящую из сочетания фотографий и художественных мазков, пятен, штрихов. Порой за мазками даже не сразу улавливается взглядом сама фотография, но зато насколько интересно потом её рассматривать. Посмотрите на MENYA BIBIRI, brunner, KILLIAN PACIFIC и вы увидите весьма необычные фотографии, изображения и их сочетания. Насыщенные красками, с эффектами размытия в движении или синемаграфия. Веб-мастера создали из фотографии зала навигационное меню и добавили анимации и параллакса. Вариаций создания уникальности невообразимо много.
Контент
Это, пожалуй, самое важное и иногда самое трудное, что можно использовать отдельно, независимо от дизайна в целом. То, что размещается на сайте (текст), должно быть отражением личности клиента или корпоративной деятельности. Все это должно быть прозрачным и ясным любому, вне зависимости от языка проекта. Что отличает один контент от другого? Как правило, использование цитат, микрофильмов, видео с обращением клиента.
Но, чтобы создать что-то уникальное от клиента нужно получить изначальный текст. Хех. Невозможно писать раздел «о компании» под копирку, «сдирая» с конкурентов. Толку в итоге от такого будет мало. Уже после получения информации ваша задача создать копию, но таковую, чтобы было ощущение, что текст был создан «с нуля». Большинство маркетинговых текстов имеют очень специфический тон, который, кажется, что выходит за рамки культуры и границ общепринятого. Как читателям, нам важно видеть в тексте очевидные примеры желания купить предмет/услугу. Примеры, имеющие воздействие на нас. Для авторов контента – это трюк. Сложный и жесткий.
Существует такой элемент, как микрокопии. И это вносит разницу в восприятие и создания дизайна в целом. Пользователи обычно ожидают, что прочтут информацию о продукте/услуге и посмотрят на фотографии. Но представьте себе, что вся прочая часть сайта интерактивна. То есть, дизайн в целом готов «общаться» с посетителем, как с человеком, а не как с клиентом.
Для понятности посмотрите на сайт uiviking и задайтесь вопросом, почему его интересно изучать? Обратите также внимание на форму связи, на разделы Case, Skills. С одной стороны мы видим просто набор контента-портфолио. С другой, мы (как посетители) общаемся с самим автором.
Хорошая работа с контентом и микрокопиями представлена на aerdesign, flippo, zenit-orel, huee, THIRD MAN. Все они обращаются к посетителю, как к обычному человеку, гостю, который, возможно, зашел/забежал и только потом понял – эть, слегка не туда, искал иное. Тем не менее, будь то фотографии автора, видео услуги, описание разнообразия товара – все это уникально и разнообразно.
Анимация
Анимация используется не первый год, и не зря. Если все оформлено и сделано хорошо, то реализуется отличный и незабываемый опыт взаимодействия для пользователей. Несомненно, отлично, что многие заставки пошли по пути дронта (Птичка такая. Маврикийский дронт, или додо. Вымерший вид). Многие помнят анимированные элементы 90-х годов прошлого века. Картинки двигались, мигали, дергались и Бог знает, что творили. И никто еще толком не разбирался в визуальной значимости этого для посетителей.
Мы горим об анимации в последнюю очередь, как о самом эффективном способе создания уникального веб-дизайна. Но и самом трудном. Куда труднее, чем работа с макетом, структурой или бренднигом. Более того, любая анимация должна быть защищена правами, а это еще сложнее. В интернете копируется много чего: от текста и изображений, но анимация – практически нет.
Более того, если необходимо даже клиенту сделать что-то «необычное и игривенькое», то анимацию следует выделить из всего прочего. Перевратить в игру, например. И да, именно анимация способна вызвать проблемы с юзабилити, проблему с производительностью и прочим, и прочим. Это красиво, эффективно и сложно.
Проект google beinternetawesome представляет проект помощи детям в изучении онлайн. В частности была создана незатейливая игра с героями и текстовыми подсказками - interland.
Аналогичен и образовательный сайт Curious Critters, мультиплатформенный проект, предлагающий узнать обо всех возможных загадочных существах нашей планеты, которые жили или живут на ней.
Промостраница предзаказа нового сорта шампанского Les Cinq Filles, или сайт компании по производству мульти-сенсорных и интерактивных аттракционов для парков развлечений и оздоровительных центров по всему миру Triotech.
Везде существует та или иная анимация. Не видео, как таковое, а легкие и воздушные элементы. Будь то звезда, чьи лучи в движении, множство бабочек, символизирующие обилие пузырьков в напитке. Или даже путешествие с героями по планете, как альтернатива скучным «простыням» научного текста. Анимация разная, но она приветствуется взрослыми посетителями и способна их заинтересовывать.
Выводы
Посмотрите вокруг себя в интернете и вы увидите, что очень редко, когда каждый из способов, описанных нами, используется в одиночку. Довольно часто веб-дизайнеры объединяют все пять вариантов. И как правило, это лучший вариант, чтобы не рассеять фокус посетителя слишком сильно.
Спросите себя, в чем состоят ваши сильные стороны веб-дизайна или художественного мастерства? Может, вы хорошо пишите или рисуете? Сосредоточьтесь тогда на сайтах с обилием графики и текста. Смешивайте их, соединяйте, развивайте, создавайте анимацию из текста и рисуйте текстом картины. Может быть, вы аниматор и оригинально рисуете логотипы? Создайте логотипы для людей: простые и понятные, динамические и статические одновременно. И главное помните, самое веселое и приятное время за работой – это создание чего-то нового, творение необычного.
А иначе получится, как в продолжение цитаты из начала нашего материала:
«— Черепаху можно съесть.
— Но непрожитые съеденной черепахой годы не присвоить, а другие черепахи все равно будут смущать твой покой при жизни и преспокойно ползать после твоей смерти».