Как стать автором
Обновить
7
-2
Максим Скворцов @sgmax

Продуктовый дизайнер

Отправить сообщение

Гайд по работе с ветками (Figma Branch)

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

Figma Branch (или «ветка») — это функционал, который позволяет создать копию проекта и изменять его независимо от основной версии. Когда работа завершена и нужно внести изменения в основной проект — ветка сливается с master-версией. Всё как у разработчиков. Но чтобы использовать Branch, ваш тариф должен быть Organization или Enterprise.

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

Читать далее
Всего голосов 2: ↑2 и ↓0+2
Комментарии4

Паттерн поиска в мобильном приложении. Какую механику выбрать дизайнеру?

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

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

В статье:

— проанализируем, какие варианты паттерна поиска есть,

— заглянем в гайдлайны,

— рассмотрим UX-ошибки.

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

Давайте разберемся
Всего голосов 17: ↑16 и ↓1+15
Комментарии0

Как сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн-системы

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

Привет! Меня зовут Ксения Гаврилова, я дизайн-менеджер в Selectel. Определяю, поддерживаю процесс и качество дизайна продуктов в компании, занимаюсь поиском и онбордингом людей в команду, помогаю дизайнерам развиваться.

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

В этом тексте я хочу поделиться главными уроками, которые извлекла в процессе. Они будут полезны дизайнерам и разработчикам, лидам и линейным специалистам. Надеюсь, мой опыт поможет вам при создании вашей дизайн-системы и в работе над ней, и вы не допустите моих ошибок.
Читать дальше →
Всего голосов 44: ↑43 и ↓1+42
Комментарии8

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

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

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

Читать далее
Рейтинг0
Комментарии2

Как мы создали систему развития и карьерного роста продуктовых дизайнеров

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

Древняя мудрость гласит: «Театр начинается с вешалки, а путь к должности дизайн‑директора — с первого шага». Но что ещё нужно сделать? Как превратить свою мечту в реальность и не сбиться с пути? С вами Артём Литвин, дизайн-лид в Домклик. Сегодня я расскажу вам, как мы помогаем развиваться и расти в должности нашим дизайнерам.

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

Итак, давайте начинать!

Читать далее
Всего голосов 32: ↑31 и ↓1+30
Комментарии4

Лучшие практики модальных окон. Компоненты дизайн системы

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

Меня зовут Андрей Насонов, я работаю UI/UX-дизайнером и руковожу дизайн-отделом. В 2008 году я начал заниматься графическим дизайном, а в 2015 году перешел в веб-дизайн.
В этой статье я описываю работу модального окна для десктоп-версии сайтов.

Читать далее
Всего голосов 9: ↑8 и ↓1+7
Комментарии12

UI/UX: Цели и типы интерактивных прототипов

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

Привет, читатель!
В этой статье я хочу поделиться своим видением прототипирования в Figma.

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

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

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

Читать далее
Всего голосов 3: ↑2 и ↓1+1
Комментарии4

Чек-лист подготовки к UX-интервью

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

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

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

Читать далее
Всего голосов 2: ↑1 и ↓10
Комментарии2

Почему скучные люди лучше всех в дизайне сложных приложений. Например, банковских

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

Привет. Эта статья — текстовая версия моего доклада на конференции RAUX 2021. Ниже будет ссылка на видео.

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

Создание UX/UI, длится минимум 3 месяца. Бывает и 6–9 месяцев. При этом, очень редко выходит закончить проект с тем же дизайнером, с которым начинали его делать. По дороге люди выгорают и уже не могут выполнять свою работу эффективно. При том, что на проектах поменьше (1–2 месяца), всё проходит куда как менее кровопролитно.

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

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

В статье я расскажу из чего состоит UX/UI банковских проектов и почему это такое скучное занятие.

Будет полезно начинающим дизайнерам. И тем, кто хочет перейти на выполнение крупных проектов.

Читать далее
Всего голосов 3: ↑2 и ↓1+1
Комментарии19

Как сделать эффективное всплывающее окно, или Как убедить всех не делать всплывающие окна. Обзор исследований

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

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

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

Читать далее
Всего голосов 17: ↑17 и ↓0+17
Комментарии12

Базовая структура HTML-документа с объяснением каждой строчки

Время на прочтение9 мин
Количество просмотров100K
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>


Под катом — разбор каждой строчки
Читать дальше →
Всего голосов 50: ↑42 и ↓8+34
Комментарии9

FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты

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


Если вы iOS- или Android-разработчик и дизайн вашего проекта разрабатывается в Figma, то скорее всего вы сталкиваетесь с проблемами при экспорте ресурсов: цвета выгрузить нельзя, а иконки и картинки экспортировать неудобно. В этой статье я расскажу, как можно облегчить себе жизнь и автоматизировать экспорт UI-Kit из Figma напрямую в Xcode и Android Studio.
Читать дальше →
Всего голосов 14: ↑14 и ↓0+14
Комментарии13

UI-элементы и жесты в мобильных приложениях

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


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

А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Читать дальше →
Всего голосов 23: ↑21 и ↓2+19
Комментарии9

Сага о мобильном дизайне. Часть 1

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

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

Поводом для статьи стала недавняя беседа с клиентом. Он пришел с подборкой примеров с Dribbble и спрашивал, почему в реале нет таких красивых интерфейсов, и можем ли мы нарисовать «вот как тут или как там». Мы сказали, что можем, но потом долго объясняли, почему один пример нерабочий с точки зрения юзабилити, а другой потребует +N дней и +N тысяч к стандартной разработке. Ни к чему не пришли, но с подобными запросами в последнее время сталкиваемся часто. 

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

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии16

Сага о мобильном дизайне, часть 2

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

С вами снова Максим Никитин, арт-директор ТехноФабрики с сагой о мобильном дизайне. Переходим ко второй части, где позанудствуем на тему удобстваа, внимания, опыта, привычек и прочих скучных вещей. 

UI/UX. При разработке любого мобильного дизайна все крутится вокруг этих четырех букв. Они настолько взаимосвязаны, что часто пишутся через слеш – UI/UX. Потому что не бывает одного без другого, как не бывает водки без похмелья.

Если по-простому, то UI (user interface) – это то, как оно выглядит, а UX (user experience) – это то, как оно работает. Если совсем точнее, то UX – это то, как пользователь работает с приложением, и куда он там норовит ткнуть пальцем. 

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

И здесь находится краеугольный камень разработки мобильного дизайна – надо чтобы не только красиво, но еще и удобно. Не только UI, но и UX. Потому что нарисовать можно все что угодно, хоть лицо Гитлера на весь экран, как в комиксе xkcd. Вопрос в том, сможет ли этим пользоваться кто-нибудь кроме девелопера и заказчика.

Читать далее
Всего голосов 8: ↑7 и ↓1+6
Комментарии5

Разработка приложения для обработки видео: на что обратить внимание и при чем тут зумеры

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

Привет, Хабр!

Меня зовут Алексей Жуков. Более 10 лет вместе с командой разработчиков я занимаюсь созданием и дизайном приложений и интернет-платформ. В статье хочу поделиться своим видением трендов на рынке видеоконтента. Разберемся в том, что будет после пандемии и что учесть при создании приложения для зумеров.

Читать далее
Всего голосов 9: ↑6 и ↓3+3
Комментарии0

Подробности об использовании CSS-функции minmax() в Grid-макетах

Время на прочтение8 мин
Количество просмотров21K
Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Я и сам немало об этом писал. Но я обратил внимание на то, что у многих разработчиков возникают сложности с использованием CSS-функции minmax(). Пожалуй, дело тут в том, что большинство существующих публикаций на эту тему либо не вдаются в детали, либо не включают в себя достаточного количества пояснений и примеров из реального мира. А minmax() — это очень мощная и полезная функция. Именно по этой причине я и решил написать данную статью. Это — нечто вроде «полного руководства по minmax()», задача которого — дать читателям то, чего не дают им другие публикации на эту тему.



Здесь мы в подробностях обсудим возможности функции minmax() в применении к сеточным макетам, поговорим о том, как, когда и почему ей стоит пользоваться. Тот, кто проработает эту статью, сможет полноценно и со знанием дела применять эту функцию в своих проектах.
Читать дальше →
Всего голосов 28: ↑27 и ↓1+26
Комментарии4

Бренд-дизайн: как придать узнаваемый вкус бренду. Рецепт от дизайнера из Эстонии

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

Я опросил десяток предпринимателей, маркетологов и дизайнеров, работающих с малым и средним бизнесом, и заметил искривленное понимание, что есть бренд и брендинг.
«Сделайте мне просто логотип и брендбук» – основной запрос малого бизнеса и стартапов.
Этим интервью я бы хотел внести ясность на такой метафизический объект как бренд, для тех у кого нет четкого понимания, как его формировать. Для предпринимателей, чтобы была понятна модель работы с бренд-дизайнером и самим дизайнерам, чтобы поставить свою работу на верное направление.

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

Как происходит метаморфоза от «просто бизнеса» до «бренда»?


Разберемся вместе со Степаном Солодковым.

Степан мультидисциплинарный дизайнер и арт-директор из России.

  • Живёт и работает в Таллине
  • 8 Европейских наград за 3 года
  • В том числе Дизайнер года ADC*Estonia-2018

Его работа тесно связана с визуальными коммуникациями бренда.

Ссылки на работы Степана я оставлю в конце интервью.
Читать дальше →
Всего голосов 12: ↑9 и ↓3+6
Комментарии2

За что получает деньги наемный работник? Не понимаете? Сейчас поймете

Время на прочтение4 мин
Количество просмотров151K
«За что я плачу тебе деньги?» — обычный вопрос работодателя работнику, причем саркастический, как правило.

«За что я тут корячусь на тебя?» — столь же обычный вопрос работника к работодателю.
Разобраться, за что же действительно работодатель платит деньги наемному работнику, поможет моя собственная теория, закодированная в десять букв – «ПЗП – ПЗС – ПЗПИ»

Читать дальше →
Всего голосов 234: ↑230 и ↓4+226
Комментарии888

Дизайн-система: что это, для чего и как создать

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

Всем привет!

Я рад вернуться к вам, дорогие читатели сообщества, и поделиться опытом и знаниями, полученными благодаря работе в IT-компании Omega.

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

Читать далее
Всего голосов 5: ↑4 и ↓1+3
Комментарии3
1

Информация

В рейтинге
Не участвует
Откуда
Россия
Зарегистрирован
Активность