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

    Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к 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: еще интересные сайты из комментов:
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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
                                А я сокрушался — куда делись те бесмысленные но крайне занятные украшения которыми древние мастера увешивали буквально всё (не могли и палку сделать без резьбы). А оно вон где всё собралось (:

                                Занятная подборка. Особенно для человека несколько не в тренде.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                  • +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
                                                    у меня мак бук старенький (2.6 Ghz), часто зависает при просмотре видео через флеш плееры, от чего приходится кино смотреть на другом компе
                                                    так вот на пятом или шесто сайте вылетел ;)
                                                    так что крутотень крутотенью, но некоторые верстальщики мудрят так что сайт можно смотреть только геймерским компом.
                                                    Так что всего должно быть в меру и тогда все пользователи будут довольны, потому как красиво выглядит, это уж точно ;)
                                                      • 0
                                                        CSS мало, JavaScript много. Почти все сайты с «крутым» дизайном совершенно перестают работать без скриптов. Это лажа. Почти все сайты нехило нагружают комп. Это лажа. Про совместимость с ИЕ браузерами вообще молчу.

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

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

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