Дизайнер на всю голову

Дизайнер на всю голову

@rwh_blog
Изображение канала: Дизайнер на всю голову
618 подписчиков
24 поста
Посты
Не так давно меня спрашивали (но и давно тоже, да и постоянно :) где я беру заказы. Вот еще раз ответ (свеженький) на этот вопрос в виде скриншота переписки с клиентом 🙃
https://content.desigram.ru/static/e8d5e6e3-054e-43b8-b0ff-deb9d814e359.jpg
Продолжу про интерфейс CRM-системы доставки. Начало в посте 1 и посте 2.
Чтобы не нагружать большим количеством информации буду рассказывать об отдельных элементах, экранах, функционале. У каждой компании есть должности: руководитель, менеджер заказов, колл-центр и любая роль, которая будет заведена. У должностей может быть рабочий стол — персональный экран с оперативной информацией: текущие заказы на кухне, курьера на смене, обращения в колл-центр, отчеты и так далее. Самая большая сложность тут — правильно структурировать блоки, выставить приоритеты, так как рабочие столы будут визуально сильно нагружены. На скрине скриншот текущий системы, который я сейчас переосмысливаю и покажу результат чуть позже. #проект #crm #erp Дизайнер на всю голову
https://content.desigram.ru/static/fc3c05bd-db79-4573-875d-a925aac7edc1.jpg
Сегодня показываю первые результаты работы над интерфейсом админ панели, о которой писала в понедельник.
Работаю с экранами, которые важны для супер-администратора: Создание и просмотр компании, создание группы прав в админке. Это концепт, главное сейчас — проектирование. У меня есть некоторые вопросы по функционалу, который нужно добавить/изменить в действующую CRM. Обсудим сегодня все вопросы, включая туда ли двигаемся в дизайне и продолжу дальше. #crm #проект Дизайнер на всю голову
https://content.desigram.ru/static/2f617954-24be-479f-ba10-d7cfcfc193e7.jpg
В этом году продолжаю работу над интерфейсом платформы администрирования учебных программ. Проектом я занималась в прошлом году и писала об этом.
Сейчас стоят задачи: 1) переработать выбранную дизайн-систему 2) пересобрать на ее основе админку (то есть сделать редизайн) 3) платформа не нравится и функционально, поэтому занимаюсь и ux-ом. Нюанс, который сжирает много времени: технически макет сложный. Есть требование разработчиков — содержание экрана должно быть реализовано вложенными компонентами. Чем больше уровней вложенности, тем труднее редактировать отдельные элементы и тем дольше длится работа. При создании адаптивной версии дизайна будет непросто управлять поведением таких компонентов. Сейчас создаю настраиваемый под пользователя дашборд. Теперь можно легко выбрать нужные метрики, добавить ссылки на часто используемые страницы и просматривать детализированные отчеты. Пока что в системе нет уведомлений, но дашборд уже предоставляет информацию, которая помогает пользователю понять, какие действия ему нужно предпринять в данный момент. #проект Дизайнер на всю голову
https://content.desigram.ru/static/cdd7c39b-9b86-4bda-9a02-f6d19c996c44.jpg
🎶О первом проекте года – музыкальном приложение «Rhythm guru». 🎶
Как строилась работа и что в результате получилось. Рассказала в предыдущем посте какая была задача и что я делала на старте проекта. Определив все сложности, проблемы и задачи я начала с быстрого прототипа сценариев. А теперь конкретика!😊 UX ✦ Сократила на 2 экрана сценарий выбора песен. ✦ Переработала экран меню, основные разделы будут доступны в нижней навигационной панели. ✦ Добавила новый функционал, который обсуждали на старте. ✦ Переработала логику выбора игроком сложности игры. Игроков мотивирует, в том числе, просмотр рейтинга игроков и статистики конкретных игроков. На основании данных игрок может принять решение будет он соперничать с кем-либо на основании этой статистики или нет. Это возможная основа для развития в дальнейшем мультиплеерной игры. Фичи ✦ Придумала новую фичу для большего вовлечения в игру: когда игрок выигрывает, ему предлагается продолжить игру с новыми песнями того же уровня сложности. ✦ Добавила экран «get ready» с отчетом старта, чтобы игрок успел приготовиться к игре. ✦ Предложила решение с длинными названиями песен и авторов. В старом дизайне высота карточки менялась из-за длины названия. Теперь высота одинаковая и длинные названия будут показываться бегущей строкой. Были еще некоторые изменения и все остальное, что планировалось изначально в UX (и о чем я писала ранее). Дизайн Теймур хотел все темное, игровое, без детских элементов) Подобрала референсы и на их основе сделала концепцию дизайна. Обсудили ее с Теймуром и решили поберечь глаза пользователей и делать не такой яркий дизайн в той же концепции ). Убрала избыточные цвета и акценты. В процессе решали обычные точечные вопросы по дизайну, например, Теймур хотел сократить отступ, которое выделяется под челку (он же динамический остров). Показала почему его невозможно занять контентом игры. Глобальных вопросов и комментариев по дизайну не было, поэтому дизайн сделался быстро). Результат работы в цитате от Теймура: «Крутая работа, мне очень нравится» 💪 Экраны прилагаю, игру себе оставляю для развития моторики и просто для развлечения :)🎮 #проект #мобильноеприложение #игра Дизайнер на всю голову
https://content.desigram.ru/static/4f24c07f-9ee4-4a63-8bf9-085ef49d6529.jpg
Первый (официально) рабочий день 2025 года. Первый короткий, но такой объемный пост — итоги года 2024 #проект
https://content.desigram.ru/static/5d954fff-e15a-4216-91da-c5d7faf642fe.jpg
Рассказываю о новом проекте – MVP ERP системы для компании, которая занимается сборкой электрощитов. Клиент пришел ко мне, увидев схожую работу в портфолио.
Суть проекта. ERP для управления процессом заказа и сборки электрощитов. Заказчик (Алексей) предоставил документ с описанием бизнес-процессов. Созвонились и обсудили задачу. Предварительная оценка работы около 120 часов ERP состоит из разделов сбыт (заявки, компред, договора, план производства, аналитика), снабжение (заявки поставщику, заявки на склад, складской учет), справочники (продукция, комплектующие, контрагенты). Что можно делать в интерфейсе. Электрощиты собираются индивидуально под требования заказчика. Заказ может прийти в любом виде и из любого источника: от почты до ватсапа. На основе запроса создается заявка. Для каждой заявки создается спецификация с плановой стоимостью работ (компред). Может быть несколько вариаций спецификаций (сборки) щитов, то есть несколько КП. После выбора заказчиком варианта спецификации (сборки) подписание договора, план производства. На старте созвонились с Алексеем, обсудили задачу в деталях, разбили ее на этапы по приоритетности. Скорректировали под актуальные требования стартовый документ с бизнес-процессами. Особенность проекта Нет единого стандарта в названиях комплектующих и продукции, везде одна и та же продукция может быть названа по-разному. Тот, кто работает в интерфейсе должен знать все варианты названий комплектующих. Проблемы, решения, фичи Все комплектующие в спецификацию вносились вручную, копипастом с сайтов/документов поставщиков. Заказчик хотел перейти на решение, когда все будет подтягиваться через API в единый каталог комплектующих. Придумала решение как быстро перетянуть комплектующие из базы в спецификацию. Теперь, находясь в спецификации, достаточно открыть каталог в соседнем окне, в поиске найти нужную комплектующую и мышкой перетащить название, тем самым привязывая комплектующую к данной спецификации (сборке). Чтобы на всех связанных документах была видна этапность сделки предложила сделать степер. Степер это шкала с этапами, где текущий этап сделки подсвечен. На данный момент на 90% готов раздел сбыт. По таймингу на работу ушло 40 часов. Далее по порядку буду делать снабжение, справочники. После этого проекта будет проект, не поверите – ERP. Только тематика совсем другая – стоматология #проект #erp Дизайнер на всю голову
https://content.desigram.ru/static/c172e1fd-f379-4927-adcd-14226ee0baa9.jpg
Сериал на выходные "История российских компьютерных игр". История разработки компьютерных игр в СССР и России в период с 1971 по 2023 годы. В сериале приняли участие создатель "Тетриса" Алексей Пажитнов, создатель приставки "Денди" Виктор Савюк, автор Color Lines Евгений Сотников, разработчики "Мир танков" и многие другие знаковые персоны российской игровой истории. И, да, про "Смуту" тоже будет немного (кто в курсе темы). Можно посмотреть в Okko и не только.
Мне, как человеку, который любит игры и играет было очень интересно, в чем-то ностальгично. Рекомендую к просмотру всем, кому интересен мир игр, разработки, дизайна, внутренней кухни, истории. Ну а мне вдвойне интересно, потому что в 2025 году первый проект нового года — разработка ux/ui дизайна игры ) #проект #сериал Дизайнер на всю голову
https://content.desigram.ru/static/12d41609-725f-454b-ae26-8e8f7d05e26c.jpg
Ну и всем красоты и умиротворения, которое я испытываю уже несколько дней в своем маленьком отпуске ❤️
Ну что же. В шорт Dprofile Awards кейс не попал, но тут такая история, что работа оценена по достоинству многими (поверьте) коллегами с громкими именами. Это приятно, это льстит (ну давайте честно, всем нравится, когда их работу ценят и уважают).
Это заставляет иначе смотреть на некоторые моменты. Понимаю, что с интерфейсами обязательно нужно придерживаться золотой середины между визуалом и самим содержанием работы, чтобы не отпугнуть клиентов, которые приходят за интерфейсами, логикой, пользовательскими сценариями. Будем пробовать разные варианты. Точно могу сказать, что «шалость удалась», чего и всем желаю ;) Дизайнер на всю голову
https://content.desigram.ru/static/15a16dfc-6fa5-422d-a5aa-bab6c5365c78.jpg
Смотрите какое необычное, интересное и, на мой взгляд, сомнительное решение размещения сортировки для каталога.
Я часто пользуюсь сортировкой. На Lamoda я нашла ее случайно и только потому, что мне стало интересно а что мне подобрали и по какому принципу. Было бы интересно что покажут метрики и что показало бы тестирование такого решения. Сейчас кнопка выглядит как все остальные фильтры. Можно было бы хотя бы в кнопке дать намек (иконку, подпись, что-то еще) на то, что тут можно отсортировать что-либо. #анализ #найденное Дизайнер на всю голову
https://content.desigram.ru/static/eeb5c525-273a-4fa1-be79-a66349f1bbae.jpg
Из постов про редизайн интерфейса системы документооборота родилась детальная статья с примерами что и почему было не так в интерфейсе и как это переделывалось.
Статья на Dsgners Статья на VC Надеюсь, читать будет интересно и полезно #кейс #статья Дизайнер на всю голову
https://content.desigram.ru/static/7baf4b82-d52f-4dcf-8ed4-7d0c774cfaac.jpg
Наконец-то можно быстро оформлять ссылки без костылей.
Новые способы оформления подчеркиваний в Figma. Теперь можно выбрать разные стили для ссылок: → Цвет → Стиль (сплошной, пунктирный или волнистый) → Толщину → Смещение #figma Дизайнер на всю голову
Часть 3.
В интерфейсе в принципе было много лишних элементов, логически неправильных действий, отсутствовала визуальная иерархия. Во всем этом нужно было разбираться, созваниваться и обсуждать что имелось в ввиду и какая конечная цель действий в интерфейсе. Анализировать, предлагать другие вариант реализации, понятные интуитивно. Я переработала всю механику работы со списками, таблицами, документами. Это первая итерация, которую обсудили с клиентом и он ее принял сразу. Сейчас эта часть интерфейса отправлена разработчикам на внедрение. Это будет не быстрый процесс, после внедрения будем обсуждать дальнейшие планы по остальной части. На всю работу у меня ушло 40 часов. #проект #документооборот Дизайнер на всю голову
https://content.desigram.ru/static/ed0992ea-a409-4088-bc1b-983815115c72.jpg
Часть 3.
В интерфейсе в принципе было много лишних элементов, логически неправильных действий, отсутствовала визуальная иерархия. Во всем этом нужно было разбираться, созваниваться и обсуждать что имелось в ввиду и какая конечная цель действий в интерфейсе. Анализировать, предлагать другие вариант реализации, понятные интуитивно. Я переработала всю механику работы со списками, таблицами, документами. Это первая итерация, которую обсудили с клиентом и он ее принял сразу. Сейчас эта часть интерфейса отправлена разработчикам на внедрение. Это будет не быстрый процесс, после внедрения будем обсуждать дальнейшие планы по остальной части. На всю работу у меня ушло 40 часов. #проект #документооборот
https://content.desigram.ru/static/374760df-0f66-4833-8789-c4eb7d589f40.jpg
Функционально в интерфейсе ничего не изменилось, но визуально стало намного удобнее в плане манипуляций интерфейсом и его восприятие.
Примеры В таблица есть редактируемые и не редактируемые ячейки. Они визуально никак не отличались друг от друга при наведении или клике. Непонятно какую можно ячейку редактировать, какую нет. Сейчас появился отклик ячейки с которой можно взаимодействовать (например, изменение цвета при наведении) Фильтры. Есть разные блоки фильтров. В фильтре есть какое-то количество строк параметров с радиобаттанами. Радом с ними могут быть не отмеченные и отмеченные чекбоксы. Вот только отмеченные чекбоксы это иконка на самом деле 🙈 Конечно, это нужно переосмысливать #проект #документооборот Дизайнер на всю голову
https://content.desigram.ru/static/61afaee2-6a75-4b6b-90ae-791e2188d251.jpg
Продолжу о работе над интерфейсом системы внутреннего документооборота.
Основной интерфейс состоит из таблиц, списков, документов (письма, договора, приказы и так далее) и работы с этими документами (ознакомиться, откомментировать, переслать, назначить на выполнение или другие действия и так далее). Прочитать про начало работы над проектом. Нюансов очень много и, когда я сейчас пишу этот пост, понимаю, что нужно писать статью и каждый свой вывод аргументировать скринами из старого интерфейса. Но в рамках телеграма это не всегда возможно, поэтому разобью один пост на некоторые с обязательным скриншотом интерфейса. О дизайн-системе В предыдущем посте я писала о дизайн-системе, которая была выбрана для работы. Она не подходила под задачи даже с учетом того, что в ней было большое количество компонентов для таблиц. Приходилось многое дорабатывать. Например, в ячейке таблиц интерфейса может быть дерево со статусами и чекбоксами внутри, много встроенных в шапку фильтров., при нажатии на который выпадает не просто список, а еще одна таблица. По сути, дизайн-система требовала разработки с нуля. Продолжение следует #проект #документооборот Дизайнер на всю голову
https://content.desigram.ru/static/d8c6410e-4663-4d22-99bd-baee68d7334d.jpg
Обещанная пятничная рекомендация. Вышел цикл документальных фильмов об истории отечественной мультипликации, который был сделан к 85-летию Союзмультфильма
Каждая серия сериала "Кто нас нарисовал" рассказывает об определенном периоде развития анимации в нашей стране, о влиянии событий в стране на искусство, о важных событиях и, конечно, о тех, кто творил все анимационные чудеса. Про что и кого будет? Первые анимационные эксперименты в дореволюционной России, послереволюционный авангард, влияние студии Диснея на анимацию 30-х в России, послевоенные мультфильмы 40-х, выживании в 90-х и прочее прочее до наших дней, включая перспективы развития анимации в России. Про известные и неизвестные мультфильмы, которые создавали аниматоры нашей страны. Про их истории, судьбы, творения, про коммерческую и авторскую анимацию, про сбывшиеся и не сбывшиеся планы. Где смотреть? Сериал есть практически везде, от VK и Кинопоиска до Ютюбчика Настоятельно рекомендую всем, кто любит анимацию, интересуется ею. Да и в конце концов, просто для расширения кругозора) #кино #документалка Дизайнер на всю голову
https://content.desigram.ru/4b4ef29a-08af-4156-a23a-eebc2e21c2e5.jpg
Прекрасное про мультфильмы и кино. Кстати, ближе к выходным будет еще одна рекомендация как их провести с пользой )
https://content.desigram.ru/09d5ccbf-65b9-4dec-ab47-3fc1e9178b4a.jpg
Начала новый проект. У клиента есть существующая система внутреннего документооборота. В этой системе так же фиксируют намерения и заказы клиентов, протоколируют весь переговорный процесс. Дизайн делался давно и своими силами (без участия дизайнера). По сути, дизайна нет (пример текущего интерфейса на скриншоте). К логике глобальных вопросов нет.
Задача бизнеса — получить новый дизайн. Как я буду работать. Буду подбирать для работы дизайн-систему. Анализирую текущий интерфейс, его элементы, компоненты, таблицы, которых в интерфейсе много. Смотрю, чтобы в дизайн-системе были эти элементы, чтобы они легко настраивались/перенастраивались. Выбираю дизайн систему, в которой будет много компонентов для таблиц (хедер, ячейки, строки) Смотрю, чтобы доработка/переработка нужных мне компонентов занимала оптимальное время. Разумеется, она должна хорошо смотреться визуально, по стилистике нужна максимально нейтральная. После того, как найду дизайн-систему, которая больше подойдет к этой задаче и начну дорабатывать эти компоненты. Начну с самых сложных экранов, насыщенных компонентами, действиями. Соберу его из новых компонентов. Если компонент не совсем подходит или сделан не так, как мне надо, например, не тянется, буду переделывать его. В процессе составляю вопросы по логике интерфейса. Есть то, что кажется мне не очень комфортным для работы и это можно было бы сделать более интуитивным и простым. Обсужу это с клиентом и, если решим поработать над некоторыми моментами, связанными с ux, то буду заниматься и им. К слову, клиент пришел по следам аналогичной работы с портфолио, где увидел работу с логикой и дизайном и отреагировал на нее ) #проект #компоненты Дизайнер на всю голову(https://t.me/rwh_blog)
https://content.desigram.ru/14117010-ecb0-406b-a0e1-2db59b81f547.jpg