Каким должен быть дизайн отдельно взятого сайта? Сложным, анимационным, технически насыщенным и с разными «фишками»? Или же, напротив, простым, с небольшим количеством изображений и, наоборот, большим количеством свободного пространства, неярким цветом шрифтов, и прочее, и прочее. Веб-дизайн – творческая работа, которая позволяет человеку проявить свои художественные фантазии. Но люди куда чаще стараются посещать и доверять стереотипным сайтам. Почему так? Что они находят в почти одинаковых и похожих друг на друга проектах такого, что внушает им доверие и привлекает?
В действительности, визуализация сайтов, веб-дизайн таят в себе многое и даже при работе или создании типичного, стереотипного сайта можно найти и использовать особенные идеи, элементы, что придадут дизайну если не 100% уникальность, то уж точно утонченность и шарм. Как такое возможно мы рассмотрим ниже и найдем, где скрываются идеи и вдохновение для работы с обычными сайтами.
Взгляд на историю
С развитием интернета сайтов стало неимоверно много, но не все они находят свою нишу и свою целевую аудиторию. Согласно многим исследованиям и особенно Google (pdf), человек в первые 15-30 секунд посещения сайта оценивает его главную страницу. То есть то, что он видит сразу. И тут возникает нюанс, что некоторые веб-мастера создают, вроде бы, и красивый, и функциональный дизайн для страницы или всего сайта, но посетитель смотрит на него первые секунды и попросту не может сообразить: «Что такое и куда бы кликнуть мышкой. Вроде, по ссылке интернет-магазин, а где категории или товары? Сайт услуг…хм…а где поконкретнее то, что они делают?» и так далее.
В результате, с сайта посетитель уходит, и какими бы красивыми, идеальными не были Landing Page или главная станица сайта, их не «понимают». А бывает и так: информации мало, но везде ссылочки и коротенькие пояснения. Все ясно и понятно куда нажать, куда перейти и прочее. На примере не сразу и сообразишь, что в правых и левых колонках находятся не просто картинки, а ссылки, переадресовывающие на главный сайт. Некоторые ссылки открывают сразу pdf, а не страницу, как ожидается.
Такие похожие и такие разные
В нашем сознании заложены прототипы восприятия. Самое простое: если мы видим новорожденного, завёрнутого в одеяло и завязанного синей лентой – это мальчик, если ленточка розовая – девочка. И это мы видим у всех родителей. Это и есть стереотипность, позволяющая мозгу классифицировать все то, с чем взаимодействует человек. От мебели, одежды, окружающих людей до сайтов, изображений, текстов. Наш мозг сопоставляет видимое с тем наборов шаблонов, что у него есть и, соответственно, «сообщает» как это должно работать, пахнуть, какой иметь вкус, смысл, значение. То есть: «о, у них мальчик, и у тех тоже сын, и вон у тех, потому что у всех синяя ленточка на одеялке».
Для интернета стереотипность работает аналогично. Мы уже знаем с вами, как должны выглядеть интернет-магазины, социальные сети, блоги и прочие типы сайтов. Соответственно, этого мы и ожидаем на подсознательном уровне, когда переходим по той или иной ссылке.
Интернет магазин одежды германского бренда. Весь веб-дизайн выглядит очень скромным, минималистическим, но не лишенным маленьких удобных вещей. Например, товары можно увидеть не только спереди, но и сзади сразу на витрине, размеры карточек не мелкие и нет необходимости открывать страницы, чтобы рассмотреть товар, да и вся цветовая гамма товара также представлена здесь же на общей витрине. Если рассматривать шрифт в целом, то он и читабелен, и не раздражителен.
Lamoda
Аналогично выглядит и другой интернет-магазин. Точнее – почти идентичным, с той разницей, что на карточках товара вы не увидите, как модель выглядит сзади на человеке (сколько карманов на шортиках), и придется открывать страницы отдельно. В целом же, дизайн также минималистичен и стереотипен.
Эгерия
Еще один интернет-магазин, который может и выглядит чуть загруженным информацией, но, тем не менее, всё также понятен. Категории попадают на глаза, карточки товаров имеют достаточно крупные фотографии. А если говорить о «фишках», то и размеры (русские) сразу появляются при наведении мышки.
Таким образом, практически все интернет-магазины имеют общий, типичный, стереотипный веб-дизайн, внешний вид, цветовую гамму. И аналогичную ситуацию можно наблюдать среди дизайнов для сайтов СМИ, различных компаний по услугам строительства или недвижимости, бытовых услуг или автоперевозок. Но при всей такой типичности есть и то, что отличает их друг от друга.
Смотрим дальше…
Почему так, а не иначе
Рано или поздно возникает вопрос: «Почему большинство сайтов одной категории выглядят одинаково?». Ответ: потому что такие прототипы себя хорошо зарекомендовали и сами посетители привыкли. Если немного по-научному, то речь идет о «когнитивной пластичности», то есть об ощущении легкости или трудности в выполнении умственной задачи. Именно эта самая когнитивная пластичность влияет на то, каким сайтам визуально мы доверяем, какие интернет-проекты хотим поддержать (донат), что или даже кого в жизни мы считаем надёжными.
Иными словами, чем проще понять – тем проще верить и усвоить. Блоги имеют в правой части боковую панель с огромным количеством разделов: новые записи, реклама, новые комментарии, календарь, теги и прочее. Интернет-магазины обладают горизонтальным верхним меню, большим фокус-изображением под логотипом и сортировкой товаров слева или по центру.
Если более наглядно, то представим: работая над Landing Page для фитнес-центра, каждый понимает, что посетитель уже побывал на многих тематических площадках, а потому придя на новую страничку, как минимум, ждёт аналога. Если аналога не увидит, он с большой вероятностью посчитает сайт сложным и непонятным, ему даже не особо захочется в нем разбираться и прокручивать ползунок вниз окна браузера.
Это стереотипность восприятия, привычка, когнитивная пластичность.
Выражая мысли
Стереотипность в веб-дизайне нашла свое выражение и в художественном олицетворении тематики сайта или лэндинга. Например, тематики автомобилей. Что олицетворяет собой и ассоциируется у людей с желанием приобрести транспорт или узнать новое в качестве хобби? Изысканная красота, мощность и скорость, надежность и функциональность. Посетив любую страницу сайтов таких брендов как Ford, Nissan, Ram, GMC, можно увидеть набор фотографий, категорий, разделов с информацией именно об этом. Но именно фотографии и являются олицетворением тематики. Ракурс съемки, освещение, фон, окружающий мир передают всю полноту ощущений, как если бы мы видели автомобиль в реалии или даже прикасались к нему.
Посетители ждут этого от любого иного ресурса и могут сразу не сообразить, если увидят что-то иное. Простое и наглядное лучше усвоить, понять и даже принять на веру.
Идеи и уникальность среди похожести
Логично, что говоря о типичности сайтов и похожести их друг на друга, сложно представить, что каждый веб-дизайн при этом не является копией другого. Вся сложность в том, чтобы новаторство и авторские идеи не рушили стереотипность в целом. Если посетитель визуально не воспримет сайт и не поймет его, то он не скажет: «Это слишком инновационно для меня». Напротив, он подумает: «фигня какая-то».
Gucci
Интернет-магазин одежды и аксессуаров от Gucci. С одной стороны, это обычный интернет-магазин с карточками товаров, меню, фотографиями, описанием. С другой, необычный и инновационный, в своем роде, веб-дизайн. Плитки-карточки разного размера, дополнительная информация, анимация и иное. Авторский подход к реализации общей идеи интернет-магазина не нарушил ожидаемого, но привнес нечто новое и необычное, не ухудшив восприятие проекта в целом.
Defrae
Магазин мебели под заказ для ресторанов, баров, кафе выполнен оригинально. Выбирая категорию «Стулья» или «Столы», видим страницу со всеми товарами, а уже затем можно перейти и прочитать конкретно о выбранном товаре. Главная страница сайта предлагает не только видео продукции, но и описание бренда, деятельности компании и многое другое. Сама идея не нова, но реализация проста, красива и функциональна.
Maria Gubina
Личный сайт и блог дизайнера интерьеров Марии Губиной. Скромный и минималистический веб-дизайн сочетается с насыщенностью фотографий, текстом, подробными описанием услуг, расценками. И даже блог, кажущийся стандартным, выглядит немного другим, с маленьким меню разделов, одним блоком справа и большими плитками-карточками статей. Что уж говорить о необычно пастельной гамме цветов. Опять же привычное и ожидаемое есть, но представлено немного в ином исполнении по цветовой гамме, размерам, расположению по сетке.
Boosted boards
Вы хотите купить электрический скейтборд. А много ли вы о нем вообще знаете, кроме того, что на нем можно кататься? Проект Boosted boards предлагает не только купить роликовую доску, но и узнать о ней много интересного. В данном случае, Landing Page подробно демонстрирует и описывает достоинства, возможности и мощность аккумулятора и многое другое. Да, это обычный лэндинг, но он не продает товар, не побуждает и не завлекает покупателей. Напротив, он рассказывает о товаре в целом, демонстрирует его со всех сторон.
СМИ
Объединяя в одну категории, сравним проекты Lenta.ru, Известия и Медиазона. Все они занимаются освещением новостей, событий нашей жизни. И все они созданы по единому принципу. Да и переходя по ссылкам на данные сайты, мы ожидаем стереотипности, шаблонности. В тоже время взору предстают чуть разные проекты, с разными по стилистике шрифтами, расположению записей, даже главные страницы оформлены по-разному. Но вот концепция – едина.
Наш Красноярский край
Дизайн проекта краевой газеты также похож внешне на многие другие сайты, но дизайнеры по иному разбили сетку, расположили колонки, подобрали размеры шрифтов и использовали много панелей с меню, насытили все это иконками, «фишками» (если прогуляться по сайту) и прочим. И получилось, что при внешней кажущейся стереотипности, сайт не такой уже и шаблонный.
Подводя итог
Стереотипность в веб-дизайне есть и будет. Даже если проект авторский и обладает нестандартным подходом буквально ко всему, вплоть до вертикального меню на всю страницу. Общая идея, общие мотивы, стандарты – будут всегда присутствовать, без них нельзя. Без них сайт обречен на провал.
Но типичность и похожесть не означает, что все дизайны создаются под копирку. Каждый проект, что мы рассмотрели выше, несет в себе что-то особенное. Все интернет-магазины создаются по общему шаблону (без этого никуда), но каждая карточка товара, витрина в целом могут оформляться по-разному, с разными мелкими деталями. А все это – дизайн в целом. Посетители ждут того, к чему привыкли и они это видят. Если дополнительно их радует что-то еще – хвала веб-мастеру, сумевшему заинтересовать потенциального клиента без сложных длинных лэндингов, которые устаёшь изучать или не имеющих, как минимум, быстрой возможности перехода к секциям раздела, без обилия фотографий и текстовой информации.
Таким образом, стереотипность в интернете и веб-дизайне – это не дурное понятие, а наоборот, то, что востребовано. Посмотрите на проект the-challenger.ru. Вроде, все те же СМИ, записи, новости, статьи и даже дизайн привычен уже на подсознании. Но при этом каждая страница, каждый элемент таят в себе что-то такое, аналога которому нет у других в таком же сочетании.
