Самые необычные и оригинальные сайты

Иногда, самые необычные сайты – просто свежий взгляд на веб-дизайн. С новыми идеями, нестандартными подходами и удачными дизайнерско-маркетинговыми решениями развивается Интернет. В индустрии WEB-а заметен спрос на все самое удивительное, неординарное и необычайно-креативное. Раз публика приветствует появление новых оригинальных сайтов, продвинутые дизайнеры не против свободы самовыражения.

Прежде чем перейти к крутым дизайнам

Попытки впечатлить посетителей новым и оригинальным (пр. нестандартная навигация), предпринимались и ранее. Сейчас уже недостаточно «сделать красивый дизайн», включив в оформление сайта модный крутой эффект. На волне творчества и креатива, нынешнего пользователя Интернет вдохновляет новаторство – то, что необычно и действительно оригинально:

Удивительное удивляет нас только раз. Восхитительное же, с каждым разом восхищает все больше (Жозеф Жубер)

В дизайнах с «неповторимым стилем», решающее значение приобретает дружелюбность к пользователю разрабатываемого интерфейса. И нужно быть замеченным: по выдающимся арт-композициям, элегантному тонкому стилю… Основная задача – отличаться. Эпоху суперграфики сменяют новые идеи: стиль FLAT, материальный подход, чистый дизайн, видеоарт, моушн, осмысленная анимация и проч. интересные штуки (благодарим технологии).

Здесь подобраны сайты представляющие эстетическую ценность, удивляющие интересными дизайнами с самым нетипичным подходом.

Cайты с необычной идеей и крайне нестандартным дизайном

Иногда интересно и даже полезно знать: насколько благоприятен тот или иной район города? Необычный сайт, называющий себя «Прогнозом благополучия» представлен графической картой Лондона, отрисованной на HTML5 Canvas.

Идея дизайна: интерактивная 3D карта в стиле оригами, формируемая на основе данных анализа твитов соцсети. Создана по технологии WebGL

Алгоритм стенфордских ученых узнает настроение жителей из Twitter (с гео-привязкой) и сравнивает количество позитива с негативом. Из рассмотренных за год каждодневных микровзаимодействий формируется карта-прогнозов в метеорологическом стиле. Если интересны детали, можно углубиться в анализ.

Чувства пользователей Твиттера стали информационным ресурсом этого проекта. Весьма поучительно: а с какими идеями еще можно использовать выражение эмоций в открытом доступе?

In Pieces – интерактивная выставка (с применением геометрии, радиальных диаграмм и CSS-анимации) наиболее удивительных и редких видов представителей фауны.

Идея дизайна: вообще это CSS3-эксперимент, но еще и веб-памятка о красоте природы и опасности потерять ее. Шоукейс эволюционирования представлен 30 видами животных

30 изображений отрисованных в иллюстраторе доведены при помощи CSS.

Оригинальная идея, качественный уникальный дизайн с анимацией полигональных фигур и нестандартным управлением – то, что сделало сайт интересным для широкой аудитории.

Статья на Smashing Magazine о моментах создания проекта (с кодами и описаниями) может быть интересной для дизайнеров и веб-разработчиков

Дизайн-креатив — интересные сайты агентств

Оригинальность сайта французской студии начинается с эффекта предзагрузки главной страницы.

Идея дизайна: удобный формат представления данных (стимулирует к просмотру новых страниц). К общему стилю, выдержанному в каждом разделе, добавлен оригинальный эффект/ функционал

Насколько урезан текстовый шум! – Медиа-контент говорит сам за себя

Дизайн-интерфейсные решения называют хорошим UX-дизайном:

Когда нет надобности «прицеливаться» к иконкам навигации, «вглядываться» в суть изображения кликабельной миниатюры или «угадывать» назначение раздела

Т.е. улучшающие пользовательский опыт:

— Значок разворачивается в надпись (формат области анимации, облегчающий восприятие) — Управляющий значок для листания следует за курсором (меньшее расстояние перемещения, это +1 к юзабилити) — Анимация пунктов меню с фоновой картинкой

Мумия боса – главная, офисное пространство – об агентстве, команда – «О нас»

— При просмотре портфолио фиксируется активная область из 9 превью

На общий экран квадратора 3×3 выводится картинка с другого ракурса (или дополняющая миниатюру)

Быстрое понимание интерфейса, формирует положительный опыт взаимодействия, улучшая поведенческие характеристики страницы. Перефразируя классический афоризм: «Ища необычное, пользователь желает чтобы удивили его чем-то привычным». Интерфейсные сложности всегда препятствуют постижению веб-дизайнерского «ноу-хау»:

Интерфейс, он как шутка – если приходится ее объяснять, значит не удалась

Действия на сайте происходят в области одного контент-блока с различными функциями.

Нестандартная навигация с собственным меню в блоке

Вынужденные переходы на главную надо предотвращать. Дело в том, что:

С частыми возвратами на главную, все больше утрачивается интерес и пользователь переходит к случайному выбору контента

Вам не нужно (распыляя внимание) отыскивать информацию по различным уголкам сайта, поскольку достаточные сведения о студии и ее услугах легко доступны.

Нью-Йоркое топовое интернет-агентство полного цикла услуг (клиенты Nike, Walt Disney…).

Идея дизайна: дизайн страниц на уровне предлагаемых услуг – от главной до 404-й. Нестандартное и отличающееся в разных местах сайта выпадающее меню. Единообразие поддерживается цветом

Необычная навигация: вывод сгруппированных по блокам ссылок меню на отдельной странице

Для лучшей подачи информации продумана непротиворечивая прозрачная структура навигации сайта – с красивым оформлением выпадающих списков, дополнительных меню и элементов управления. Креативная страница 404.

Оригинальность этой студии начинается с доменного имени сайта – охотничья собака (англ. hound). Название отображено в креативном логотипе и является частью брендинга. Тема гончей раскрыта и на страницах, в виде анимации занятого делом персонажа.

Идея дизайна: в плоский стиль с иллюстрациями и анимацией хорошо вписывается предоставляемая услуга ANIMATED EXPLAINER VIDEOS

На примерах 2d и 3d animation демонстрируется потенциал объясняющих видеороликов

Объясняющее видео – просто о сложном

Объясняющим видео (explainer video) можно шутя представить ваш бизнес в выгодном свете. Короткие видеоролики дают максимум полезной информации всего за 1-2 минуты, чем и привлекают в эру познавательного шума со всеобщим игнорированием рекламных объявлений.

Оригинально использующие медиа-контент сайты

О 7 грехах пользовательского поведения в Сети рассказывают артисты, музыканты и писатели.

Идея дизайна: показать реалии цифрового века на сайте в современным стиле – с удобным и легким меню, качественным интерфейсом и хорошим представлением информации (уместные звуковые и визуальные эффекты, умеренная анимация)

Семь грехов в эпоху Интернет по разделам: вожделение, чревоугодие, лень, алчность, гнев, зависть и тщеславие. Интересные истории о кибер-пристрастиях популярных личностей дополняют видео-интервью.

Этот роскошный сайт предлагает совершить «Luxury Voyage».

Идея дизайна: устанавить атмосферу великолепия впечатляющими фонами в сочетании с типографикой «от руки» (hand-drawn) и забавными рисованными иконками

Красивая графика, приятные шрифтовые контрасты и необычная навигация с выпадающим меню. На вертикальную панель значками вынесены повторяющиеся опции.

Vlogging (видео блоги) популяризируются с 2005 года. Когда Speedo (бренд водно-спортивных товаров) пожелал создать микросайт, то рассматривался только вариант с видео.

Идея дизайна: в партнерстве со студией Hello Design было снято 17 коротких уникальных фильмов. Требовалось современное решение разноплановой направленности. В результате получился проект на основе HTML5 и CSS3, в котором видео повсюду – даже в навигации

Отобрано максимально качественное видео, очищенное от всего ненужного и JS.

Функционал предпросмотра видео-анонса следующего сюжета, обеспечивает непрерывный процесс презентации LifeStyle c брендом Speedo. Сейчас это важно и для SEO:

4 августа 2015-го, Google запатентовал «время просмотра» видеоконтента в качестве фактора ранжирования и может учитывать критерий для определения качества сайта

Интересные и увлекательные спецпроекты брендов

Занимательный и необычный сайт, совместного с Гугл культурного проекта с познавательным онлайн-опросом, (необычайно полезным для расширения кругозора).

Идея дизайна: вызвать интерес к творчеству писателя. Для начала предлагается выяснить, к какому типу персонажей Чехова Вы относитесь

Нужно пройти короткий тест.

Инновационный проект «Чехов жив» запущен в 2015 году и уже не уступает по объему трафика прошлогоднему «Каренина. Живое издание». Интересный онлайн-опрос с анимированными иллюстрациями персонажей – игрушка, существенно увеличивающая трафик на сайт.

Ознакомительный тур по тематике покупки дома с неожиданным развитием сюжета – от идеи приобретения жилища до новоселья. Погружение в интерактивную историю начинается буквально «из головы».

Идея дизайна: креативный эффект скрола в глубину с переходом через активные точки и диалоговые окна в компактный сайт с CTA-кнопками (ссылки на основной сервис)

Через воображаемый бумажный мир на крыльях птицы-оригами:

Новшества в дизайне и особенности управления сайтом:

• Навигация прокруткой или клавишами-стрелками
• Таймлайн (timeline) элемент с визуализацией переходов по узлам навигации
• Минимизированное окно в сайдбаре для перехода между интерфейсами
• Интересные скролл-эффекты и красивые CSS 3 переходы

Веселый promo-сайт на тему изготовления напитка. Интерактив предложен слоганом (Срывай, дави, наливай) и нужными кнопками (A, P, P, S,).

Идея дизайна: объяснение несложных концепций «простым языком». Кратко информирующий action симулятор – теперь вы представляете как делается сидр

Только вода и свежие яблоки требуются для производства Apps Cider. Так все просто и натурально. Сыгравший в интерактивную мини игру посетитель убеждается в этом сам.

Нестандартные разметка / функционал / навигация

В мире есть мода на винтажное пиво (особо выдержанное и по спец. рецептам). OLIVER Brewing Co делает коллекционные сорта пива с оригинальным вкусом.

Идея дизайна: винтажные/ ретро элементы фон, гранж точки (цвета солода) уместны по тематике сайта. Не позволит забыть о продукции и главная страница (лэндинг) – интерактивная анимация с вращением банки запустится от движения курсора

Оригинальная страница 404 ошибки «не найдено».

Кажется тебе уже хватит. Пора домой! (на домашнюю страницу)

Сайт пивоваренной компании сделан на WordPress. Имеет необычную разметку и винтажный дизайн в стиле пенного напитка с соответствующей типографикой.

Что-либо «наоборот» в веб-интерфейсе сайта — сразу кажется странным или очень необычным. Scroll up to start (начните с прокрутки наверх) это интересный креатив, выражающий концептуальную сущность VeryUP.com.

MEET OUT VERY UPPERS – креатив на странице «О Нас» с уникальным функционалом фильтра

Идея дизайна: концепция нейминга, брендинга и дизайна сайта, начиная с эффекта предзагрузки и до креатива на странице о нас, построена на оригинальном «До самого верха» (англ. VeryUP)

Даже частичное вхождение ключевой фразы в домен сайта, положительно влияет на SEO и упрощает продвижение

Современные / самые передовые / в ногу со временем (англ. very up-to-date) – слова «в тему» для компании, занимающейся профессиональным обучением по повышению квалификации кадров.

Интерактив продакшн студия, фокусируется на создании инновационных и экстроординарных онлайн продуктов для компаний по всему миру (сайты, приложения, игры).

HTML5/CSS3/JS/3D анимация и свой собственный стиль

Идея дизайна: хотя дизайны с такой разметкой вполне стандартны – необычно само размещение элементов. Вместо того, чтобы ожидать пользовательского внимания к пунктам меню слева/ справа/ сверху, предложено оригинальное навигационное решение с серией невыровненных блоков

Крупные кликабельные панели с визуальными образами упрощают навигацию по сайту. Помогает этому цветовой дизайн hover-состояний, с индикацией открываемого раздела в той же тональности.

Сайт производителя свадебных нарядов с необычно красивой презентацией продукции. Весь эксклюзив структурирован каталогами по продуктовым линейкам. Адаптивная навигация с подходом «mobile first».

Страница карточки продукта со ссылкой на весь ряд изделий

Идея дизайна: сочетая тренды типографики, нестандартную навигацию и уникальное оформление с привлекательным медиа контентом, подготовить пользовательские ожидания к мысли о первоклассности продукции

Навигацию необязательно выставлять напоказ: взгляд притягивает контент, а не логика работы сайта. Такая тактика первоначального воздействия на клиента через интересные снимки характерна для фэшн и сайтов фотографов.

Промо-сайт авиакомпании Singapore Airlines визуально и интерактивно представляет особенности салона премиум-эконом класса.

Идея дизайна: интерактив с красивыми бэкграундами – элегантный способ виртуального ознакомления клиентов с комфортом авиаборта

Качественный дизайн с размытыми бэкграундами, плавными переходами и 4-мя способами навигации, выглядит достойно на любых платформах и девайсах.

Один из самых красивых сайтов в тематике автопроката для свадебных и праздничных мероприятий.

Идея дизайна: эксклюзив аренды старинных машин с видом пейзажей из кабины миловидного автокемпера

Сайт в винтажном стиле лучше всего передает эмоциональность услуги «авто 60-х и 70-х». Р етро и винтаж подразумевают: гранж элементы точек, бирки, ретро карточки, картон-текстуры для контент блоков, фоновые плашки под текст в виде обрывков и полосок старой бумаги, игривость легкой анимации.

Веб-студия ориентирована на стартапы и клиентов малого / среднего бизнеса.

Идея дизайна: в стремлении сочетать красивое с функциональным, дизайнер подменяет текст концептуальными фотографиями / иллюстрациями и разбивает в нестандартном меню навигации пространство экрана на блоки-ссылки

Студия предлагает рассмотреть концепцию не дешевого, но рационального предложения на полностью уникальной CMS, с применением технологий HTML 5, CSS3, WebGL, JS.

Глубокая обработка фотографий с уходом от естественных цветов, в дизайне основанном на использовании фото реальных людей.

Идея дизайна: показывая живую атмосферу офиса, выигрышно представить свой сервис при помощи современного адаптивного сайта из одной страницы

Оригинальный стиль создается цветокоррекцией фото-бэкграундов, наложением текстуры фона.

Сейчас модно использовать на сайте компании неформальные снимки команды за работой. К примеру, как на этом ярком одностраничнике с навигационной структурой, приукрашенной интерактивной анимацией.

Иллюстрированное и анимированное интернет-представительство Hermès Group (французская компания международного уровня). С прокруткой вниз разворачивается визуальная история в забавном стиле скетча.

Идея дизайна: немного веселой анимации в формате сторителлинга «Про работу в тесном контакте», когда жажда командного духа делает менеджмент компании уникальным

Сайт на html5, css3, jQuery – пример оригинального и чистого дизайна с анимированными рисунками от руки и применением рукописного шрифта.

Общее благо важнее личностных достижений! Прогресс обязан страсти и стремлению, проявленных каждым. С таким с социально-философским обоснованием дизайн-концепт (с прикольными скетч анимациями человечков) представлен на NiceOneILike.

Дизайн, в котором применяется расширенная навигация.

Идея дизайна: навигационная система сайта из двух меню с утонченным стилем подписей пунктов

Меню во весь экран это свежий тренд в навигации по сайту. Здесь функционал дополняют стандартное гамбургер-меню и раскрывающийся список разделов на внутренних страницах.

Сайт дубайской фирмы представляет из себя сплошное навигационное меню.

Идея дизайна: продемонстрировать ценности компании в высоком качестве, с выразительным контентом и предельно понятной навигацией по нему

Использование всего экрана – не классический вариант для меню. Но навигация работает безупречно, не оставляя пользователю шансов пропустить важнейшую секцию.

Современный архитектурный дизайн-журнал с нетипичной схемой навигации.

Идея дизайна: структура сайта под стать тематике. Нестандартная разметка с необычной навигацией потребовались для размещения больших объемов текстового, визуального контента и управления им

Удобный сайт, имеющий компактную структуру с двумя выпадающими меню: нижнее аккордеон-меню и верхнее, именованное как супер-меню.

Свежий сайт интернет-представительства архитектурно-проектной фирмы с геометричным дизайном, нестандартной навигацией и управлением.

Идея дизайна: (от студии-разработчика) – мы исследовали бренд-айдентику и решили расширить фирменную черно-красную палитру заказчика, добавив современный синий оттенок. Со слоганом «Создай вдохновение» (Shape the Inspired) акцент переносится с построек на уровень людей, а изображение ивы символизирует не ломающиеся конструкции.

Пигмент красного цвета классически присутствует в архитектурных строениях.

Для фирмы, специализирующейся на проектировании сооружений для студентов, требовался современный сайт с дружественным дизайном. Выбран стиль Flat с добавлением нового оригинального шрифта Breve.

Сайт, награжденный за лучший веб-дизайн 2015 года. Красивый современный дизайн с плоскими цветами и Flat иллюстрациями.

Идея дизайна: изображая свой город Портланд таинственным и своеобразным, обозначить стратегию (заявка на неординарность)

Озвучка красивых эффектов доставляет эстетическое наслаждение

Высокотехнологичное цифровое агентство Oblio сопровождает этот проект заявлением: «Мы никогда не откажемся от эксцентричности и будем продолжать совершать чудачества и странности, свойственные творчески мыслящим дизайнерам».

Подведем итоги

Современная концепция Web далека от совершенства, поэтому нужно приветствовать инновационные разработки и дизайнерское творчество. Но всеобщего внимания удостаивается лишь успешная реализация интересных идей и лучше сверять их с потребностями клиентов. Оценят ли? Задача требующая проработки – найти баланс между «замечаемостью» веб-элементов (в различной степени) и незаметностью хорошего дизайна в целом. В примерах нестандартных и необычных сайтов были рационально использованы пространство с системой навигации и умело применялись компоненты управления.