веб дизайн


Веб дизайн: тренды 2013

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

Сегодня веб дизайн переживает переходный этап. Увлечение "слишком дизайнерскими" ("over-designed") сайтами, с грязноватым оттенком контрастных гранжевых текстур, "прошитыми" флажками и нестандартными формами блоков, похоже, сходит на нет.

heavy-grunge

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

starbucks

Создатель сайта - знаменитый Ethan Marcotte, основатель адаптивного дизайна. Все желающие познакомиться с фреймворком, на котором построен сайт starbucks.com, могут найти его здесь.

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

Как и где подобрать цветовую палитру для сайта

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

Наиболее яркий пример современной веб колористики - сайт badracket.com

#f1e4c7
#403b41
#448975
#bc745b
#c95351
#231c20

Веб дизайн: ресурсы для подбора цвета

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

2. Когда я начинаю новый проект, то прежде всего заглядываю на colourlovers в раздел web palettes где можно найти уже готовые палитры, подобранные дизайнерами. Рекомендую этот ресурс в закладки.

3. Если ничего не подходит и идей совсем никаких нет можно зайти сюда и просто взять цвета с понравившегося сайта или посмотреть здесь готовые подборки цветов. В конце-концов, как сказал ведущий лого дизайнер Кен Кейто на прошедшей в Москве конференции "идеи надо уметь грамотно заимствовать":).

Правильное сочетание цветов

Важно не только подобрать модные и красивые цвета, но и уметь грамотно их сочетать на веб-странице. Для себя я выбрала "правило трех цветов" цветового круга.

Есть два способа, как сделать хороший веб дизайн, пользуясь этим правилом:

Triadic. Использует три цветовых семейства.
Выбирается один доминантный цвет, в нашем случае зеленый, один вспомогательный цвет (из другого семейства цветов!) - оранжевый и цветовой акцент - синий.

Analogous. Использует два цветовых семейства, мой любимый способ. Выбирается один доминантный цвет, в данном случае коричневый и его оттенки, вспомогательный цвет (из того же семейства цветов!) - желтый, и синий из другого семейства цветов в качестве цветового акцента.

Подробнее о выборе цветов под веб дизайн смотрите здесь.

Типографика

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

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

Параллакс

Сайты, где есть параллакс, по-прежнему остаются в лидерах.

Скрипты и генераторы для создания параллакса

http://als.musings.it
http://stolksdorf.github.com/Parallaxjs
http://web-features.net/parallax-background-builder.html
http://johnpolacek.github.com/scrollorama
http://stephband.info/jparallax
http://prinzhorn.github.com/skrollr
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique

Фоновый слайдер

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

Скрипты для создания full screen слайдера

http://tympanus.net/codrops/2012/09/19/fullscreen-video-slideshow-with-bigvideo-js
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3
http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout
http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout

Веб дизайн: перспективы

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

CSS3 анимация

Перспективное направление, которое в случае полной поддержки браузерами в будущем вполне способна заменить flash. Вот интересный jsFiddle, автор Simurai

Canvas

Canvas - одно из лучших открытий html5. Картинка ниже выведет на один из наиболее подробных обучалок по canvas и сборника кодов

Вот, пожалуй, и все, что хотелось сказать о настоящем и будущем веб дизайна. Если вы видите веб дизайн по другому пишите на olga1011@yandex.ru

При подготовки статьи были частично использованы следующие материалы:
- BUILD A COLOR SCHEME: THE FUNDAMENTALS
- TIPS FOR A CLEAN AND MINIMAL ONLINE STORE DESIGN
- AEA Video: Ethan Marcotte – Rolling Up Our Responsive Sleeves

21 декабря 2012 г.
Подготовила Ольга Мараева.
При использовании статьи ссылка на сайт автора обязательна.

Google