47
ДРУЖЕЛЮБНЫЙ ИНТЕРФЕЙС 1 2 3 4 ТРЕНДОВЫЕ ТЕХНОЛОГИИ УМНАЯ КОНВЕРСИЯ АКТУАЛЬНЫЕ ДИЗАЙН ЛЕЙАУТЫ

Trends_New_Web

Embed Size (px)

DESCRIPTION

Trends in the web development and web design

Citation preview

Page 1: Trends_New_Web

ДРУЖЕЛЮБНЫЙИНТЕРФЕЙС

1

2

3

4

ТРЕНДОВЫЕТЕХНОЛОГИИ

УМНАЯКОНВЕРСИЯ

АКТУАЛЬНЫЕДИЗАЙН ЛЕЙАУТЫ

Page 2: Trends_New_Web

1ДРУЖЕЛЮБНЫЙИНТЕРФЕЙС

Page 3: Trends_New_Web

УПРАВЛЕНИЕС КЛАВИАТУРЫ

Page 4: Trends_New_Web

ПРИЛИПАЮЩАЯНАВИГАЦИЯ

Page 5: Trends_New_Web

УПРАВЛЕНИЕЖЕСТАМИ

Page 6: Trends_New_Web

ИСПОЛЬЗУЕМ АКСЕЛОМЕТР

Page 7: Trends_New_Web

АДАПТИВНАЯВЕРСТКА

Page 8: Trends_New_Web

АДАПТИВНАЯВЕРСТКАЭФФЕКТИВНЕЕ МОБИЛЬНОЙ ВЕРСИИ

ИСПОЛЬЗУЕМ ГОТОВЫЕ ФРЕЙМВОРКИ

НАПРИМЕР BOOTSTRAP

Page 9: Trends_New_Web

MOBILE TOUCHSCREEN FRIENDLY

Page 10: Trends_New_Web

УПРОЩАЕМ ИЛИУБИРАЕМ АНИМАЦИЮИ ИНТЕРАКТИВ

Page 11: Trends_New_Web

ПОДАЧАСЛАЙДАМИ

Page 12: Trends_New_Web

ИСПОЛЬЗУЕМБОЛЬШИЕКНОПКИ

Page 13: Trends_New_Web

НЕ ИСПОЛЬЗУЕМВЫПАДАЮЩИЕ МЕНЮИ ФУНКЦИОНАЛЬНЫЕРОЛОВЕРЫ

Page 14: Trends_New_Web

ВИЗУАЛЬНЫЙ ИНТЕРАКТИВ С РОЛОВЕРОМЗАМЕНЯЕМ АКСЕЛОРОМЕТРОМ

Page 15: Trends_New_Web

RETINA READY

Добавить в желанияДобавить в желанияДобавить в желанияДобавить в желания

ИСПОЛЬЗУЕМ ВЕКТОРРЕНДЕРИМ ОФОРМЛЕНИЕ, МИНИМУМ РАСТРА В UI

ICON FONT

CSS RENDER

Page 16: Trends_New_Web

2ТРЕНДОВЫЕТЕХНОЛОГИИ

Page 17: Trends_New_Web

SCROLLANIMATION

Page 18: Trends_New_Web

СКРОЛИМСЛАЙДЫ

Page 19: Trends_New_Web

АНИМИРУЕМОБЪЕКТЫ

Page 20: Trends_New_Web

ЭФЕКТПАРАЛАКСА

Page 21: Trends_New_Web

РАСШИРЕННАЯТИПОГРАФИКА

ПРИМЕР

РАСШИРЕННАЯТИПОГРАФИКА

Page 22: Trends_New_Web

ЧАСТИЧНАЯЗАГРУЗКАКОНТЕНТА

ПОЛНАЯ СМЕНА URLНЕ ИСПОЛЬЗУЕМ #

COPYRIGHT THEORY & PRACTICE

AJAX RELOADING2.0

Page 23: Trends_New_Web

3УМНАЯКОНВЕРСИЯ

Page 24: Trends_New_Web

МЫ ЗНАЕМ ТЕБЯ

ПЕРВОЕ ПОСЕЩЕНИЕ ПОСЛЕДУЮЩИЕ

ИСПОЛЬЗУЯ HTTP COOKIEУЗНАЕМ ПОЛЬЗОВАТЕЛЯ

ОБЩЕЕ ПРОМО РЕЛЕВАНТНОЕ ПРЕДЛОЖЕНИЕ

Page 25: Trends_New_Web

ИСПОЛЬЗУЯ ТАРГЕТИНГПО ПОЛУ ВОЗРАСТУИ ДРYГИМ КРИТЕРИЯМ,ПРИМЕНЯЕМТЕМАТИЧНЫЙ СТИЛЬДЛЯ САЙТА

Page 26: Trends_New_Web

ABCDТЕСТИРОВАНИЕВ РЕАЛЬНОМВРЕМЕНИ

Page 27: Trends_New_Web

ДЕЛАЕМ НЕСКОЛЬКО ВАРИАНТОВ БАНЕРОВ, КНОПОК, ТЕКСТОВЫХ ПРОМО БЛОКОВ И ДАЖЕ ПОЛНОСТЬЮ “СКИН” САЙТА ЧЕРЕЗ CSS

? ?КУПИТЬ КУПИТЬ КУПИТЬ

Page 28: Trends_New_Web

? ?КУПИТЬ КУПИТЬ КУПИТЬ

СКРИПТ АВТОМАТИЧЕСКИ ВЫВОДИТ В ТОП И ОСТАВЛЯЕТ САМЫЙ КОНВЕРСИОННЫЙ ВАРИАНТ В РЕАЛЬНОМ ВРЕМЕНИ

Page 29: Trends_New_Web

ИСПОЛЬЗУЕМ ПРИНЦИП LANDINGPAGES ДЛЯ ФОРМИРОВАНИЯ АРХИТЕКТУРЫ ПРОЕКТА

МУЛЬТИТИТУЛЬНОСТЬ

Page 30: Trends_New_Web

4ТРИ САМЫХПОПУЛЯРНЫХДЗАЙН ЛЕЙАУТАВ 2012

Page 31: Trends_New_Web

LONGPAGEВЫСОТАБОЛЬШЕ6000PX

FABRICON.RU

Page 32: Trends_New_Web

ОТЛИЧНЫ ДЛЯПОСЛЕДОВАТЕЛЬНОЙПРЕЗЕНТАЦИИ ПРОДУКТАИЛИ УСЛУГИ

Page 33: Trends_New_Web

ЛЕГКО АДАПТИРУЮТСЯПОД ТАЧ УСТРОЙСТВА

Page 34: Trends_New_Web

МОЖНО ИСПОЛЬЗОВАТЬРАЗНЫЕ ВИДЫANIMATION SCROLLИ СЛАЙДОВУЮ ПОДАЧУ

Page 35: Trends_New_Web

18

МЫТИЩИ

Удобное месторасположение

КАКИМ ДОЛЖЕН БЫТЬ ДОМ ВАШЕЙ МЕЧТЫ?

ИДЕАЛЬНЫ ДЛЯОДНОСТРАНИЧНЫХ

САЙТОВ

KVARTAL918.RU

Page 36: Trends_New_Web

MODULARGRIDMETROLAYOUT

MEGAFON INTRANET

Page 37: Trends_New_Web

ИДЕАЛЬНЫ ДЛЯПОРТАЛОВ, ИНТЕРНЕТМАГАЗИНОВ,ПОРТФОЛИО,ГАЛЛЕРЕЙ

JELI.RU

Page 38: Trends_New_Web

BEOPENFUTURE.COM

МОЖНО ИСПОЛЬЗОВАТЬ100% ЭКРАНА

Page 39: Trends_New_Web

BEOPENFUTURE.COM

ЛЕГКО АДАПТИРУЮТСЯПОД МОБИЛЬНЫЕ ПЛАТФОРМЫ

Page 40: Trends_New_Web

ASTEROSCONSULTING.COM

ДОБАВЛЯЕМ CSS АНИМАЦИЮ БЛОКАМ

Page 41: Trends_New_Web

ПОЛНОЭКРАННЫЙЖУРНАЛЬНЫЙСТИЛЬ

Page 42: Trends_New_Web

VOLGAFILM.RU

КРУПНЫЕ ФОНОВЫЕИЗОБРАЖЕНИЯ

Page 43: Trends_New_Web

CARLOPAZOLINI.COM

100% РЕЗИНОВАЯВЕРСТКА

Page 44: Trends_New_Web

НЕ СТОИТ РАССЧИТЫВАТЬНА УДОБНУЮ РАБОТУВ МОБИЛЬНЫХ БАРУЗЕРАХ,

НЕОБХОДИМА СПЕЦИАЛЬНОАДАПТИРОВАННАЯ ВЕРСИЯИНОГДА С СЕРЬЕЗНЫМРЕИНЖИНИРИНГОМ

CARLOPAZOLINI.COM

Page 45: Trends_New_Web

ЭКСТРА КРУПНЫЕШРИФТЫ

Page 46: Trends_New_Web

KVARTAL918.RU

ОТЛИЧНО ПОДХОДИТ ДЛЯ ПРЕЗЕНТАЦИЙПРОДУКТА КОГДА ЕСТЬ КАЧЕСТВЕННЫЕ

БОЛЬШИЕ ФОТОГРАФИИ

Page 47: Trends_New_Web

MONTEGRAPPA.RU

СТИЛЬ ЧАСТО ПРИМЕНЯЕТСЯ В САЙТАХ ПРЕМИАЛЬНЫХ БРЕНДОВ ДЛЯ ДОСТИЖЕНИЯ WOW ЭФФЕКТА