Pull to refresh

Figma: Scroll to новая фича

Mobile applications design *Design

Сегодня Figma выкатила новую фичу по якорным ссылкам в прототипах. Данный функционал позволяет делать при клике на объект, скролл до нужного фрейма в рамках одного фрейма.

Локализованный файл лежит тут

Отрезок в статье тут

Читать далее
Total votes 7: ↑4 and ↓3 +1
Views 13K
Comments 15

Как создать продукт, желанный для клиента

AGIMA corporate blog Usability *UML Design *

Мы готовим онлайн-митап для проджект- и продакт-менеджеров, руководителей digital-компаний и всех, кто отвечает за пользовательский опыт. 31 мая в прямом эфире поговорим об инструментах, которые помогут сделать продукт, востребованный у людей и полезный для бизнеса.

На митапе выступят эксперты из М.Видео-Эльдорадо, Alfa Research Center и INTEGRAL DESIGN. Они расскажут, как изменилась система ценностей потребителя, что влияет на решения клиентов, как разработать продуктовую стратегию и оценить эффективность спринтов в дизайне.

Под кнопкой «далее» вы найдете подробную программу митапа.

Читать далее
Rating 0
Views 425
Comments 0

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

Acronis corporate blog Web design *Interfaces *


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


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

Читать дальше →
Total votes 33: ↑33 and ↓0 +33
Views 24K
Comments 34

БЭМ + React: гибкая архитектура дизайн-системы

Альфа-Банк corporate blog Open source *CSS *JavaScript *HTML *



Дизайн — это фашизм. Фашизму нужна питательная среда. Он начинает раскрываться в полной мере только на крупных масштабах. Идеальная среда для фашизма — это большая компания с огромным количеством продуктов. Например, Google или… Альфа-Банк. Фашизм априори не гибок…
Читать дальше →
Total votes 34: ↑28 and ↓6 +22
Views 25K
Comments 63

Дизайн–система Acronis. Часть вторая. Иконки, SVG шрифты, Gulp

Acronis corporate blog Web design *Interfaces *



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


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

Читать дальше →
Total votes 28: ↑28 and ↓0 +28
Views 12K
Comments 26

Generating multi-brand multi-platform icons with Sketch and a Node.js script — Part #1

Badoo corporate blog JavaScript *Interfaces *Node.JS *Mobile applications design *


TL;DR


Using a custom build script in Node JS, it is possible to manipulate a series of Sketch files, and then, using an internal Sketch tool, automatically export their assets, to generate multiple icon libraries, for multiple platforms and different brands, that support dynamic colourisation of the assets via design tokens, and also AB testing of the assets via naming convention. Easy peasy :)


Well, actually it’s not that easy, but it can certainly be done. This post is a detailed explanation of how we did it, and what we discovered along the way.

The problem we were trying to solve


At Badoo we build a dating app. Actually, multiple dating apps. For multiple platforms (iOS, Android, Mobile Web, Desktop Web), across multiple teams.

We use hundreds of icons in our apps. Some of them are the same across different apps, some are very specific to the brands the apps reflect. The icons are continuously evolving, in sync with the evolution of the design. Sometimes completely new icons are added, while others get updated, and still others get dropped (although, they often remain in the codebase).
Read more →
Total votes 30: ↑29 and ↓1 +28
Views 1.9K
Comments 0

Sketch + Node.js: генерируем иконки для множества платформ и брендов

Badoo corporate blog JavaScript *Interfaces *Node.JS *Mobile applications design *
Translation


Нет ничего проще, чем добавить иконку в проект: нужно всего лишь написать дизайнеру, он экспортирует её из Sketch и пришлет вам нужный вариант, а вы используете ее у себя в коде. Если же у вас с десяток проектов, несколько платформ и множество А/Б-тестов на дизайн, то достаточно делать всё то же самое, только в 40 раз чаще и нигде не ошибаться… либо постараться автоматизировать процесс. Под катом — первая часть перевода статьи моего коллеги Cristiano Rastelli про один из примеров такой автоматизации.

Проблема, которую мы решали


Мы в Badoo разрабатываем приложение для знакомств. Вообще-то это несколько приложений, каждое из которых функционирует на нескольких платформах (iOS, Android, Mobile Web, Desktop Web), и работу над ними ведут несколько команд.

При разработке мы используем сотни различных иконок. Некоторые одинаковы в каждом приложении, другие — соответствуют тому или иному бренду. Иногда дизайн меняется, а вместе с ним меняются и иконки: появляются новые, какие-то обновляются, какие-то — удаляются (но часто остаются при этом в кодовой базе).
Читать дальше →
Total votes 23: ↑22 and ↓1 +21
Views 6.5K
Comments 4

Acronis Design: Дополнительные инструменты дизайнера

Acronis corporate blog Interfaces *Design


Я Сергей, ведущий дизайнер в компании Acronis. В этой статье я расскажу о тех инструментах, которые мы не только внедряем, но разрабатываем для других дизайнеров внутри компании. Речь пойдет о плагинах для Sketch, консольных утилитах и расширениях для Chrome.

Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Views 3.2K
Comments 1

Пространство, сетки и макеты

Web design *Graphic design *Design
Tutorial
Translation
В этой статье автор рассказывает о том как подойти к созданию дизайн-системы, рассказывает о её основах и том, как применить описанные методы и понятий в текущем дизайн проекте. Новички смогут узнать базовые понятия, а профессионалы могут освежить или покритиковать содержаний данной статьи.

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


Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views 9.3K
Comments 2

Дизайн система Société Générale: Гармония дизайна и разработки

Web design *Interfaces *Mobile applications design *Graphic design *Design
Translation
Предлагаем вашему вниманию перевод истории о создании дизайн системы, рассказанной дизайнером из Societe Generale.

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

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


Читать дальше →
Total votes 13: ↑12 and ↓1 +11
Views 4.3K
Comments 0

Дизайн-токены способны на большее: создаем единый источник информации о компонентах UI

Badoo corporate blog Development of mobile applications *Interfaces *Mobile applications design *
Translation

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


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


image


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


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


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


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


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

Читать дальше →
Total votes 19: ↑19 and ↓0 +19
Views 15K
Comments 10

Opium.Fill — стандартизация цветовой схемы глазами программиста

CSS *JavaScript *Interfaces *Graphic design *Design
Синее лицо, из глаз растут грибы

Привет. Сегодня покажу вам цветовую схему, которой пользуюсь последние 2 года. Она была придумана, чтобы на проблемном проекте избавиться от огромного количества переменных в CSS. А потом оказалось, что эти принципы можно применить почти к любому проекту.

В общем, попробую объяснить, как дизайнеры используют цвет в UI и как всё это можно «типизировать», не вгоняя дизайнеров в жёсткие рамки. Приведу примеры реализации на React JS (для разработчика) и в Figma (для дизайнера). Привязки к React и Figma у схемы нет, просто мне в них привычнее.

В схеме нет ничего хитрого и уникального (может, только название). Все идеи висят в воздухе. Можно воспринимать её как мой best practice по работе с цветом в приложениях. Opium.Fill — это общие принципы, совмещённые с любовью давать всему подряд имена.

Систему можно использовать совместно с Material Design.

Статья написана для front-end разработчика и немного для дизайнера.
Читать дальше →
Total votes 16: ↑16 and ↓0 +16
Views 13K
Comments 10

От библиотеки компонентов к дизайн-системе

ISPsystem corporate blog JavaScript *Angular *


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

Читать дальше →
Total votes 24: ↑24 and ↓0 +24
Views 6.9K
Comments 4

Ask me anything! Задай вопрос Android-команде Badoo

Badoo corporate blog Development of mobile applications *Development for Android *Kotlin *IT career
Предлагаем продолжить добрую традицию Ask me anything на Хабре и поговорить про разработку Android-приложений. Сегодня и завтра Android-команда Badoo будет на связи и ответит на любые вопросы о разработке и тестировании приложений с многомиллионной аудиторией, даст советы начинающим и расскажет про особенности платформы. Если вы столкнулись с какой-то проблемой или у вас есть вопрос по теме, пишите нам!



Обещаем ответить на все комментарии первого уровня, которые появятся здесь до 16:00 17 июля по московскому времени, а по возможности — и на более поздние.

Немного фактов о нас. Badoo и Bumble — одни из самых популярных дейтинг-сервисов в мире: только в Google Play у нас 210 млн скачиваний. В Android-приложениях больше 1,3 млн строк кода. В Android-команде больше 20 разработчиков. Основной язык разработки — Kotlin, архитектурные паттерны — MVI и RIBs, база данных — SQLite.

Под катом — подробнее о нашей команде и о темах, на которые мы можем поговорить.

UPD: Мы завершаем AMA и прощаемся. Спасибо всем за вопросы!

Читать дальше →
Total votes 27: ↑25 and ↓2 +23
Views 4.2K
Comments 52

Зачем нужна выделенная Frontend Core команда и как мы внедряли дизайн систему

Домклик corporate blog Website development *JavaScript *ReactJS *Development Management *


Всем привет, меня зовут Ростислав, я занимаю должность Front Lead в компании ДомКлик. Хочу поделиться с вами опытом создания Web Core команды и сразу ответить на следующие вопросы:


  • Необходима ли такая команда в компании?

После года существования команды Web Core, у всех сложилось понимание, что в больших компаниях это необходимо, а в стартапах — не обязательно.


  • Выгодно ли внедрять такую команду?

Безусловно. Изначально было сложно измерить и спрогнозировать выгоду от её создания, все расчеты, P&L были на словах, в цифрах — только примерные предположения. Спустя год мы можем посчитать сэкономленное время, профиты, и все расчеты говорят о том, что это было не зря.


  • На долгую перспективу ли эта команда?

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


  • Чем эта команда занимается?

Основное направление — дизайн система, но по ходу её разработки у нас появилось еще много интересных задач.

Читать далее
Total votes 28: ↑28 and ↓0 +28
Views 9.1K
Comments 16

Митап «Организация работы в креативной команде» – видеозаписи докладов

Wrike corporate blog Mobile applications design *Project management *Personnel Management *Design


24 сентября Wrike организовал митап для сотрудников креативных команд (дизайнеров, маркетологов) и проджект-менеджеров, чтобы обсудить, как построить процесс, который обеспечит прозрачность работы, предсказуемые результаты и разумные сроки выполнения даже самых глобальных проектов.

Дизайн-лиды из больших продуктовых компаний – Wrike, Miro и Revolut – на примерах показали, как эффективно решались их задачи благодаря правильной организации командной работы.
Если пропустили, делимся видеозаписями.
Total votes 5: ↑5 and ↓0 +5
Views 915
Comments 3

Работа с проблемными *.dwg-файлами в среде nanoCAD версия 2.0

Нанософт разработка corporate blog CAD/CAM *
Tutorial

Формат *.dwg — самый популярный формат хранения электронных чертежей. Зачастую *.dwg-файлы хранятся годами, сохраняются в различных системах, используются разными пользователями и из-за этого могут накапливать различные ошибки. Чтобы обезопасить себя и свои документы, перед началом работы с файлами в nanoCAD рекомендуется выполнить ряд действий для их проверки, очистки и оптимизации. Ниже мы рассмотрим основные инструменты и методы работы с *.dwg-файлами.

Читать далее
Total votes 6: ↑6 and ↓0 +6
Views 4.2K
Comments 3

Design Sapiens: путь к дизайн-системе, которой удобно пользоваться

ISPsystem corporate blog Working with icons *Interfaces *Studying in IT Design
Tutorial

Я UX/UI-дизайнер, уже два года работаю в ISPsystem. Одной из глобальных моих задач все это время было сделать нашу дизайн-систему удобной для использования.Полноценная дизайн-система — с гайдами, состояниями и борьбой с разработчиками — испытание не только для новичка в дизайне, но и для опытного проектировщика. Сейчас мы на пути к идеальной дизайн-системе, но решили поделиться опытом ее проработки - кому-то может помочь избежать наших ошибок :)

Для чего все затевается

ISPsystem создает программное обеспечение для управления IT-инфраструктурой: физическим оборудованием, серверной виртуализацией, веб-сервером и сайтами. Сейчас существует четыре продукта со схожей дизайн-системой (VMmanager, DCImanager, ISPmanager и BILLmanager) и один — со своей собственной (billix).

Читать далее
Total votes 5: ↑5 and ↓0 +5
Views 3.6K
Comments 3

Лайфхаки печати nanoCAD

Нанософт разработка corporate blog CAD/CAM *
Tutorial

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

Читать далее
Total votes 6: ↑6 and ↓0 +6
Views 3K
Comments 0
1