(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
IBM RATIONAL Rose Enterprise Floating User License + Sw Subscription & Support 12 Months
Oracle Database Personal Edition Named User Plus License
Allround Automation Direct Oracle Access Standard license
SAP Crystal Reports XI R2 Dev 2006 INTL WIN NUL License (Version 11)
КОМПАС-3D v17 Home
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Компьютерный дизайн - Все графические редакторы
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Мир OLAP и Business Intelligence: новости, статьи, обзоры
Один день системного администратора
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100