36843
Пишем просто, понятно и по делу обо всём околодизайнерском 🔥 Сайт: https://dsgners.ru По поводу рекламы и сотрудничества: @design_manager_bot
Объектно-ориентированный дизайн и как его использовать для проектирования систем
С тех пор как интерфейсы программ, приложений и сайтов стали сложными, среди дизайнеров началось хаотичное деление на узкие специальности: появились системные и бизнес-аналитики, UX-дизайнеры, UI-дизайнеры, проектировщики и прототипировщики.
Рынок разделился: одни знали о проекте все, другие раскрашивали кнопки, и все были уверены, что любую проблему решит разработчик, у которого просто нет выбора. Разработчики действуют в конце производственной цепочки, и все недочеты в итоге валятся на них. Не удивительно, что теперь в глазах программистов дизайнер, проектировщик и менеджер — это люди, которые только и делают, что мешают работать.
В последние годы эти области начали сближаться. Проектирование соприкасается с дизайном, а дизайн — с версткой. В этом помогают, к примеру, дизайн-системы, storybook’и, созданные по правилам разработки интерфейсов, а также современные инструменты: Figma, Sketch, InVision Studio и другие.
Фокусироваться сперва нужно на том, как система работает, и только после на том, как она выглядит. Чтобы проектировщики, дизайнеры и разработчики одинаково мыслили и лучше понимали, как решать задачи клиента, я использую разные подходы, в том числе и объектно-ориентированный дизайн.
Читать статью: https://habr.com/ru/post/531466/
О важности переработки систем, не адаптированных с точки зрения UX, или как съесть слона
Жил-был слон. Отличный такой слон, маленький и аккуратный. Он прекрасно справлялся со своими обязанностями: вовремя гулял, кушал, какал и радовал хозяина. Слон рос-рос и вырос в большого слона. Он все так же гулял, кушал и… даже радовал хозяина. Но что-то изменилось.
«Если вам кажется, что пора что-то менять – вам не кажется»
Изменения происходят всегда и, как правило, очень незаметно. Любая система изменчива, программные же продукты, как система, развиваются стремительно. И вот наступает тот момент, когда уже невозможно закрывать глаза на то, что пора что-то менять.
Читать статью: https://habr.com/ru/company/barsgroup/blog/528662/
Книги по дизайну: о патентном праве, проектировании продуктов и творческой атмосфере в команде
James Kalbach, "Mapping Experiences"
Второе издание книги о создании Customer Journey Map и других видов карт пользовательского опыта.
Максим Ильяхов, «Ясно, понятно»
Она развивает идеи «Пиши, сокращай» — контекст и тон, интерес, ясность, подача. Общий фокус на управлении вниманием читателя.
"Comparative Global Design Law"
Bloomberg Law выпустило книгу, которая изучает патентное право на дизайн в США, Европейском Союзе, Китае и Великобритании.
Jeff Johnson, "Designing with the Mind in Mind"
Morgan Kaufmann выпустило третье издание книги. UXmatters публикует отрывок из третьей главы об ошибках пользователей.
Cheryl Platz, "Design Beyond Devices"
Книга от Rosenfeld Media. Она посвящена проектированию омниканальных продуктов без жёсткой привязки к методам ввода или вывода конкретных устройств.
Justin Dauer, "Creative Culture"
Вышло второе издание книги о формировании креативной культуры в компании. Выдержка из пятой главы.
Caterina Falleni, "Accessible by Design"
Книга о доступности интерфейсов для людей с ограниченными возможностями выйдет в начале 2021 года.
"That Portfolio Book"
Целая книга с советами по созданию хорошего портфолио от Lyft, Clya, Dan Petty и других.
Rubens Cantuni, "Designing Digital Products for Kids"
Посвящена дизайну интерфейсов для детей. Она описывает весь процесс и даёт лучшие практики.
Stephen Anderson & Karl Fast, "Figure It Out"
Rosenfeld Media выпустило книгу о концептуальном проектировании. A List Apart публикует выдержку из восьмой главы. UXmatters — выдержку из одиннадцатой главы.
Gavin Lew и Robert M. Schumacher Jr., "AI and UX: Why Artificial Intelligence Needs User Experience"
Посвящена взаимному влиянию интерфейсов и искусственного интеллекта друг на друга.
Jeff и Stanley DeGraff, The Creative Mindset: Mastering the Six Skills That Empower Innovation"
Об инструментах генерации креативных решений.
David Dylan Thomas, "Design for Cognitive Bias"
A Book Apart выпустило книгу о когнитивных искажениях в дизайне.
Donna Spencer, "Presenting Design Work"
A Book Apart выпустило книгу о том, как презентовать работу дизайнера клиенту и продуктовой команде.
Источник
Когнитивная перегрузка на экране вашего смартфона
Как иконки приложений борются за ваше внимания.
Недавний редизайн иконок приложений Google стал причиной дискуссии о будущем иконок цифровых продуктов.
Иконки приложений должны быть ярче и красочнее, насколько это возможно. Они практически прыгают на вас с экранов устройств. Компании не могут позволить, чтобы их продукты редко использовались или оставались незамеченными, что провоцирует жесткую конкуренцию за внимание пользователя.
Минимализм? Нет. Скевоморфизм? Нет, спасибо!
Было время, когда в моде были супер-минималистичные логотипы на основе шрифтов. Белая фигура на черном фоне часто говорила о роскоши и статусе. Но те времена прошли, и нас бомбардируют в попытках превзойти конкурентов.
Больше цветов!
Больше градиентов!
Всего побольше!
Недавно, стремясь выработать «единый стиль», Google попал в эту ловушку, изменив иконки своих приложений. Хотя согласованность бренда в целом – это хорошо, теперь все иконки выглядят слишком похожими, что только сбивает с толку разгневанных пользователей.
Но попытка вписать дополнительные цвета в единый набор привела к тому, что теперь приложение почты стало просто буквой М. Конверта, добавляющего контекст, больше нет. Иконка приложения «Документы» слишком похожа на иконку календаря, который в свою очередь слишком похож на иконку приложения Meet.
Единственная иконка, которая, возможно, вписывается в новую эстетику – приложение «Диск», но в основном потому, что она претерпела меньше всего изменений.
Подробнее по теме в статье: https://ux.pub/editorial/koghnitivnaia-pierieghruzka-na-ekranie-vashiegho-smartfona-3gk9
Профессия «UX/UI-дизайнер» от ProductStar — структурированные знания, практика на реальных кейсах и гарантия трудоустройства.
Лекции от лучших специалистов рынка: Яндекс, OWOX, SkyEng, Devtodev, Ozon — проводится практика на кейсах реальных компаний. Во время прохождения курса к студенту прикрепляется карьерный ментор, который ведет от составления резюме до трудоустройства (как в России, так и зарубежом), а компания-работодатель возвращает от 50 до 100% стоимости обучения.
ProductStar включает:
— Гибкую программу обучения;
— Гарантию трудоустройства в международные компании и сертификат с государственной аккредитацией;
— Рассрочку, оплату курса через Яндекс.Сплит;
— Возможность налогового вычета за обучение;
Сейчас на курс действует скидка 46% + дополнительный промокод PSD10 для наших подписчиков на скидку 10 000 руб
Бонус — курс "Удаленка" и "Work-life balance" в подарок
Стать дизайнером: https://go.productstar.ru/P6XDqx
⚠️ Вы часто спрашиваете, как дизайнеру выйти на 100 000 рублей в месяц?
Отвечаем, быстро делать свою работу и не делать глупых ошибок. Ловите два канала, которые вам в этом помогут.
Figma за 60 секунд — авторский канал по работе с FIGMA. Быстрые туториалы, лайфхаки, полезные плагины и конечно бесплатное обучение на платных курсах.
Дизайн-форум — первый канал в Telegram, где контент делают сами дизайнеры. А надо ли дизайнеру платить налоги? Что делать если заказчик не платит? А сколько вариантов дизайна делать? На канале ты можешь задать любой вопрос, а крутое комьюнити тебе поможет с ним.
Подпишись, не дай нейросеткам забрать свою работу!
В студии дизайна Chipsa создают сайты и интерфейсы не как у всех, которые сильно и надолго выделяют компании на рынке.
Еженедельно, в своем телеграм-канале, ребята рассказывают о новых проектах и кейсах, основой в которых идет креативная дизайн-концепция. И кроме всей красоты в картинках, студия имеет сильную команду разработчиков, которые сквозь пот и слезы воплощают идеи дизайнеров в реальность.
Ведущие специалисты студии разбирают работы подписчиков, пишут полезные статьи о дизайне, менеджменте и разработке, и обо всем этом рассказывают в своих соцсетях. Chipsa обладает наградами Website of The Day на CSSDA, Awwwards и FWA, а также множеством призов с российских конкурсов.
Перейти в канал
Изучите основы UI дизайна на примере фильмов
Фильмы, как вид искусства, были широко распространены в нашем обществе задолго до того, как люди начали изучать визуальный дизайн или просто дизайн, как дисциплину. Первый фильм был выпущен в 1888 году под названием «Сцена в саду Раундхей». Это был короткий немой фильм (2 секунды), записанный французским изобретателем Луи Лепренсом.
С тех пор мир пережил множество революций, войн, изобретений и пандемий. Каждое из этих событий так или иначе оказало особое влияние на киноиндустрию, сделав ее такой, какой мы знаем ее сегодня.
С развитием визуальной коммуникации приходит и визуальный дизайн. Поскольку слово «дизайн» на самом деле относится к решению проблем, а не просто к созданию привлекательных артефактов, то каждая методика решения проблем имеет ряд фундаментальных законов / принципов / теорий / формул, на основе которых применяется этот метод. То же самое и с визуальным дизайном.
В течение нескольких десятилетий развития кино как коммерческой индустрии, а также изучения искусства в колледжах, люди начали покупать билеты на шоу, через цифровые интерфейсы на своих девайсах. Эти девайсы было необходимо упростить в использовании и освоении, что само по себе являлось проблемой. Чтобы решить эту проблему, появилась новая дисциплина дизайна, а именно дизайн пользовательского интерфейса.
Хотя это не совсем та причина, которая привела к рождению совершенно новой области дизайна. Но это один из многих способов связи кино и UI дизайна. Давайте сразу перейдем к разбору основ UI дизайна на примере наших любимых фильмов.
Читать статью: https://ux.pub/editorial/izuchitie-osnovy-ui-dizaina-na-primierie-filmov-1mne
Как успешно провести онлайн-презентацию продукта или услуги?
Как выглядит правильная презентация
Качественный, наглядный материал помогает зрителям лучше понять спикера и не умереть со скуки. Хорошая презентация удерживает внимание слушателей. В плохой все вперемежку: яркие слайды режут глаз, мозг пытается отчаянно понять смысл текста, а тем временем спикер усердно бормочет что-то в фоновом режиме.
Как сделать все правильно и с первого раза?
Хорошая новость в том, что вам не нужно учиться на дизайнера или пересматривать все бесплатные уроки по фотошопу, которые найдете в сети. Достаточно внятно изложить суть вопроса. Этот принцип одинаково хорошо работает в онлайне и на публичных выступлениях в реальной жизни.
Читать статью: https://medium.com/design-pub/как-успешно-провести-онлайн-презентацию-продукта-или-услуги-bb2cb13a647a
Как помочь пользователям принять решение: альтернативный и безальтернативный методы
Перевод и адаптация статьи Kathryn Whitenton для NN Group.
В оригинале методы называются «Compensatory» и «Noncompensatory». Я использую термин «альтернатива», потому что это лучше описывает процесс действий пользователя в этих стратегиях.
Вокруг нас переизбыток выбора. Постоянно надо принимать кучу решений: что надеть, что приготовить на обед, куда пойти отдохнуть. Когда заходишь в большой интернет-магазин, например, в IKEA, иногда хочется закрыть сайт, сесть в уголочек и повторять: «Горшочек, не вари!». Переизбыток выбора действительно может утомить, а иногда и напугать пользователя.
Читать: https://vc.ru/design/174350-kak-pomoch-polzovatelyam-prinyat-reshenie-alternativnyy-i-bezalternativnyy-metody
В чем отличие UX от сервис-дизайна и почему одного UX недостаточно
UX-дизайн сосредоточен на том, с чем сталкивается конечный пользователь, тогда как сервис-дизайн ориентирован на то, как этот пользовательский опыт создается внутри.
Пользовательский опыт (который для целей этой статьи будет приравниваться к клиентскому опыту (customer experience) охватывает все аспекты взаимодействия пользователей с компанией. Он включает в себя все с, чем встречается конечный пользователь, например, терминал, приложение, веб-сайт или почтовую программу. Думайте о пользовательском опыте как о том, «с чем» пользователи сталкиваются, взаимодействуя с брендом.
Сервис-дизайн относится к планированию и организации бизнес-ресурсов (людей, ресурсов и процессов) для обеспечения качества обслуживания клиентов. Думайте о сервис-дизайне как о том, «как» создается пользовательский опыт и как отделы компании согласовывают свою работу для обеспечения этого опыта.
Пользовательский опыт – это то, с чем сталкивается конечный пользователь: терминал, его интерфейс и получаемое в результате уведомление на мобильное устройство. Сервис-дизайн – это сочетание технологий, людей и процессов, которое делает возможным пользовательский опыт: проверка связи с сервером, соединение запроса с подходящим агентом поддержки и документирование результата
Например, представьте, что вы столкнулись с проблемой, которая побуждает вас обратиться в компанию через чат службы поддержки. Для начала вы должны найти и запустить чат. Вы сообщаете о своей проблеме, и агент чата работает с вами, чтобы решить ее. Эти взаимодействия, а также сам интерфейс составляют пользовательский опыт. Когда вы задаете вопросы, агент чата работает за кулисами по мере необходимости: проверяет базу данных, заполняет форму, записывает любые изменения в базе данных, разговаривает с менеджером и так далее. Эти задачи, а также люди и технологии, необходимые для их выполнения, являются частью сервис-дизайна.
Плохой сервис-дизайн отрицательно скажется на опыте клиентов. Например, в приведенном выше сценарии представьте, что после того, как вы инициируете чат со службой поддержки, вам придется долго ждать соединения с агентом поддержки из-за плохо управляемых процессов или нехватки персонала в службе поддержки. Когда вы, наконец, подключитесь, вы сообщаете личную информацию и проблему, только затем, чтобы их передали другому агенту, специализирующемуся на вашем типе проблемы. Второй агент просит вас повторно указать всю информацию, вместо того, чтобы автоматически получить ее от первого агента. В этом случае отсутствие сервис-дизайна (оптимизированных процессов, адекватного персонала и синхронизированных технологий) влияет на ваш опыт.
Одного UX недостаточно
Исторически сложилось так, что компании были организованы в соответствии с различными точками взаимодействия клиентского опыта, то есть вокруг продуктов и каналов доставки. Такой подход часто приводит к разрозненности отделов маркетинга, продаж, продуктов, выставления счетов и поддержки клиентов. В некоторых организациях могут даже быть отдельные отделы (или команды) для разных областей одного и того же продукта (например, домашняя страница, профиль, чат, корзина).
Для обеспечения беспроблемного опыта требуется сотрудничество между отделами и командами. Вот здесь-то и появляется сервис-дизайн. Чтобы облегчить это сотрудничество, необходимо потратить усилия на разработку того, как люди, процессы и инструменты объединятся для создания желаемого опыта. Клиентский опыт – это больше, чем просто сумма опыта пользователей по разным, отдельным каналам.
Подробнее в статье
Подготовка иконок к работе в дизайн системе
Помещайте иконки во фреймы
Поскольку все иконки разного размера в силу своих геометрических особенностей, все они должны быть помещены во фреймы одинакового размера.
Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.
Оставлять иконки без фрейма нельзя
Всегда помещайте иконки во фрейм
Экспортировать иконки нужно также во фрейме.
Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.
Причем, важно делать именно в такой последовательности, поскольку дизайнер зачастую выравнивает иконку изнутри фрейма по визуальному центру, а не по фактическому. Разработчик же зачастую выравнивает иконку по фактическому центру не замечая разницы.
Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево.
Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру.
Компонент из фрейма с иконкой
Создайте компонент из фрейма с иконкой.
Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».
Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).
Замена иконок с помощью функции “Instance”
Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.
Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.
Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня.
Хранение иконок
Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.
Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.
Артборд “Trash Icons” нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд “Icons 24”, а другие два варианта иконки перемещаете в артборд “Trash Icons”. На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.
Фон и цвет
Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.
Так же рекомендую сразу применять к иконке стиль цвета, чтобы при дальнейшей работе было удобнее менять цвет иконки.
Удаление фона и применение стиля цвета
Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.
Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.
Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль.
Констрейнтс
Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру. Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.
Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.
4. Прототипирование с помощью InVision Studio/Proto.io/Marvel/Origami
InVision Studio
– это набор из 4 отличных инструментов, которые очень полезны для UI / UX дизайнеров.
Prototyping
– это не просто отличный инструмент с классной интерактивной анимацией.
Inspect предназначен для передачи CSS разработчикам.
Freehand помогает создавать вайрфреймы, карты сайта и, как правило, он действует как ручка и бумага на вашем компьютере с множеством уже имеющихся полезных шаблонов.
Craft – это, по сути, инструмент проектирования пользовательского интерфейса.
Кроме того, InVision Studio отлично работает со Sketch.
4.2 Proto.io – это инструмент прототипирования, который помогает дизайнерам создавать реалистичные Hi-Fi прототипы.
4.3 Marvel – еще один инструмент, который помогает создавать Lo-Fi или Hi-Fi прототипы, вайрфреймы, а также передавать разработчикам CSS и HTML. Это еще один инструмент прототипирования, который благодаря отличному взаимодействию делает прототип похожим на конечный продукт.
4.4 Origami – это инструмент, который, возможно, обеспечивает самые продвинутые, реалистичные взаимодействия, и он хорошо работает со Sketch.
Однако есть минусы: он не передает код взаимодействия, работает только на Mac, и его сложно освоить. Для новичков он может быть очень сложным.
5. Zeplin
Zeplin – это инструмент, который переводит интерфейс в CSS. Это отличный инструмент для сотрудничества и передачи проекта разработчикам. И он отлично работает со Sketch, XD, Photoshop и многими другими программами. Я использую Zeplin относительно редко, поскольку в Figma есть весь основной функционал, а, как упоминалось ранее, я большой фанат Figma.
6. Google Analytics
Знаю, я уже упоминал Google, но Google Analytics – это совершенно другой инструмент. Как следует из названия – он занимается анализом данных. Это отличный инструмент для сбора статистики о том, как работает ваш сайт в полевых условиях, получения количественных данных и т. д.
7. Стратегическое планирование с помощью Flowmap/Balsamiq
7.1 Flowmapp – это инструмент, который поможет определить стратегию в начале работы над проектом. Это отличный инструмент для создания информационной архитектуры, карты сайта и юзерфлоу.
7.2 Balsamic – простой, но отличный инструмент для создания вайрфреймов. Он практически не требует обучения. В нем уже есть много элементов вайрфреймов, и с помощью простого перетаскивания можно сделать довольно хороший каркас.
8. Качественное исследование с помощью Bugsee/Appsee/Hotjar
8.1 Bugsee – это инструмент, предназначенный для выявления ошибок и сбоев мобильных приложений.
8.2 С другой стороны, Appsee не фокусируется на багах. Он помогает понять пользователей и оптимизировать UX и производительность.
8.3 Hotjar – это инструмент, который выполняет анализ веб-сайта и предоставляет фидбек пользователей. Он также помогает узнать о пользователях и их опыте использования продукта. Среди его функций есть записи флоу пользователя, анализ форм, опросы, рекрутирование тестировщиков и т. д.
9. Инструменты пользовательского тестирования: User Report/Usabilla
9.1 User Report – еще один отличный инструмент, основанный на опросах и отзывах. Он работает как часть вашего веб-сайта или приложения, и помогает узнавать о пользователях, а также общаться с ними. Кроме того, у него есть интеграция с Google Analytics.
9.2 Usabilla – это программа для сбора фидбека. Она обеспечивает обратную связь от пользователей в режиме реального времени. Она также помогает определить ваши вопросы и тайминг.
Есть еще много инструментов, которые UI / UX-дизайнерам следует знать, я упомянул лишь некоторые из них. И каждую секунду появляется новый инструмент, который может стать следующим лучшим продуктом. Нам просто нужно быть бдительными и не упустить момент изучения этой новинки.
Источник
Бесплатное обучение дизайну с нуля. Вместе сделаем портфолио из 4+ работ с личной поддержкой от наставника.
Что вы получите?
— Фидбэк (мощный разбор всех ДЗ от куратора)
— Тусовка (личный кабинет с уроками + живой чат)
— Портфолио и экзамен (упакуем по урокам и проверим)
— Мастер-класс "как заработать на дизайне" и найти клиента
🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов.
→ Начать обучение бесплатно
Программа бесплатного курса:
— Обучение по Figma с нуля и 4+ дз с личным разбором
— Изучение основ дизайна (контент, сетки, композиция т.д.)
— Создание анимации интерфейса
— Все о профессии и доходе дизайнера (поиск клиентов и реальный доход)
👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы
Доступный дизайн: как сделать интерфейс удобным для пожилых
Дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.
Проблемы юзабилити для пожилых
1. Мелкий кегль. Отметим, что размер кегля зависит от гарнитуры. Некоторые из них сами по себе крупные, какие-то — поменьше. Например, Asos использует Futura PT. 14 кегль Futura PT выглядит как 10 кегль Roboto.
К слову, мелкие буквы в тексте отталкивают не только старшее поколение — подростки не любят их так же сильно. Причиной тому ранние проблемы со зрением из-за плохой осанки.
2. Низкая контрастность текста. Прежде, чем вы решите использовать светло-серый текст на белом фоне, посмотрите на себя в зеркало и спросите, зачем. Если вы пытаетесь уменьшить заметность одного элемента, чтобы сместить фокус на другие — есть способы лучше.
3. Иконки с непонятными значениями. Человеку без бэкграунда в цифровой среде потребуется время, чтобы понять, что всё это значит.
4. Отсутствие гибкости. В интерфейсе должно быть место для ошибок пользователей, особенно, когда речь о возрастной аудитории. Сайты и приложения, которые позволяют вводить данные только в одном формате, разочаровывают юзеров. Сюда же относится способность распознавать опечатки.
5. Плохой UX-копирайтинг. Сюда относятся сообщения об ошибках с непонятными формулировками и невнятный текст в навигации. Ещё одна проблема — незаметное размещение оповещения на экране среди множества других элементов интерфейса.
Рекомендации по дизайну
Используйте размер кегля от 14pt. Расстояние, на котором мы можем читать буквы, влияет на скорость чтения. Такой кегль позволит комфортно изучать информацию. Помните: если человеку нужно щуриться или наклоняться ближе, чтобы прочитать текст — он этого делать не станет.
Обеспечьте высокий контраст между текстом и фоном. Предпочтительно использовать чистый фон вместо текстурированного. Фон с паттерном мешает распознавать мелкие детали в тексте.
Когда информацию трудно расшифровать, читатели вынуждены выбирать: напрягать глаза или пропустить контент. Уже догадываетесь, какое решение они примут?
Расширение браузера Chrome Color Contrast Analyzer от NCSU покажет, какой фон подходит для наложения текста.
В Figma проверить коэффициент контрастности можно с помощью плагина Color Contrast Checker.
Контрастность — это отношение яркости элемента к яркости фона. Она измеряется в диапазоне от 1:1 (минимальная контрастность — белый текст на белом фоне) до 21:1 (максимальная контрастность — черный текст на белом фоне).
Требования к контрастности описаны в рекомендациях по доступности вебконтента (WCAG). В них предлагают уровни поддержки AAA, AA, AAA Large и AA Large.
AAA и AA — для небольших шрифтов (меньше 14pt для жирных и 18pt для обычных)
AAA Large и AA Large для заголовков (больше 14pt для жирных и 18pt для обычных).
Какие коэффициент контрастности рекомендуют
AAA — 7:1
AAA Large — 4,5:1
AA — 4,5:1
AA Large — 3:1
Поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением ниже среднего.
Чем проще шрифт — тем лучше. Избегайте гарнитур с декоративными элементами, засечками и шрифтов странной формы. Например, имитирующих почерк или готический стиль. Они ухудшают читаемость.
Симулятор плохого зрения
NoCoffee Vision Simulator можно использовать для имитации нарушений зрения, в том числе разных форм дальтонизма.
Как аргументировать боссу, что тебе пора прибавить зарплату?
Пройди грейд-детектор и проверь. Всего за 11 вопросов бот определит твой уровень в дизайне с точностью 92%.
Пройти тест в телеграм-канале Senior Designer → @design
Лучшие нейросети в одном месте:
🌐 gpt... — Пишет статьи, рефераты, дипломы
🌐 dra... — Рисует картины и создает дизайн
🌐 wat... — Удаляет водяные знаки и любые объекты
🌐 mui...— Генерирует музыку любого жанра
🌐 voic... — Озвучивает текст на русском
🌐 refe... — Создает видео и фото по описанию
Открыть список: t.me/+088Yw8xEtxU2ZGUy
Студия из региона которая рвет топы и растеет х2 в год!
Ребята из дизайн-студии Crauch делают цифровые продукты для миллионов людей. За 2,5 года они уже успели поработать с такими крупными брендами как: Пятерочка, Чижик, ВК, Мейл, Камаз, Третьяковка, Синергетик и другими крупняками под NDA!
На своем канале они расссказываю про рост, как дизайнеры, управленцы, арт-диры и бизнесмены. А еще, делятся кейсами, внутрянкой и круто упаковывают свой опыт — супер актуально для дизайнеров!
Вот несколько полезных постов:
👉 Как сделать дизайн, который конвертит больше
👉 Как дизайнеру забрать проект без опыта в сфере (подойдет даже для фрилансеров)
👉 Шпаргалки по дизайну: исследования, сметы, роадмапы, оценка задач
Короче, скорее залетайте, подписывайтесь и перенимайте опыт:
@crauchru
11 примеров российских и зарубежных дизайн-систем на 2023 год: с исходниками в Figma и GitHub
Изучили десяток дизайн-систем и собрала руководство, которое помогает перенять подходы по развитию приложений и сервисов. В подборке примеры дизайн-систем как популярных (широкого профиля), так и для отдельных отраслей и направлений бизнеса. Обратите внимание на блоки о практичной фишке и философии у каждой дизайн-системы — помогают сделать проекты лучше.
Дизайн-системы — сложившийся стандарт того, как стоит подходить к созданию продуктов и услуг.
Главное, что привносит дизайн-система — это стандартизация языка дизайна — такой ход помогает значительно нарастить темп в воплощении дизайн-решений, ускориться в создании дизайна и даже помочь с масштабированием.
А еще дизайн-системы уже стали устоявшимся подходом к развертыванию достоверного источника по реализации дизайн-задач: помогают командам из разных проектов и часовых поясов сонастраиваться и совместно работать над развитием продуктов в едином ключе. В общем, дизайн-система — секретный ингредиент в разработке хорошо продуманных продуктов и услуг.
Фишка статьи: Собрала дизайн-системы, на которые опиралась, когда подступалась к дизайну интерфейсов и айдентике международного B2B-SaaS проекта в сфере Real Estate — Agently (formerly dscribe.ai): как с первых экранов и дизайн-принципов, так и задач по развитию системы компонентов.
Содержание:
Что такое дизайн-система и из чего она обычно состоит
В чем ценность дизайн-систем для бизнеса
Что включает современная дизайн-система
Примеры дизайн-систем
Российские дизайн-системы: VK, Sber (Nova, Plasma), Росатом, Контур, Тинькофф
Google Material Design
Apple Human Interface Guidelines
Microsoft Fluent
Salesforce Lightning
Atlassian Design System
IBM Carbon
Mailchimp Design System
Uber Design System
Help Scout Design System
Shopify Polaris
Что еще почитать на тему дизайн-систем и развития программных продуктов
Источник
Где публиковать свои кейсы? Обзор креативных площадок 2023
BTW.BY — Портал креативной индустрии
BTW.BY — русскоязычное креативное медиа про рекламу и маркетинг. Стоит обратить внимание на раздел кейсы. Здесь публикуются не только кейсы от рекламных агентств из СНГ, но работы зарубежных компаний. Удобный фильтр по тегам позволяет собрать подборку кейсов, например, по дизайну упаковке или по фирменному стилю. Тематика новостей — маркетинг, технологии, дизайн, креатив, экспертные мнения с лидерами индустрии. Для того чтобы опубликовать кейс, необходимо отправить пресс-релиз на почту info@btw.by. Так же вы можете поделиться историей успеха своей компании в разделе Истории Брендов. А в разделе Философия Креатива креативные директора топовых агентств делятся своими мыслями и принципами в работе.
SOSTAV.RU — СМИ о рекламе
Sostav – ведущее СМИ о рекламе, маркетинге и PR в России. Успешно развивается с 1998 года, обладает множеством профессиональных наград, в том числе «Бренд года». Ежедневно предоставляет своим читателям самую актуальную информацию о рекламной отрасли, медиа и потребительском рынке. Поделиться своей новостью можно написав на email — news@sostav.ru
Adindex — отраслевое издание о рынке рекламы
AdIndex — информационное отраслевое издание о рынке рекламы и маркетинга в России. Новости, интервью с ведущими специалистами, отраслевые рейтинги, статьи, информация о событиях рекламного бизнеса. Стоит обратить на раздел кейсы. Так же издание довольно хорошо освещает события креативной индустрии не только России, но и зарубежья. Прислать пресс-релиз можно на email — pr@adindex.ru.
Cossa — о маркетинге в социальных сетях
Cossa – одно из крупнейших российских отраслевых изданий по темам маркетинга/digital/рекламы. Аудитория площадки – директора по маркетингу и digital-специалисты на стороне крупных клиентов (которые принимают решения о выборе подрядчиков/сервисов/платформ для нужд своих компаний), а также руководители и специалисты digital-агентств, стартапов, онлайн-сервисов, digital-медиа и других интернет-компаний. sales@cossa.ru — почта для связи с редакцией.
Unipack — медиа про упаковку
Unipack.ru — медиа рассказывает про упаковочный бизнес. Помимо кейсов про дизайн упаковки, портал публикует новости связанные с технологиями упаковки и важными событиями в этой отрасли. Поделиться своим кейсом можно на email — info@unipack.ru
Секрет Фирмы — журнал о бизнесе в России
Журнал рассказывает о новостях в сфере бизнеса и около этой тематики. Стоить обратить внимание на раздел спецпроекты. Поделиться новостью можно написав на email — sf@rambler-co.ru
Сей-Хай — интернет-издание о творчестве
Материалы Сей-Хай освещают творчество, как стиль жизни. Издание рассказывает о визуальном искусстве: дизайне, фотографии, иллюстрации и людях, которые его создают. Особое внимание редакция удаляет креативным подборкам. Почта — info@say-hi.me
Источник
Как сделать дизайн сайта через призму UX
Представим себе некоего заказчика в вакууме, который пришел со своей идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок ручкой (влитых в Figma, Miro или GDocs).
Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. С чего же начать? Нет, не с фейспалма. Уверяю — такое встречается сплошь и рядом. Нацепив дежурную улыбку, я отправляю в бой менеджера проектов (с навыками UX) и иду пить кофе в ближайший Старбакс, на время забывая о заказчике.
Читать статью: https://vc.ru/design/183789-kak-sdelat-dizayn-sayta-cherez-prizmu-ux-bez-tancev-s-bubnom-sms-i-registracii
Как сделать веб-дизайн уникальным
Что делает визуальный контент уникальным и как добиться уникальности, не нарушая правил.
Посмотрите вокруг, и вы увидите обилие шаблонного дизайна. Все копируют чужие идеи, изменяя визуальные эффекты в меру своих способностей или высокомерия. Они меняют цвета и формы, сдвигают блоки. По запросу клиентов дизайнеры готовы целиком украсть макет высококлассного веб-сайта. Цифровой мир – это мир имитации. Мы не говорим о том, хорошо это или плохо. Мы просто констатируем, что это не тот путь, по которому вам следует идти, если вы хотите создать уникальный проект.
Как создать модный и в то же время особенный дизайн?
Ваша задача станет намного проще, если вы поймете значение уникальности в веб-дизайне. Быть уникальным с точки зрения дизайна – не то же самое, что быть уникальным в разговорном смысле. Дело не в креативности, обладании безумными навыками или искре божественного таланта.
В дизайне уникальность достигается за счет соблюдения некоторых довольно неуникальных правил.
Подробнее в статье: https://ux.pub/editorial/kak-sdielat-vieb-dizain-unikalnym-5300
Дизайнолог – один из самых старых каналов о дизайне в телеграме.
На канале публикуются только личные заметки о дизайне интерфейсов, городской среде, промдизайне и технологиях.
Автор канала 13 лет занимается дизайном интерфейсов, руководит отделом дизайна в одной из самых крупных в мире EdTech-компаний и преподает дизайн. У него есть чему поучиться.
Подписывайся 👉 /channel/designolog
И начинай тренировать настоящую насмотренность, а не искусственную, как это бывает с Behance и Dribbble.
Взял миллион в кредит на рекламу в телеге
Это правда. Часть денег пошла на этот рекламный пост, а вторая — на съемки сериала про телеграм.
Виталий Миля снял честный сериал про заработок в телеге. Уже доступны две серии:
1 Серия — Создание команды за три дня и запуск канала
2 Серия — Первые 100 000 ₽ и как написать продающий пост
Ваших знаний и навыков в дизайне не хватает для решения новых задач?
Иногда, чтобы прокачать один навык, приходится повторять всю программу. Мы не имеем ничего против повторения, более того, считаем, что это дело полезное, но в потоке повседневных задач оно может отнять много времени.
Для таких случаев Яндекс Практикум создал курс «Конструктор навыков для дизайнеров». Навыки подойдут дизайнерам уровня pre-middle, которые знают свои точки роста: чётко понимают, чего им не хватает, чтобы перейти на новую работу или продолжить развиваться на текущей.
Чтобы начать учиться, нужно уметь уверенно пользоваться инструментами Figma или пакетом Adobe. Просто выберите навык, который вы хотите прокачать, и начинайте учиться в любой удобный момент.
Узнайте подробности и запишитесь на выбранный курс: praktikum.yandex.ru/promo/design/konstruktor-navykov-design
Настройка constraints
Массовые действия с иконками
Все вышеописанные действия можно проделать с несколькими иконками сразу.
Для того, чтобы выбрать слои с иконкой сразу во всех компонентах иконок — выберите все компоненты иконок и нажмите Enter.
Мусор в иконках
Во фрейме компонента, кроме иконки ничего не должно быть. Не забывайте удалять все скрытые слои из фрейма с иконкой.
Например, Material Design иконки имеют белый фоновый слой.
В итоге компонент иконки должен содержать только один слой (слой с иконкой). Но могут быть и исключения, например, двухцветные иконки.
В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.
После того, как вы объединили слои, не забывайте применять “Outline Storke” к объединенной фигуре.
Объединение иконки в один слой
Все это нужно для того, чтобы иконки меньше весили, SVG код был гораздо меньше и понятней, а у разработчиков не возникли проблемы с перекрашиванием иконок.
Так выглядит SVG код иконки когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров “Fill” для разных элементов иконки.
Так делать нельзя.
Размер файла иконки 1318 байт
А так выглядит SVG код иконки когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра “Fill”. Один для фона контейнера, другой для цвета иконки.
Так делать можно.
Размер файла иконки 803 байта
После экспорта иконки вы можете ее дополнительно сжать используя этот сайт
После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.
Ресурсы с иконками
Ну и напоследок несколько ресурсов откуда можно брать иконки.
Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.
Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск. Да и файл иконки содержит в себе лишний слой с белым фоном, который на мой взгляд, не нужен. Плагин в Figma.
Boxicons
Есть хорошие альтернативы иконкам из предыдущих ресурсов. Но не все иконки pixel perfect.
Так же имеется плагин в Figma.
Feathericon
Хороший набор качественных outline иконок. Иконки сделаны контуром с обводкой, что позволяет масштабировать и изменять толщину линий самих иконок.
Плагин в Figma
IBM icons
Иконки от IBM созданные самой компанией и сообществом.
Подробнее с примерами в источнике: https://medium.com/design-pub/дизайн-система-иконки-e9ba0a695e2d
Дизайн-форум теперь в Telegram!
В телеграме появился единый дизайн-форум, где дизайнеры со всей России могут поделится своей болью, проблемой или рассказать о своему успехе совершенно бесплатно. Все лояльно и без токсиков.
Там уже много историй и подсказок от самих дизайнеров, добавляйся и ты:
🛑 Что делать если заказчик кинул на деньги?
🛑 Нужно ли быть самозанятым чтобы налоговая не трогала?
🛑 Как отдавать макеты программистам?
🛑 Разбираемся с фигмой и ее auto-layout
Ведут не душные админы, а такие же дизайнеры как и ты: @dsgn_forum
9 UI/UX инструментов обязательных для любого дизайнера
Есть инструменты, которые должен знать каждый UI / UX дизайнер, и инструменты, которые просто полезно знать. Давайте рассмотрим некоторые из них!
1. Google
Что ж, кто-то скажет, что Google – не совсем инструмент, но без Google мы бы блуждали в темноте. Вероятно, любые сомнения, вопросы или проблемы, можно решить с помощью Google. Если вы не являетесь гением и признанным специалистом в конкретной области, всегда есть люди с большим опытом и / или просто знающие ответ на ваш вопрос. В UI / UX дизайне (как и в большинстве профессий) вы постоянно учитесь и читаете.
Когда чего-то не знаете – загуглите. Когда в чем-то не уверены – загуглите. Загуглите, возможно уже есть ответы на большинство вопросов, для которых вы планировали провести A/B тесты.
Конечно, в этот раздел я включаю: Medium, Youtube, Reddit, Quora, Wiki How и другие ресурсы, материалы которых найдет Google.
2. Ручка и бумага
Быть может, это очевидно, но это, возможно, лучший инструмент для создания макетов, и не только. Предлагаю всем использовать их почаще. Помимо набросков, с их помощью можно сортировать карточки, собрать идеи, написать заметки. Советую вам оттачивать навык рисования. Даже если вы никогда не рисуете, ваши наброски будут намного привлекательнее для потенциального клиента.
3. Sketch/Figma/Adobe XD
Сегодня большинство UI / UX дизайнеров использует эти три инструмента. Они очень похожи друг на друга, и содержат лишь небольшие отличия.
3.1 Sketch
SketchApp –
крестный отец всех инструментов дизайна. Это Mercedes-Benz, первый 100% инструмент UI / UX дизайна в отрасли. Подавляющее большинство инструментов для создания прототипов хорошо работают со Sketch. До Sketch веб-дизайнеры работали с Photoshop / Illustrator / Corel. И, честно говоря, после Sketch бессмысленно использовать эти инструменты, если вы не проектируете какой-то очень уникальный веб-сайт или приложение, которому не подходят простые формы. И не поймите меня неправильно, я уважаю Photoshop больше, чем любой другой инструмент дизайна, но возможности Photoshop слишком велики для UI дизайна. Corel Draw и Illustrator – это векторные программы, которые в основном используются для создания логотипов, полиграфического дизайна, иллюстраций и т. д.
3.2 Figma
Figma – мой любимый инструмент. Он взял все самое лучшее от Sketch и добавил много вещей, которые Sketch упустил. Лучшее достоинство Figma заключается в том, что она основана на браузере (поэтому не зависит от платформы) и все синхронизируется. Один член команды что-то меняет, и это изменение моментально применяется во всем проекте, без необходимости публикации изменений. Еще одним плюсом Figma является наличие CSS, и вам не нужно использовать третий инструмент, такой как Zeplin или Inspect от Invision Studio, для передачи проекта разработчикам. Кстати, Figma постоянно совершенствуется, например, недавно в прототип добавили анимацию скролла.
3. 3 Adobe XD
XD – отличный инструмент, когда вы работаете в быстром темпе. Он позволяет быстрее решать проблемы, но у него почти те же проблемы, что и у Sketch (за исключением того, что Sketch доступен только для Mac, а XD доступен как для Windows, так и для Mac), а еще в XD нет функции внутренней тени (в чем проблема ее добавить?).
Я могу говорить об инструментах UI дизайна бесконечно, но думаю, это тема для отдельной статьи.
Что ещё учесть
уменьшите расстояние между последовательными элементами интерфейса. Например, полями формы. Убедитесь, что они находятся на расстоянии не менее 2 миллиметров друг от друга;
основные кнопки на сенсорных интерфейсах должны быть не менее 44×44 px;
элементы интерфейса, которые нужно щёлкать мышью, должны быть не менее 11 миллиметров по диагонали. Всегда делайте область нажатия больше самой кнопки или гиперссылки.
Что-то с памятью моей стало
Кратковременная, эпизодическая и рабочая память особенно уязвимы с возрастом. Это значит, что пожилым людям сложнее понимать сценарии взаимодействия в цифровых продуктах.
Перспективная память (воспоминание, что нужно сделать в будущем) также страдает.
Что делать
постепенно вводите функции продукта, чтобы предотвратить умственную перегрузку;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий;
во время длительных задач давайте чёткую обратную связь о прогрессе.
К слову, эти рекомендации подойдут и в работе с молодой аудиторией. Особенно, если она не очень лояльна к вашему проекту.
Дизайн иконок
Опытные пользователи узнают иконки дома, печати и увеличительного стекла для поиска. Вне этих примеров большинство значков неоднозначны из-за разного контекста в интерфейсах. Люди, которые только попали в цифровую среду, тем более ничего не поймут.
Чтобы подсказать значение иконки стоит внедрить текстовые метки. Они должны быть видны всегда, даже без участия юзера.
Особенно это важно для значков навигации. Не полагайтесь на наведение, чтобы показать пояснения.
Во-первых, на сенсорном экране такую механику будет сложно реализовать.
Во-вторых, человеку придётся приложить больше умственных и физических усилий, чтобы достигнуть цели. Как однажды сказал дизайнер и консультант по юзабилити Брюс Тоньяццини: «Слово стоит тысячи картинок».
1. Сохраняйте дизайн простым и схематичным. Меньше графических деталей — их всё равно не распознают в маленьком значке.
2. Используйте правило пяти секунд. Если вы тратите больше 5 секунд, чтобы придумать иконку — она не передаст суть.
3. Проверьте значки на узнаваемость: спросите людей, что они ожидают от взаимодействия с ними.
4. Проверьте значки на запоминаемость: посмотрите, вспомнит ли целевая аудитория их значение через две недели после контакта.
Сообщения об ошибке
У пожилых людей часто возникают проблемы с чтением сообщений об ошибках. Они не понимают формулировок, либо просто не знают причины сбоя. Здесь простота становится даже более важной, чем обычно.
Сообщение об ошибке должно включать:
1. Явное указание на то, что что-то пошло не так. Когда пользователи ошибаются и не получают обратной связи, они полностью теряются. Точно опишите проблему.
2. Понятный язык вместо отраслевых терминов вроде «произошла ошибка класса 2».
3. Вежливую фразу, которая не обвиняет пользователей и не подразумевает, что они глупы.
4. Конструктивный совет, как исправить проблему. Например, проверить опечатку, посмотреть рекомендации в файле или перезагрузить страницу.
Наиболее частое оповещение в интернете «404 not found» нарушает большинство этих рекомендаций. Лучше написать собственное сообщение об ошибке.
5. Не используйте только красный цвет для обозначения ошибок. Включайте дополнительные подсказки, которые могут видеть дальтоники.
6. Сохраните как можно больше работы пользователя. Позвольте человеку редактировать исходное действие, а не делать все заново. Если посетитель ввёл хоть какую-то информацию, даже без ошибки мы должны её использовать заново во всех доступных сценариях. Это часть принципа «пусть потеет машина».
7. Сократите работу по исправлению ошибки. Если возможно, угадывайте правильное действие и дайте пользователям выбрать его из небольшого списка исправлений. Например, вместо того, чтобы просто сказать «город и почтовый индекс не совпадают», дайте посетителю выбрать город, который соответствует введенному им почтовому индексу.
Источник
❌ Доступ скоро закроется, ограниченное количество мест:
Визуалмув — закрытое медиа про дизайн, IT и маркетинг.
