Тенденции веб-дизайна-2013

Тенденции веб-дизайна-2013

От автора: в последние несколько лет произошел огромный сдвиг в методах создания вебсайтов. Все больше пользователей переходят на мобильные платформы и более новые браузеры, поддерживающие веб-стандарты HTML5/CSS3. У сообщества дизайнеров появляются уникальные идеи – похоже, границы меняются каждые несколько месяцев!

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

Дизайн Mobile First

Идея адаптивного дизайна не сводится к полновесным вебсайтам, способным уменьшать свой размер. Лежащая на поверхности идеология дизайнеров состоит в том, чтобы начать с мобильного устройства и увеличиваться далее. Есть великолепная статья, опубликованная на DesignShack, где говорится именно об этой мысли.

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

A List Apart опубликовал небольшую книгу под названием Mobile First. Она написана Люком Вроблевски (Luke Wroblewski), и он выдвигает множество аналогичных идей. Тенденция акцентирует потребность наполнения мобильных интерфейсов как приоритетную среди пользователей Интернета. Большая часть браузеров настольных компьютеров будет рада любому типу разметки, лишь бы та нормально работала. Гораздо труднее закрепить свой успех на мобильных платформах, поэтому так полезно начинать с малого, планируя при этом более крупный дизайн.

Бесконечная прокрутка

Многие социальные сети стали применять эффект бесконечной прокрутки к инструментальным панелям, временным шкалам и пользовательским лентам новостей. Этот эффект стал пользоваться успехом благодаря популярности уникального стиля разметки Twitter’а и Tumblr’а. Позднее Pinterest также применил к своей домашней странице бесконечную прокрутку.

Дизайнеров может в первую очередь интересовать, почему он так успешен. Конечно же, таким образом обеспечивается «бесшовный» интерфейс без перезагрузки страницы. Но потом пользователям будет сложно генерировать постоянные ссылки на различные страницы. А так как это верно, возникает важный вопрос о том, что не всякому вебсайту понадобится бесконечная прокрутка. Я думаю, этот тренд лучше всего работает, когда можно грузить информацию, не требующую постраничной нумерации.

Например, архивы блогов не очень подходят, так как читателям вместо прокручивания множества элементов может понадобиться перейти напрямик к странице 15 или 25. Но для Tumblr’а или Pinterest’а это отличная идея, потому что информация постоянно и динамично меняется. То, что появляется на 1-й или 2-й странице ленты вашего Twitter’а со временем будет обновляться и, таким образом, скорости Ajax сравнительно очень заметны. Никому не хочется щелкать на “следующую страницу” для загрузки последующего набора твитов.

Белое пространство & минимализм

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

Другое неверное представление заключается в том, что все «белое пространство» должно быть белым. Однако в разметках в темных тонах тоже применяется белое пространство, и проще понимать этот термин как “пустое пространство” страницы. Это те места, где вы оставляете немного места «для дыхания», не создаете лишних нагромождений. Часто так представляют большие элементы страницы, такие как кнопки или иконки, или скриншоты. Дизайнерские портфолио могут заполняться большими шрифтами увеличенного размера, оставляя пробелы для белого пространства между заголовками и абзацами. Так гораздо проще переварить содержимое, а читателя не тянет уйти со страницы после первого взгляда на нее.

Элементы естественного дизайна

В спецификации CSS3 привнесено так много изменений. Введение типографской разметки текста через применение @font-face и анимация – лишь пара тем для обсуждения, способных продемонстрировать продвинутые характеристики. Но даже основные свойства CSS3 повлияли на применение внутри разметки естественного дизайна.

Эти элементы могут включать в себя закругленные углы, тени блока или фоновые градиенты с гибким контейнером. 5-10 лет назад всем этим стилям потребовались бы изображения. Сейчас можно создать макет дизайна полностью в браузере употребив для генерации нужных эффектов один CSS3. 2013-й станет очередным годом, когда встроенные в разметку изображения будут заменяться стандартно-совместимыми свойствами CSS.

Мне всегда нравился вебсайт Dabblet за его невероятное базовое применение фоновых градиентов к каждой новой странице. Это сетевое приложение привязывается к каркасу Github Gist и позволяет разработчикам строить маленькие прототипы HTML/CSS в режиме реального времени. Весь интерфейс полностью основывается на свойствах CSS3 и можно легко видеть, насколько далеко продвинулись тенденции за каких-то несколько лет.

Большие фотографии

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

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

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

Более чистый исходный код

Выход в свет большего количества фреймворков CSS позволил веб-разработчикaм значительно уменьшить время кодирования. Это означает, что можно, пользуясь правильными инструментами, построить целую разметку вебсайта из 2-х или 3-х колонок за считанные минуты. Это также значит, что для достижения тех же результатов необходимо меньше разметки HTML.

Построение вебсайтов на чистом исходном коде означает, что он становится более обтекаемым, и зачастую гораздо меньшего размера. Это хорошо, так как меньший размер файлов означает меньшее время загрузки для сервера. Плюс обращение к разметке для редактирования будет стремительным и сжатым без особых трудностей. Я узнал многое о чистом HTML/CSS, просто читая статьи онлайн и изучая высказывания других талантливых разработчиков.

Два важнейших ресурса, которые я рекомендовал бы – это Github и Stack Overflow. На первом предлагается много бесплатного исходного кода, который можно скачать и применить к проектам вебсайтов. Последний – очень любезное сообщество разработчиков, с радостью помогающих друг другу в формате «вопрос-ответ». Эти два вебсайта предлагают достаточно хорошего материала для построения чистого, читаемого исходного кода своих вебсайтов.

Последние размышления

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

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

Автор: Jake Rocheleau

Источник: http://webdesignledger.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Комментарии Вконтакте:

Комментарии Facebook:

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

  1. Veronika

    Интересная статья! Спасибо за перевод.
    А что имеется ввиду вот здесь:
    «Выход в свет большего количества фреймворков CSS позволил веб-разработчикaм значительно уменьшить время кодирования. Это означает, что можно, пользуясь правильными инструментами, построить целую разметку вебсайта из 2-х или 3-х колонок за считанные минуты. Это также значит, что для достижения тех же результатов необходимо меньше разметки HTML.» ?
    было бы интересно и про это подробнее.

  2. ZEugene

    Довольно полезно. А что делать, если сайты уже сданы заказчикам, но они уже морально устарели? Менять согласно новым тенденциям?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree