Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma



В этой статье я продемонстрирую простую и эффективную интерфейсную архитектуру, которая позволит эффективнее генерировать новые разделы продукта или вносить изменения в будущем. Ныне подход к разработке визуальной части интерфейса внутри организации / команды изменился в более качественную сторону. Современные инструменты визуальной разработки позволяют использовать взаимосвязи между элементами, упрощая кастомизацию отдельных модулей или целых экранов; группировать эти модули в библиотеки компонентов и давать доступ всем уполномоченным. Такие принципы можно называть дизайн-языком, дизайн-системой или продуктовым дизайном. Как хотите. Суть остаётся неизменной: заложив правильный алгоритм разработки всех графических модулей, вы получаете безграничную масштабируемость на все типы устройств и разрешения экранов. По принципам Атомарного дизайна я начну с атомов и буду двигаться дальше к более сложным компонентам. Буду работать в Figma и продемонстрирую, что у Sketch появился конкурент, которого не стоит недооценивать.
Читать дальше →

[Перевод] Вертикальный ритм

image

Сетка 8pt — это мощная система для создания последовательных и визуально привлекательных пользовательских интерфейсов. Этот пост о том, как установить вертикальный ритм и типографию в сетке 8pt. Чтобы лучше понимать материал, зацените статью "Введение в систему 8pt сеток" и "Сетка на основе 8pt: обводка и разметка".

Что же такое вертикальный ритм и почему он так важен


Ритм достигается тогда, когда элементы вашего дизайна состоят из повторяющихся шаблонов. Это позволяет вашему окончательному дизайну выглядеть преднамеренно, профессионально и последовательно.
Читать дальше →

[Перевод] Взлом визуальной системы: 11 оптических иллюзий в графическом дизайне

Глубока ли кроличья нора? image Сколько минут вам потребуется, чтобы понять в чем фишка? Фрэнсис Бэкон в 1620 году разделил источники человеческих ошибок, стоящих на пути познания, на четыре группы, которые он назвал «призраками» или «идолами» (лат. idola).
  • «Призраки рода» проистекают из самой человеческой природы, они не зависят ни от культуры, ни от индивидуальности человека. «Ум человека уподобляется неровному зеркалу, которое, примешивая к природе вещей свою природу, отражает вещи в искривлённом и обезображенном виде».
  • «Призраки пещеры» — это индивидуальные ошибки восприятия, как врождённые, так и приобретённые. «Ведь у каждого, помимо ошибок, свойственных роду человеческому, есть своя особая пещера, которая ослабляет и искажает свет природы».
  • «Призраки площади (рынка)» — следствие общественной природы человека, — общения и использования в общении языка. «Люди объединяются речью. Слова же устанавливаются сообразно разумению толпы. Поэтому плохое и нелепое установление слов удивительным образом осаждает разум».
  • «Призраки театра» — это усваиваемые человеком от других людей ложные представления об устройстве действительности. «При этом мы разумеем здесь не только общие философские учения, но и многочисленные начала и аксиомы наук, которые получили силу вследствие предания, веры и беззаботности». [...Далее...

Paradigm  —  Дизайн-система Mail.Ru Group, часть 1: Визуальный язык

Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиа-проекты, мобильный веб и частично productivity-сервисы (постепенно подключаются и другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Конечно, ещё не во всех сервисах всё хорошо, а где-то первый редизайн не решил всех проблем, но огромный рывок за прошедшие годы трудно не заметить. Чтобы ускорить процесс обновления и сделать нашу работу публичной, мы открываем наружу часть нашей дизайн-системы Paradigm.

Дизайн-система Mail.Ru Group Paradigm Читать дальше →

[recovery mode] 7 способов улучшить дизайн сайта

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

Ученые Стэнфордского университета провели опрос, который показал, что 46% респондентов составляют мнение о сайте на основании его внешнего вида и интерфейса. Если дизайн не нравится пользователю, то и весь контент кажется ненадежным и не заслуживающим доверия. В этой статье хочу поговорить о том, какие есть способы для того, чтобы улучшить дизайн сайта.
Читать дальше →


Облако тэгов

Последние посты