Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн. Этот прием, да, назовем его так, получил шквал критики и восхищения, у него появились сторонники и лютые ненавистники, но сегодня, я постараюсь рассмотреть новый, современный, набирающий огромную популярность подход при проектировании — long shadows (длинные тени).
(P.S. — Все картинки кликабельны).
Что такое длинные тени в дизайне, и как это понимать?
![fox icon](https://habrastorage.org/r/w780q1/getpro/habr/post_images/191/32b/57c/19132b57c7a11e9bcff66056a588292e.jpg)
![iPad Mini](https://habrastorage.org/r/w780q1/getpro/habr/post_images/8f4/8f1/4f6/8f48f14f6307c444bbff30ff3e680456.jpg)
![Long Shadows](https://habrastorage.org/r/w780q1/getpro/habr/post_images/949/57f/672/94957f6726658ee8161398f66c7dd878.jpg)
Длинные тени, это отнюдь не новый термин, и даже не новый подход. Он заимствован из техники освещения и фотографии. Фотографы, как вы могли видеть, часто используют при создании изображения этот прием для усиления драматического эффекта.
В дизайне “длинные тени” начали набирать быструю популярность для привлечения внимания и акцентирования на деталях. Они ложатся под 45° градусов относительно изображения и придают элементу дизайна зеркальный оттенок. Схожесть плоского интерфейса с тенями в том, что тени тоже плоские.
Как можно сейчас заметить, многие дизайнеры начали использовать эту идею, от чего, как мне кажется, теряется индивидуальность и происходит банальное клонирование. Единственное отличие при проектировании такой “тени”, это угол проецирования(45° или 120° градусов) и направление.
Но, длинные тени ограничены областью применения, это всегда небольшие элементы дизайна(кнопки, логотипы, иконки).
Заимствование из «плоского дизайна»
![Long Shadow Flat Icons](https://habrastorage.org/r/w780q1/getpro/habr/post_images/9c9/873/dcb/9c9873dcba9c12701341bc224eedc069.jpg)
![Flat Shadow](https://habrastorage.org/r/w780q1/getpro/habr/post_images/6ff/260/d79/6ff260d7948c7586e7f9409e0cda31f0.jpg)
![Clock](https://habrastorage.org/r/w780q1/getpro/habr/post_images/952/403/4e0/9524034e078397600f366664795a261d.jpg)
Дизайн длинных теней основан на простых и понятных формах, которые используются и в плоском дизайне. Тень может быть просто проекцией того цвета, который преобладает в элементе, или просто темнее. Использование длинных теней, это своеобразная альтернатива объемному изображению, это и является одной из причин использования их в купе с плоским интерфейсом.
Примеры и применение
Длинные тени очень популярны в настоящий момент, хотя существует не так много компаний и людей реально использующих их.
Наиболее яркий пример, это американский онлайн-ритейл JC Penney, который использует в своей рекламе в интернете и на телевидении плоский интерфейс.
Dribble — это отличное место для того, чтобы взглянуть и оценить насколько хорошо распространен плоский дизайн.
Вот несколько примеров:
![Flat Skype](https://habrastorage.org/r/w780q1/getpro/habr/post_images/59a/135/bf1/59a135bf127520fbf4323376c8c76a5b.jpg)
![Man of Steel Icon](https://habrastorage.org/r/w780q1/getpro/habr/post_images/d65/17b/4d5/d6517b4d578a8fc07f40357d1bb481dd.jpg)
![Flat Safari](https://habrastorage.org/r/w780q1/getpro/habr/post_images/36b/dff/ede/36bdffede0b0004d865e1f5b1b5dd585.jpg)
![Social icons - freebie](https://habrastorage.org/r/w780q1/getpro/habr/post_images/abe/29c/7d6/abe29c7d6c3debc137de3723443cc13e.jpg)
Полезные ресурсы
Генератор длинных теней
![Long Shadow Generator](https://habrastorage.org/r/w780q1/getpro/habr/post_images/ad1/f2c/b8b/ad1f2cb8b7572c69f97d8ddab440760c.jpg)
Конвертация в CSS3
![Long Shadows in CSS3](https://habrastorage.org/r/w780q1/getpro/habr/post_images/0a3/ae6/854/0a3ae68547c6110901e6ba5a9243fc87.jpg)
Шрифты Google в CSS
![Google Fonts CSS longshade Icon](https://habrastorage.org/r/w780q1/getpro/habr/post_images/fb5/b36/044/fb5b360449f196bac8ba772ff2ab720b.jpg)
Вывод
На первый взгляд плоский дизайн и тени кажутся эволюцией, новой вехой в дизайне и разработке. Но так ли это? Каждый решает сам для себя.
(P.S. — Все картинки кликабельны).
Что такое длинные тени в дизайне, и как это понимать?
![fox icon](https://habrastorage.org/getpro/habr/post_images/191/32b/57c/19132b57c7a11e9bcff66056a588292e.jpg)
![iPad Mini](https://habrastorage.org/getpro/habr/post_images/8f4/8f1/4f6/8f48f14f6307c444bbff30ff3e680456.jpg)
![Long Shadows](https://habrastorage.org/getpro/habr/post_images/949/57f/672/94957f6726658ee8161398f66c7dd878.jpg)
Длинные тени, это отнюдь не новый термин, и даже не новый подход. Он заимствован из техники освещения и фотографии. Фотографы, как вы могли видеть, часто используют при создании изображения этот прием для усиления драматического эффекта.
В дизайне “длинные тени” начали набирать быструю популярность для привлечения внимания и акцентирования на деталях. Они ложатся под 45° градусов относительно изображения и придают элементу дизайна зеркальный оттенок. Схожесть плоского интерфейса с тенями в том, что тени тоже плоские.
Как можно сейчас заметить, многие дизайнеры начали использовать эту идею, от чего, как мне кажется, теряется индивидуальность и происходит банальное клонирование. Единственное отличие при проектировании такой “тени”, это угол проецирования(45° или 120° градусов) и направление.
Но, длинные тени ограничены областью применения, это всегда небольшие элементы дизайна(кнопки, логотипы, иконки).
Заимствование из «плоского дизайна»
![Long Shadow Flat Icons](https://habrastorage.org/getpro/habr/post_images/9c9/873/dcb/9c9873dcba9c12701341bc224eedc069.jpg)
![Flat Shadow](https://habrastorage.org/getpro/habr/post_images/6ff/260/d79/6ff260d7948c7586e7f9409e0cda31f0.jpg)
![Clock](https://habrastorage.org/getpro/habr/post_images/952/403/4e0/9524034e078397600f366664795a261d.jpg)
Дизайн длинных теней основан на простых и понятных формах, которые используются и в плоском дизайне. Тень может быть просто проекцией того цвета, который преобладает в элементе, или просто темнее. Использование длинных теней, это своеобразная альтернатива объемному изображению, это и является одной из причин использования их в купе с плоским интерфейсом.
Примеры и применение
Длинные тени очень популярны в настоящий момент, хотя существует не так много компаний и людей реально использующих их.
Наиболее яркий пример, это американский онлайн-ритейл JC Penney, который использует в своей рекламе в интернете и на телевидении плоский интерфейс.
Dribble — это отличное место для того, чтобы взглянуть и оценить насколько хорошо распространен плоский дизайн.
Вот несколько примеров:
![Flat Social Network](https://habrastorage.org/getpro/habr/post_images/0d8/d8a/628/0d8d8a628de81fbd662605777424d642.jpg)
![Flat Skype](https://habrastorage.org/getpro/habr/post_images/59a/135/bf1/59a135bf127520fbf4323376c8c76a5b.jpg)
![Man of Steel Icon](https://habrastorage.org/getpro/habr/post_images/d65/17b/4d5/d6517b4d578a8fc07f40357d1bb481dd.jpg)
![Flat Safari](https://habrastorage.org/getpro/habr/post_images/36b/dff/ede/36bdffede0b0004d865e1f5b1b5dd585.jpg)
![Social icons - freebie](https://habrastorage.org/getpro/habr/post_images/abe/29c/7d6/abe29c7d6c3debc137de3723443cc13e.jpg)
Полезные ресурсы
Генератор длинных теней
![Long Shadow Generator](https://habrastorage.org/getpro/habr/post_images/ad1/f2c/b8b/ad1f2cb8b7572c69f97d8ddab440760c.jpg)
Конвертация в CSS3
![Long Shadows in CSS3](https://habrastorage.org/getpro/habr/post_images/0a3/ae6/854/0a3ae68547c6110901e6ba5a9243fc87.jpg)
Шрифты Google в CSS
![Google Fonts CSS longshade Icon](https://habrastorage.org/getpro/habr/post_images/fb5/b36/044/fb5b360449f196bac8ba772ff2ab720b.jpg)
Вывод
На первый взгляд плоский дизайн и тени кажутся эволюцией, новой вехой в дизайне и разработке. Но так ли это? Каждый решает сам для себя.