Дизайн мобильных приложений *

«Project Comet» доступен для скачивания всем на сайте Adobe под названием Experience Design CC (Preview) v. 0.5. Пока только версия под OS X.

По функциональности не дотягивает до Sketch, но в перспективе думаю допилят и выпустят Windows версию.

Мне кажется у Sketch и XD будет судьба как у Textmate и Sublime. То есть первый был только под мак и остался в истории, а второй был набит всеми фичами первого и вышел кроссплатформенным, завоевав всеобщую популярность. Время покажет.

Уже шесть лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-декабрь 2015.

После того, как Apple презентовала музыкальный сервис Apple Music, некоторых «внимательных» знатоков смутил новый жест Long Press, использующийся в приложении. Смутил по той причине, что уж больно он похож на андроидовское долгое нажатие, которое показывает контекстные действия и открывает контекстные меню. Но несмотря на то, что жест не является нативным для платформы и не описан в гайдах, он существует в iOS давно, хотя и не пользуется большой популярностью. Не все помнят, что с его помощью можно не только перемещать или удалять иконки на домашнем экране, но и показывать крупные превью в фотоальбоме, получать быстрый доступ к черновикам в почте, записывать аудио-сообщения, видео, делать фото в сообщениях и так далее.



И вот знатоки стали рубить сплеча, утверждая, что Apple увел жест у Android. Но если углубиться в историю яблочных технологий, то можно вспомнить, что в марте 2015 Apple запатентовала Force Touch, появившийся в Apple Watch, а позже реализованный в MacBook с Retina Display. И по-настоящему «внимательные» пользователи должны были догадаться, что этот Long Press есть не что иное, как будущий 3D Touch, который должен был появиться в iPhone 6s и iPhone 6s+. С той лишь разницей, что владельцам винтажных айфонов приходится манипулировать не силой, а продолжительностью нажатия.

Что такое Framer ?

Framer это программа для создания прототипов, в которой прототип создается сразу в коде, на языке CoffeeScript, который компилируется в JavaScript.

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

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

Как может показаться в начале, Framer — сложная программа, требующая знания кода, хотя на самом деле писать код в ней намного легче, чем кажется.

Для работы с Framer достаточно нарисовать прототип в Sketch или Photoshop и придумать взаимодействие между слоями. Также здесь можно создавать свои слои, анимировать и менять их свойства.

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

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

Для создания данной анимации нужно знать 4 вещи: Layer, State, Event, Animation.

Есть такой динозавр — ICQ. Вспомнили тот самый звук входящего сообщения? О да! Еще мне сразу вспомнилась учеба в универе: именно тогда я застал расцвет этого мессенджера. Правда, самим клиентом я пользовался другим, кажется, это был QIP. Сейчас уже точно и не вспомню. У Аськи был слишком навороченный интерфейс, мой молодой мозг не мог с ним справиться. А еще были крутые номера, которыми все хвастались. Точнее хвастались количеством цифр в нем. У моего соседа по общаге был 5-значный. И это было круто.



А теперь к делу. Недавно Mail.ru решили организовать конкурс на дизайн мобильного приложения этого клиента. Я решил поучаствовать. Что из этого вышло, смотрите дальше.

Axure — инструмент для создания интерактивных прототипов сайтов и мобильных приложений. Навыков работы с ним часто требуют работодатели, ищущие проектировщика интерфейсов или UX&UI-дизайнера. В России это почти что отраслевой стандарт. Axure 7 — последняя версия программы. Восьмая версия сейчас в бете.

В одной школе интернет-технологий (не упоминаю, чтобы не сочли за рекламу) с мая 2015 года я рассказываю начинающим дизайнерам об Axure 7. В течение 3 часов (минус небольшой перерыв) объясняю, как работают те возможности программы, которые нужны мне для большинства проектов. И закрепляю знания практикой.

Примерная структура занятия:

• Примеры прототипов;
• Виджеты, их настройка и расстановка по холсту с помощью сетки, направляющих и выравнивания;
• Мастера;
• Динамические панели;
• Создание интерактива (ивенты, экшены, кейсы, условия);
• Под конец: способы передачи прототипа заказчику, свойства страниц, стили.

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

В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-декабрь 2015.

Не секрет, что в кризис многие компании ищут способы оптимизировать расходы, дабы выжить в данное нелегкое время. Некоторые, как «Елки-Палки» или «Сбарро» — тысячами увольняют сотрудников самой низкой квалификации, которые как раз и приносили максимум прибыли, находясь на самой передовой. Другие же поступают хитрее, выискивая самых неэффективных и малоприбыльных офисных экспертов с размытыми показателями KPI. Дабы поостеречь такие компании от сокращений своих начинающих специалистов по дизайну и будущих гуру от usability, в данной статье будет предложена простая и понятная аналогия между современным дизайном UX и мастерством кунг-фу.

Привет! После предыдущих моих постов мне часто писали ребята, которые начинают изучать тему UI/UX. Это так классно, спасибо вам! И в этой статье я делюсь принципами, которые будут интересны и полезны новичку.

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-ноябрь 2015.

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

Всем привет! Мы обещали опубликовать ассеты, уникальные инструменты и шейдеры из проекта The Blacksmith. Сказано – сделано.

Автор: Анастасия Режепп, глава дизайн-студии DataArt.

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

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

Что значит “lean”

Слово “lean” переводится на русский как «тощий», «худой», «постный». Если переводить этот термин более специальным образом, то — «бережливый», «экономный», «минималистический». Например, уже есть термин «бережливое производство» — перевод английского “lean production”. Бережливое производство подразумевает постоянное устранение всех видов потерь — это достигается, в том числе, максимальной ориентацией на потребителя. То же самое верно и для подхода бережливого (тощего) UX-дизайна.

Принципы бережливого UX-дизайна

Когда мы следуем методу тощего UX-дизайна, есть несколько моментов, на которые стоит обратить внимание:

• Мы понимаем целевую аудиторию и ее проблемы.
• Мы создаем MVP (Minimum Viable Product — минимально жизнеспособный продукт).
• Мы работаем короткими итерациями.
• Мы постоянно тестируем нововведения на пользователях и, если что-то не так, быстро откатываемся.
• Мы работаем командой: UX-проектировщики, дизайнеры, разработчики и тестировщики работают вместе и постоянно обмениваются мнениями и задачами.

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

Поэтому мы запускаем конкурс и предлагаем вам попробовать свои силы. Задача: сделать видеочат мечты. Для этого вам нужно при помощи редизайна сместить акценты в интерфейсе продукта в сторону видеосвязи. Это может быть общение один-на-один, видеоконференция или онлайн-трансляция. Главное, чтобы создавалось впечатление простоты и привычности видеообщения. Разумеется, любимый текстовый чат должен остаться под рукой. Лёгкость, комфорт и немножечко магии — вот что должен ощущать пользователь ICQ.

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-октябрь 2015.

Ниже представлена подборка инструментов для дизайнеров и front-end-разработчиков. Мы настоятельно рекомендуем вам просмотреть их все. Надеемся, что вы найдете для себя что-то полезное.

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

Некоторые могут возразить, что следование гайдам может убить творчество, и в итоге все приложения будут выглядеть одинаково. С точки зрения UX, я тут вижу другую проблему. Может казаться, что применение лучших шаблонов, которые используют Google / Facebook / Instagram / [вставить любимое приложение], всегда является отличным решением. Что они ставят себе такие же задачи, что и вы. Вот несколько шаблонов, которые считаются (или считались) лучшими, но в то же время не такие уж они и хорошие, какими кажутся на первый взгляд.

Жизнь в Avito заставила перейти на Sketch и начать рисовать в mdpi (1x). Чтобы сразу поддержать телефоны и планшеты. Так как я работаю по адаптированному под себя принципу Atomic Design.

Переход на Sketch я начал c переноса шрифтовых гайдов. Взял телефон с mdpi (1x), установил туда своё тестовое приложение с шрифтовой сеткой Avito. Начал обводить. Такое я уже делал для Photoshop. (Знать точные границы у текста мне надо, чтобы составлять точные спецификации дизайна для разработчиков)

Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-сентябрь 2015.