ВЕб-дизайн

Plan your projects and define important tasks and actions

Начать. Это бесплатно
или регистрация c помощью Вашего email-адреса
ВЕб-дизайн создатель Mind Map: ВЕб-дизайн

1. 2013 год

1.1. Адаптивный веб-дизайн

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

1.2. Вертикальный скроллинг

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

1.3. Параллакс скроллинг

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

1.4. Большое фото на бэкграунде

1.4.1. Очень распространенный тренд на сегодняшний день. Дизайнеры с удовольствием используют большую фотографию на заднем фоне. Это всегда необыкновенно сильно воздействует на зрителя. А сама картинка становится главным действующим лицом, вокруг которого выстраиваются все остальные элементы дизайна.

1.5. Декоративная типографика

1.5.1. Типографика все больше становится важной частью любого проекта. Шрифты несут не только смысловую нагрузку, но и при грамотном и креативном использовании становятся настоящим украшением сайта.

1.6. Большие кнопки интерфейса

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

1.7. Большой слайдер

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

1.8. Закрепленные элементы

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

1.9. Динамические эффекты анимации

1.9.1. Большинство современных сайтов благодаря технологии HTML5, CSS3 и jQuery стало очень интересно разглядывать и изучать, открывая все новые и новые динамические эффекты анимации при наведении мышкой или прокрутке.

1.10. Одностраничные сайты

1.10.1. Если раньше одностраничные сайты делались на Flash технологии, то сейчас с помощью HTML5, CSS3 и jQuery можно сделать динамически скомпонованный одностраничный сайт. Когда, например, при нажатии на пункт меню происходит плавный скроллинг в нужное место сайта.

1.11. Минимализм

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

1.12. Модульные сетки

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

1.13. Нестандартная геометрия

1.13.1. В минувшем году появилось достаточно много сайтов, использующих в своем дизайне нестандартную геометрию. Это косые или изломанные линии, сделанные с помощью HTML5 и CSS3 технологий или различные блоки в виде относительно несложных геометрических фигур.

1.14. Всплывающее мега меню

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

1.15. Бесконечная подгрузка контента

1.15.1. Не знаю, как вы, но я не в восторге от этого тренда. Конечно, в поведенческом плане, когда посетитель бесконечно долго остается на сайте, это может быть и хорошо. Но иногда просто невозможно остановится, это выматывает и приходится практически волевым усилием закрывать ленту Вконтакта, Твиттера или Фейсбука

1.16. Слайдеры для контента

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

1.17. Авторизация через социальные сети

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

1.18. Комментарии из соцсетей

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

1.19. Брендирование

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

1.20. Metro Design

1.20.1. Выход мобильной ОС Windows Phone 7 и в дальнейшем флагманского пакета Windows 8 задал новый тренд в веб-дизайне. Его отличительной особенностью является минимализм и характерная визуализация информации с помощью разноцветных и равномерных квадратов навигации.

1.21. Текстурный дизайн

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

1.22. Использование видео

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

2. 2012 год

2.1. Акцент на простоту и юзабилити

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

2.2. Интерактивный дизайн

2.2.1. Технологии HTML5, CSS3 и jQuery позволяют делать любой дизайн интерактивным. Все элементы реагируют на движение мышки или тачскрина. Это позволяет не смотреть сайт, а изучать его, открывая все новые и новые динамические эффекты.

2.3. Мобильный дизайн

2.3.1. Разнообразие мобильных девайсов заставляет дизайнеров заботится о том, чтобы сайт смотрелся одинаково функционально во всех мобильных экранах.

2.4. Социальная интеграция

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

2.5. Крупная типографика

2.5.1. Крупная типографика лидировала среди популярных трендов дизайна в прошлом году. И в этом году использование крупных шрифтов скорее всего получит не меньшее распространение.

2.6. Декоративные шрифты

2.6.1. Шрифты из онлайн библиотеки Google максимально упрощают использование декоративных шрифтов для своего сайта. Теперь это не только красиво, но и просто.

2.7. Графические ленты и баннеры

2.7.1. Еще один популярнейший тренд прошлого года и скорее всего, наступившего. В связи с тем, что теперь такую графическую ленту или баннер можно сделать без картинки, только средствами CSS, этот элемент переживает второе рождение и используется повсеместно.

2.8. Круги в дизайне

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

2.9. Умеренные текстуры

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

2.10. Большое фото на бэкграунде

2.10.1. Большая фотография на заднем фоне имеет необыкновенно сильное воздействие на посетителя. Поэтому она скорее всего будет активно используется в дизайнах и в наступившем году.

2.11. Векторные персонажи

2.11.1. Использование графического векторного персонажа – еще один проверенный способ сделать сайт более персонифицированным и произвести впечатление на посетителя.

2.12. Эффект трехмерности

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

2.13. Фиксированное меню навигации

2.13.1. При прокрутке страницы вниз главное меню навигации остается на своем месте. Этот прием далеко не нов, но в прошлом году опять начал пользоваться популярностью.

2.14. Многоколоночное меню

2.14.1. Учитывая общую тенденцию веб-дизайна к простоте юзабилити, использование многоколоночного меню является оптимальным решением для упрощения навигации по сайту. Тем более такое расположение позволяет вместить большее количество навигационных ссылок.

2.15. Инфографика

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

3. 2015 год

3.1. Размытый фон

3.1.1. В этом году размытый фон и боке в качестве фона для текста оказались в числе набирающих популярность тенденций дизайна и рекламы, а количество поисковых запросов слова “размытие” возросло на 144%.

3.2. Контурная иллюстрация

3.2.1. Сегодня глобальные эстетические предпочтения тяготеют к простоте, а контурные рисунки и контурная иллюстрация в целом становятся все более популярными. В 2014 году количество поисковых запросов термина “контурная графика” возросло на 921%.

3.3. Визуальные тенденции

3.3.1. Россия

3.3.1.1. Популярные запросы: фильтры, черно-белое, instagram, шахматная доска

3.3.2. США

3.3.2.1. Популярные запросы: технологии, карта мира, место работы, биткоин, путешествия, интеллектуальные часы

3.3.3. Великобритания

3.3.3.1. Популярные запросы: спорт, зимние олимпийские игры, кубок мира, кубок райдера

3.3.4. Германия

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

3.3.5. Франция

3.3.5.1. Популярные запросы: геометрический, геометрический узор, геометрический фон, плоский дизайн, пятна краски

3.3.6. Италия

3.3.6.1. Популярные запросы: еда, здоровая еда, этническая кухня, уличная еда, ананас

3.3.7. Канада

3.3.7.1. Популярные запросы: цифровой маркетинг, веб-шаблоны, макет, каркасное представление, стартап

3.3.8. Бразилия

3.3.8.1. Популярные запросы: винтаж, ретро, бохо

3.3.9. Аргентина

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

3.3.10. Австралия

3.3.10.1. Популярные запросы: чистая еда, зеленый сок, палеодиета, супер-еда, кокосовое масло, осознанность

3.3.11. Япония

3.3.11.1. Популярные запросы: спа, кожа, уход, средства для очищения кожи

3.3.12. Корея

3.3.12.1. Популярные запросы: природа, весна, одуванчик, побеги, волны, лето

3.4. Тенденции дизайна

3.4.1. Черно-белое

3.4.2. Логотипы

3.4.3. Плоские иконки

3.4.4. Instagram

3.4.5. Классная доска

3.5. Тенденции видео

3.5.1. Анимация

3.5.2. Замедленная съемка

3.5.3. Аэросъемка

3.5.4. Цейтраферная съемка

3.5.5. Мода

3.6. Тенденции социальных сетей

3.6.1. Отражения

3.6.2. Цветы

3.6.3. Акварель

3.6.4. Природа, дикие животные

3.6.5. Макросъемка

3.6.6. Коллекции предметов

3.6.7. Рассеянный свет

4. DesigNonstop 2015

4.1. Креативные тенденции и тренды 2015 года по версии Shutterstock

4.1.1. Крупнейший фотосток Shutterstock выявил креативные тенденции и тренды, созданные на основе анализа и статистической обработки коллекции из 47 миллионов изображений. Данное исследование показывает, какие поисковые запросы и стили зародились в минувшем году и набирают популярность. Это позволяет предсказать доминирующие тенденции в сфере изображений на 2015 год. Информация представлена в виде следующих блоков: глобальные тенденции, визуальные тенденции по странам мира, тенденции дизайна, видео тренды, культурные тренды и тренды социальных сетей.

4.2. 10 интересных книжных новинок о дизайнерах и для дизайнеров

4.2.1. Подборку дизайнерских книжных новинок открывает самая простая книга по графическому дизайну от Чипа Кидда, который расскажет как следовать правилам дизайна и не нарушать их. Шокирующий призыв автора Майкла Джанда наверняка заинтересует многих творческих людей. Ну что ж, о побудительных началах этого призыва мы узнаем со страниц книги. Джим Краузе предложит нам 30 идей для тех, кто хочет испытать свой креатив в действии. Об универсальных методах дизайна мы узнаем из книги Брюса Ханингтона. А вот в следующей книге собраны мнения и афоризмы всемирно известных дизайнеров. Весьма любопытно. Натали Ратковски расскажет нам о буднях художника-иллюстратора. И наконец мы узнаем много интересного о легендарном дизайнере Apple Джони Айве, иконах графического дизайна от Джоан Клиффорда и философии от Германа Цапфа.

4.3. Топ 20 самых оригинальных сайтов за ноябрь по версии DesigNonstop

4.3.1. алерею ноябрьских сайтов для вдохновения открывает красно-синий Intromusique с оригинальным движением нарисованных шнуров и пунктов текстового меню. Также интересно присутствие небольшого трехмерного эффекта в офрмлении блоков с основным контентом. Типографика и винтажность Webstock – это настоящая услада для дизайнера-гурмана. Акцентированная стилизация под ретро, утонченные полутона и разнообразие наклонных шрифтов создают подлинный дизайнерский шедевр. Dragone – тоже славный представитель креативного мышления его создателя. Здесь обращают на себя внимание плотная компановка блоков, атмосферность цветовой гаммы и ненавязчивое видео с дождем. Далее среди участников выделяются Nerisson с мощной графикой, Playtika с красно-белой четкостью, Go-food с гранжевой журнальной версткой и Thegrid с контрастной лаконичностью.

4.4. Интервью с Натальей Невровой, автором потрясающих цветочных скульптур

4.4.1. Разрешите представить вам мою сегодняшнюю гостью – Наталья Неврова, автор потрясающе красивых цветочных скульптур, созданных из полимерной глины. Не знаю, как у вас, но у меня при слове скульптура возникают ассоциации с чем то монументальным и основательным. Но в данном случае наблюдается совсем другой эффект. Творения Натальи – это нечто воздушное, бесконечно нежное и трогательное. Ее работы как будто впитали тепло солнечного света и одухотворенность самой природы. Рукотворные веточки сирени, чистота подснежников, красная легкость маков, тяжесть спелого винограда, прозрачность лепестков вишни, изысканность японского бонсая и грациозная простота ромашки – воссозданные из полимерной глины, все эти объекты обрели новую реальность и вечную красоту в руках талантливого мастера.

4.5. Как оформить группу В Контакте с закрепленным верхним меню

4.5.1. Сегодня мы опять возвращаемся к теме оформления групп В Контакте. Ранее мы уже научились делать графическое раскрывающееся меню. Сегодня мы будем учиться делать графическое меню с закрепленной верхней картинкой и ссылкой на внутреннюю страницу с пунктам расширенного меню. В общем то, на внутренней странице может быть любая информация. Особенно удобно там располагать, например каталоги с ассортиментом продукции. И у раскрывающегося меню и у закрепленного меню есть свои плюсы и минусы. Основной минус раскрывающегося меню – то, что он по умолчанию находится в закрытом состоянии. Но зато на нем можно разместить сразу несколько ссылок.

4.6. Топ 20 самых оригинальных сайтов за сентябрь по версии DesigNonstop

4.6.1. Сентябрьскую подборку открывает насыщенный Stopthevultures с мягкими приглушенными цветами и оригинальным движением элементов. Для сайта Localmineralwater характерно закрепленное меню и интересные узоры картинок слайдера. У Heckhouse мне понравилась компановка пространства и оттенки серого. Изюминкой Stbrn несомненно можно считать аутентичные пункты меню на цветных подложках. В дизайне Hochburg заправляют стильные черно-белые персонажи, шрифты и аккуратные модульные блоки. Mediamonks интересен видеозаставкой, аккуратностью структуры и удачным расположением контента. Далее солируют Joyridetacohouse с ретро шапкой, Francesvintage с правосторонним меню, Hungercrunch с параллакс картинкой и Destinyplanetview с космическим путешествием.

4.7. 20 характерных особенностей современных лендинг пейдж с примерами

4.7.1. В связи со всеобщей коммерциализацией и развитием онлайн торговли в современном интернете особую актуальность приобрели так называемые лендинг пейдж (landing page). Другие названия – целевая страница, продающая страница, посадочная страница или точка входа. По сути это веб-страница рекламного характера, содержащая информацию о продукте или услуге, и имеющая целью побудить посетителя совершить то или иное действие. Под каждую целевую страничку создается соответствующая рекламная компания, чтобы обеспечить ее присутствие в поисковой выдаче по соответствующим поисковым запросам. Также к методам раскрутки лендинг пейдж можно отнести рекламу в социальных сетях, почтовые рассылки, рекламные баннеры и объявления. Давайте подробнее разберемся из чего состоит современная целевая страница.

4.8. Три совета как поймать вдохновение и при этом не скатиться до плагиата

4.8.1. Один из наиболее животрепещущих вопросов веб-дизайна касается того, как вдохновляясь результатами других людей для достижения собственной цели, не скатиться до плагиата или кражи чужих идей. В некоторой степени данный вопрос можно считать легким и ответить на него просто. Не крадите чужих идей. Однако здесь имеется один нюанс. Где находится та грань, при переходе которой вдохновение чужими идеями перерастает в их воровство? Эта грань размыта, особенно, если учесть тот факт, что никто не работает в изоляции от остального мира. На все новые дизайнерские идеи влияет то, что было создано ранее и окружает нас.

4.9. Топ 20 самых оригинальных сайтов за август по версии DesigNonstop

4.9.1. Всех приветствую в осени! После быстро промелькнувшего лета наступают активные трудовые и учебные будни. Так что желаю всем нам неиссякаемого творческого тонуса и высоких производственных достижений. Итак, возвращаемся к дизайну. Сегодняшнюю подборку бест сайтов открывает ekr8.be с аккуратным серо-бело-желтым хаосом и округлым логотипом. Далее следует очень красивый сайт union.co в мягкой прокруткой элементов и впечатляющими картинками. Hochburg.net отличается черно-белым футуристическим гранжем, у rootstudio.co.uk доминирует плоский цвет, voiceshavepower.com интересен геометрией блоков, а theheadsofstate.com впечатляет подзабытым эффектом «вида сверху».

4.10. 20 креативных примеров в создании логотипов и эмблем за август

4.10.1. 20 креативных примеров в создании логотипов и эмблем за август Наташа КлеверВдохновение / По стилям20-08-2014 20 креативных примеров в создании логотипов и эмблем

5. 2014 год

5.1. Дальнейший рост мобильных приложений

5.1.1. Сдвиг в сторону мобильных устройств не вызывает сомнений. И, кажется, этот тренд претендует на место номер 1 в цифровой сфере! По результатам исследования лидера рынка разработчиков приложений Game Insight и J’son Partners (международного консалтингового агентства) к концу года российский рынок мобильных приложений составит 330 млн долл. За последние пару лет количество пользователей мобильного Интернета в среднем в стране возросло более чем в 20 раз.

5.2. Адаптивный дизайн

5.2.1. Благодаря растущему рынку мобильного интернета в наступающем году адаптивный дизайн продолжит набирать темпы развития и станет приоритетным. Теперь web-дизайн без ориентации на удобство навигации по сайту с мобильных устройств, может привести к потере около 20% потенциальных пользователей. Применение адаптивного дизайна также исключит необходимость разработки индивидуальных приложений для разных устройств. И если для крупных брендов адаптивный дизайн уже безоговорочное условие, то небольшие компании еще сильно отстают в этом направлении. Так что в 2014 самое время этим заняться! Это прямая дорога к увеличению продаж компании!

5.3. Landing page

5.3.1. Высокая популярность лендинг пейдж (одностраничных сайтов) также объясняется тем, что популярность устройств на платформах iOS и Android растет с невероятной скоростью. Пользователи предпочитают прокрутку страниц вниз, а не нажатие для загрузки отдельной страницы. Также landing page направлены на максимальную краткость и информативность. А это нравится пользователям, потому что все стремятся к сокращению времени на изучение сайтов компаний и хотят получать только ту информацию, которая поможет быстрее решить проблемы. Лендинги не обязательно представлены в виде одностраничников. Многие компании используют формат лендинга и для посадочных страниц многостраничного сайта. Так что лендинги несомненно попадают в ТОП тенденций 2014. Возьмите на заметку!

5.4. Спад популярности Flash-технологий

5.4.1. Вечные споры об использовании flesh-технологий при создании сайтов начинают наконец-таки разрешаться. Несмотря на широкие возможности flash, в ближайщем более популярными станут HTML-сайты, которые обладают быстрой загрузкой, большей производительностью, а также удобством пользования. Flash-технологии не исчезнут совсем. Пока что они остаются незаменимы для сферы digital видеоплееров, баннерной рекламы, приложений в социальных сетях и game-графики.

5.5. Много видео-контента

5.5.1. Ускорение мобильного интернета позволит более часто использовать на сайтах видео-контент. А реклама на популярных видеоресурсах позволит максимально охватить аудиторию. Тем более, видеореклама в интернете не так дорого стоит, имеет схожие технологии измерения эффективности, что и телереклама, да и вдобавок позволяет не только показать рекламу, но и перевести пользователя к более подробному изучению сайта рекламодателя.

5.6. Корпоративные блоги

5.6.1. В 2014 году увеличится актуальность корпоративных блогов компаний. Это значит, что важно уделять больше внимания контенту и изображениям на сайтах. Сегодня стоит сделать акцент на статьях, содержание которых легко усваивается, имеет запоминающиеся образы. Это должен быть контент, способный выделить компанию в общем информационном потоке.

5.7. Яркая типографика

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

5.8. Простота функционала

5.8.1. Этот принцип скорее характеризует качество работы программных продуктов, а не результат. Тенденция сосредоточена по направлению простых, интуитивно понятных интерфейсов сайтов и приложений. Работа сайтов будет основана на социальном окружении и местоположении пользователя. В результате ожидается сокращение времени на поиск информации.

5.9. Технологии возврата пользователей: ремаркетинг и RTB

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

6. Пять трендов веб-дизайна 2014

6.1. Непрерывная прокрутка

6.1.1. Читатели ЦП уже какое-то время наслаждаются новым обликом главной страницы, благодаря которому, чтобы добраться до предыдущих постов нужно лишь нажать на кнопку "Загрузить еще" (UPD: по прошествии некоторого времени мы все же решили вернуться к пагинации). Это реально удобно - почитать старые тексты можно не прокручивая десятки страниц. Подобная организация и сейчас встречается довольно часто (на том же Forbes, к примеру), а в 2014 году станет уже всеобщим трендом. Конечно тут есть и свои проблемы - кому-то не нравится, что на некоторых сайтах контент при прокрутке подгружается автоматически, а кого-то раздражает подвижное меню навигации (как у нас) - но тренд, тем не менее, налицо.

6.2. Крупные шрифты

6.2.1. Тут все понятно - шрифты становятся больше. Мониторы постоянно "крупнеют", так что размер шрифта, привычный в прошлом году, в следующем уже будет казаться маленьким.

6.3. Адаптивный мобильный дизайн

6.3.1. По данным отчета Walker Sands, 28% всего трафика на сайты в третьем квартале этого года было сгенерировано мобильными устройствами. На сайте Стива - Hitched - 60% всего трафика дают мобильные пользователи. Подход, при котором для таких посетителей нужно делать специальную "мобильную" версию сайта, уходит в прошлое. Теперь сайты могут быть гибкими, подстраиваясь под разные экраны и устройства. Это значит, что нет необходимости в поддержке двух разных версий одного и того же сайта, ведь можно просто создать один адаптивный.

6.4. Плоский дизайн

6.4.1. После того, как Apple выпустила совершенно "плоскую" iOS 7, стало совершенно очевидно становление новой парадигмы дизайна - минимализм и визуальное облегчение, в противовес развесистым формам времен Web 2.0. Кроме того, помимо внешних отличий, плоский дизайн положительно влияет на производительность - исчезают все тени и градиенты, которые могут сжирать драгоценные килобайты.

6.5. Техника Parallax Scrolling

6.5.1. Parallax Scrolling - это 2D-эффект, при котором на странице несколько объектов перемещаются с разной скоростью, создавая иллюзию трехмерного пространства. В свое время этот подход успешно использовался в компьютерных играх (Mario Bros, Mortal Kombat). Теперь же parallax-эффекты все чаще можно встретить и на сайтах (напр. New York Times). Кстати создатели лучшего стилуса для iPad Pencil на своем сайте также используют эту технику.

7. Web-дизайн в 2014 году: самые актуальные направления развития

7.1. Основным направлением станет адаптивный дизайн

7.1.1. Наибольшие темпы развития адаптивного web-дизайна пришлись на 2013 год, однако именно в 2014 году он станет приоритетным. Дизайн сайта, не ориентированный на удобство навигации по нему с мобильных устройств, приведет к потере большого количества потенциальных пользователей. Следом за сайтами крупных компаний, уже сделавших стандартом адаптивный дизайн, на данную технологию перейдут и небольшие компании, ведь это прямой путь к увеличению продаж. Также применение адаптивного дизайна положит конец индивидуальной подстройке сайтов под каждое новое устройство.

7.2. Потеря популярности Flash-технологий

7.2.1. Еще в 2012 году Flash-технологии являлись приоритетным решением для создания различного развлекательного 3D-контента, однако в будущем они уступят место HTML-сайтам, обладающим большей производительностью, быстрой загрузкой и удобством пользования, ни в чем не уступающим Flash-сайтам. Однако процесс этот не будет быстрым – Flash-технологии по-прежнему останутся незаменимыми для создания видеоплееров, баннерной рекламы, Facebook-модулей и 3D-графики в играх.

7.3. Ориентация сайтов на меньший объем и большую производительность

7.3.1. Средний размер страницы, созданных в 2012 году сайтов, превысил 1 Мб. Многие дизайнеры считают, что это слишком много, однако уже сейчас прослеживается тенденция к созданию легких и быстрых сайтов, обладающих высокой производительностью. Одним из путей решения подобной проблемы является отказ от применения библиотек для реализации тривиальных решений.

7.4. Применение дизайна модульного типа

7.4.1. В настоящее время количество фреймворков (строительных блоков модульного дизайна) достигло такой величины, что процесс разработки сайтов упростился и, соответственно, стал менее затратным. Таким образом существенно ускорился рабочий процесс, а разработчики теперь могут сосредоточить больше усилий на детальной проработке web-дизайна. Однако этот процесс имеет и негативные последствия, выражающиеся в потере разработчиками связи с фундаментальными технологиями, лежащими в основе всех фреймворков и других, ускоряющих работу, инструментов.

7.5. Повышение образованности участников web-сферы

7.5.1. Начавшийся в 2012 году процесс web-образования еще больше ускорится в нынешнем году, причем в данном случае понимается образование детей и молодежи. При этом наибольшая поддержка ожидается со стороны не государства, а таких проектов, как Code Club, реальная польза от которых уже начинает приносить свои плоды – существенно выросло количество мероприятий для молодых людей, проявляющих интерес к web-программированию и хакерству.

7.6. Разработка эффективных инструментов для web-дизайна

7.6.1. Толчком к разработке новых web-дизайнерских инструментов стало появление технологии адаптивного дизайна. Наибольшее влияние в этом направлении будут иметь такие гиганты этой индустрии, как Adobe, с продуктами, подобными Edge Reflow. В таких условиях весьма вероятно появление мобильных инструментов для web-разработчиков.

7.7. Рост видео-контента

7.7.1. Ускорение интернета (в частности мобильного интернета) приведет к более частому использованию на страницах сайтов видеоинформации. Этому способствует также наличие в Adobe Creative Suite инструмента для работы с видео – так называемого After Effects.

7.8. Повышенное внимание к личности

7.8.1. В 2013 году увеличится актуальность рассказов на интернет-ресурсах различных историй. Таким образом будет уделено больше внимания контенту и иллюстрациям на сайтах.

7.9. iPad перестанет быть безоговорочным лидером среди планшетов

7.9.1. Издатели ПО продолжат отказ от iOS-приложений нативного типа, поскольку все большую популярность набирают планшеты на ОС Android и Windows. Приложения для них не привязаны к конкретным ОС, что позволит создавать более впечатляющие HTML-приложения, способные запускаться везде. Также не стоит оставлять без внимания и ОС Tizen, созданную компаниями Intel и Samsung на базе HTML5. В этом году планируется появление первых устройств, функционирующих под ее управлением.

7.10. Приложения станут менее востребованными

7.10.1. Отсутствие у приложений результатов, которые им пророчились в самом начале их появления, будет причиной перехода многих издательств на HTML5. Принцип функционирования приложений безнадежно устарел – происходит бесконечная смена конструкций устройств от каждого бренда, и под каждое из них необходимо собственное приложение, в то время как web-приложения способны работать на всех без исключения аппаратных платформах.

7.11. Всплеск экспериментального и интерактивного дизайна

7.11.1. Новые идеи в сфере разработки и дизайна web-продукции будут результатом поддержки CSS-сеток и препроцессоров, а также более глубокого использования технологий адаптивного дизайна. Все более популярным становится запуск еще не законченных проектов – в этом случае они начинают приносить доход, а окончательная доработка осуществляется уже в процессе их функционирования.

7.12. Повышение качества макетирования

7.12.1. Большая фокусировка на дизайне непременно приведет к реализации новых возможностей работы с макетами при помощи CSS, в частности модулей Grid Layout и Flexible Box Layout. Более явным станет тренд в сторону детализации, которая и станет тем фактором, от которого будет зависеть качество сайтов.

7.13. Масштабируемость web-дизайна

7.13.1. Масштабируемый web-дизайн реализует возможность качественного отображения сайтов на экранах с различным разрешением. Для этого растровая графика будет заменена на векторную, например, при помощи формата SVG, который позволяет изменять размеры графических изображений без потери качества.

7.14. Web-разработка сделает ставку на простой функционал

7.14.1. Данный принцип основан на качественной работе программы, а не на ее результатах. Таким образом, тренд будет сосредоточен в направлении создания простых, интуитивно понятных интерфейсов. Работа сайтов будет основана на таких данных, как социальное окружение и местоположение пользователя. В результате сократится время на поиск необходимой информации – она будет формироваться самостоятельно.

7.15. Повышение спроса на «гибридных» дизайнеров

7.15.1. Адаптивный дизайн приведет к более плотному сотрудничеству программистов и дизайнеров, что станет результатом появления «гибридных» дизайнеров – их работа будет ориентирована на удобство дальнейшего программирования. Таким образом преимущество будет отдаваться дизайнерам, знакомым с основами программирования, что дает сильный стимул для повышения квалификации в этом направлении.