Рубрика «интерфейсы» - 15

Картинки и видео — это «чёрные ящики», внутри которых лежит много интересного и непонятного. Но можно заглянуть внутрь некоторых форматов, всё там поменять и посмотреть, что из этого получится.

Полина Гуртовая из компании «Злые марсиане» выступила на нашей конференции «Я Картинки как коробки — что внутри? Доклад в Яндексе - 1 Фронтенд» в феврале. При помощи эксперимента Полина разобралась, как превращать простые картинки в «эффективные изображения» с метриками. Инструменты, которые могут делать это за нас, Полина рассмотрела ближе к концу доклада. Получился большой экскурс во внутренности и принципы работы разных форматов: от PNG и JPEG до AV1 и экзотики.

— Всем привет. Меня зовут Полина, я фронт в компании «Злые марсиане».
Читать полностью »

Адаптивный или отзывчивый? Разбираем структуру React-компонентов - 1

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

Команды Аэроклуб ИТ на Moscow travel hack

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

Привет!

Меня зовут Леша Свиридо, я ведущий дизайнер продукта в Альфа-Банке (это мы делаем интернет-банк для бизнеса).

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

А ещё ссылка на дизайн-систему Альфа-Банка.

Тёмная сторона дизайн-системы и что с ней делать - 1

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

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

Правила дизайна иконок, которые стоит запомнить - 1

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

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

В феврале Яндекс провёл вторую конференцию «Я Глазные интерфейсы. Доклад в Яндексе - 1 Фронтенд». Мы сделали её непохожей на наши традиционные Я.Субботники — почти все спикеры были не из Яндекса, чтобы зрители могли узнать об опыте разных компаний и разработчиков. За день было съедено 10 кг мармелада, гости посмотрели, как работает робот-курьер Яндекс.Ровер, а вечером поболели за участников контеста Code in the Dark.

Глазные интерфейсы. Доклад в Яндексе - 2Глазные интерфейсы. Доклад в Яндексе - 3Глазные интерфейсы. Доклад в Яндексе - 4Глазные интерфейсы. Доклад в Яндексе - 5
Глазные интерфейсы. Доклад в Яндексе - 6Глазные интерфейсы. Доклад в Яндексе - 7Глазные интерфейсы. Доклад в Яндексе - 8Глазные интерфейсы. Доклад в Яндексе - 9
Глазные интерфейсы. Доклад в Яндексе - 10Глазные интерфейсы. Доклад в Яндексе - 11Глазные интерфейсы. Доклад в Яндексе - 12Глазные интерфейсы. Доклад в Яндексе - 13

Как всегда, мы опубликуем конспекты нескольких докладов с конференции. Иван Бакаидов ibakaidov работает программистом в компании LINKa в Санкт-Петербурге. Он создатель программ альтернативной коммуникации и защитник прав людей без подписи. Ваня выступал на сессии комиссии по делам глухих в чрезвычайных ситуациях гуманитарного саммита ООН в Стамбуле. У нас на конференции он рассказал о «глазных интерфейсах» — поделился опытом разработки детских обучающих игр и приложений, управляемых с помощью устройства отслеживания взгляда и предназначенных для людей с ограниченными возможностями здоровья. Из конспекта и видео вы узнаете о подводных камнях в создании «глазных интерфейсов» и сможете ответить для себя на вопрос, будущее ли это.
Читать полностью »

Термином «дизайн-система» в IT давно никого не удивишь. Компании систематизируют дизайн продуктов, придумывая свои или используя чужие инструменты для управления стилями, паттернами и компонентами. 

Badoo не является исключением: с помощью нашей дизайн-системы Cosmos мы поддерживаем общие принципы дизайна для четырёх приложений, работающих на четырёх платформах. 

image

Одна из первых и основных вещей, с которой начинается работа по созданию дизайн-системы, — это токены (или переменные), которые определяют значения разных сущностей системы. 

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

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

Я хочу поделиться адаптированным переводом статьи моего коллеги Кристиано Растелли (Cristiano Rastelli), который несколько лет развивает дизайн-систему Cosmos. На примере своего опыта он показывает, как работать с токенами более эффективно: добавлять метаданные и использовать их для описания свойств компонентов. 

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

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

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

Как мы находим неочевидные ошибки в интерфейсах онлайн-заданий для детей - 1
Читать полностью »

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

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

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

iPhone был спроектирован для удобной работы только одной рукой, с плавными движениями большим пальцем по экрану.
Читать полностью »

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

Анатолий Островский megatolya объясняет, как его команда решила эту проблему, и делится практиками, специфичными для Маркета, но в целом актуальными для любого большого сервиса. Его доклад основан на собственном опыте развёртывания нового маркетплейса в довольно сжатые сроки. Толя несколько лет руководил командой разработки интерфейсов в Маркете, а сейчас перешёл в направление беспилотных автомобилей.
Читать полностью »


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