Дизайн Daria Khokhlova
22 492

20 лучших концептов в стиле Material Design за 2015 год — выбор MaterialUp

Команда сайта MaterialUp подготовила подборку из 20 лучших концептов в стиле Material Design за 2015 год.

Концепт периодической таблицы

Концепт разработан при помощи Photoshop и After Effects.

Концепты интерфейса ввода данных кредитной карты

Концепты разработаны при помощи Sketch и After Effects.

Приложение-секундомер для Android

Разработано при помощи Illustrator, After Effects, Java и Android Studio.

Концепт интерфейса музыкального плеера

Разработан с помощью Sketch и After Effects.

Концепт схемы навигации для мобильного приложения Trello

Разработан при помощи Sketch и After Effects.

Анимация иконки голосования

(Кликните на картинку, чтобы перейти к анимации)

Концепт разработан с помощью CodePen.

Анимация в стиле Material Design

Концепт мобильного музыкального приложения

Концепт дудла для главной страницы Google

Разработан с помощью Illustrator и After Effects.

Концепт формы входа в приложение

Разработан с помощью Sketch, After Effects и Google Fonts.

Виджет календаря

Совместим с Illustrator и After Effects.

Концепт интерфейса музыкального плеера

Разработан с помощью Sketch и After Effects.

Концепт формы входа на сайт

(Кликните на изображение, чтобы перейти к анимации)

Разработана с помощью CodePen.

Анимация изменения ориентации экрана

Разработан при помощи After Effects.

Концепт формы оплаты покупки кредитной картой

Концепт разработан при помощи After Effects.

Концепт интерфейса Facebook

Анимация иконки скачивания

Разработана при помощи Photoshop и After Effects

Концепт редизайна YouTube

Разработан при помощи Photoshop.

Анимация обновления страницы

Разработана при помощи After Effects.

#Интерфейсы #Дизайн #концепт #интерфейсы #концепты #Material_Design #итоги_2015

{ "author_name": "Daria Khokhlova", "author_type": "editor", "tags": ["\u043a\u043e\u043d\u0446\u0435\u043f\u0442\u044b","\u043a\u043e\u043d\u0446\u0435\u043f\u0442","\u0438\u0442\u043e\u0433\u0438_2015","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","material_design"], "comments": 27, "likes": 31, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 12651, "is_wide": true }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 12651, "author_id": 5723, "diff_limit": 1000, "urls": {"diff":"\/comments\/12651\/get","add":"\/comments\/12651\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/12651"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

27 комментариев 27 комм.

Популярные

По порядку

Написать комментарий...
25

По последней гифке я кстати демку давно уже сделал - http://codepen.io/suez/pen/oXLroX

Ответить
0

Хорошая работа!
Непосредственно на мобильном устройстве не пробовали? Не будет проблем с производительностью?

Ответить
1

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

Ответить
0

Отлично!

Ответить
9

Осталось только сверстать.

Ответить
5

YouTube и Facebook потрясающе выглядят !

Ответить
7

Ага, особенно ютьюб - До свидания связанные видео, здравствуй меню слева, которым никто не пользуется

Ответить
7

Есть стата по "никто не пользуется"?
Просто я вот только и пользуюсь им, мало ли я чего-то не понимаю.

Ответить
–1

Нет, статы конечно же нет. Чисто субъективное мнение на основе своего опыта и нескольких знакомых.

Ответить
1

Я лично наоборот очень не люблю "связанные видео" - потому что по факту, инструмент для "залипания на подольше", а вот менюшкой слева активно пользуюсь, там можно и в ленту подписок можно перейти, и плейлист включить который ты сейчас смотришь, и быстро к каналу нужному из своих подписок.

Ответить
0

хз, я пользуюсь только ссылкой на подписки. А если нужен конкретный канал, то его быстрее в поиске найти, чем искать по 100+ подпискам. А вот рекомендуемые видео - важная часть

Ответить
3

Смена ориентации экрана круто смотрится, но реализовать непросто будет: высокую точность позиционирования сложно обеспечить

Ответить
0

Не "непросто", а невозможно. Дизайнеры как всегда "невкуривают" в технические моменты.

Ответить
–2

Однозначно. Тратить на свистелки-перделки больше времени, чем на разработку начинки никто не будет.

Ответить
3

Христом богом молю, сделайте поиск на мобильной версии или кнопку перехода на полную, а лучше и то и другое

Ответить
2

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

Ответить

Комментарий удален

1

Вот интересно, сколько этот хайп с анимацей продержится?

Ответить
1

Сделайте, плиз, загрузку гифок по клику. Умоляю

Ответить
–6

Думаю, material специально придумали, чтобы дизайнеры тоже могли себя важными почувствовать.

Ответить
0

Идея последней гифки интересная, но сам материал вообще не по нраву. Слишком перегружено.

Ответить
0

Осталось только написать документацию для разработчиков как всю эту херню реализовать практически

Ответить
0

Дизайнеры дают идеи, а реализация уже вопрос следующий! (Сразу вспоминается статья про Apple Magic Mouse)

Ответить
0

Cпасибо vc.ru за то что отметили мою работу http://www.materialup.com/posts/music-app-research

Но как все что делается для dribbble этим пользоватся будет очень неудобно 8))))

Ответить
0

Про второй концепт с кредиткой:
"Важно заметить, что у глубины есть “дно”. Предполагается, что она ограничена толщиной самого мобильного устройства. То есть, если на смартфоне это сантиметр от стекла до задней стенки, а у вас в интерфейсе есть кредитная карточка, то её нельзя просто перевернуть — она упрётся в стекло и заднюю стенку."
(с) Хабр, 11 марта 2015

Ответить
–2

Некоторые отличные

А некоторые содержат ошибки, о которых прямо описано в гайдлайнах материала.

Либо невнимательность, либо просто не все концепты сделаны под биркой материала

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления