Рубрика «UI» - 19

Как создать устойчивую и гармоничную систему отступов в дизайне для более быстрой разработки - 1
Перевод «Я люблю ИП»

Недавно я работала над созданием системы отступов и размеров для одного продукта в сфере здравоохранения, чтобы улучшить читабельность текста и добиться последовательности на всех страницах. Я вывела три правила для отступов (Правило трёх «К») и четыре размера (16px, 8px, 4px, 2px), которые работали гармонично с новой системой типографики.

Из этой статьи вы узнаете, как использовать расстояния осознанно для последовательности в дизайне и более быстрой разработки.

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

Представляю вашему вниманию перевод статьи What Tesla’s Model 3 UI Reveals About Its Vision for the Future автора Tom Johnson.

Футуристический пользовательский интерфейс новой Tesla Model 3 - 1

Если вы знаете толк в дизайне или просто без ума от автомобилей, тогда эта статья для вас. В ней будут рассмотрены основные особенности элементов панели управления, а также пользовательский интерфейс новой Tesla Model 3 – недавно поступившего на рынок и доступного широкому слою общества электромобиля, который оборудован сенсорным дисплеем. Новый дизайн пользовательского интерфейса может многое сказать о том, как инженеры Tesla видят будущее самоуправляемых автомобилей.

Если вам интересна эта тема, тогда зацените Figma-файл, который я приготовил специально для вас, а также по ссылке вы найдете сделанный мной прототип.
Читать полностью »

Причиной столкновения американского эсминца стал запутанный UI - 1
Консоль управления эсминца USS John S. McCain (иллюстрация из отчёта ВМС США)

1 ноября 2017 года специальная комиссия ВМС США опубликовала многостраничный отчёт о столкновениях эскадренных миноносцев с управляемым ракетным оружием USS Fitzgerald (DDG-62) и USS John S. McCain (DDG-56) летом нынешнего года.

Инцидент с USS John S. McCain случился 21 августа. Он стал четвёртым столкновением с участием судов ВМС США в этом году, и привёл к гибели десяти моряков. Проведённое расследование показало, что обоих столкновений можно было избежать. А в случае с USS John S. McCain эксперты признали, что «свою роль определённо сыграл пользовательский интерфейс центральной системы навигации и управления на мостике». Хотя основная часть вины лежит на недостаточной подготовке экипажа, но интерфейс объективно признали слишком сложным и запутанным.
Читать полностью »

Здравствуйте, меня зовут Александр Черников. Я руковожу разработкой UI проекта “Цифровой корпоративный банк” — обновлённой версии Сбербанк Бизнес Онлайн, интернет-банка для юридических лиц. Мы разрабатываем stand-alone клиент, мобильное приложение и, собственно, web-клиент, о котором и пойдёт речь. В своих статьях я буду делиться ценным опытом нашей команды, а конкретно в этом посте опишу наш технологический стек и остановлюсь на том, почему мы выбрали Typescript в качестве основного языка.

Чем хорош (и чем плох) Typescript: опыт UI-разработчиков - 1
Читать полностью »

image

Привет, меня зовут Хисаёси Кидзима, я дизайнер UI и мехов для NieR:Automata. Игровой UI (интерфейс пользователя) часто остаётся незамеченным, поэтому я рад услышать, что фанаты нашли дневник разработчиков NieR:Automata и спросили о моей работе!

Когда директор NieR:Automata Йоко Таро работает над играми, он всегда чётко знает, чего хочет, и UI не стал исключением. Я хочу рассказать вам о моей работе над UI для NieR:Automata, а также о тех заданиях, которые мне давал Йоко-сан.
Читать полностью »

Как 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

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js