дизайн и разработка веб-интерфейса

КЕЙС

Перед началом работы над дизайном сайта мы задаёмся вопросом, а как же должен выглядеть сайт? Каким он должен быть? Какими инструментами и приёмами нам следует пользоваться, а от чего лучше отказаться?

Чтобы ответить на этот вопрос достаточно обратиться к тенденциям в мировом веб-дизайне.

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

НАШДИЗАЙН

LOCOMOTIV

Появившись в некоторых отраслях индустрии у таких гигантов как Microsoft, Google и Apple, тренд плоского дизайна находится на пике популярности.

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

ТТакой подход не только эстетически привлекателен, но также очень практичен, позволяет посетителям взаимодействовать с содержанием и оценивать его, ни на что не отвлекаясь.

01. ПЛОСКИЙ ДИЗАЙН

LOCOMOTIV

Исследования показывали, что большие размеры шрифта способствуют более легкому чтению в Интернете.

Крупнее становится не только текст — изображения тоже!

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

ККроме того, основной тенденцией в 2015 году будет использование изображений в качестве фона. Размытие и различные фильтры позволят тексту «плавать сверху» без ущерба для юзабилити.

02. БОЛЬШИЕ ИЗОБРАЖЕНИЯ И ТЕКСТ

LOCOMOTIV

Как люди (вид, получающий 70-90% информации с помощью зрения), мы усваиваем информацию лучше, когда она представлена в графическом виде, что и привело к популярности инфографики. Инфографика — простой способ передавать большое количество информации с высокой степенью усваивания.

ВозниклаВозникла новая тенденция. Вебграфика! Как и инфографика, вебграфика также передает большие объемы информации, но включает в себя интерактивные элементы, которые позволяют пользователю физически взаимодействовать с информацией. Она визуально привлекательнее инфографики и значизначительно увеличивает степень усваивания информации пользователем.

Следует ожидать роста популярности вебграфики и её утверждения в качестве одного из основных компонентов современного веб-дизайна.

03. ВЕБГРАФИКА / ИНФОГРАФИКА

LOCOMOTIV

“Микровзаимодействия — это маленькие элементы функциональности. Фокус на них очень важен. Качество дизайна продукта определяется качеством его самых мелких деталей.”

Дэн Саффер

Например,Например, поведение виджета подписки на рассылку. Он может слегка подрагивать, напоминая о соответствующей возможности, и успокаиваться после того, как им воспользовались. Такой виджет не только лучше выполнит свою функцию, но и поможет оживить статичный на первый взгляд веб сайт.

ЕЕще один пример — автозаполнение имени на основе e-mail при регистрации.

Иконка приложения-часов показывает текущее время. Вы проводите по слайдеру разблокировки экрана. Маленький индикатор показывает, что ваш друг вышел в онлайн. Всё это — микровзаимодействия.

04. МИКРОВЗАИМОДЕЙСТВИЕ

LOCOMOTIV

Не так давно The New York Times сделали редизайн своего портала, о чем громко заявили публике, и они попали в тренд, так как сделали его проще, эргономичнее, выставили вперед то, что они хотят предложить, обеспечив больший комфорт работы пользователям.

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

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

05. УПРОЩЕНИЕ САЙТОВ И ФОКУС НА СОДЕРЖИМОМ

LOCOMOTIV

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

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

Наши требования к прототипам сайта:- Быстрое создание прототипа- Лег- Легкость внесения изменений в прототип- Интерактивность- Детализация (в отдельных случаях)

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

06. ПРОТОТИПИРОВАНИЕ ИНТЕРФЕЙСА

LOCOMOTIV

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

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

ЭЭто и есть нашей главной целью.

ВЫВОД:

LOCOMOTIV

Примеры плоского дизайна (flat design)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

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

LOCOMOTIV