Веб-дизайн *

Еще раз о дизайн-системах

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

Из чего состоит дизайн-система?

Дизайнеры создают UI Kit (набор готовых дизайн-решений) → Разработчики переводят UI Kit в код → Код помещают в репозитории

UI Kit и репозиторий связаны с помощью токенов. Это единицы информации, которые хранят в себе константы: например цвет, радиус скругления кнопки, параметры шрифта и т. д. Если поменять значение токена в Фигме, оно попадает в репозиторий и затем автоматически синхронизируется с сайтом.

Когда и кому нужна дизайн-система

• На краткосрочных проектах, где нужно быстро проверить гипотезы и не требуется больших затрат на поддержку.

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

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

• У вас несколько команд, которые работают над одним продуктом, и им нужно поддерживать консистентность.

Однако есть и ложка дегтя

• Дизайн-система может привести к шаблонности продукта: страницы начинают выглядеть слишком однотипно, а сделать какую-то необычную фичу становится трудно.

• Внедрять дизайн-систему сложно и дорого, особенно на начальном этапе. Да, расходы на дизайн снижаются. Зато появляется работа на поддержание и развитие самой дизайн-системы в отделе разработки.

P. S. Го к нам в канал о дизайне :)

Nike представила кроссовки Air Force 1 в дизайне 404 Error («Ошибка 404»).

Производитель изменил форму кроссовок, нанёс на стельки строки с символами 0 и 1, а также добавил на язычок цифры 404 поверх названия модели.

Сбоку на обуви написано: «404 Error, the requested Upper was not found» («Ошибка 404, запрошенный верхний элемент не найден», что умело интегрирует веб-жаргон в физический дизайн, воплощая в себе суть этого эксклюзивного решения цифровой эпохи).

Кроссовки ожидаются в продаже летом 2024 года по цене от $150.

Главные принципы инклюзивного дизайна 

Инклюзивный дизайн — метод проектирования интерфейса с учетом потребностей как можно большего числа пользователей.

Чтобы соответствовать высокому уровню доступности по WCAG, необходимо придерживаться 4 принципов.

1. Воспринимаемость

• Всегда должна быть текстовая альтернатива нетекстовому контенту.

• Капча должна быть представлена в нескольких формах.

• Нельзя пренебрегать контрастностью.

2. Понятность

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

3. Управляемость

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

4. Надежность

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

Больше примеров доступных и недоступных интерфейсов найдете в нашей статье. А за вдохновением приглашаем в тг-канал нашей дизайн-команды. 

Google представила открытую библиотеку jpegli с реализацией кодировщика и декодировщика изображений в формате JPEG.

Библиотека включает дополнительные оптимизации для повышения эффективности кодирования, позволяющие на 35% увеличить степень сжатия высококачественных изображений, по сравнению с традиционными кодеками JPEG.

В сравнении с libjpeg-turbo проект jpegli позволяет добиться аналогичного уровня качества при снижении битрейта на 32%. На уровне API и ABI библиотека полностью совместима с libjpeg62 и может применяться для её прозрачной замены. Код jpegli написан на языке С++ и распространяется под лицензией BSD.

Библиотека jpegli позволяет кодировать изображения с выделением 10 и более битов на цветовой компонент. При этом результат работы алгоритмов кодирования адаптируется для традиционной для формата JPEG модели, допускающей использование только 8 бит на цветовой компонент. Подобная особенность позволяет сохранить совместимость с уже существующими декодировщиками, рассчитанными на 8-битовое представление цветовых составляющих.

Кодируемые при помощи jpegli изображения полностью соответствуют стандарту JPEG, не требуют специфичных декодировщиков и могут просматриваться в существующих просмотрщиках JPEG и веб‑браузерах. Применение для распаковки изображений, сжатых при помощи jpegli, собственного декодировщика позволяет добиться дополнительного снижения артефактов. Скорость кодирования при помощи jpegli сопоставима с библиотеками libjpeg‑turbo и MozJPEG.

Источник: OpenNET.

7 марта 2024 года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust.

Исходный код проекта выложен на GitHub под лицензией MIT License.

Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки.

Разработчики пояснили, что этот выпуск Boa также знаменует собой серьёзное обновление дизайна сайта проекта и появление нового логотипа.

«Поскольку Boa используется всё большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта.

Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом.

Selectel UX & Research Meetup#3

14 марта, 18:30 

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

🚀 Регистрируйтесь и подключайтесь онлайн или приходите в наш офис.

Препарируем Material Design и находим родовые травмы

Подробнейшая документация, но..

• Неконсистентный и неуниверсальный дизайн.

• Сомнительный пользовательский опыт чуть ли не в каждом компоненте.

• Реализация от Гугла в Вебе безбожно тормозит и глючит.

• Тяжёлая поддержка разных форм-факторов и инпут-девайсов.

В продолжение темы: Бестолковый дизайн, Mathematics Driven Design.

Мета: Форум Гипер Дев, Канал с новостями, Донаты.

WT Content Image gallery v.1.2.0

Пакет плагинов галереи изображений и видео для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content. Плагин работает по шорткодам {gallery}...{/gallery} и {gallery tmpl=tmplName}...{/gallery}, где tmpl - макет tmplName.php в plugins/content/wtcontentimagegallery/tmpl.

Что нового?
➕ Атрибуты alt и title из файла labels.txt.

Если Вы вставляете путь к директории с изображениями, то Вы можете указать для каждого изображения атрибуты alt и title в файле labels.txt, который следует положить в директорию рядом с изображениями. В конце строки символ | помещать не нужно.

Содержимое файла должно содержать информацию в следующем виде: имя_файла.webp | атрибут alt | атрибут title. Для каждого файла информация содержится в отдельной строке. Title для изображений можно не указывать, тогда строка будет вида image_2.webp|alt for image_2.

👩‍💻 Joomla 5 ready
Успешно проверена работа расширения на Joomla 5.

Страница расширения GitHub расширения

Анимация в Spline 3D

Анимация в Spline предельно упрощена. Настолько, что там нет привычного таймлайна с ключевыми кадрами.

Вместо ключевых кадров здесь используются Состояния (States). Состояния обрабатываются отдельно для каждого объекта. Можно настраивать типы взаимодействий, их длительность, графики и задержки перед стартом.

По типам взаимодействий нужно будет рассказать отдельно. Я использовал для этого ролика Transition.

Книга «Дизайн маркетплейса». Вступление

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

Формат

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

Об авторе

Итак, меня зовут Евгений Еликов. Я – ведущий UX/UI и продуктовый дизайнер. Больше 20 лет занимаюсь дизайном сайтов, порталов, веб-сервисов, интернет-магазинов, игр, CRM/ERP – систем, а также мобильных приложений.

Последние 3 года я работаю с международной маркетплейс-платформой. За это время провёл полный реинжиниринг дизайна портала покупателя и системы управления маркетплейсами для Индии, Египта, Кот-д’Ивуара и России.

Накопленным опытом я и хочу с вами поделиться.

Кому подойдёт эта книга

Книга подойдёт начинающим и опытным дизайнерам, перед которыми встала задача дизайна интернет-магазина или маркетплейса.

Подробнее - в статьях и на сайте

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

Часов по плану довольно много. За сентябрь я успел дать лабу по сетевой адресации, 2 лабы по HTML, лабу по CSS. На очереди лаба по микроразметке, лаба JS, лабы по различным конструкторам сайтов.

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

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

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