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

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

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

5 простых правил типографики, которые сделают ваше письмо, статью и любой другой текст солиднее

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

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

Читать далее

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

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

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

Читать про ветки

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

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

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

В статье:

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

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

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

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

Давайте разберемся

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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

Время на прочтение9 мин
Количество просмотров123K
<!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>


Под катом — разбор каждой строчки
Читать дальше →

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

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


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

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

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


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

А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Читать дальше →

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

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

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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



Здесь мы в подробностях обсудим возможности функции minmax() в применении к сеточным макетам, поговорим о том, как, когда и почему ей стоит пользоваться. Тот, кто проработает эту статью, сможет полноценно и со знанием дела применять эту функцию в своих проектах.
Читать дальше →

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

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

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

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

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


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

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

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

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

Ссылки на работы Степана я оставлю в конце интервью.
Читать дальше →

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

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

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

Читать дальше →
1

Информация

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