Перевод статьи Web Hosting Search и дизайнера Ross Johnson

Увеличенные изображения Уменьшенные изображения

Говорят, что великие работы неподвластны времени. Да, в идеальном мире мы могли бы не обращать внимание на сиюминутные веяния моды.

Но с прагматической точки зрения есть смысл отслеживать и использовать в своей работе современные тренды в дизайне, особенно когда это касается разработки веб-сайтов.

Взглянем на вопрос здраво: Интернет меняется очень быстро. И в отличие от других медиа, местный законодатель моды – это не абстрактные эстетические предпочтения. Технология совершенствуется и коренным образом меняет возможности формата.

Ясно, что в 2010 году дизайнеры продолжают сдвигать границы возможного в веб-дизайне, развивая собранные мной тенденции.

Полиграфический дизайн

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

Шрифты с засечками

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

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

Крупные заголовки

Издатели веками привлекали внимание к статьям огромными заголовками. Чтобы тексты читали, они должны были сразу же производить сильное впечатление. Увидев на своем столе скучный буклет, стали бы вы тратить на него свое время? Сомневаюсь.

В вебе тренд на крупные заголовки начался в 2009 году, и с тех пор его популярность только росла. Заголовки гарантированно привлекают внимание и сразу же передают свое сообщение аудитории.

Верстка в несколько колонок

Дизайнерам приходится работать в рамках своего конечного носителя. В отличие от Интернета, в печати невозможно прокрутить страницу. Все что у вас есть – это бумажный лист определенного размера. Но есть способ поместить на нем больше содержания – для этого можно разделить текст на несколько колонок.

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

Крупные входные иллюстрации

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

Диаграммы и инфографика

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

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

Простота

Антуан де Сент-Экзюпери однажды сказал: "Совершенство достигнуто не тогда, когда нечего добавить, а тогда, когда нечего убрать". У простого дизайна множество преимуществ. Закон Хика гласит, что чем больше у нас вариантов, тем больше требуется времени на принятие решения.

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

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

Минималистичный дизайн, использование сетки

Минимализм – мощный, но трудный в освоении стиль. В нем нет ничего кроме самых важных вещей. Все остальное удалено, чтобы максимизировать значимость ключевых элементов.

Сайтам с минималистичным дизайнам требуется четкая разметка. Очевидно, без сетки страницы с большими объемом пустого пространства выглядят недоделанными и несвязными. Четкий скелет делает их организованными и структурированными.

Одностраничная верстка

Существует множество способов для упрощения восприятия. Одностраничная верстка использует два: скрывает второстепенное и убирает ненужное.

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

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

Крупные белые поля

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

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

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

Типографичная верстка

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

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

Приемы CSS3

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

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

Пользователи с современными технологиями увидят версию сайта посимпатичнее, а те кто еще не успел обновить браузер и сидят в старом (кхм ¦ IE6 ¦ кхм) будут довольствоваться простеньким видом сайта.

Анимация CSS3

Анимация в вебе прошла через множество стадий развития. На первых порах двигались только картинки GIF. Затем только элементы Flash. Сейчас все намного круче, можно выбирать из Flash, Silverlight, GIF, JavaScript и даже CSS3. Анимация мелких элементов хорошо фиксируется подсознанием, а CSS3 делает ее легкой загрузке и простой в изготовлении.

Скругленные углы

Распространенные в 2005 и 2006 годах стили веба 2.0 сделали скругленные углы настолько популярными, что от их вида тошнота подступала к горлу. И это – несмотря на то, что добиться скругления 4 года назад было чертовски сложно, так как для этого не существовало инструментов или готовых шаблонов. Поэтому разработчики имитировали этот эффект с помощью CSS, хака JavaScript и подстановки небольших изображений.

С появлением CSS3 создавать скругленные углы стало возможно прямо в браузере, без напряжения. Функция не перегружает канал пользователя, так как ему не нужно качать дополнительные изображения или скрипты. Этим, увы, пользуется все больше дизайнеров.

Тени плашек и текста

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

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

RGBa и прозрачность

Долгое время в дизайне сайтов было практически невозможно использовать полупрозрачные объекты. Приходилось делать выбор из трех зол: имитировать прозрачность однослойными изображениями, ставить неоднорондо отображающиеся в разных браузерах картинки PNG или, наконец, делать ставку на базовые фильтры и функции CSS.

В версии CSS3 эти проблемы исчезли, поэтому у дизайнеров появилось больше свободы для экспериментирования в RGBa. Прозрачности можно найти тысячу применений, но она особенна полезна в подготовке сложных фоновых изображений с наложением полупрозрачной заливки. В прошлом этот эффект практически невозможно было реализовать без хитрого применения изображений в PNG.

Охват мобильных браузеров

Мобильный доступ в интернет позволил миллионам пользователей делать невероятные вещи: проверять баланс на своем банковском счете стоя в очереди за молоком, проглядывать результаты вчерашних футбольных матчей в вагоне метро и делать заметки в твиттере за рулем (угадайте, какая из этих привычек самая вредная). И это еще не все, мобильный веб продолжает быстро расширять свое присутствие в быту обывателей.

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

Креатив

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

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

Чистые изображения

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

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

Текстурированный фон

В текстурированном фоне нет ничего нового, но в последние несколько месяцев появилась интересная вариация этого приема. Я называю ее «микро-текстурами» - тонкими, едва заметными элементами мелкой отрисовки на заднике.

Эскизы страниц

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

В прошедшие несколько месяцев дизайнеры задались вопросом: «А как бы мне сделать эскизы повеселее?». И вот мы видим, как выскакивают любопытные и в то же время полезные решения.

Акварель

По мере развития веба, дизайнеры ищут вдохновение в самых разных носителях и направлениях. Неудивительно, что среди «муз» и изобразительное искусство.

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

 

Рукопись

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

Социальные сети

Учитывая, что простые смертные проводят больше времени в Facebook, чем на Google, нет ничего удивительного в том, что дизайнеры стараются интегрировать элементы соцсетей в свои веб-сайты.

Кое-кто дошел до того, чтобы публиковать свои работы в соцсетях и только потом агрегировать их на собственном веб-сайте.

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

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

Хорошо, что теперь браузеры нормально поддерживают функцию position: fixed. Поэтому с каждым днем появляются любопытные примеры ее использования.

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

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

p