Как стать автором
Обновить
13.53

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

Приложения для iOS, Android, Windows Phone

Сначала показывать
Порог рейтинга
Уровень сложности

Отчет с Dribbble Meetup 2015 в Москве

Время на прочтение7 мин
Количество просмотров7.9K
Dribbble Meetup 2015 в Москве

23 мая в Москве прошел Dribbble Meetup 2015. На этой неформальной конференции для дизайнеров выступили полтора десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Команда Zeplin, Игорь Мустаев (Лавка букв), Анатолий Громов (Fjord), Данил Криворучко (Charlex), Олег Турбаба (SFÇD), Павел Шумаков (Вконтакте), Елена Лазутина, Алексей Рыбин (Great Simple Studio), Андрей Кармацкий (Яндекс), Антон Карташов (Иннова), Павел Скрипкин (Mail.Ru Group) и Евгений Беляев (Авито), Дмитрий Новиков (MacPaw), Дмитрий Чута (Chapps), Олег Андрианов (Одноклассники). Было много практически полезных рассказов и историй из жизни дизайнеров и компаний с живым и веселым диалогом со слушателями.
Читать дальше →
Всего голосов 22: ↑18 и ↓4+14
Комментарии0

Дизайн мобильного приложения. Как добиться оптимального результата?

Время на прочтение6 мин
Количество просмотров45K


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

В идеале приложение для мобильного устройства должно работать со скоростью мысли. Более того, интерфейс приложения должен быть понятен даже новичку.
Читать дальше →
Всего голосов 13: ↑12 и ↓1+11
Комментарии13

4 невидимых UX, о которых вы никогда не знали

Время на прочтение6 мин
Количество просмотров27K

Отличный дизайн невидим




Airbnb, Disney World, Uber и Nest. Эти все феноменальные продукты, общая стоимость которых превышает $135 миллиардов. Но не только их сервисы достигли отличных показателей, их взаимодействия с пользователем настолько хорошо продумано и выполнено, что оставляет незамеченной их стратегию. Другими словами, «пользовательский опыт» остался в тени.
Хороший дизайнер может организовать хаос. Опытный дизайнер может этот хаос устранить.

Читать дальше →
Всего голосов 32: ↑18 и ↓14+4
Комментарии45

Дайджест продуктового дизайна, июль 2015

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

Дайджест продуктового дизайна, июль 2015
Читать дальше →
Всего голосов 18: ↑16 и ↓2+14
Комментарии1

Истории

Central Park NY: редизайн официального приложения

Время на прочтение3 мин
Количество просмотров8.8K


Где я нахожусь, куда мне идти, кажется я заблудился…


На следующий день после прилета в Нью-Йорк я договорился встретиться с другом в Центральном парке у Conservatory Garden Center Fountain. Огромный парк с бесконечными тропинками, лужайками, мостами, прудами, одна большая экосистема внутри мегаполиса из металла и стекла. Чтобы быстрее добраться до места, мне посоветовали поставить апп — официальное приложение Central Park.

Houston we have a problem


Друга я, конечно, нашел, но приложение захотелось тут же удалить. В этот момент и родилась идея сделать свой концепт, обьясняя логику и улучшения. О том, чем плох апп в нынешней версии и как его сделать удобнее — под хабракатом.
Читать дальше →
Всего голосов 16: ↑13 и ↓3+10
Комментарии4

Как дизайнеру подготовить передачу Android-приложения разработчику

Время на прочтение2 мин
Количество просмотров39K
Во время нарезки графики под приложения часто возникает множество сложностей: от разрешения устройств и проблемы с сетками и рекомендациями Google до непосредственно передачи приложения разработчику. За 2 года я работала над дизайном более 10 приложений, научилась находить решения самых разных проблем и делать так, чтобы в конечном итоге приложение выглядело так же, как и в дизайне.
Об этом и пойдет речь под катом.



Читать дальше →
Всего голосов 34: ↑28 и ↓6+22
Комментарии22

Эволюция интерфейса приложения Top Story

Время на прочтение5 мин
Количество просмотров7K
Многие корпорации уделяют особое внимание мобильным пользователям – действительно, доля тех, кто практически не выпускает смартфоны из рук, непрерывно растёт. У обладателей умных мобильных устройств за время использования девайсов формируются определённые привычки, связанные с особенностями организации новостных лент в социальных сетях. Свои ожидания они переносят и на другие информационные приложения, в частности, новостные ленты: пользователям нужен актуальный контент, релевантный их интересам, комфортный режим просмотра и минимальное время ознакомления с новостями.

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


Читать дальше →
Всего голосов 22: ↑20 и ↓2+18
Комментарии6

Дайджест продуктового дизайна, июнь 2015

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

Дайджест продуктового дизайна, июнь 2015
Читать дальше →
Всего голосов 25: ↑23 и ↓2+21
Комментарии0

Топ новых возможностей для Web, UX и дизайнеров мобильных приложений в Photoshop 2015

Время на прочтение4 мин
Количество просмотров20K
Компания Adobe выпустила обновление для своего приложения Photoshop, содержащее массу полезностей и долгожданных улучшений для пользователей, особенно эти улучшения порадуют разработчиков макетов сайтов и интерфейсов приложений. В статье-переводе содержится краткий обзор топовых функций и ссылки на обучающие и справочные материалы, комментарии переводчика.
Читать дальше →
Всего голосов 3: ↑3 и ↓0+3
Комментарии8

Создание дизайна для дальтоников (и вместе с ними)

Время на прочтение3 мин
Количество просмотров60K


Каждый раз, как кто-то узнает, что я дальтоник, я отвечаю на один и тот же вопрос: «Какой это цвет?». В 95% случаев я отвечу правильно, и поэтому мне задают еще один вопрос: «Подожди, значит, ты понимаешь, что это [вставить название цвета]? Так что ты видишь?». И тут начинается процесс объяснения того, как работает дальтонизм, и как он на меня влияет.
Читать дальше →
Всего голосов 50: ↑48 и ↓2+46
Комментарии78

Как я рисовал дизайн приложения для конкурса Mail.Ru Group

Время на прочтение7 мин
Количество просмотров28K


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

Вместо вступления


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

В один из таких дней я наткнулся на заметку «Конкурс для дизайнеров от Почты Mail.Ru». Обычно я не принимаю участия в подобных конкурсах, но здесь совсем другая история. Задание мне показалось нестандартным и от того очень интересным. Меня это зацепило с профессиональной точки зрения. Смогу ли я решить поставленную задачу или на худой конец разработать и предложить концепты, которые получат применение в готовом приложении?

С этими мыслями я приступил к работе.
Читать дальше →
Всего голосов 30: ↑25 и ↓5+20
Комментарии20

Разбираемся с сеткой в Adobe Illustrator

Время на прочтение9 мин
Количество просмотров148K

От переводчика


Привет, %юзернейм%!

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

Материал расчитан на новичков, и немного рассказывает о двух вещах:
  1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
  2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

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

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание


  • Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
  • Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;


Ну, поехали.

Разбираемся с сеткой в Adobe Illustrator





Читать дальше →
Всего голосов 13: ↑11 и ↓2+9
Комментарии0

Как создавать Pixel Perfect изображения в Adobe Illustrator

Время на прочтение14 мин
Количество просмотров84K

От переводчика


Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

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

Краткое содержание


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

Настройки Abobe Illustrator


  1. Edit > Preferences > Units > General → Pixels
    Edit > Preferences > Units > Stroke → Pixels
  2. Edit > Preferences > Guides & Grid > Gridline every → 1px
    Edit > Preferences > Guides & Grid > Subdivisions → 1px
  3. Edit > Preferences > General > Keyboard Increment → 1px
  4. View > Snap to Grid
    View > Snap to Point
  5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator




Читать дальше →
Всего голосов 31: ↑27 и ↓4+23
Комментарии6

Ближайшие события

Конкурс для дизайнеров от Почты Mail.Ru

Время на прочтение2 мин
Количество просмотров15K


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

Почта Mail.Ru запускает конкурс на дизайн концепции мобильного интерфейса. Задача конкурса — предложить подход для удобной и эффективной работы с информацией, накопившейся в электронной почте.
Читать дальше →
Всего голосов 33: ↑27 и ↓6+21
Комментарии22

Как мы делали облачную систему автоматизации ресторанного бизнеса

Время на прочтение7 мин
Количество просмотров40K
Привет, Хабр! Первая запись в корпоративном блоге не претендует на некую энциклопедическую значимость, поэтому просим не судить строго, это всего лишь знакомство с компанией и разрабатываемым продуктом.

И эта история о том, как мы разрабатывали систему автоматизации для ресторанов.


Читать дальше →
Всего голосов 37: ↑28 и ↓9+19
Комментарии76
Если в поисковой строке AppStore ввести слово «Переводы», то можно удивиться, сколько же существует всевозможных приложений для переводов с карты на карту – заводы стоят, одни переводчики. Вот и Банк Москвы решил обзавестись своим приложением для переводов – посмотрим, что же оно может нам предложить.
Читать далее
Всего голосов 72: ↑45 и ↓27+18
Комментарии12

Гайдлайн по использованию Apple Watch Human Interface

Время на прочтение21 мин
Количество просмотров18K
Официальное руководство от Apple по разработке интерфейса для Apple Watch — теперь и на русском! Технические переводчики Alconost потрудились на славу. Правда, пока этот материал верстался, Apple выкатила новую версию гайдлайна, так что следите за обновлениями и в нашем блоге.


Читать дальше →
Всего голосов 20: ↑15 и ↓5+10
Комментарии1

Передача проекта от дизайнеров iOS разработчикам

Время на прочтение6 мин
Количество просмотров79K


В настоящее время департамент мобильной разработки Rambler&Co активно расширяется, в том числе и в плане iOS-разработчиков и UX дизайнеров. Большое количество людей и проектов, ведущихся ими, усложняет и без того непростой процесс передачи дизайна разработчикам. Всем, так или иначе связанным с мобильной разработкой, знакомы проблемы и разногласия, возникающие на стыке интересов программиста и дизайнера — начиная тем, в каких единицах измерять расстояния, и заканчивая тем, кто должен нарезать элементы экранов в различных разрешениях. Чтобы окончательно решить проблему в рамках нашей компании, мы решили подготовить подробные гайдлайны по этому взаимодействию.
Читать дальше →
Всего голосов 22: ↑20 и ↓2+18
Комментарии25

Обзор возможностей Wireframesketcher на примере создания макета сайта

Время на прочтение8 мин
Количество просмотров13K
Wireframesketcher — предназначен для прототипирования графических интерфейсов.
В нем можно создавать интерактивные прототипы веб-сайтов и приложений как для настольных компьютеров так и для смартфонов, а также других мобильных устройств.
Авторы позиционируют Wireframesketcher как инструмент для профессионалов и у них на это есть все основания. Приложение разработано на основе Eclipse IDE либо может быть установлено в качестве плагина к Eclipse, а это обеспечивает кроссплатформенность приложения (Linux/Mac/Windows) и дает возможность использовать большой арсенал разработанных для этой IDE инструментов, в том числе поддержку различных систем контроля версий и других плагинов. Что касается контроля версий, то его легко осуществлять, так как для хранения данных проекта используются текстовые XML файлы. Также для Wireframesketcher имеется достаточно обширная библиотека макетов, шаблонов, виджетов и иконок.

В этой статье я хочу показать пример создания прототипа простого веб-сайта в Wireframesketcher. В данном случае под прототипом будет пониматься совокупность нескольких слинкованных интерактивных т.н. проволочных макетов страниц веб-сайта (wireframes). В дальнейшем для простоты я буду использовать «оригинальное» название «wireframe» сокращенное до «фрейм» именно в этом контексте.
Далее будет много текста и картинок
Всего голосов 10: ↑7 и ↓3+4
Комментарии5

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

Время на прочтение3 мин
Количество просмотров15K
Решение, изложенное в статье, расписано для пользователей OSX. Но его достаточно просто можно адаптировать и под другие популярные операционные системы.

Началось все с нетривиальной задачи: когда создается веб-сервис и мобильное приложение, неизбежно возникает потребность сделать под него презентабельную или не очень презентабельную иконку. Но стоит начать создание приложения для IOS в XCode, как тут же узнаешь, что от тебя требуется не одна иконка, а примерно десяток, причем разных размеров. Вот только часть из них:
  • иконка для отображения на вкладках браузеров;
  • иконка веб-приложения, отображаемая в safari mobile;
  • иконка мобильного приложения, отображаемая на главном экране в ios;
  • большая иконка для app store;
  • маленька иконка для app store;
  • иконка для поиска в spotlight.

А теперь внимание: практически для каждого пункта из этого списка есть еще и свои собственные размеры — в зависимости от типа устройства и версии iOS. Подробная спецификация иконок для веб-приложения и приложения для ios находится здесь.
Читать дальше →
Всего голосов 24: ↑22 и ↓2+20
Комментарии15

Вклад авторов