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

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

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

Читать далее

https://habr.com/ru/post/589465/?utm_campaign=589465&utm_source=habrahabr&utm_medium=rss

Figma — это как Adobe Illistrstrator, только проще, в браузере и проекты можно шарить для совместной работы. И бесплатно.

Если вы обладаете Adobe Illistrstrator, то автоматом сможете в Figma. Если вы не знаете, с чего начать осваивать векторную графику, Figma — легкий вариант для старта.

Я сделала подборку самых популярных бесплатных обучалок по Figma с YouTube. Кстати, не обязательно в совершенстве знать английский, чтобы шаг за шагом повторять то, что чуваки показывают на скринкасте. Все понятно из видеоряда.
Читать дальше →

https://habr.com/ru/post/588058/?utm_campaign=588058&utm_source=habrahabr&utm_medium=rss

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

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

- разные отступы у элементов;

- не прорисованы состояния кнопок;

- не хватает нужных элементов и т. д.

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

Читать далее

https://habr.com/ru/post/589121/?utm_campaign=589121&utm_source=habrahabr&utm_medium=rss

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

Если же вникнуть в тему работы с сообщениями, то окажется, что один только интерфейс чата — это такая штука, при создании которой нужно учесть невероятное количество деталей. Особенно — если это чат некоей платформы, сравнимой по масштабам с Facebook.



В этой статье я расскажу об устройстве компонента, представляющего собой блок сообщения Facebook Messenger, покажу варианты его стилизации, поделюсь некоторыми интересными находками.
Читать дальше →

https://habr.com/ru/post/587724/?utm_campaign=587724&utm_source=habrahabr&utm_medium=rss

Привет! Сегодня мы разберем еще одну важную тему, о которой не очень-то много пишут, – как создать рекламный креатив и не забыть при этом никакие требования, предъявляемые к будущим визуалам с разных сторон:

Читать далее

https://habr.com/ru/post/588811/?utm_campaign=588811&utm_source=habrahabr&utm_medium=rss

Данная публикация навеяна вот этим. На самом деле существует достаточно простой и удобный способ "вернуть всё как было". О нём и пойдёт речь.

Читать далее

https://habr.com/ru/post/588701/?utm_campaign=588701&utm_source=habrahabr&utm_medium=rss

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

Рассмотрим пять типов сварки: горячей плитой, электромагнитной индукцией, вибрацией, ультразвуком и лазером. Это будет интересно не только инженерам и технологам. :-)

Напомним, что в первой части мы на примере своих инженерных разработок объясняли, как работают самые популярные методы герметизации: уплотнители и литье — многокомпонентное и переформовка (overmolding). А в этот раз в конце будет сводная таблица всех методов — в помощь читателям, которые хотят выбрать оптимальную технологию производства для своего hardware-проекта.

Читать далее

https://habr.com/ru/post/588578/?utm_campaign=588578&utm_source=habrahabr&utm_medium=rss

Зачем вообще в 2021 году заниматься банкоматами? Кажется, что уже все кто только можно перешли на безнал. Но на самом деле количество пользователей банкоматов Тинькофф растет, причем быстрее, чем количество клиентов. То есть людям все равно нужен нал: они платят за квартиру или получают зарплату на счет в другом банке и перекладывают ее в Тинькофф.

Сейчас в сети Тинькофф больше 2500 банкоматов, и около 27% аудитории банка регулярно ими пользуется.

Интерфейс банкоматов, который работал все это время, — довольно хороший. Он занимает призовые места в рейтингах, и пользователи им довольны.

Но мы решили его поменять.

Читать далее

https://habr.com/ru/post/588410/?utm_campaign=588410&utm_source=habrahabr&utm_medium=rss

В этой статье мне бы хотелось поделиться пользовательским опытом, связанной с Windows 11, которой я на момент написания статьи пользуюсь примерно месяц с лишним.

Читать далее

https://habr.com/ru/post/588460/?utm_campaign=588460&utm_source=habrahabr&utm_medium=rss

Когда Илон Маск запустил в космос кабриолет, интернет наполнился возмущёнными комментариями неравнодушной общественности: что за глупая идея и к чему это бесполезная вещь в космосе? Лучше бы запустил что-нибудь полезное для науки! Однако до автомобиля Маска в космосе оказалось немало непонятных и, в общем, бесполезных вещей: грампластинка в межзвёздном пространстве, осколочное ядро на Луне, одноцентовая монета на Марсе, игрушки у Юпитера, и вообще непонятная загогулина в поясе астероидов…
Читать дальше →

https://habr.com/ru/post/587540/?utm_campaign=587540&utm_source=habrahabr&utm_medium=rss

Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.

Ретина-дисплеи вывели смартфоны на новый уровень. По словам самого Стива Джобса, на ретина-дисплеях удалось достичь такого PPI, на котором человеческий глаз перестаёт различать отдельные пиксели. Текст стал выглядеть так, словно он выведен не на экран мобильного устройства, а напечатан в хорошей книге.

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

Читать далее

https://habr.com/ru/post/585864/?utm_campaign=585864&utm_source=habrahabr&utm_medium=rss

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

В 2020 году и Microsoft, и Sony выпустили консоли «нового поколения», которые объективно обладают значительно худшими интерфейсами, чем ежедневно используемые вами программы.

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

Я потратил несколько месяцев на тестирование Xbox Series X и Playstation 5, мучаясь при этом от мелких недоработок. И хотя я по-прежнему считаю контроллер ограничивающим фактором, причиной этой проблемы он не является.

Вам необязательно быть фанатом какой-то из этих консолей, чтобы получить удовольствие от статьи — я составил её таким образом, чтобы уроки, связанные с UX, относились к и общему дизайну ПО.
Читать дальше →

https://habr.com/ru/post/587192/?utm_campaign=587192&utm_source=habrahabr&utm_medium=rss

Сначала эскиз и ТЗ:

1. Корабль должен быть таких размеров, чтобы взгляд ребенка, точнее детей, не ограничивался маленьким экраном, вобщем он должен быть достаточно большим.

2. Он должен быть объемным, так чтобы визуально ты проваливался в пространство своего корабля и ощущал себя внутри.

3. В нем должна быть огромная панель с множеством кнопок управления. Было бы интересно эти кнопки завязать с контроллером (например Ардуино) и чтобы будущие капитаны корабля проходили задание по заранее написанному алгоритму – например взлет корабля или заход на посадку. Данные задания можно сопровождать комментариями диспетчера с земли.

4. В центре корабля будет располагаться планшет с записанными на него познавательными фильмы и транслировать их юным капитанам корабля.

5. В корабле должно быть много разного света. И так чтобы этот свет можно было включать, отключать в зависимости от происходящего.

Ну как? Посмотрим, что у нас получится.

Читать далее

https://habr.com/ru/post/587218/?utm_campaign=587218&utm_source=habrahabr&utm_medium=rss

UPD: эта статья была написана до выхода интереснейшего материала о нейросети ruDALL-E. Мы решили всё равно её опубликовать — таким образом у читателей будет возможность сравнить изображения, сгенерированные отечественной и зарубежной сетями. Дальнейший текст публикуется без изменений.

Во времена старого Баша мне запомнилась одна цитата:

kok:
Подскажите какой прогой перегонять книги из txt в mp3
Izzzum:
^^^^^ No Comment а почему сразу не в 3gp или XviD?
kok:
А в каком по твоему формате аудиокниги?
kok:
Или ты думаешь, что какойто дурень сидит и начитывает перед микрофоном?

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

Читать дальше →

https://habr.com/ru/post/586696/?utm_campaign=586696&utm_source=habrahabr&utm_medium=rss

25 лет назад Якоб Нильсен описал 10 основных принципов проектирования взаимодействия. Эти принципы были разработаны на основе многолетнего опыта в области юзабилити-инженерии и стали правилами для взаимодействия человека и компьютера.

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

Читать далее

https://habr.com/ru/post/587180/?utm_campaign=587180&utm_source=habrahabr&utm_medium=rss

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

Читать далее

https://habr.com/ru/post/586830/?utm_campaign=586830&utm_source=habrahabr&utm_medium=rss

Дальтонизм (недостаток цветового зрения) означает снижение способности видеть цвет или различия в цвете. Согласно данным сайта colourblindawarness.org, недостаток цветового зрения есть у 8% мужчин и 0,5% женщин. Всего в мире более 300 миллионов человек страдают той или иной формой цветовой слепоты.

Насколько это много? Возьмем школу для мальчиков в графствах Англии, где учится 1000 учеников. Примерно у 100 из них будет недостаток цветового зрения: 12–13 будут дейтеранопами, 12–13 — протанопами, у 12–13 будет одна из форм протаномалии и у 62 — дейтераномалия того или иного вида. Примерно у половины нарушение будет умеренной или тяжелой степени.

Такое положение дел влияет и на организацию взаимодействия с пользователем: дизайнерам часто приходится учитывать, какие последствия для дальтоников будет иметь выбор тех или иных цветов. Но в какой степени цвета влияют на дизайн или игровой процесс? Чтобы разобраться в этом, я решила провести небольшое исследование на примере чрезвычайно популярной игры Among Us, в которой цветовое кодирование — основной способ различения игроков.

Читать далее

https://habr.com/ru/post/586248/?utm_campaign=586248&utm_source=habrahabr&utm_medium=rss

В этой статье мы расскажем и покажем, как обеспечить герметичность корпуса для электроники — сделать его непроницаемым для воды и пыли. Под катом вас ждет разбор стандарта IP с разными степенями защиты и сравнительный анализ методов герметизации на серийном производстве.

В первой части сфокусируемся на самом популярном материале — пластике — и посмотрим, как он себя проявляет при склейке, использовании уплотнителей и литье — многокомпонентном и перевормовке (overmolding). Во второй части разберем пять видов сварки. Этот метод герметизации подходит не только для металла, но и для термопластов.

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

Читать далее

https://habr.com/ru/post/586112/?utm_campaign=586112&utm_source=habrahabr&utm_medium=rss

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

В свое время Алан Купер сформулировал «метод персон» (или персонажей) — фреймворк, в рамках которого разрабатывается усредненный портрет типичного пользователя какого-либо интерфейса. По мнению автора, только проявив эмпатию, поняв цели и задачи людей, можно придумать какое-либо решение и разработать удобный продукт, который им понравится.

Несмотря на то что с момента появления книги было написано большое количество гайдов по персонам, отрасль не стояла на месте. Появлялись новые методы проектирования и другие интересные фреймворки. И вроде бы персонажи отошли на второй план, уступив место новым механикам. Например, многие сторонники Jobs-To-Be-Done убеждены в том, что их методология значительно превосходит персоны в плане практического применения. Но так ли это?

Мы считаем, что персоны сейчас более чем актуальны и способны повысить эффективность процесса работы над цифровым продуктом. Далее в статье мы покажем, что данный метод вовсе не противоречит новым подходам, в том числе Jobs-To-Be-Done. Но, наоборот, прекрасно их дополняет, а в некоторых случаях лежит в основе. В общем, обо всем по порядку.

Читать далее

https://habr.com/ru/post/585832/?utm_campaign=585832&utm_source=habrahabr&utm_medium=rss

Хочу поделиться с вами, как мы проводим продукт-сессии - процесс в течении которого команда разработчиков, отталкиваясь от исходных данных, выходит на идеи и концепции новых продуктов.

Читать далее

https://habr.com/ru/post/585818/?utm_campaign=585818&utm_source=habrahabr&utm_medium=rss