Автор

15 08.2013
Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени


Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.

 

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

 

Что такое длинные тени?

 

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

 

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

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

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

 

Наброски из «плоского дизайна»

 

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

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

 

Примеры и использование

 

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

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

Новый тренд в веб-дизайне: длинные тени

 

 

Генератор длинных теней:

 

 

Новый тренд в веб-дизайне: длинные тени

 

Конвертация в CSS3:

 

Новый тренд в веб-дизайне: длинные тени

 

Шрифты Google в CSS:

 

Новый тренд в веб-дизайне: длинные тени


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеРазное

12 05.2013
Новый тренд в веб-дизайне: длинные тени

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


09 04.2013
Новый тренд в веб-дизайне: длинные тени

В данной заметке представляю весьма элегантный способ это сделать. Реализация с помощью небольшого скрипта jQuery, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

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


20 04.2013
Новый тренд в веб-дизайне: длинные тени

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


05 04.2013
Новый тренд в веб-дизайне: длинные тени

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close