Так мы видим дизайн для Вашего проекта.

1. дизайниразработкавеб-интерфейса
КЕЙС

2. Передначаломработы наддизайномсайтамы задаёмсявопросом,акакжедолжен
выглядетьсайт?Какимондолженбыть?Какимиинструментамииприёмаминамследует
пользоваться,аотчеголучшеотказаться?
Чтобы ответить на этот вопрос достаточно обратиться к тенденциям в мировом
веб-дизайне.
ХХотямногиетенденциивдизайнемимолетны,некоторыеизнихявляютсяестественной
эволюциейданнойотрасли.Мы выбралинесколькоключевых,нанаш взглядтрендов,
актуальныхдля2015годаиприменимыхврамкахвашегопроекта.
НАШ
ДИЗАЙН
LOCOMOTIV

3. Появившисьвнекоторыхотрасляхиндустрииу
такихгигантовкакMicrosoft,GoogleиApple,
тренд плоского дизайна находится на пике
популярности.
ЭЭтосвязанонетолькостем,какмыпользуемся
контентомвСети,ноиссамойвебтехнологией.
Плоский дизайн подчиняется принципам
минимализма,чтовсвоюочередьприводитк
сайтам простым,упорядоченным,быстрым и
ориентированнымнасодержание.
ТТакой подход не только эстетически
привлекателен, но также очень практичен,
позволяет посетителям взаимодействовать с
содержанием иоцениватьего,ниначтоне
отвлекаясь.
01.ПЛОСКИЙДИЗАЙН
LOCOMOTIV

4. Исследования показывали, что большие
размеры шрифтаспособствуютболеелегкому
чтениювИнтернете.
Крупнее становится не только текст —
изображениятоже!
ВВ 2015 году изображения будут в центре
внимания благодаря новым интересным
особенностям.Будутпоявлятьсяудивительные
методы дляотзывчивогоизмененияразмера,
извлечения основных цветов для фона и
оптимизации изображений для минимальной
нагрузкинасервер.
ККрометого,основнойтенденциейв2015году
будетиспользованиеизображенийвкачестве
фона.Размытиеиразличныефильтрыпозволят
тексту «плавать сверху» без ущерба для
юзабилити.
02.БОЛЬШИЕИЗОБРАЖЕНИЯИТЕКСТ
LOCOMOTIV

5. Каклюди(вид,получающий70-90%информации
спомощьюзрения),мыусваиваеминформацию
лучше,когдаонапредставленавграфическом
виде, что и привело к популярности
инфографики.Инфографика—простойспособ
передаватьбольшоеколичествоинформациис
высокойстепеньюусваивания.
ВозниклаВозниклановаятенденция.Вебграфика!Каки
инфографика, вебграфика также передает
большиеобъемы информации,новключаетв
себя интерактивные элементы, которые
позволяют пользователю физически
взаимодействовать с информацией. Она
визуально привлекательнее инфографики и
значизначительно увеличиваетстепень усваивания
информациипользователем.
Следует ожидать роста популярности
вебграфикииеёутверждениявкачествеодного
из основных компонентов современного
веб-дизайна.
03.ВЕБГРАФИКА/ИНФОГРАФИКА
LOCOMOTIV

6. “Микровзаимодействия — это маленькие
элементыфункциональности.Фокуснанихочень
важен.Качестводизайнапродуктаопределяется
качествомегосамыхмелкихдеталей.”
ДэнСаффер
Например,Например,поведение виджета подписки на
рассылку. Он может слегка подрагивать,
напоминаяосоответствующейвозможности,и
успокаиваться после того, как им
воспользовались.Такойвиджетнетольколучше
выполнитсвоюфункцию,ноипоможетоживить
статичныйнапервыйвзглядвебсайт.
ЕЕщеодинпример— автозаполнениеименина
основеe-mailприрегистрации.
Иконкаприложения-часовпоказываеттекущее
время.Выпроводитепослайдеруразблокировки
экрана.Маленькийиндикаторпоказывает,что
ваш друг вышел в онлайн. Всё это —
микровзаимодействия.
04.МИКРОВЗАИМОДЕЙСТВИЕ
LOCOMOTIV

7. Не так давно The New York Timesсделали
редизайнсвоегопортала,очемгромкозаявили
публике,ионипопаливтренд,таккаксделали
егопроще,эргономичнее,выставиливпередто,
чтоонихотятпредложить,обеспечивбольший
комфортработыпользователям.
ВВоформлениинепоявилосьничегонового,в
планедизайнерскихтрюковивозможностей,но
мы думаем,чтовсебольшеибольшесайтов,
особенно ориентированных на обилие
содержимого, последуют этому примеру,
предпринявтакойлогичныйследующийшаг.
ДосДостаточносброситьвсюмишуруисодержимое
засияет,позволяядизайнупорталавыполнять
егонастоящуюроль,анеперетягиватьнасебя
вниманиепользователя.
05.УПРОЩЕНИЕСАЙТОВИФОКУСНАСОДЕРЖИМОМ
LOCOMOTIV

8. Прототипирование помогает нам в процессе
создания качественных пользовательских
интерфейсов.Мысоздаёмпротитпдлятого,чтобы
сэкономитьвремяразработкипроектаисократить
число доработок, которые возникают при
несоответствии функционала сайта ожиданиям
заказчика.
НачинаемНачинаемсанализаконтента,изчегополучается
структурабудущегосайта.Детализацияинтерфейса
идругиемелочиздесьненастольковажны,основная
цельнаэтомэтапе–построитьграмотнуюструктуру
длявзаимодействияспосетителем.
Нашитребованиякпрототипамсайта:
-Быстроесозданиепрототипа
-Лег-Легкостьвнесенияизмененийвпрототип
-Интерактивность
-Детализация(вотдельныхслучаях)
При работе над прототипами мы пользуемся старыми-добрыми методами
макетированиянабумаге,отрисовкоймакетоввручную и,дляпрезентацииклиенту
используемпопулярныепрограммныепродуктыдляпрототипированияинтерфейсов.
06.ПРОТОТИПИРОВАНИЕИНТЕРФЕЙСА
LOCOMOTIV

9. Каждыйизэтихэлементовможноинужноиспользовать
приразработкедизайнаВашегопроекта.
Это ключевые моменты, которые позволят
оптимизироватьсайт,выдвинутьнужнуюинформацию
напереднийплан,датьпользователю то,зачем он
пришёлнасайт.
НашаНашазадача-определитьцель,выявитькратчайший
путь,чтобы привести пользователя к желаемому
результату,определить концепцию будущего сайта,
выстроитьегоструктуруивоплотитьвсюпроделанную
работу в пользовательский, дружественный,
интерактивныйиэффективныйдизайн.Дизайн,который
будетработатьнавас.
ЭЭтоиестьнашейглавнойцелью.
ВЫВОД:
LOCOMOTIV

10. Примерыплоскогодизайна(flatdesign)
http://www.themeskingdom.com/
http://fixedagency.com/
http://ponscreative.com/
http://www.apple.com/
Большиеизображенияитипографика
http://papehttp://papertiger.com/
http://www.kalliogladiators.fi/
http://academy.degordian.com/
Минималистичныесайты
https://450gsm.com/
http://designlobby.co.uk/
http://deepsoni.me/
http://boxx.hk/
Инфографика/Вебграфика
http://wwhttp://www.arnoldclark.com/challenge/
http://neomam.com/interactive/13reasons/
http://lostworldsfairs.com/atlantis/
ССЫЛКИ:
LOCOMOTIV

11. СДНЁМСВЯТОГОНИКОЛАЯ
LOCOMOTIV