Как стать автором
Обновить
96.12

Интерфейсы *

То, что помогает ориентироваться

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

Подробный гайд как сделать темную тему с помощью variables фигмы

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

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

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

Как прокачивать насмотренность в UX для дизайнера интерфейсов (личный опыт)

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

Хочу поделиться своим опытом и рассказать, как я прокачиваю насмотренность в ux (не ui). Надеюсь, это кому-нибудь поможет.

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

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

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

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

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

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

Как располагать элементы игровых интерфейсов

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

Правильное расположение элементов игрового интерфейса помогает людям решать задачи, которые мы перед ними ставим

В статье примеры подходов и решений, которые упрощают жизнь игрокам  =)

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

Истории

Как я проектирую интерфейсы

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

Привет, я Егор Камелев, проектировщик интерфейсов (UX-дизайнер). За последние 20 лет я поработал с командами десятков агентств, IT-отделов, действующих проектов и продуктов, стартапов (и запущенных, и незавершённых). Я знаком с сотней команд, не меньше. И среди них не нашлось и двух, использующих одинаковые подходы к работе. Верно говорят: «У каждого додика — своя методика!».

У всех свои названия должностей, артефактов, процессов. Свои требования и наборы компетенций. Где-то проектированием занимается маркетолог и разработчик (потому что в команде больше никого и нету), а где-то эта задача распределена между десятью разными специалистами (системные- и бизнес-аналитики, технические писатели, UX-дизайнеры, продакт оунеры и так далее).

Поэтому в этой статье я не буду заявлять, что мой подход к работе — единственно верный. Он один из тысяч и в моём случае прекрасно работает: клиенты не заваливают меня правками, платят 100% предоплату и рекомендуют окружающим. Я распишу во всех деталях свой процесс предоставления услуги проектирования (создания интерактивного прототипа информационной системы на заказ). Уверен, что многим пригодятся мои знания. Погнали!

Читать далее
Всего голосов 29: ↑25 и ↓4+21
Комментарии20

Я стал зарабатывать вдвое больше, когда начал писать техническую документацию

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

Речь идёт о функциональных спецификациях к сайтам, приложениям и прочим информационным системам.

В начале карьеры UX-дизайнера я просто делал интерактивные прототипы, а документацию предпочитал не писать. Почему так:

Во-первых, сложно. Этому навыку никто не обучал, а написать 100 и более страниц текста по проекту — это как диссертацию накатать. Поэтому я говорил клиентам, что, мол, и так справитесь.

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

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

Читать далее
Всего голосов 14: ↑11 и ↓3+8
Комментарии8

UX-мракобесие

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

UI/UX дизайн, UX-исследования, UX-стратегия, UX-копирайтинг, UX-команда, UX-маркетинг, бренд-экспириенс, AX-algorithmic experience, Client / Customer experience. Вам не показалось, что засилье новых терминов и дисциплин намекает на то, что UX — это не просто конкретный этап разработки или специализация, а нечто большее? Может Дон Норман был прав, определяя UX как «подход через опыт» к управлению продуктом, который охватывает «буквально все»?

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

Руководство по проектированию интерфейсов с Drag and Drop

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

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

Устроиться поудобнее и читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии12

Figma to Frontend: как мы автоматически синхронизируем дизайн и код

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

Меня зовут Анастасия Кабалкина, я Head of design в VK Tech. В этой статье расскажу, как мы синхронизировали треть нашей дизайн-системы за счет автоматической генерации дизайн-токенов и компонентов.

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

Библиотека контролов для Avalonia UI

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

Последний год наша команда работала над кроссплатформенной версией САПР Delta Design. В результате этой работы была создана своя библиотека UI контролов для Avalonia, которая поддерживает как ОС Windows, так и ряд систем Linux, включая российские АстраЛинукс, РедОс, а также их модификации под Эльбрус.

Создание единой библиотеки контролов EremexControls.NET позволило компании ЭРЕМЕКС значительно ускорить темпы разработки и показать мультиплатформенную версию САПР Delta Design раньше обещанного срока. Применение готовых типовых блоков дало возможность инженерам фокусироваться на предметной области, не отвлекаясь на другие задачи. Сейчас библиотека контролов используются в трех внутренних проектах компании.

Под катом обзорная статья по новому продукту от компании ЭРЕМЕКС – библиотека компонентов EremexControls.NET для Avalonia UI.

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

Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур

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

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

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

Приложения для Vision Pro выглядят скучно

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

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

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

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

История Drag and Drop: от первого в мире графического интерфейса до современного веба

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

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

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

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

Что качать дизайнеру в 2024: 7 востребованных навыков на рынке

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

Эта статья для тех, кто хочет оставаться на волне прогресса, а не оказаться погребённым под нею.

О чём поговорим:

1. Как делать дизайн для ИИ, и кто делает его сейчас?

2. Для чего дизайнеру разбираться в цифрах?

3. Зачем учиться рассказывать истории?

4. Как изменилось 3D, и почему его нельзя игнорировать?

5. Чем топовые приложения отличаются от хороших?

6. Как генеративная графика перестала быть развлечением?

7. Какого дизайнера возьмут на работу в первую очередь?

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

Как обновляют интерфейсы банкоматов и как это недавно сделали мы

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

Всем привет! Недавно мы переработали интерфейс наших банкоматов. Не то чтобы старый работал плохо, просто изменения — развитие, а развитие — это всегда хорошо. Рассказываем, что и как поменяли, как к этому пришли, что из этого вышло и зачем вообще обновлять то, что и так работает.

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

Что можно улучшить в приложении? часть 2. Крадем как художники у Lamoda

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

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

Выбор размера

Выбор подходящего размера – стрессовый момент при заказе одежды в интернет-магазине, ведь никто не хочет с упоением ждать обновку, а затем расстроиться из-за висящих рукавов. 

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

Я обычно пользуюсь именно описанием параметров модели и фотографиями, как сидит вещь на нем. Это быстро и мне сразу понятно, какой крой будет у футболки или кофты.

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

UX – как лучше улучшать

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

На примере создания аккаунта в финансовом сервисе я покажу как построить и запустить процесс улучшения User Experience продукта. Что и в каком порядке делать продуктовому дизайнеру, чтобы никого не взбесить, и чтобы всем в команде стало лучше.

Начнём разбор с простого экрана загрузки фотографии паспорта.

Постичь дзен
Всего голосов 11: ↑10 и ↓1+9
Комментарии19

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

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

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

Оптимальное решение в такой ситуации — создание и поддержка единой базы данных. Ниже на примере отдельного продукта мы пошагово расскажем, как её спроектировать.

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

Адаптируем иконку вашего приложения для visionOS

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

Иконки — визитные карточки для любого приложения в App Store. Наличие кроссплатформенного приложения подразумевает понимание контекста, в котором будет отображаться иконка.

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

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

Принцип минимизации злобы

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

Здравствуйте, меня зовут Дмитрий Карловский и я.. всё никак не могу решить, стоит публиковать эту статью или нет. Я долго думал об этой дилемме Эскобара и пришёл к выводу, что..

Почему?
Всего голосов 30: ↑22 и ↓8+14
Комментарии16