С одной стороны, содержание важнее формы, с другой — небрежное оформление как бы намекает: текст накидали на скорую руку. Чтобы внешний вид не обесценил самые убедительные аргументы, не стоит пренебрегать базовыми правилами типографики. В статье рассказываем о них так, чтобы было достаточно увидеть один раз и запомнить на всю жизнь.
Продуктовый дизайнер
Гайд по работе с ветками (Figma Branch)
При коллективной работе над проектом, всегда встречаются классические проблемы: что/когда/кем было добавлено в проект и почему компоненты сломались. Я часто видел костыльное решение — складывать готовые экраны и компоненты куда-то в угол канваса, тегать лида комментом, а после ревью — чистить за собой, мрак. Проще, быстрей, дешевле использовать функционал Branch, тем более они идеально подходят многих сценариев.
Паттерн поиска в мобильном приложении. Какую механику выбрать дизайнеру?
Поиск помогает пользователям быстро находить то, что им нужно. Но как создать такой поиск, а главное — сделать его полезным инструментом?
В статье:
— проанализируем, какие варианты паттерна поиска есть,
— заглянем в гайдлайны,
— рассмотрим UX-ошибки.
Как же выбрать оптимальный вариант поиска для вашего мобильного приложения?
Как сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн-системы
Привет! Меня зовут Ксения Гаврилова, я дизайн-менеджер в Selectel. Определяю, поддерживаю процесс и качество дизайна продуктов в компании, занимаюсь поиском и онбордингом людей в команду, помогаю дизайнерам развиваться.
В 2022 году мы создали свою дизайн-систему. Это был сложный и интересный путь. Вместе с командой мы прошли через многое и решили несколько ключевых проблем: наладили коммуникацию между дизайнерами и разработчиками так, чтобы все говорили на одном языке, сделали опыт пользователя в ключевых сценариях консистентным и обновили устаревший фреймворк.
В этом тексте я хочу поделиться главными уроками, которые извлекла в процессе. Они будут полезны дизайнерам и разработчикам, лидам и линейным специалистам. Надеюсь, мой опыт поможет вам при создании вашей дизайн-системы и в работе над ней, и вы не допустите моих ошибок.
Как проектировать системы уведомлений в приложениях: дизайн, этапы и нюансы архитектуры
Почему уведомление — это не только иконка колокольчика, как работает и без чего не может существовать вся система и какие артефакты будут полезны в работе. Рассказываем о своём опыте с трёх сторон.
Как мы создали систему развития и карьерного роста продуктовых дизайнеров
Древняя мудрость гласит: «Театр начинается с вешалки, а путь к должности дизайн‑директора — с первого шага». Но что ещё нужно сделать? Как превратить свою мечту в реальность и не сбиться с пути? С вами Артём Литвин, дизайн-лид в Домклик. Сегодня я расскажу вам, как мы помогаем развиваться и расти в должности нашим дизайнерам.
Я собрал эту статью в виде экспериментальной театральной постановки в трёх актах. В течение первого акта мы познакомимся с героями — сотрудниками продуктовой компании: и узнаем их проблемы и потребности. Во втором акте мы создадим систему роста для продуктовых дизайнеров. Ну а в третьем акте займёмся её внедрением.
Итак, давайте начинать!
Лучшие практики модальных окон. Компоненты дизайн системы
Меня зовут Андрей Насонов, я работаю UI/UX-дизайнером и руковожу дизайн-отделом. В 2008 году я начал заниматься графическим дизайном, а в 2015 году перешел в веб-дизайн.
В этой статье я описываю работу модального окна для десктоп-версии сайтов.
UI/UX: Цели и типы интерактивных прототипов
Привет, читатель!
В этой статье я хочу поделиться своим видением прототипирования в Figma.
Прототип позволяет на ранних этапах дизайна рассмотреть и «пощупать» часть продукта или продукт в целом, при этом не привлекая ресурсы разработки. А Figma позволяет собирать правдоподобные интерактивные прототипы, которые помогают дизайнеру и команде в целом протестировать, проанализировать юзабилити интерфейса.
Когда дизайнер делает макеты страниц сайта, проектирует навигацию по интерфейсу или формирует классные интерактивные взаимодействия — ему очень важно перепроверить себя и убедиться, что всё делается в нужном ключе. Очень часто тут помогают прототипы.
В некоторых ситуациях можно обойтись минимальной детализацией, а иногда желательно приблизить прототип к реальному продукту. И тут возникает вопрос: как понять, когда и насколько подробным должен быть прототип? Чтобы на него ответить, нужно сначала определиться с целью прототипирования.
Чек-лист подготовки к UX-интервью
Интервью — одна из самых распространенных UX-практик, которая позволяет узнать, что думают ваши пользователи во время взаимодействия с продуктом. Выяснить, почему они делают то, что они делают, и чего хотят. В ходе интервью можно проверить гипотезы, рассмотреть опыт целевой аудитории, определить ее общие черты и потребности.
Эту методику используют при планировании редизайна или обновлении действующего функционала, а также при создании нового продукта. Интервью наиболее эффективно во время предварительных работ. Однако, его проведение возможно и на любых этапах работы над продуктом и позволяет оценить, как воспринимается продукт, обратить внимание на проблемы.
Почему скучные люди лучше всех в дизайне сложных приложений. Например, банковских
Привет. Эта статья — текстовая версия моего доклада на конференции RAUX 2021. Ниже будет ссылка на видео.
Я делаю крупные приложения для топовых российских компаний. В основном для банков. Стараюсь больше руководить, но бывает, что дизайню и программирую. Занимаюсь этим уже почти 10 лет, и возникло наблюдение...
Создание UX/UI, длится минимум 3 месяца. Бывает и 6–9 месяцев. При этом, очень редко выходит закончить проект с тем же дизайнером, с которым начинали его делать. По дороге люди выгорают и уже не могут выполнять свою работу эффективно. При том, что на проектах поменьше (1–2 месяца), всё проходит куда как менее кровопролитно.
И это заметно не только у нас в команде. Пообщайся с работниками отделов дизайна в крупных банках, у многих огромная текучка. Даже топовые сотрудники частенько меняются.
Но бывает, что всё-таки находятся выдающиеся люди, которые могут выдержать все 6 месяцев и даже больше. При всём таланте и творческом подходе, это люди очень толерантные к выполнению скучных и рутинных задач. Даже получающие определённое удовольствие от таких задач.
В статье я расскажу из чего состоит UX/UI банковских проектов и почему это такое скучное занятие.
Будет полезно начинающим дизайнерам. И тем, кто хочет перейти на выполнение крупных проектов.
Как сделать эффективное всплывающее окно, или Как убедить всех не делать всплывающие окна. Обзор исследований
Скорее всего, вас бесят всплывающие окна. И меня бесят. И того парня бесят. Но их все равно часто используют. Потому что они дают конверсию, за которой и следят владельцы сайтов. Я собрала научные исследования про то, на что, кроме конверсии, влияют всплывающие окна.
Если исследования не помогут и всплывашку все равно решат делать, то в конце статьи есть данные о том, какие поп-апы работают лучше.
Базовая структура HTML-документа с объяснением каждой строчки
<!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 проекты
Если вы iOS- или Android-разработчик и дизайн вашего проекта разрабатывается в Figma, то скорее всего вы сталкиваетесь с проблемами при экспорте ресурсов: цвета выгрузить нельзя, а иконки и картинки экспортировать неудобно. В этой статье я расскажу, как можно облегчить себе жизнь и автоматизировать экспорт UI-Kit из Figma напрямую в Xcode и Android Studio.
UI-элементы и жесты в мобильных приложениях
Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.
А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Сага о мобильном дизайне. Часть 1
Всем привет! Меня зовут Максим Никитин, я арт-директор и отвечаю за дизайн и правильные интерфейсы в ТехноФабрике. Мы делаем мобильные приложения и сложные интеграции, но сегодня речь не о них. Сегодня о дизайне.
Поводом для статьи стала недавняя беседа с клиентом. Он пришел с подборкой примеров с Dribbble и спрашивал, почему в реале нет таких красивых интерфейсов, и можем ли мы нарисовать «вот как тут или как там». Мы сказали, что можем, но потом долго объясняли, почему один пример нерабочий с точки зрения юзабилити, а другой потребует +N дней и +N тысяч к стандартной разработке. Ни к чему не пришли, но с подобными запросами в последнее время сталкиваемся часто.
Под катом я расскажу, как крутой дизайн мобильного интерфейса может вызывать когнитивный диссонанс, и почему в 90% случаев мы отказываемся творить неописуемую красоту с умопомрачительной анимацией.
Сага о мобильном дизайне, часть 2
С вами снова Максим Никитин, арт-директор ТехноФабрики с сагой о мобильном дизайне. Переходим ко второй части, где позанудствуем на тему удобстваа, внимания, опыта, привычек и прочих скучных вещей.
UI/UX. При разработке любого мобильного дизайна все крутится вокруг этих четырех букв. Они настолько взаимосвязаны, что часто пишутся через слеш – UI/UX. Потому что не бывает одного без другого, как не бывает водки без похмелья.
Если по-простому, то UI (user interface) – это то, как оно выглядит, а UX (user experience) – это то, как оно работает. Если совсем точнее, то UX – это то, как пользователь работает с приложением, и куда он там норовит ткнуть пальцем.
То есть UI – это про шрифты, тенюшки, градиенты и картинки. UX – это про путь пользователя: на этом экране будет это, тот экран поведет сюда, на нем будет это. В конце мы хотим, чтобы пользователь сделал вот это, и получил бы вот такой результат.
И здесь находится краеугольный камень разработки мобильного дизайна – надо чтобы не только красиво, но еще и удобно. Не только UI, но и UX. Потому что нарисовать можно все что угодно, хоть лицо Гитлера на весь экран, как в комиксе xkcd. Вопрос в том, сможет ли этим пользоваться кто-нибудь кроме девелопера и заказчика.
Разработка приложения для обработки видео: на что обратить внимание и при чем тут зумеры
Привет, Хабр!
Меня зовут Алексей Жуков. Более 10 лет вместе с командой разработчиков я занимаюсь созданием и дизайном приложений и интернет-платформ. В статье хочу поделиться своим видением трендов на рынке видеоконтента. Разберемся в том, что будет после пандемии и что учесть при создании приложения для зумеров.
Подробности об использовании CSS-функции minmax() в Grid-макетах
minmax()
. Пожалуй, дело тут в том, что большинство существующих публикаций на эту тему либо не вдаются в детали, либо не включают в себя достаточного количества пояснений и примеров из реального мира. А minmax()
— это очень мощная и полезная функция. Именно по этой причине я и решил написать данную статью. Это — нечто вроде «полного руководства по minmax()
», задача которого — дать читателям то, чего не дают им другие публикации на эту тему.Здесь мы в подробностях обсудим возможности функции
minmax()
в применении к сеточным макетам, поговорим о том, как, когда и почему ей стоит пользоваться. Тот, кто проработает эту статью, сможет полноценно и со знанием дела применять эту функцию в своих проектах.Бренд-дизайн: как придать узнаваемый вкус бренду. Рецепт от дизайнера из Эстонии
Я опросил десяток предпринимателей, маркетологов и дизайнеров, работающих с малым и средним бизнесом, и заметил искривленное понимание, что есть бренд и брендинг.
«Сделайте мне просто логотип и брендбук» – основной запрос малого бизнеса и стартапов.Этим интервью я бы хотел внести ясность на такой метафизический объект как бренд, для тех у кого нет четкого понимания, как его формировать. Для предпринимателей, чтобы была понятна модель работы с бренд-дизайнером и самим дизайнерам, чтобы поставить свою работу на верное направление.
Не удивительно, что эпоха оцифровки информации и желание всему приписать правила или принципы дошло до таких чувствственных и эмоциональных вещей, как бренд, ведь эти чувства полностью влияют на принятие решения о покупке.
Как происходит метаморфоза от «просто бизнеса» до «бренда»?
Разберемся вместе со Степаном Солодковым.
Степан мультидисциплинарный дизайнер и арт-директор из России.
- Живёт и работает в Таллине
- 8 Европейских наград за 3 года
- В том числе Дизайнер года ADC*Estonia-2018
Его работа тесно связана с визуальными коммуникациями бренда.
Ссылки на работы Степана я оставлю в конце интервью.
За что получает деньги наемный работник? Не понимаете? Сейчас поймете
«За что я тут корячусь на тебя?» — столь же обычный вопрос работника к работодателю.
Разобраться, за что же действительно работодатель платит деньги наемному работнику, поможет моя собственная теория, закодированная в десять букв – «ПЗП – ПЗС – ПЗПИ»
Информация
- В рейтинге
- Не участвует
- Откуда
- Россия
- Зарегистрирован
- Активность