Мар 27, 2011

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

Каждую осень дизайнеры сайтов, фирменных стилей и интерьеров задумываются: что ждёт их отрасль в наступающем году? Да-да, вы совершенно правильно заметили что на дворе не осень, а весна. И сегодня мы поговорим о том, что из обещанных новшеств пришло в веб, что не прижилось, а что стало полной неожиданностью.

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

Полное пришествие HTML5 и, соответственно, конец технологии Flash


Да, можно сказать, что HTML 5 как явление уже победно шествует по планете, и добрался даже до наших краев. Многие успешные верстальщики применяют его, и дизайнеры тоже не остаются в стороне от этой технологии: ведь если знать о ее возможностях, можно во многом отказаться от прежних запретов и сложностей. При этом дизайнеру уже не так важно знание флэш-технологий для достижения анимированных эффектов. Достаточно прорисовать их содержание, а все остальное сделает специалист по верстке. Мало того, благодаря технологии Canvas становится возможным рисование несложных геометрических фигур в коде. Например, вот такие макеты можно делать с помощью HTML5 и CSS3, что существенно облегчит сайт в целом:

При этом такую вещь как дизайн всех этих красот никто не отменял!

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

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

Приход тачскринов к власти


Киборги заполонили планету, а тачскрины заполонили интернет. По данным на декабрь 2010 года, 10% пользователей мировой сети были владельцами айпадов. Это при том, что айпад к тому времени вышел только полгода как.

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

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

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

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

Хотя сейчас появляются плагины, позволяющие адаптировать эти решения под новый формат.

Нужно еще помнить о таких вещах, как юзабилити и правила дизайна интерфейсов. Например, одно из важных правил: размер кликабельного элемента должен быть больше габаритов курсора. Это значит, что кнопка не может быть меньше 16Х16 пикселов, если размер курсора мыши именно такой. При этом на тачскринах курсором является что? Правильно, палец юзера. Рассчитывая на самый сложный вариант (монтёра Васю, например), мы должны признать – кнопки таки да должны быть покрупнее.

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

Тут и говорить нечего. Сейчас не просто все создают аккаунты в соцсетях, но сети проникают практически на все ресурсы сети. В любом блоге вы найдете удобный инструмент для постинга понравившегося сообщения у себя в блоге, на страничке фейсбука и в твиттере. При этом появляются все новые и новые инструменты для  добавления соцплагинов на сайты: люди, которым понравилась статья, друзья в группе и т.п. Если раньше такие штуковины нуждались в том чтобы под них отдельно писали код, то теперь эти коды легко можно найти на том же ФБ или Вконтакте, т встраиваются они просто-таки в два счета.

Большие фото-фоны, паттернированные фоны и параллакс-прокрутка

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

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

При этом все равно в моду как пришли в 2010 году, так и остались погостить паттернированные фоны. Я наблюдал неплохие примеры использования узоров в фонах сайтов. Да и сам таким пользуюсь )

QR-кодирование


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

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

Типографика

Благодаря кончине такого замечательного браузера как internet explorer 6, мы можем не заморачиваться ограничениями в использовании пнг-файлов, системных шрифтов и анимации на Java-script. Внедрить шрифты на сайт становится все проще.

Использование шрифтов в дизайне сайтов

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

Трехмерные изображения и фьюжн-стилистика

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

Разве что некоторые дизайнеры добавили на сайты графику под 3D-очки. Сайт кажется воздушным, пространственным, но… только если стащить в ай-максе очки и смотреть на сайт через них ) Такие решения действительно остроумны и новы (не так давно графика такого рода появляться стала и на футболках даже). Но используетя это единично, массовым пока не стало, да и вряд ли станет. Хотя возможно, через несколько лет начнут таки выпускать мониторы со стерео-изображением.

Точно то же стало с обещанным засильем доменов .us, .me и иже с ними. Пока что это используется нечасто и негусто. Наверное, потому что более «престижные» домены в зоне .com все еще котируются.

Отдельно хочется отметить новые стили иллюстрирования.

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

Вы и сами можете стать законодателем моды в создании сайтов. Веб-дизайн постоянно развивается и не стоит на месте; пробуйте что-то новое, побольше читайте и смотрите чужие работы, но как специалист, а не посторонний зритель. Удачи вам!

Оставьте комментарий

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

Блог в помощь!

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