(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Тренды в веб-дизайне: плоский интерфейс и длинные тени

Источник: habrahabr

Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему - плоский дизайн. Этот прием, да, назовем его так, получил шквал критики и восхищения, у него появились сторонники и лютые ненавистники, но сегодня, я постараюсь рассмотреть новый, современный, набирающий огромную популярность подход при проектировании - long shadows (длинные тени). 

(P.S. - Все картинки кликабельны).

Что такое длинные тени в дизайне, и как это понимать? 

fox icon

iPad Mini

Long Shadows

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

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

Как можно сейчас заметить, многие дизайнеры начали использовать эту идею, от чего, как мне кажется, теряется индивидуальность и происходит банальное клонирование. Единственное отличие при проектировании такой "тени", это угол проецирования(45° или 120° градусов) и направление. 
Но, длинные тени ограничены областью применения, это всегда небольшие элементы дизайна(кнопки, логотипы, иконки). 

Заимствование из "плоского дизайна" 

Long Shadow Flat Icons

Flat Shadow

Clock

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

Примеры и применение 

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

Вот несколько примеров: 

Flat Social Network 

Flat Skype

Man of Steel Icon

Flat Safari

Social icons - freebie

Полезные ресурсы

Генератор длинных теней 
Long Shadow Generator

Конвертация в CSS3
Long Shadows in CSS3

Шрифты Google в CSS

Google Fonts CSS longshade Icon

Вывод

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

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 17.07.2013 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Stimulsoft Reports Server Team 10 users
Traffic Inspector GOLD 5 Учетных записей
IBM DOMINO COLLABORATION EXPRESS AUTHORIZED USER ANNUAL SW SUBSCRIPTION & SUPPORT RENEWAL
Комплект Dr.Web «Универсальный», 1 год, 5 ПК
Quest Software. TOAD Xpert Edition
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Компьютерные книги. Рецензии и отзывы
Один день системного администратора
Мастерская программиста
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100