26 марта 2012 в 02:05

Креативные сайты с нестандартными элементами

Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр




Layrr



Этот сайт позволяет по-новому посмотреть на скролл страницы. Манипуляции с JS и CSS3-анимацией позволяют реализовать мини-комикс, связанный с позицией страницы. С поддержкой анимации в IE все плохо, поэтому только IE9+.

Air Jordan 2012



Промо-сайт Air Jordan — как раз один из тех, на котором можно залипнуть. Думаю, верстальщику удалось воплотить в динамике идею дизайнера, при чем на столько качественно, что сайт отлично работает как в последних вебкитах, так и в IE7.

TokioLab!



Веб-дизайнеры TokioLab! кроме вертикального скролла провели хорошую работу с типографикой и добавили параллакс-эффект, который уже становится трендом в сайтах такого рода.

CCR – 10 Anos de IPO



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

Styiens – Label Musical



Вроде бы на первый взгляд несложный сайт, но блин, как же клево сделан! И сама дизайн-концепция, и фронт-енд реализация винилового слайдера — все достойно всяческих похвал.

Soleil Noir 2012



Сайт Soleil Noir Studio является одним из так называемых вертикальных скролл-сайтов. В сайте неплохо сочетается концептуальность, удачная gif-анимация, которая не раздражает, и параллакс-эффект. Ну и да, html5boilerplate внутри :) Кстати, интересная тенденция — все больше фронтендеров отказываются от reset в пользу normalize.

g4interactive



Верстальщики этого сайта решили вовсю использовать возможности CSS3, в частности трансформации и анимацию. В результате этого сайт адекватно не работает в IE, даже в девятой версии, зато во всех остальных современных браузерах — более чем отлично. Концептуальный ромбовидный дизайн соблюдается на всех страницах, и на каждой странице можно найти какой-нибудь интересный динамический компонент

Contain.r



Симпатичное решение для графического портфолио. Анимация, предзагрузка контента, html5boilerplate. Более-менее комфортно работать с сайтом можно начиная с IE8, правда без анимационных эффектов.

Subsens



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

Barcito Chicago



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

Adrian Baxter



Попав на сайт Adrian Baxter’а, я сразу же полез в Firebug посмотреть, как реализовано изображение с параллаксом на главной странице. Кроме этой штуки, интересные компоненты можно найти еще на других страницах, в частности на странице контактов и в галерее.

Dawid Wadach



Еще один геометрический сайт, который лучше открывать в Firefox и Chrome. Здесь можно наблюдать интересные эффекты, которые происходят с элементами портфолио-галереи.

Dangers of Fracking



А на этом сайте можно проследить за путешествием полупрозрачной png-капли и параллельно узнать информацию об сохранении окружающей среды. Интересен сайт и с точки зрения дизайна — очень неплохо реализованы переходы между страницами и их фоном.

Mezcal Buen Viaje



Первое, на что обращаешь внимание на этом сайте, это нестандартный скроллбар. Но не только он представляет интерес — здесь можно оценить качественный параллакс-эффект для фоновых слоев, анимацию взмаха крыльев птицы при перемотке страницы и ромбовидные карусели.

CaptainDash



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

UPD: еще интересные сайты из комментов:
Александр Смолянинов @derSmoll
карма
114,5
рейтинг 0,0

Комментарии (41)

  • 0
    Завораживает :)
  • +1
  • +1
    Суперподборка! Автор, спасибо тебе.
  • +1
    www.awwwards.com — черпайте вдохновения!
  • +3
    сломал скролл
    • +3
      везунчик, у вас был скролл
  • +1
    space.angrybirds.com — сайт недавно представленной игры angry birds spaceдовольно интересно)

    спасибо за подборку, вдохновляет)
  • +2
    Для любознательных, если только еще не читали, на .Net была статья, посвященная эффекту скролла вдоль по улице. Внешне похоже на CCR – 10 Anos de IPO
  • 0
    Спасибо, заглядение) Сколько таких подборок уже было, но каждый раз узнаешь что-то новое.
  • +2
    Креатив креативом, но не дай бог дожить до того момента, когда повсеместно будут внедрены подобные способы и эффекты перемещения по сайтам.

    Подумайте в конце концов о людях, голова же закружится или начнётся эпилепсия.
    • 0
      Не думаю, что повсеместно будут внедрены. В первую очередь из-за того, что такую навигацию и эффекты куда сложнее сделать, чем страндартный сайт и не каждый верстальщик осилит. Плюс нужно очень грамотно подходить с точки зрения дизайна, чтобы не получилась каша, а это это отрезает процент
  • 0
    достаточно подписаться на tympanus.net
    • 0
      не достаточно :)
      вернее, tympanus.net — клевый ресурс, но конкретно такого плана статьи с сайтами появляются нечасто.
      для этих целей больше подходит speckyboy.com c их еженедельной подборкой Web-design and development inspiration
  • +1
    Тут наши таварищи из Бюро Пирогова тоже внезапно взглянули на Европу, сказали «нет» флешу и «да» хтмл5. Получилось не то, чтобы стремно — аляповато, дешево и не к месту. Нашим еще учиться и учиться.

    Позволю себе прилепить к списку www.mediaparker.com — очень клево презентован продукт, хочется взять и купить у них местечко в облаке. :) Вобщем-то, главное, чтобы все эти свистелки-перделки выполняли главную функцию сайта — поделиться информацией доходчиво и доступно.

    Еще пусть тут побудут www.kipling.com.br и krystalrae.com — тоже очень модно и круто.
  • 0
    Dangers of Fracking рассказал действительно интересную историю про экологию. Красиво, наглядно — супер!
  • 0
    А я сокрушался — куда делись те бесмысленные но крайне занятные украшения которыми древние мастера увешивали буквально всё (не могли и палку сделать без резьбы). А оно вон где всё собралось (:

    Занятная подборка. Особенно для человека несколько не в тренде.
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    • 0
      флеш детектед :)
  • +1
    И что хорошего? Такие сайты едят в разы больше ОЗУ. Например, в Хроме, если добавить на страничку хотя бы 1 скрипт, потребление памяти (в сравнении с бесскриптовой страницей) сразу же подскакивает на 6Мб.

    Я хочу, чтобы дизайн делался на HTML/CSS без скриптов, без тяжелых картинок (которые ломают плавную прокрутку, которая впрочем есть только в Опере и ИЕ), просто хорошо типографированный текст и иллюстрации на белом фоне (еще бы хотелось, чтобы умственно отсталые люди, а также неграмотные, и не умеющие правильно ставить запятые люди были лишены возможности писать что-либо в интернете, но это уже утопия). Это сложно? Но нет, каждый школоверстальщик считает важным либо сделать из страницы Windows 7, либо налепить анимированных меню. Да горите вы все в аду, нелюди.
    • 0
      Что касается этих сайтов, то обычно школоверстальщики тут не при чем. Мне кажется, это больше инициатива именно клиента. Заказчикам всегда нравились свистелки-перделки, особенно если это касалось промо-сайтов
    • 0
      Не думаю что, напрмер, найк (у которых уже 3-4 таких промо сайта с паралаксами на css3 и js) отдает делать их школостудиям.
      По моему круто и имеет место быть, это же промо, а не википедия и не сайт клуба «зеленая лампа». Тем более сделано с любовью и вниманию к деталям (это я опять же про найк).
  • +1
    Посмотрел — красиво. Но вот ей богу, у меня конечно не самая мощная машина, но в Chrome и Opera тормозило больше половины сайтов. Ну и в чем смысл? Эффектно, но медленно? Да заберите вы свой CSS3 обратно.
  • 0
    очень крутые и вдохновляющие материалы!
    люблю такое смотреть чтоб потом и самому делать что-то эдакое. Спасибо большое!
  • +3
    Сайты «Как сделать так, чтобы посетитель удивился, но ничего не купил и не заказал».
    Люди ходят за товарами или услугой, а не за наблюдениями по загрузке прелоудера.
    Если бы интернет состоял только из этих 10 сайтов, было бы зашибись. Но человек, который ищет конкретную услугу, уже перед этим просмотрел сотню сайтов и ему не важно, как там кеды в самолёт превращаются.
    ему нужно вменяемое описание услуги и её стоимость. А для тех, у кого куча времени, надо вешать кнопку «Тут у нас так всё клёво! Последние достижения флеш-анимации!»
    Я даже из чувства любопытства не стал просматривать всё, пару страниц проскролил — мне достаточно.
    Ну это как в мире моды: то, что на подиуме, в реальной жизни никто не носит.
    • 0
      Многие из этих сайтов как раз и сделаны для вау-эффекта, чтобы впечатлить посетителя начиная от прелоудера и заканчивая контактной страницей. Это или промо-сайты, или сайты-портфолио веб-студий и отдельных разработчиков. Они как бы показывают — «зацените, как мы умеем». Такие сайты были во все времена, и раз их продолжают делать, значит это таки пользуется спросом.
      • 0
        Как промо своих возможностей — да. И такие сайты должны быть, они хотя бы направление общее показывают остальным. А для пользователя они вредны.
        Ну и насчёт впечатления… не изобреи ещё что-то волшебное новое, а эти эффекты в более примитивном виде были очень давно реализованы. Но молодцы, что не сидят, сложа руки, ваяют ))
  • 0
    Ух ты :) На Air Jordan больше гига отожрало :)
    Mozilla/5.0 (X11; Linux x86_64; rv:13.0) Gecko/20120318 Firefox/13.0a2 — Build ID: 20120318042011
  • 0
    CaptainDash в Хроме отнял до 50% CPU, А так сайт классный )
  • 0
  • 0
    у меня мак бук старенький (2.6 Ghz), часто зависает при просмотре видео через флеш плееры, от чего приходится кино смотреть на другом компе
    так вот на пятом или шесто сайте вылетел ;)
    так что крутотень крутотенью, но некоторые верстальщики мудрят так что сайт можно смотреть только геймерским компом.
    Так что всего должно быть в меру и тогда все пользователи будут довольны, потому как красиво выглядит, это уж точно ;)
  • 0
  • 0
    CSS мало, JavaScript много. Почти все сайты с «крутым» дизайном совершенно перестают работать без скриптов. Это лажа. Почти все сайты нехило нагружают комп. Это лажа. Про совместимость с ИЕ браузерами вообще молчу.

    Не впечатлило. Было бы круто, если бы на чистом CSS декларативно можно было вытворять что-то подобное. А так это тонны скриптов.

    Это не будущее, а обычный выпендрёж «а я вот так могу!».
  • 0
    Идея со скроллом не очень удобна, хоть и выглядит все это красиво
  • 0
  • 0
    Мы тоже для своей игры запилили сайт на CSS3: colorop.us/
    Прототип делали на Flash — было все супер, а на HTML, конечно, нет дробных координат и слои двигаются попиксельно, поэтому плавной анимации добиться не удалось.
  • 0
    Неужели всю анимацию делали ручками? Или есть инструменты, вроде флеша
  • 0
    Air Jordan 2012 — вообще сказка :)

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.