Рубрика «UI»

Как Android преобразует размеры ресурсов - 1Размер APK файла можно уменьшить, выкинув «ненужные» LDPI ресурсы, Android все равно умеет генерировать их на лету из MDPI. Но что будет если убрать еще и MDPI каталог? И как именно будет произведена свертка: усреднением или более дешевым выбрасыванием пикселей? Перескочит ли Android через один шаг чтобы произвести потенциально более простое преобразование HDPI -> LDPI? Как именно происходит уменьшение картинок в разных случаях? Чтобы ответить на эти вопросы я провел небольшой тест.

Читать полностью »

Шесть доводов почему писатель (райтер, writer) — это турбонаддув для дизайна (от специалиста по UX в Dropbox).

image

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

В своем выступлении “Design in Tech 2017 " (Дизайн в технологиях 2017) Джон Маэда сказал: «Слова действительно важны, потому что графика иногда не содержит никакого смысла.» Fast Co Design продолжили эту мысль в статье под названием «Забудьте о коде: Манера письма это главный навык дизайнера».

Звучит просто, верно? Чтобы быть великим дизайнером, нужно знать, как писать. Ничего страшного. Ты пишешь все время. Электронная почта, спецификации, твиты — ничего сверхъестественного.

Я писатель и бывший учитель английского языка и я считаю, что писать трудно. Тяжело учиться писать и тяжело этому научить. Вот почему на Амазоне более 500,000 книг о написании текстов!

Механику письма достаточно трудно постичь, но знаете ли вы, что на самом деле трудно? Такие понятия как выбор слов, тон и ритм. Чтобы овладеть этими навыками, потребуется целая вечность.

Так что же делать команде дизайнеров?
Читать полностью »

Дизайн для iPhone X - 1

iPhone X (или iPhone 10) уже официально представлен, и его выпуск назначен на 3 ноября этого года. Данное устройство может смело похвастаться одной из своих характеристик: Super Retina Display (жидкокристаллический дисплей) с разрешением 1125 × 2436 пикселей. Кроме того, в верхней части экрана будет предусмотрена специальная выемка – очередная футуристическая особенность разблокировки нового iPhone, благодаря которой устройство идентифицирует вас по чертам вашего лица.

Разработка дизайна приложений для iPhone X может показаться разработчикам нелегкой задачей, однако, с другой стороны, новый iPhone дает им возможность воплотить свои самые смелые идеи в жизнь. Ширина экрана устройства в вертикальном режиме такая же, как у iPhone 6, 7 и 8, но высота экрана была увеличена на 145pt, в результате чего экран визуально увеличивается на ±20%. Для создания @ 1x-макетов вам необходим артборд со следующими параметрами: 375×812px. В результате применения в iPhone X нового Retina-дисплея вам не удастся сделать экспорт @ 2x-изображений (например, как это было в iPhone 8), однако, что касается @ 3x, то, как и в случае iPhone 7-8 Plus, здесь все осталось по-прежнему.
Читать полностью »

Берем что-то всем давно известное и делаем это удобным и красивым

image
Представляем вашему вниманию react-beautiful-dnd

Функция перетаскивания (drag&drop) — это интуитивный способ перемещения и переупорядочивания элементов. В Atlassian недавно выпустили react-beautiful-dnd, которая делает перетаскивание (drag&drop) внутри списков в вебе красивыми, естественными и доступными.
Читать полностью »

Ирина Черепанова и Татьяна Жукова из проекта uKit AI, обучающего нейросеть редизайну сайтов, перевели колонку менеджера команд продуктового дизайнер из Airbnb Амбер Картрайт о том, как умные технологии позволяют улучшать известные продукты.

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

«Невидимый дизайн»: проектируем вместе с машинами - 1

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

Дизайн-система Acronis. Часть первая. Единая библиотека компонентов - 1

Меня зовут Сергей, я работаю старшим дизайнером в компании Acronis. В отделе дизайна продуктов для бизнеса я отвечаю за разработку и внедрение единой библиотеки компонентов.

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

Читать полностью »

Проблемы React UI Kit-а и единой дизайн-системы, о которых вы не знали - 1

2 сентября 2017 прошла конференция Moscow Frontend, где я на примере React UI Kit рассказывала о проблемах, которые встречаются при внедрении UI Kit в компании. Тема оказалась актуальнее, чем я могла предположить, поэтому решила опубликовать статью по этой же тематике, преследуя две цели: донести материал до людей, которые не смогли оказаться на конференции лично, и предоставить отличную возможность провести жаркую дискуссию на эту тему в комментариях.

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

Всем привет,

хочу рассказать о консольной утилите, которая значительно увеличила мою продуктивность работы с Git, и, надеюсь, ускорит и вашу также. Называется она tig и была написана канадским программистом Джонасом Фонсека (Jonas Fonseca) ещё в далёком 2006-м году, но по настоящий день она активно развивается и поддерживается в великолепном состоянии. Я хочу показать её функционал (внимание, есть относительно тяжелые gif-ки внутри) и поделиться самыми удобными способами использования.

tig — улучшаем продуктивность работы с git - 1

Читать полностью »

Плоские элементы UI привлекают меньше внимания и вызывают сомнения - 1
Иллюстрация из учебника Nielsen Norman Group по проведению исследований UI с помощью отслеживания взгляда пользователя

В дизайне UI есть понятие символа-зацепки (signifier, о них писал Дон Норман). Сильный символ явно выделяется из фона, специально привлекает внимание. Сильными символами традиционно считаются подчёркнутый текст, синий текст или блестящая 3D-кнопка. Есть и слабые или отсутствующие символы — гиперссылка, стилизованная под обычный текст, без яркого выделения цветом и подчёркивания, или кнопка-призрак, которая вообще не похожа на кнопку, пока по ней не нажать или не навести на неё курсор мыши.

По мнению специалистов Nielsen Norman Group, проблема современного дизайна в том, что популярность плоского дизайна в цифровых интерфейсах сейчас совпала с дефицитом сильных символов. В результате во многих современных UI просто отсутствуют «зацепки» для глаза — люди теряются и не сразу понимают, куда можно нажать. Конечно, если слегка вдуматься, то скрытые кнопки и спрятанные ссылки можно найти, но приходится напрягаться, это уже совсем не дружественный дизайн.
Читать полностью »

Всем привет.

«Если можешь что-то посчитать на GPU, делай это»
// Конечно в рамках разумного

image
VS
image
Обращаем внимание на разницу в фпс.
Начну пожалуй с предыстории. Один из наших программистов, решил проверить UI на предмет падения фпс. И мы нашли интересную зависимость, при отключении миникарты фпс поднимался в процентном соотношении. Интересно. Нужно решать проблему. Сразу напишу что про атласы и различные пулы, мы пробывали. И тогда я решил занятся этим вопросом более детально. И тут первая мысль, которая меня посетила, UI использует материал, значит можно все перенести на ГПУ, начнем.
Читать полностью »