Как стать автором
Поиск
Написать публикацию
Обновить
38.65

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

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

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

Работа с CoordinatorLayout: шапочный разбор

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров11K

Приветствую тебя, уважаемый читатель! Меня зовут Пятаков Никита, я Android-инженер в команде MT&S Авито. Здесь я делюсь опытом реализации двух версий шапки на главном экране приложения Avito. Эта статья будет особенно полезна разработчикам, которые хотят познакомиться с CoordinatorLayout и научиться делать похожие задачки с нетривиальным взаимодействием view между собой. 

Читать далее

Сложный интерфейс: Рисуем состояния экрана без помощи системного аналитика

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров4.6K

Когда дизайнер проектирует что-то сложнее посадочной страницы, возникает необходимость в разных состояниях экранов. Чаще всего дизайнеры получают одни и те же правки: «Тут нужен лоадер» или «Как выглядит ошибка?». Полный набор состояний никогда не появляется без пинка аналитика.

Годами я наблюдаю бессмысленный пинг-понг. Дизайнер рисует экран и ждёт ревью. Аналитик через пол дня открывает ссылку и просит дорисовать состояние загрузки. Задачка висит в статусе «ин-прогресс» и не уходит в разработку. Сроки растягиваются, релизы переносится.

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

Получить чек-лист

Слои UX, Business Model Canvas и CJM – что такое и зачем надобно

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров2.2K

Привет! Обещала опубликовать вторую часть рецензии через неделю, а получилось...через полтора месяца. Если вы не понимаете, о какой рецензии речь, вам сюда. В первой части я рассказала о SUSMVP, концепциях Personas и JTBD, разнице между MVT и A/B-тестированием, об API, как о факторе, формирующем UX, и многом другом.

Сегодня поговорим о слоях UX. Мы углубимся в Business Model Canvas и его деривативы, затронем Dual-track agile, а еще поймем, что такое CJM. Плюс, конечно, по касательной затронем Z/F-паттерны и диаграмму Гутенберга.

Читать далее

Путь одного IOS-приложения

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров1.4K

Решил устроить день отдыха от кода и структурировать полученный опыт.

Обычно, в процессе перепросмотра возникают неожиданные мысли, которые будут полезны мне.

А сам материал будет полезен тем, кто только задумывается на тему своего индивидуального проекта, уже занимается им, или даже выпустил несколько релизов.

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

Читать далее

5 полезных Figma-плагинов для продуктового дизайнера (для работы с компонентами и токенами) — UX/UI дизайн

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров3.1K

Привет, я Арсен – UX/UI-дизайнер. А тут я собрал плагины для Figma, которыми я пользуюсь регулярно при работп с компонентами и организации ui-китов. Это не глупенький список дизайн-инфлюенсера из линкедина, а реальный выпаренный-вываренный концентрат полезных плагинов, лучших в своей категории.

Читать

Дизайн за 5 минут. Дайджест октября 2024

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров1.6K

Всем привет! Меня зовут Андрей Герасимов, я продуктовый дизайнер Garage Eight. Мы регулярно обмениваемся новостями, событиями и просто классными решениями с командой в рамках внутреннего дизайн-комьюнити. А недавно появилась идея делиться этим и с внешней аудиторией в формате дайджеста. Так что встречайте первую подборку того, что зацепило мое внимание в октябре.

Перейти к дайджесту

Без теории к практике: как уловить радиоволну инклюзивного дизайна, опираясь на опыт реальных людей

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров1.6K

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

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

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

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

«Универсальный дизайн» — концепт, придуманный американским архитектором Рональдом Л. Мейсом. Он выделил 7 принципов «универсального дизайна», которые описывают, как создать хорошие условия для людей разного возраста и способностей. Он верил, что простой доступ к зданиям и свобода движения сделают жизнь проще для всех. Селвин Голдсмит переформулировал цитату Мейса в своей книге «Проектирование для инвалидов». Он придумал концепт «свободного дизайна». Затем эти термины стали известны как «инклюзивный» и «доступный дизайн». Так чем они отличаются?

Читать далее

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

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров7.2K

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

Прочитать материал

Кастомный Date and Time picker как в Telegram на Kotlin Jetpack Compose

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров4.8K

Вдохновившись классными колесиками для выбора времени и даты напоминаний Telegram я захотел сделать на одном из своих пет‑проектов что‑то подобное. Первой мыслью было — найти этот код в исходниках Telegram, но т.к. скорее всего, у них это написано на Java, я решил не играть в лотерею и не тратить время на раскопки в Java‑коде, потому что я хотел сделать это на «реактивном ранце».

Читать далее

Продукт или студия: куда пойти работать дизайнеру, и почему в банках так много платят

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров2K

Эта статья для начинающих и взрослых дизайнеров. Новички поймут, в какую сторону смотреть, где искать первую работу. Опытные ребята ответят себе на вопросы: «Тем ли я занимаюсь?» и «Стоит ли менять профессию?».

Читать далее

Оценка компетенций продуктовых дизайнеров. Часть 2: Карта навыков

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров810

Привет! Я Ваня Соловьёв, руководитель продуктового дизайна в «Магните». Рано или поздно в компании возникает вопрос: как оценивать вклад и навыки продуктовых дизайнеров. Тогда ответственные начинают искать информацию в интернете, собирая обрывки знаний то тут, то там. Обычно это приводит к неточным результатам: системы и методы оценки разные, и их объединение не всегда положительно сказывается на итоговом результате.

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

Читать далее

Принципы и адаптация практик разработки UX/UI для промышленного ПО

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров2.2K

В посте обобщили и разжевали проблемы создания UX/UI для промышленных приложений, способы их решения. Поделились соей иерархией правил и принципов при разработке интерфейсов промышленного ПО. Поводом к посту стали проблемы при разработке одного из продуктов компании, когда на этапе проектирования возникли споры о том, каким должен быть интерфейс приложения. Чтобы максимально подробно поставить задачу по дизайну, решили провести ресерч: пообщались с дизайнерами, изучили литературу, проанализировали личный опыт. В итоге сформировали нечто, что позже, возможно станет основой для корпоративного стандарта требований для дизайна промышленных систем. Мысли, решения и результаты изложены под катом. Лонгрид (много букв).

Читать далее

Победители Московского городского конкурса (МГК) 2024 года

Время на прочтение4 мин
Количество просмотров712

Рассказываем про победителей Московского городского конкурса 2024. Заходите и читайте, какие проекты придумали наши подростки!

Читать далее

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

Дизайн на основе данных: Как метрики делают ваш продукт успешным

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров9.1K

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

Читать далее

Мобильная версия сайта: статистика, важность и чек-лист для гуманитариев

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров602

Мобильная версия сайта приобретает всё большее значение, так как по последним данным 47% россиян заходят в интернет с помощью смартфонов.

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

Читать далее

Тысячи иконок и адаптация под RTL: проектирование интерфейса шаблона мобильного приложения для партнёров Travelpayouts

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров765

Представьте, вы скачиваете приложение-шаблон и хотите настроить его под себя. А будут ли там нужные цвета, иконки, кнопки и темы? Удобно ли будет им пользоваться после всех манипуляций?

Об этих вопросах мы в CleverPumpkin задумались, когда проектировали интерфейс для White Label App — шаблона нативного мобильного приложения для поиска и покупки авиабилетов или бронирования отелей для компании Travelpayouts. Это партнёрская платформа, которая даёт возможность тревел-брендам и инфлюенсерам получать доход от рекламных кампаний известных тревел-брендов и сервисов. 

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

Пару слов о проекте

White Label App — это шаблон приложения с готовыми функциональными модулями. С его помощью партнёры Travelpayouts могут сделать собственное уникальное приложение — его интерфейс легко кастомизируется под любой брендбук или понравившуюся стилистику. Для этого достаточно выбрать один из предустановленных стилей и задать цветовую палитру интерфейса. А после опубликовать готовое приложение в Google Play или App Store со своими названием и иконкой.

В прошлой статье мы подробно рассказывали о процессе создании проекта и разработке двух его версий (White Label App и White Label SDK) и удобном конфигураторе для одновременной настройки интерфейса для iOS и Android. Но этот проект уникален и с точки зрения дизайна, поэтому решили подробно написать о том, как его создавали.

Читать далее

Оценка компетенций продуктовых дизайнеров. Часть 1: Этапы оценки

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров1.3K

Привет! Я Ваня Соловьёв, руководитель продуктового дизайна в «Магнит». Рано или поздно в каждой компании возникает вопрос: как оценивать вклад и навыки продуктовых дизайнеров. Тогда ответственные за это начинают искать информацию в интернете, собирая обрывки знаний то тут, то там. Обычно это приводит к неточным результатам: системы и методы оценки разные, и их объединение не всегда положительно сказывается на итоговом результате.

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

Читать далее

Как зеленый Леруа Мерлен стал желтым Лемана ПРО

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

В последнее время ну очень популярна стала такая вещь, как ребрендинг. Одни меняют лого и название. Другие, вдобавок к этому, еще и кардинально меняют цвета.

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

Будем это исправлять.

Всем привет! Меня зовут Слава. Я мобильный разработчик. И в этой статье я поделюсь своим уникальным опытом того, как Леруа Мерлен стал Лемана ПРО. Собственно, рассказывать буду про мобильную разработку 🤷🏽.

Читать далее

Чем роль продуктового дизайнера отличается от роли UX/UI-дизайнера. Показываю на практике

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров8K

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

Читать далее

Figma AI. Наконец завезли нейронку

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров8.1K

Я давно изучаю разные нейронки и был приятно удивлён, когда вместе с новым интерфейсом Figma презентовала новые инструменты на базе нейронки. Правда, ждать пришлось почти год, если не больше!

Параллельно я работаю с сервисом-клоном Figma — Pixso. Так вот эти ребята уже давно внедрили у себя нейро-инструменты. И они классно работают.

Тем более интересно, что вышло у Figma!

Читать далее