Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Дизайн

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

30 декабря 2015 20 комментариев

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

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

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

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

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

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

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

Сайт The Happy Forecast

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

Интерактивные сайты с нестандартным дизайном

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

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

Интересный и необычный сайт с трехмерной интерактивной графикой

Краткий итог

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

Сайт Species in Pieces

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

Красивый и необычный сайт с Low Poly анимацией

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

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

Удивительно красивый сайт на CSS3 с анимированными низко полигональными иллюстрациями

Краткий итог

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

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

Читайте также:  Психология влияния цвета на конверсию сайта

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

Сайт Viens-la

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

Необычные и креативные сайты дизайнерских студий

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

Оригинальный и креативный сайт интернет агентства

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

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

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

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

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

Оригинальный и креативный сайт веб-дизайн студии

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

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

Оригинальное и креативное портфолио сайта

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

Читайте также:  11 креативных сайтов отечественных студий веб-дизайна

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

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

Краткий итог

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

Креативные дизайны сайтов

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

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

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

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

Сайт Bluefountainmedia.com

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

Самые креативные сайты с нестандартным меню

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

Пример необычной навигации по сайту

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

Краткий итог

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

Читайте также:  Оформляем красиво страницу 404-ой ошибки

Сайт Hound Studio

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

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

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

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

Дизайн сайта студии с анимацией персонажа в объясняющем видеоСайт дизайн студии с полезной видео-инфографикой: объясняющее анимационное видео

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

Краткий итог

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

Читайте также:  Как правильно использовать фоновое видео: 24 сайта в пример

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

Сайт Digital Deadly Sins

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

Интересный сайт с необычной идеей и красивыми WebGL эффектами

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

Сайт с необычной идеей и стильными эффектами

Краткий итог

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

Сайт Luxury Resorts

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

Невероятно красивый сайт с оригинальным стилем

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

Краткий итог

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

Сайт Fueled by Water

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

Необычный и интересный видео-блог бренда

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

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

любопытные сайтыИнтересный и оригинальный сайт с видео

Краткий итог

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

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

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

Сайт Chekhov.withgoogle.com

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

Занимательный и увлекательный сайт интересного проекта «Чехов жив»

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

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

Самый увлекательный сайт интересного интерент-проекта с познавательным тестом

Краткий итог

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

Сайт boligreisen.no

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

Очень увлекательный удивительный сайт со странной тематикой

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

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

Самый увлекательный и красивый интерактивный сайтОчень увлекательный и креативный интерактивный сайт

Краткий итог

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

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

Сайт Сapps

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

Забавный промо сайт с интерактивом

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

Веселый промо-сайт с ярким дизайном

Краткий итог

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

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

Сайт Oliver Breweries

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

Необычный красивый сайт на WordPress с винтажной типографикой и гранжевыми фонами

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

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

Самая оригинальная страница с ошибкой 404

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

Краткий итог

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

Читайте также:  80+ творчески оформленных страниц 404

Сайт Very UP

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

Пример интересного креатива на странице «О Нас» сайта с концептуальным дизайном

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

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

Краткий итог

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

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

Сайт soppo.co

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

Простой в использовании сайт с оригинальной навигацией

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

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

Краткий итог

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

Сайт Sassi Holford

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

Очень красивый сайт с уникальной навигацией

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

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

Краткий итог

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

Сайт Siapremiumeconomy.com

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

Красивый промо-сайт бренда с интерактивом

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

Самый оригинальный и красивый промо-сайт

Краткий итог

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

Винтажный сайт Split the Difference

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

Оригинальный сайт в винтажном и ретро стиле

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

Краткий итог

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

Сайт Allamar Design

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

Оригинальное меню сайта на весь экран

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

Красивое полноэкранное меню их фотографий

Краткий итог

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

Одностраничный сайт Tunk Ideas

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

Очень красочный одностраничный сайт с оригинальным стилем

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

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

Невероятно красивый одностраничный сайт с уникальной навигацией

Краткий итог

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

Читайте также:  Цвета в Web дизайне: колор-тенденции (яркие тона)

Сайт Hermes Employeur

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

Иллюстрированный и анимированный сайт на html5 и css3

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

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

Классный сайт в рисованном стиле с анимацией «скетчевых» элементов

Краткий итог

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

Сайт Voisins

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

Оригинальное меню сайта во весь экран

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

Краткий итог

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

Сайт sweid and sweid

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

Примеры оригинальных сайтов с использованием всего экрана для полноэкранного меню

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

Краткий итог

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

Сайт Uncube Magazine

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

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

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

Краткий итог

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

Сайт Mackey Mitchell

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

геометрический дизайн сайта с нестандартной навигацией

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

Сайт с нестандартной навигацией и геометрией

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

Краткий итог

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

Сайт Кeep Portland Weird

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

Сайт с удивительно красивым дизайном

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

Плоский дизайн сайта с удивительно красивыми анимационными и звуковыми эффектами

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

Краткий итог

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

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

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