Pull to refresh
60
28
Антон Григорьев @Grav

Дизайнер интерфейсов

Send message

Как делать чистые градиенты

Level of difficultyEasy
Reading time3 min
Views4.3K

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

В работе над редизайном приложения Почты России мы пробовали разные способы подчеркнуть в визуальной коммуникации нашу уникальность. В том числе думали о градиентах. Под градиентами мы понимаем любые объекты, в которых один цвет переходит в другой. К ним можно отнести и тени. Оказалось, с градиентами связано много вопросов (вроде использования их в тёмной теме), и часть из них мы рассмотрели в этой статье.

Читать далее
Total votes 22: ↑22 and ↓0+28
Comments9

Переменные и условия: как быстро сделать в Фигме нелинейный прототип

Level of difficultyMedium
Reading time5 min
Views8.9K

Например, прототип формы, поля которой можно заполнять непоследовательно.

Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure.

Летом 2023 года в Фигме появились условия и переменные, благодаря которым можно показывать всё более сложные взаимодействия. А также меньшими усилиями добиваться того, что раньше требовало усилий значимых, например, давать респондентам возможность заполнить поля формы в произвольном порядке.

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

Читать далее
Total votes 25: ↑24 and ↓1+26
Comments20

Функциональная спецификация интерфейса: что это, зачем нужна, как её писать

Reading time15 min
Views17K

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

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

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

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

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

Axure 7 для начинающих за 100 минут

Reading time2 min
Views73K
Axure — инструмент для создания интерактивных прототипов сайтов и мобильных приложений. Навыков работы с ним часто требуют работодатели, ищущие проектировщика интерфейсов или UX&UI-дизайнера. В России это почти что отраслевой стандарт. Axure 7 — последняя версия программы. Восьмая версия сейчас в бете.

В одной школе интернет-технологий (не упоминаю, чтобы не сочли за рекламу) с мая 2015 года я рассказываю начинающим дизайнерам об Axure 7. В течение 3 часов (минус небольшой перерыв) объясняю, как работают те возможности программы, которые нужны мне для большинства проектов. И закрепляю знания практикой.

Примерная структура занятия:
  • Примеры прототипов;
  • Виджеты, их настройка и расстановка по холсту с помощью сетки, направляющих и выравнивания;
  • Мастера;
  • Динамические панели;
  • Создание интерактива (ивенты, экшены, кейсы, условия);
  • Под конец: способы передачи прототипа заказчику, свойства страниц, стили.

Начинающим тяжело усвоить столько информации, но это базовые вещи для тех, кто с акшурой уже работает. Для улучшения учебного процесса (и чтобы не скучать, рассказывая одно и то же) я перевёл теоретическую часть в формат видео.
Читать дальше →
Total votes 10: ↑10 and ↓0+10
Comments2

Хватит неправильно использовать выпадающие списки

Reading time4 min
Views132K
Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).

Когда использовать


Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.



Читать дальше →
Total votes 135: ↑128 and ↓7+121
Comments103

Микробаш

Reading time3 min
Views1.4K
Рассказ о том, зачем и как я сделал для себя робота, который публикует микроцитаты с bash.org.ru, полностью влезающие в твит. А также о том, как я буду его развивать, если топик на хабре возымеет эффект, и количество подписчиков даст понять, что это интересно не только мне.
Читать дальше →
Total votes 94: ↑74 and ↓20+54
Comments54

Веб-крокодил

Reading time2 min
Views3.6K
Пришла в голову идея веб-сервиса (ну или приложения для соцсети) для игры в крокодил (один игрок жестами и действиями показывает слово, остальные угадывают). Представляется мне это следующим образом.

На сайте собирается куча желающих. У них есть веб-камеры, микрофоны, звук. Они указывают язык, на котором хотели бы общаться. При наборе энного числа желающих, говорящих на одном языке, для них создаётся отдельная комната.

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

Итак, комната создана.
Читать дальше →
Total votes 22: ↑10 and ↓12-2
Comments12

17 пользовательских идей монетизации соцсети

Reading time2 min
Views2.4K
Приблизительно год назад в контакте администрацией был открыт топик (ссылка сохранилась, но по ней сейчас ничего нет), в котором пользователи предлагали свои варианты монетизации проекта. Варианты, которые на их взгляд более приемлемы, чем очевидные «платный вход» и «завесить всё баннерами».

Я по данному топику прошелся и выписал себе на заметку все более-менее разумные варианты. Ничего своего в представленный ниже список я старался не вносить, лишь переформулировал идеи более абстрактно.
Читать дальше →
Total votes 65: ↑56 and ↓9+47
Comments42

Information

Rating
243-rd
Location
Санкт-Петербург и область, Россия
Registered
Activity