Интернет невообразимым образом насыщен самыми разными идеями для веб-дизайна. Уникальные сайты, вдохновляющие проекты, новаторские решения. Веб-мастера стараются с каждым своим проектом привнести что-то новое, создать свой «почерк», использовать только свой набор технологий, которые привлекут к ним организации и заказчиков.
Но как найти такие самородки, алмазы, чистейшие словно слеза? Как определить, что именно данный дизайн сайта является лучшим и не только сейчас, но уже на протяжении года или даже более. С другой стороны, сами веб-мастера задаются вопросом, что же такого создать и «нарисовать», чтобы работа была признана лучшей или уж, как минимум, хорошей?
На все это есть самый простой ответ: изучить победителей в сфере веб-дизайна в конкурсах Webby Awards (международный, работы принимаются со всего мира), Awwwards (Испания, работы оцениваются из США и Европы), CSS Awards и даже «Золотой сайт» (Россия). Эти конкурсы не только крупнейшие и ведущие в мире, но также позволяют веб-мастерам совершенствоваться в дизайне сайтов, узнавать о новых веяниях и о том, на каком сайте посетителям удобнее изучать информацию.
Мы отобрали лучшие работы за разные годы, которые представляют собой идеальные образцы современного дизайна, UX, UI, обладают информационной архитектурой, оптимизированы на скорость работы и увеличения конверсии, обладают видео-маркетингом и просто выглядят весьма интересно и новаторски. Впрочем, мы нашли и некоторые другие образцы, которые напомнят вам примеры из наших прошлых материалов. И путь идеи будут в данном случае заимствованы, но обыграны и сочетаются с другими находками весьма удачно.
В названиях мы разместили по две ссылки: одна на сам сайт, другая на страничку конкурсной работы.
Montage (Awwwards)
Сайт по созданию и возможности заказа печатных фотоальбомов. Дизайн интересен тем, что сочетает в себе фотографии и иллюстрации, анимацию и статические плоские элементы, иконки и декоративный логотип. Казалось бы, всего много и разного, но использовано настолько последовательно и со смыслом, что не являются чужеродными. Это яркий пример того, как можно выделить лучшие стороны продукта и акцентировать на них внимание посетителей. Прокрутка по вертикали и макет в виде одной страницы позволяют ускорить изучение, не дожидаясь, когда каждый раз будут загружать новые странички сайта.
Revols (CSS Design Awards)
Проект мини-наушников Revols, которые были признаны лучшими и инновационными на CES2017. Что касается дизайна, то удачно сочетается видео с макросъемкой, фотографии и иконки, клипарты. Все это позволяет посетителю постепенно сосредоточиться на изучаемом продукте, прокручивая страницу, глубже узнать все особенности и возможности, и даже захотеть оформить заказ. Более того, крупный шрифт позволяет не просто обратить на информацию внимание, но дополняет собой то, что представлено на фотографиях.
Grapple (IMPACT Awards)
Grapple обладает весьма скудным дизайном. Даже не минималистическим, а просто – скромным. Основная цель мастеров была представить пользователям свое многоплатформенное решение по организации и отслеживании всей информации во время мероприятий, проведения конкурсов, отчетов и пр. Согласитесь, на рынке существует много приложений и облачных решений для этого, поэтому задача, конечно, стояла сложная. На всех страницах можно увидеть в центре меню и лого-изображения формы для подписки и регистрации, как призыв к действию и привлечению внимания. Более того, использовались все возможные методы от иконок, до графиков, поясняющих преимущества данного продукта. В целом, за такой скромностью скрывается весьма насыщенный проект, интересный и олицетворяющий тот момент: что «иногда «украшательства» сыграют плохую игру».
SLI Systems (Awwwards)
Проект представлен в номинации User Approved и ожидает еще вынесения вердикта жюри в текущем году. Но уже сейчас он интересен многим и будет лучше посетить его по ссылке самостоятельно. Здесь оформление диагоналями, иконками большого размера, анимированными иконками, анимированным логотипом и не меньшим количеством статического контента. Выбирая любой пункт меню и переходя на страничку, вновь перед посетителями предстают текст, кнопки и клипарты, рассказывающие и показывающие о компании или продукте. При этом, форма подписки, заказов, повторение верхнего меню находятся внизу страницы, позволяя пользователю решить после просмотра данных, нужно ли ему это или интересует что-то еще. И даже существуют моменты использования фотографии и иллюстраций в одном блоке.
Ocean Health Index (W3 Awards)
Ocean Health Index не столько инновационен в дизайне или технологиях, сколько имеет красочный, не аляповатый и не раздражающий вид. Таким образом, вся красота океанского мира, подводный флоры и фауны, яркость кораллов и воздушность медуз переносится на обычные странички в интернет, позволяя посетителям хоть немного, но почувствовать себя среди этой красоты, увидеть своими глазами то, что не каждый сможет увидеть в реалии (не все же в мире занимаются подводным плаванием). Крупный шрифт, инфоблоки, фотографии подчёркивают на целостной структуре главное. Тексты хорошо усваиваются зрительно, их легко читать и даже визуально все сразу видно: где меню, где поиск и прочее.
А что в России?
Рассматривая международные работы и вдохновляясь идеями западных веб-мастеров, невольно задумаешься, что же есть интересного в России? Какие сайты считаются лучшими по дизайну и какие стандарты они преследуют? В конце 90-х годов ХХ века компаниями Microsoft, Intel, APC, IBS был создан общероссийский конкурс «Золотой сайт» (2016.goldensite.ru/results/). Увидеть работы всех победителей за 2016 год можно на официальном сайте, но мы рассмотрим несколько их них детальнее.
Discover Moscow (Узнай Москву)
Проект путешествия и изучение Москвы, обладающий также мобильным приложением для всех трёх ОС. Что же касается дизайна, то те, кто читал наш прошлый материал об использовании иконок, сразу увидят знакомые идеи. Это и горизонтальное меню на всю страницу с использованием иконок, и эффект жалюзи с отображением основных отличий России (тройка, балет, кремль, небоскребы Москва-Сити и пр). Более того, вы увидите сочетание фотографий и иллюстраций в одном месте, крупный шрифт и удобные для восприятия тексты. Все, казалось бы, уже видели ранее, но если обратить внимание на тот факт, что в России данные тенденции ранее так явно и в таком сочетании не применялись, сайт действительно красив и удобен.
Сайт ювелиров Чекотиных
Персональный блог ювелиров с возможностью заказов их изделий. Что необычного в этом проекте? Все! От использования всплывающих надписей, до художественного оформления. Расположение данных и меню переходов, анимация типографики в виде появляющегося постепенно текста (не печатающегося, а проявляющегося). Рассматривать его можно долго. Удобно ли это посетителям? Безусловно. Наглядно, конкретно и вопросов, по факту, остается мало.
Образовательный проект (РЭЦ)
Также интересен и необычен образовательный проект для обучения взрослых. Вроде бы, есть видео на первой странице, но как только начинаешь прокручивать её и изучать проект дальше, информация не просто предстает взору, но дополнительно появляется сверху, располагается сбоку и по центру, начинает анимироваться или превращаться в иллюстрацию. Образовательный проект решил использовать сложную схему дизайна – асимметрию в её ярком проявлении, разбив модульную сетку вдоль и поперек. Удобно ли такое для нас с вами, как обывателей? Как минимум, не раздражает, да и информации много. Хорошо влияет на конверсию, привлекает пользователей, выглядит на фоне множества иных российских дизайнов – интересно и новаторски.
Sila Sveta (Сила света)
Сайт студии света и дизайна, созданной еще в 2008 году. На текущий момент компания стала международной и почти все световые, лазерные, 3D-шоу, проводимые, например, в Москве во время праздников – их рук дело. Что касается дизайна, то сложно найти прямого аналога среди западных работ. Много анимации, типографики, асимметрия инфоблоков, плоский минималистический дизайн, своеобразное меню и графика, иллюстрации, видео и фотографии с подробным рассказом о том, как технически создаются такие шоу, где что располагается, какое движение объектов на сцене. Сайт информативен и не только красив внешне. Интересен, что называется, для общего развития. Инновационен, креативен. Конверсия обеспечена, пользовательский интерфейс удобен, цветовая гамма не раздражительна.
Пришло время редизайну?
Так что же в итоге мы смотрели и зачем? Дело в том, что абсолютно любой сайт, создаваемый вами, как веб-мастером – ваше лицо в интернете. То, каким вы создаете его, такое о вас будет мнение комьюнити. Если ваш сайт не будет поддерживать проект на том уровне, который требует заказчик, то и воспринимать адекватно ни вас, ни сайт не будут. Проект IMPACT специализируется именно на том, чтобы отобрать именно то, что интересует компании во всем мире и уже их рекомендовать в номинациях конкурсов.
Просто посмотрите на свой сайт и подумайте, представляет ли он бренд в лучшем свете, способен ли увеличить конверсию и задержать внимание посетителя на информации. Захочется ли пользователю вообще переходить по страницам и листать его.
И да, заимствовать идеи друг друга совсем неплохо. Потому как главное – не просто взять идею, а именно обыграть, сочетать, добавить что-то свое. Асимметрия, меню с иконками, эффект жалюзи и прочее – это есть во многих сайтах, но ведь все они не выглядят созданными «под копирку». Многие скажут, что российский «Золотой сайт» присуждает награды только крупным компаниям по логике (раз компания крупная – сайт лучше). Но одно дело – мысли простого обывателя, другое дело – строгий взгляд веб-мастера, на плечи которого ложится задача не просто «нарисовать» сайт, расставив разные блоки и картинки. Почему именно этот дизайн получил награду, а вооооон тот – нет? Мы рассмотрели примеры выше, думаем, что свои награды они получили заслуженно, да и ответить на вопрос вам, как профессионалам, будущим или уже признанным, не составит труда.