Мы всегда ищем вдохновение в примерах дизайна веб-сайтов, способного бросить вызов обыденности. Сегодня поговорим о семи приемах дизайна, которые представляют нечто типичное уникальным способом.
1. HARVARD REINVENTS THE INFAMOUS CAROUSEL
Сайт Гарвардской школы дизайна предлагает уникальный способ навигации. Попадая на домашнюю страницу любого сайта – первое, что вы видите – навигация. Конечно, на главной странице размещаются ссылки далеко не на все разделы сайта, а лишь на ключевые. Многие веб-сайты по-разному решают проблему раскрытия контента. Но до сих пор нам не удавалось видеть веб-сайт, представляющий его таким образом. Навигация может быть небольшой, но это центральный элемент вашего сайта. Что еще более важно, она должна выглядеть органично. То, что мы видим на этом сайте – выполнено просто исключительно.
Существует четкая взаимосвязь между изображением и заголовками на левой стороне страницы. Изображения вращаются относительно пунктов, расположенных слева, и в любой момент времени, известно, какая информация для вас доступна. Школа дизайна создала, пожалуй, лучший пример того, как должна выглядеть навигация. Мало того, что удобство и простота использования довольно серьезно смотрится в этом проектном решении, расположение здесь также уникально. В совокупности оба эти фактора делают дизайн просто фантастическим.
2. TRA GOES OFF GRID
Этот минималистский сайт использует нетрадиционную компоновку и обратную цветовую схему – черный фон и белый текст, что придает дизайну излишнюю изысканность. Мы хотим обратить внимание именно на компоновку. Давайте начнем с домашней страницы: здесь несколько частей текста, большинство из которых совпадают с фоновым изображением. Каждая надпись связана с определенным изображением.
Перейдем на страницу “about” — здесь мы наблюдаем больше порядка и использование сетки. Но при этом, сетка не симметрична и не регулярна. Кажется, что каждый раздел здесь имеет свою собственную разметку. Но что особенно пленительно на этой странице – подрезанное изображение в ее левой верхней части. Оно просто ни во что не вписывается, и поэтому вызывает любопытство. Естественно, вам хочется кликнуть на него – и… оказывается, что это галерея. Очень умный способ использования макета — люди, которые достаточно внимательно исследуют сайт, вознаграждены кучей дополнительных изображений. Те же, кому лень это делать – теряют столько же.
3. SCROLLABLE SHOE PHOTOS WITHIN A FIXED PAGE
Этот пример уникального решения дизайна вращается вокруг интернет-магазина обуви. Страница с товарами просто великолепна. Во-первых: используется полная ширина и высота экрана, а каждая его область расчерчена с определенной целью. Во-вторых: весь сайт прост, минимален и чист. Как видите, даже если дизайн использует весь экран – он не всегда выглядит переполненным. Что поражает больше всего – способ разделения страницы. Она разделена на три различных раздела. Навигация стандартно находится на левой стороне. Правая часть отдана под детали с товаром. И то и другое фиксируется на экране. Но, последний, средний раздел, наполнен фотографиями с прокруткой. Блестящее решение. Часто, если вы располагаете на сайте большое количество фотографий продукции, информация о них остается позади. Здесь же, прокручивая разные модели, мы все еще видим описание и название продукта. Прекрасный подход к потенциальному клиенту.
4. SHOWING OFF MULTIPLE SIDES OF A PRODUCT AT A SINGLE GLANCE
В этом примере — другой способ отображения продукции. Да, это тоже продавец обуви, и сайт AFURA также представляет свой уникальный способ отображения. Обувь представлена несколькими различными снимками вверху страницы. На самом деле — это часть элемента карусельного UI. Тем не менее, удобство и простота использования здесь не является большой проблемой. Есть три изображения, отображаемые по умолчанию на настольном компьютере. Изображения имеют одинаковый фон, поэтому пользователь не понимает, что они являются частью карусели. Он просто видит три различных изображения продукции на своем экране. На экранах небольших размеров, таких как планшеты, по умолчанию отображаются два изображения одновременно – тоже довольно хорошо. Такая демонстрация обувных изделий — уникальное дизайнерское решение.
5. OPENDOOR SHOWS OFF THEIR HUMANS
По своей сути Интернет — безличное место, где обычно мы не видим человека. Реальные люди остаются где-то позади приложений, продуктов, компаний. Некоторые разработчики все же стремятся включать в дизайн человеческий элемент. Opendoor — как раз пример такого подхода. На домашней странице, примерно на полпути прокрутки вниз, мы видим раздел под названием «Мы прикрываем вашу спину». Он призван сигнализировать клиенту, что в компании Opendoor есть люди, которые всегда готовы помочь своим клиентам. Opendoor поместили в нем большую фотографию одного из своих сотрудников. В разделе очень мало текста — вместо этого, фото, которое занимает большую часть раздела. Этот прием имеет 100% положительного эффекта. Если бы фото было в виде аватарки, или просто маленьким — эффект вряд ли был таким же. Решение использовать большое изображение дружелюбного лица Марка — отличный вызов, который обеспечивает человеческий и персонифицированный элемент дизайна и придает сайту эмоциональность.
6. UX FLOW SHOWS A LITTLE ANIMATION CAN GO A LONG WAY
Следующий пример уникального решения дизайна имеет дело с анимацией. Если вы посмотрите на домашней страницу этого сайта и прокрутите немного вниз, то заметите, что один из слоев секции просто воодушевляет. Если честно, в ней нет никакой фантазии, но при этом она уникальна. Здесь фон использован в качестве режима прокрутки на веб-странице. И, несмотря на отсутствие сумасшедшей анимации (как в параллакс-эффектах), он впечатляет.
Оказывается, для того, чтобы произвести впечатление, вовсе не обязательно создавать что-либо смелое и кричащее. Иногда такой тонкой вещи, как едва заметная легкость в анимации, достаточно для создания уникального пользовательского интерфейса.
7. TED TODD INTEGRATED MAP
На этом сайте прекрасно разработан и визуальный дизайн, и интерфейс пользователя. Давайте рассмотрим, как использовано расположение карты и разделов. В нижней части главной страницы, есть раздел предназначенный для разных офисов компании, содержащий пару удивительных моментов. Наиболее примечательна вещь: подсвеченная форма штата Флорида с многочисленными точками — классный способ показать охват территории компанией. Они не просто говорят, что находятся во Флориде, дизайн показывает вам, где именно их искать. Еще один важный момент: все эти точки интерактивны. При наведении на них курсора вы получаете название города, где располагается конкретный офис Ted Todd, а при щелчке — весь раздел смещается влево, освобождая место для более подробной информации о нем. Визуально это намного интереснее, чем простое наложение информации друг на друга.
Давайте создадим что-нибудь крутое вместе!
