Pull to refresh

Оптимизируем свои трудозатраты при разработке приложения в Google Material Design

Interfaces *Usability *Mobile applications design *Prototyping *
Tutorial


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

Итак, перед нами стоит задача: опираясь на готовые решения в открытом доступе, максимально оптимизировать затраченный труд на разработку приложения в стиле Google Material Design.
что удалось откопать...
Total votes 22: ↑18 and ↓4 +14
Views 22K
Comments 16

Как я в одной команде редизайн web-продукта делал (кейсы!)

Web design *Interfaces *Usability *Graphic design *
Работать с этой командой я начал благодаря Хабру. Люди прочитали некоторые мои посты и посчитали меня компетентным решать их проблемы. Опишу дальше небольшой кейс, как дизайнер интерфейсов выполнял поэтапно разные задания для web-продукта, сложность которых возрастала по мере того как мы срабатывались. Правда предупрежу заранее: если окажется, что материала написалось много для одной главы — придётся разделить на несколько…

Если Вы немного устали от flat-дизайна, хотите прочитать про “чрезмерно понятные элементы”, одобряете физику Material Design (и только), да и просто хотите посмотреть картинки простых и понятных интерфейсов, то
Загляните под кат...
Total votes 18: ↑10 and ↓8 +2
Views 6.1K
Comments 6

Кейсы: разработка спецификаций и гайдлайнов (web ui kit)

Web design *Interfaces *Usability *Prototyping *Graphic design *


Сегодня я поделюсь опытом разработки графической документации по гайдлайнам. Это оказалось мое второе задание для Viline. И как Вы не помните из первой части, я делал редизайн страницы видео-курса. В данной статье я опишу процесс разработки стилистики всех элементов и различных состояний. Придумаю и сформулирую некоторые правила, чтобы интерфейс получился сбалансированным и доступным с учётом аудитории…
Читать дальше →
Total votes 23: ↑15 and ↓8 +7
Views 24K
Comments 34

Создание дизайн-экосистемы для десятков связанных ИТ-решений: слово дизайнерам

True Engineering corporate blog Web design *Interfaces *Usability *Mobile applications design *
Сегодня расскажем, как пришли к необходимости создания единой UI/UX-системы для разных приложений одного из наших заказчиков. О том, какие принципы в нее заложили и как технологично дизайн-экосистему упаковали.

image

Надеемся, наш опыт будет интересен UI/UX дизайнерам, фронтэндерам, а также бренд-менеджерам, которые на собственном опыте сталкиваются с подобными задачами.
Читать дальше →
Total votes 13: ↑12 and ↓1 +11
Views 9.3K
Comments 8

Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma

Website development *Interfaces *Mobile applications design *Project management *Product Management *


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

Фигма и другие современные инструменты позволяют задавать взаимосвязи между элементами, упрощая редактирование отдельных компонентов или целых экранов; группировать их в библиотеки компонентов и давать желаемые права доступа.

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

По методологии Атомарного дизайна, я начну с атомов и буду двигаться дальше к более сложным компонентам. Буду работать в Фигме и продемонстрирую, что у Скетча появился серьёзный конкурент.

Total votes 12: ↑7 and ↓5 +2
Views 51K
Comments 21

Полезное дизайнеру: бесплатные новинки для оптимизации дизайн-процессов. Выпуск 2-й

Web design *Website development *Development of mobile applications *Interfaces *Usability *


За последнее время мне удалось найти множество интересных мини-продуктов и небольших инструментов / утилит, которые призваны ускорить ваш дизайн-процесс. В этом выпуске вы найдете 14 ссылок на разные релизы, авторы которых вносят значительный вклад в развитие профессионального сообщества дизайнеров и разработчиков.
Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Views 12K
Comments 9

Смена пароля: 10 шагов к хорошей реализации

True Engineering corporate blog Information Security *System administration *Interfaces *Email layout *

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


У нас уже была страница смены пароля, но механизм работы был не оптимальным. Вот как всё происходило. Пользователь оставлял заявку в домене на смену пароля. В ответ система, в свою очередь, оставляла заявку, которую администратор обрабатывал вручную. Он генерировал пароль в домене, после чего приписывал его в заявке. Пользователю приходило email-уведомление: “Ваш пароль изменён на такой”.



Нас смущали три момента:


  1. Sharepoint, от которого мы уходим в тех местах, где он не нужен.
  2. Потребность в участии администратора. Нам не хотелось отвлекать квалифицированного специалиста на подобные рутинные и частые операции.
  3. Мы присылали пароль прямо в письме, что не очень-то безопасно. Такой пароль можно прочесть с экрана. Появляется много вариантов, как он может утечь.

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


Итак, стало понятно, что механику смены пароля пора изменить.

Читать дальше →
Total votes 12: ↑11 and ↓1 +10
Views 9K
Comments 3

Рецепт гладкого релиза: PMy на заметку

True Engineering corporate blog Project management *Product Management *
Tutorial
Всё ближе момент, когда мы выпустим в свет наше решение, свежее, новенькое и сияющее. Волнительно? Не очень, ведь мы его уже проверили со всех сторон.

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

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


Читать дальше →
Total votes 16: ↑14 and ↓2 +12
Views 5.1K
Comments 3

Как создать UI kit, который продается. Этапы разработки коммерческой дизайн-системы

Web design *Website development *Development of mobile applications *Interfaces *Project management *
Tutorial


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

Я расскажу о поэтапном плане создания коммерческой дизайн-системы. Узнаете как сделать и выпустить на рынок свой продукт. Расскажу что сделать перед началом работы, как подготовиться и составить план. Отдельно рассмотрю этапы разработки дизайн-системы для Figma. В последней части дам советы как продвигать и раскручивать. В статье только личный опыт и наблюдения самоучки.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Views 20K
Comments 1

Чему я научился, написав библиотеку компонентов на Svelte

Website development *JavaScript *SvelteJS *


Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.


Каким приемам Svelte я научился, читайте под катом.

Читать дальше →
Total votes 21: ↑21 and ↓0 +21
Views 11K
Comments 64

Что не так со схемами вагонов железной дороги

Туту.ру corporate blog Usability *Graphic design *Transport
Однажды в нашу службу поддержки позвонила женщина, которая случайно разделила семью, выбирая места в вагоне. Она хотела купить целое купе, а взяла 15, 16, 17 и 18 места, считая их одной группой. Мы и до этого подозревали, что не всем удобно считывать схемы, но в тот момент поняли это особенно явно.

Старая схема:



Новая после исследований:



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

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

А я сейчас расскажу вам про то, что вообще может пойти не так при выборе мест в разных вагонах.
Читать дальше →
Total votes 60: ↑59 and ↓1 +58
Views 23K
Comments 76

Редизайн приложения — взгляд изнутри

Development of mobile applications *Designing and refactoring *Interfaces *Mobile applications design *Agile *
Sandbox


Mobius bike — это сервис по прокату велосипедов и самокатов, разработанный для Таллина (на данный момент запланировано расширение географии).

Гипотеза первого релиза — «приложение по прокату велосипедов, будет востребовано на рынке Европы». В декабре 2019 была пересмотрена основная гипотеза и теперь она звучала так — «может ли сервис по прокату велосипедов и самокатов получить максимальное распространение за счет удобства для конечного пользователя и франчайзи?» Для того, чтобы ответить на этот вопрос, нужно было реализовать следующее:

  • провести работы по оптимизации структуры приложения (как внутренней — backend, так и внешней — дизайн и frontend) для внедрения нового типа транспорта и возможного масштабирования в будущем
  • сделать условия аренды регулируемыми в админке

Любовь Никифорук — менеджер проекта




Ключевые экраны приложения Mobius bike до редизайна

Одной из первых моих задач в качестве продуктового дизайнера, была подготовка макетов для внедрения нового вида транспорта — электросамокатов. Закончив с макетами, я решил внести некоторые изменения в дизайн и UX приложения и сделать небольшой концепт редизайна. Показал новые макеты команде. Получил фидбэк: ребята давали советы и делились своим мнением. В итоге набралось некоторое количество ключевых экранов.
Читать дальше →
Total votes 7: ↑7 and ↓0 +7
Views 3.8K
Comments 12

Тупые и умные компоненты

EPAM corporate blog Interfaces *Design

Меня зовут Илона, я Senior Experience Designer в EPAM. Работа для меня удачно совпадает с хобби в EPAM я проектирую интерфейсы для зарубежных заказчиков, читаю лекции для сотрудников и студентов лабы, менторю дизайнеров. В свободное время преподаю проектирование интерфейсов в магистратуре Университета ИТМО и веду Телеграм-канал о UX-дизайне.
В работе и преподавании я часто сталкиваюсь с проблемой: сложно организовать компоненты интерфейса так, чтобы было всегда понятно, какой компонент использовать, чтобы похожие компоненты не плодились и не путали дизайнеров и разработчиков.
Делюсь подходом, который помогает мне удобно организовать компоненты и упростить жизнь себе и разработчикам.

Читать далее
Total votes 25: ↑19 and ↓6 +13
Views 12K
Comments 22

Android-разработчикам: как сократить время реализации тёмной темы с пары месяцев до недели

red_mad_robot corporate blog Development of mobile applications *Development for Android *Mobile applications design *
🔥 Technotext 2020

Привет, меня зовут Влад Шипугин, я Android-разработчик в Redmadrobot. В этой статье я хочу поделится опытом реализации темной темы, создания удобного UI Kit, как для разработки, так и для дизайнеров. Я расскажу про использование Material Components и работу с Vector Drawable. Также вы узнаете, как быстро поддержать режим edge-to-edge с использованием Window Insets и познакомитесь с моей библиотекой — edge-to-edge-decorator.

Читать далее
Total votes 21: ↑20 and ↓1 +19
Views 10K
Comments 7

Taiga UI — библиотека компонентов под Angular, которую вам стоит попробовать

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

Привет!

Саша Инкин и я регулярно пишем на Хабр статьи по Angular. Почти все они основаны на нашем опыте разработки большой библиотеки компонентов.

Эту библиотеку мы развиваем, перерабатываем и дополняем уже несколько лет, а свои идеи проверяем на нескольких десятках проектов Тинькофф Бизнеса и внутренних систем компании. Мы рады сообщить: выложили нашу библиотеку в открытый доступ!

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

Что там за Taiga UI?
Total votes 43: ↑43 and ↓0 +43
Views 15K
Comments 29

Упрощаем работу с Angular с помощью @taiga-ui/cdk: 5 наших лучших практик

TINKOFF corporate blog Website development *JavaScript *Angular *TypeScript *

CDK — базовый пакет библиотеки компонентов Taiga UI. Он не имеет никакой привязки к визуальной составляющей библиотеки, а скорее служит набором полезных инструментов для упрощения создания Angular-приложений.

Среди всех этих инструментов я выделил мою пятерку фаворитов. Я использую их во всех своих проектах и уже давно не представляю, как писать на Angular без них, потому что они ежедневно экономят мне массу времени.

Заглянуть в мультитул
Total votes 18: ↑18 and ↓0 +18
Views 5.3K
Comments 5

UX/UI-дизайнер: все, что вы хотели знать, но боялись спросить

Get experts corporate blog IT Infrastructure *Graphic design *Personnel Management *IT career

Сегодня мы поговорим о наиболее распространенной в компаниях на данный момент  роли: UX/UI-дизайнера в единственном лице (UX Generalist, будем называть его так). Он решает широкий спектр задач: исследует поведенческие паттерны, проектирует различные варианты пользовательского опыта, прорабатывает те или иные гипотезы совместно с командой, тестирует их, проводит пользовательские интервью и исследования, и учетом полученных данных создает привлекательный, понятный и удобный интерфейс, который помогает решить предполагаемую задачу пользователя.

Читать далее
Total votes 5: ↑3 and ↓2 +1
Views 29K
Comments 9

Ещё одна статья про дизайн-системы (в продуктовом дизайне)

AGIMA corporate blog

Привет. Меня зовут Костя, и я отвечаю за дизайн в Агиме. Эту статью я написал недели 3 назад, поэтому я не буду рассуждать о том, что происходит сейчас в нашей стране и мире, а лишь подчеркну, что в эти сложные времена мы должны поддерживать друг друга. И надеюсь, что моя статья поможет настроиться на рабочий лад. Как всегда, я старался сделать статью максимально простой и интересной.

Итак, поговорим о дизайн-системах, потому что мне регулярно приходится или рассказывать о ДС, или уточнять, что конкретно собеседник имеет в виду, когда говорит «надо нам тут дизайн-систему сделать».

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

Читать далее
Total votes 16: ↑16 and ↓0 +16
Views 2.3K
Comments 3

Как мы создавали UI Kit: все о стилизации комплексных React-компонентов

ЕВРАЗ corporate blog CSS *ReactJS *
Sandbox

Привет, Хабр! Меня зовут Паша, и я руковожу frontend-направлением в ЕВРАЗе. В рамках цифровой трансформации компании моя команда разрабатывает огромное количество интерфейсов. Только с 2019 года их число превысило 20, и у каждого свой уникальный UX/UI. Несмотря на все разнообразие, проекты являются частью общей дизайн-системы, где повторяются те или иные элементы.

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

Как мы это сделали и что это нам дало
Total votes 4: ↑4 and ↓0 +4
Views 5.4K
Comments 5

Сложные формы на react — это просто. FormMOD новая библиотека для форм

ReactJS *
Sandbox

Добрый день, меня зовут Николай! Я один из разработчиков новой библиотеки formMOD.

Как много времени вы тратите на создание сложных форм из проекта в проект?

Думаю этот вопрос актуален для многих разработчиков React.

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

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

Я постараюсь описать все возможности библиотеки максимально кратко. Все примеры и подробное описание есть в документации.

Читать далее
Total votes 2: ↑2 and ↓0 +2
Views 3.3K
Comments 4