Pull to refresh
16
0
Артём Сексяев @avsxvii

UX дизайнер

Send message

Ультимативный гайд по дизайн-токенам

Reading time20 min
Views41K

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

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

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

Меня зовут Женя, я руководитель UX-направления в компании Usetech. На досуге веду телеграм-канал «Мамкин Дизайнер», где рассказываю о вот таких штуках.

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

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments11

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

Reading time15 min
Views8.8K
tl;dr У 90% современных смартфонов диагональ экрана превышает пять дюймов. Появление таких дисплеев представило принципиально новые проблемы для разработчиков приложений и дизайнеров. Давайте посмотрим, как их решить.



После презентации Apple в январе 2007 года весь мир сжался до размера наших ладошек. Компания объединила iPod, телефон и браузер в едином устройстве. Apple представила на массовый рынок новый для себя класс устройств, которые нам сегодня известны как «смартфоны». Эти гаджеты работали без клавиатуры (как у BlackBerry) или стилуса (как Palm).

iPhone был спроектирован для удобной работы только одной рукой, с плавными движениями большим пальцем по экрану.
Total votes 10: ↑9 and ↓1+11
Comments12

Что такое WIMP-интерфейс и почему он до сих пор с нами?

Reading time10 min
Views24K
В 1973 году для персонального компьютера «Xerox Alto» был создан первый графический пользовательский интерфейс. С тех пор прошло почти 50 лет, однако всё те же принципы взаимодействия с компьютером используются по сегодняшний день. Что лежит в основе этих принципов и действительно ли это решение является оптимальным? Постараемся разобраться.

Total votes 19: ↑18 and ↓1+22
Comments48

Ускоряемся в Figma. Нужно больше плагинов

Reading time3 min
Views9.7K


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

За несколько месяцев использования удалось пощупать сервис и оценить, насколько это удобно и полезно. Количество плагинов растёт с каждым днём — уже не успеваем просматривать новые и следить за обновлениям, а это не может не радовать.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments8

Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma

Reading time3 min
Views40K
Если вы работаете в среде Figma, то скорее всего вы используете компоненты в своих дизайн-процессах и знаете в чем их преимущества. Когда в ежедневной фриланс рутине я устал повторять создание одних и тех же списков, табов, таблиц или любых других модулей, состав которых динамичен, я начал думать об автоматизации этих процессов, чтобы рутина как минимум протекала быстрее. Таким образом мультикомпоненты и были открыты!


Узнайте, как ускорить дизайн-процессы
Total votes 24: ↑23 and ↓1+22
Comments12

Безопасность авиаперелётов

Reading time11 min
Views97K
Это сделала птица:



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

Основные вещи:

— Аварийная посадка в неровную кустарниковую степь часто безопаснее посадки на воду.
— Парашюты как системное явление снизят безопасность пассажиров.
— 30 лет — нормальный срок жизни самолёта. 20 лет — самолёт ещё молод.
— При отказе двигателя на взлёте есть ситуации, когда надо продолжать взлёт.
— Отказ всех двигателей не означает катастрофу при определённой скорости.
— В меру жёсткий удар при посадке безопаснее, чем «kiss landing»,
— Для чего каждый полёт стюардессы проводят инструктаж.

Каждый из этих пунктов может быть потенциальной причиной споров. Ниже — моё субъективное мнение как действующего пилота российской авиации (семь лет).
Total votes 206: ↑203 and ↓3+200
Comments712

Ловкость рук и никакого мошенничества: практические советы по ускоренному обучению дизайну для разработчиков

Reading time6 min
Views52K
Улучшаем дизайн проекта с помощью тактически грамотных действий, а не таланта.

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

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

Легко опустить руки и сказать: «Я никогда не смогу сделать это должным образом, я не художник!», Но, оказывается, есть уйма ловких приёмов, которые вы сможете использовать, чтобы поднять свою работу на другой уровень, не имея опыта в графическом дизайне.

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

1. Для создания иерархии используем цвет и вес вместо размера



Читать дальше →
Total votes 68: ↑67 and ↓1+66
Comments28

Полное руководство по правильному использованию анимации в UX

Reading time9 min
Views46K
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Читать дальше →
Total votes 41: ↑41 and ↓0+41
Comments31

Превентивный интерфейс: редизайн страницы поисковой выдачи Google по суицидальным запросам

Reading time12 min
Views16K

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

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

И вот что я увидел:
Читать дальше →
Total votes 50: ↑49 and ↓1+48
Comments19

Принципы гештальта в дизайне пользовательского интерфейса

Reading time6 min
Views103K


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



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

Понимание того, как работает наш мозг, поможет вам стать более мудрым дизайнером и мастером визуальной коммуникации. Это может помочь определить, какие визуальные элементы наиболее эффективны в конкретной ситуации, и как вы можете использовать их, чтобы эффективно влиять на восприятие, вызывать внимание и изменения в поведении пользователей. Особенно полезна в этом часть статьи, касающаяся решения задач интуитивности дизайна пользовательского интерфейса.
Читать дальше →
Total votes 39: ↑38 and ↓1+37
Comments4

Игры со временем: ускоряем приложение на уровне восприятия

Reading time8 min
Views5.6K
Недавнее исследование от Google в сотрудничестве с Awwwards установило, что скорость в данный момент занимает высшее место в UX-иерархии. Вряд ли это кого-то удивит: темп повседневной жизни возрастает, мобильные решения стремятся встроиться в нее максимально органично — все это задает определенную планку ожиданий. Пользователи рассчитывают на минимальное время простоя.



В этой статье мы не будем останавливаться на технических способах честно ускорить загрузку сайта и обработку операций. Вместо этого мы препарируем темпоральный аспект пользовательского опыта: посмотрим, что на самом деле стоит за словами «долго» и «быстро», как и почему искажается восприятие времени и какие UX практики существуют для управления ожиданием.
Читать дальше →
Total votes 13: ↑13 and ↓0+13
Comments5

Создание карты пути пользователя для чайников

Reading time6 min
Views40K
Всем привет!

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

Поехали

Что такое Карта Пути Пользователя?


Карта пути пользователя (или иногда карта пользовательского опыта) — зеркало взаимодействия клиента с вашим продуктом/сервисом.

В прошлом месяце я написала руководство по Google Analytics для UX-дизайнеров. Полезная статья для владельцев сайтов или продуктов, у которых уже есть трафик. Но что делать, если вы начинаете с нуля? Как создать продукт, которым захотят пользоваться?

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

Читать дальше →
Total votes 12: ↑12 and ↓0+12
Comments3

Information

Rating
Does not participate
Works in
Registered
Activity