Все потоки
Поиск
Написать публикацию
Обновить
56.65

Веб-дизайн *

Дизайн спасет мир

Сначала показывать
Порог рейтинга
Уровень сложности

Редизайн сложных продуктов: как мы переделали шапку Экзона

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров2.4K

Мы команда проектировщиков интерфейсов Экзона, а Экзон — это продукт для цифровизации строительства.

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

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

Читать далее

Эффект обманутого ожидания в дизайне

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров1.7K

Привет, Хабр! Я Оксана Артемьева, UX/UI дизайнер. Недавно наткнулась в литературе на термин «эффект обманутого ожидания» — средство усиления выразительности текста, основанное на нарушении предположений, ожиданий и предчувствий читателя. Это то, что усиливает текст, делает его лучше, хотя сам термин звучит максимально негативно.

Я начала копать дальше и выяснила, что с эффектом обманутого ожидания мы регулярно сталкиваемся в психологической плоскости. Например, рассчитываем на что‑то одно, а потом видим реальность, и вот — наши ожидания не оправдались. Так случается, когда трейлер фильма или сериала обещает захватывающий сюжет и яркие сцены, а сам фильм оказывается скучным или неинтересным. Вы покупаете новый гаджет или одежду, основываясь на ярких рекламных материалах и отзывах, но получаете продукт низкого качества, это вызывает разочарование. И это уже что‑то негативное. А как насчет термина «эффект обманутого ожидания» в дизайне?

Негативный эффект обманутого ожидания в UX/UI дизайне

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

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

Читать далее

Использование DevTools. Гайд для дизайн-ревью и не только

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров3.2K

Дизайн-ревью —достаточно важная вещь, которая требует внимания, когда фронтенд-разработчик сверстал новую фичу, блок или целую страницу. Вовсе не для pixel perfect, который «как задизайнили, так и сверстали» — пиксель в пиксель. Pixel perfect в десктопе — это чушь, потому что нельзя сверстать так, чтобы с разных браузеров (привет, Safari) и разрешений всё смотрелось идеально. Но ошибки, которые сразу бросаются в глаза, сразу подмечаю, структурирую и обсуждаю это с разработчиком, может, появились какие-либо ограничения и прочее. Поэтому никогда не жалею время на дизайн-ревью и через DevTools сам проверяю то, что сверстал разработчик.

Все инструменты и функциональность, о которых пойдёт речь в этой статье, можно найти в браузере в «Инструментах разработчика» (клавиша F12 / Ctrl + Shift + I (на Windows) или ⌘ + ⌥ + I (на Mac), или клик правой кнопкой мыши в любом месте страницы -> Выбор пункта меню — «Просмотр кода страницы» (или «Исходный код страницы») — это и есть DevTools).

Основной элемент для работы с девтулзами — «Инспектор» (Ctrl + Shift +C на Windows и ⌥+⌘+I на MacOS) — это инструмент поиска элементов на странице браузера.

Читать далее

Представляем Figma Make: новый способ тестирования, редактирования и подсказки дизайна

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров4.7K

Сегодня мы представляем Figma Make — новую функцию «prompt‑to‑code», которая поможет вам быстро исследовать, итерировать и дорабатывать — будь то создание прототипов высокой точности или углубление в детали проектирования и кода.

Читать далее

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

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров1.3K

или как подсмотреть лучшее у мира и сделать свой продукт сильнее

И вот я снова о концептах и способах их делать. Так, по-честному, мне нравится рефлексировать на эту тему, потому что за 4 года работы, обсуждая с коллегами разные подходы, и осваивая собственные, вроде выходит структурировать нечто годное.

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

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

Читать далее

Почему вы любите плохие продукты

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров23K

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

Читать далее

Как я нашёл квартиру за четверть стоимости из-за бага на сайте застройщика ПИК:

Время на прочтение2 мин
Количество просмотров69K

Представьте: вы заходите на сайт застройщика (ГК ПИК), выбираете квартиру, а вместо стандартных 9 миллионов видите ценник в 2 миллиона. Сначала кажется, что это опечатка, взлом, шутка или какой-то маркетинговый трюк. Но когда система позволяет добавить лот в корзину, заполнить анкету и даже получить подтверждение брони — начинаешь верить в чудо. Именно так я наткнулся на квартиру, цена которой оказалась в четрые раза ниже рыночной возможно из-за технической ошибки. В этом кейсе разберём, как возникают такие баги, можно ли требовать исполнения договора и что делать, если вы оказались на месте застройщика или покупателя.

Читать далее

Автоматический подбор браузером контрастного цвета в CSS

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров2.4K

Вам когда-нибудь хотелось, чтобы можно было написать простой CSS для объявления цвета, после чего браузер сам бы определял, чёрный или белый должен сочетаться с этим цветом? Теперь это возможно благодаря contrast-color(). В статье мы объясним, как это работает.

Представьте, что вы разрабатываете веб-сайт или веб-приложение, и в дизайне требуется куча кнопок с разными цветами фона. Для обработки цвета фона можно создать переменную --button-color, а затем присваивать ей разные значения.

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

Читать далее

Фракталы в дизайне: как природные паттерны снижают стресс и улучшают восприятие

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1.7K

Почему мозг любит деревья, а пользователи — простые интерфейсы

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

Для дизайнеров, разработчиков и всех, кто хочет сделать интерфейсы естественными и удобными.

Читать далее

Хочу умный дом, умнее меня: история одного концепта

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров3.9K

Захотелось рассказать про один из своих старых концептов. Уже можно, NDA закончилось.
На 2023 год задачка была и правда не тривиальной.

А еще, визуально закрепить, что идея не обязана выглядеть как вылизанный проект на Dribbble.

Читать далее

Почему не дружат фронтендер и дизайнер: работающие техники общения между отделами

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров1.9K

Привет! Меня зовут Алексей Песоцкий, я фронтенд-тимлид в AGIMA. Противостояние дизайнеров и разработчиков носит уже почти легендарный характер. Этой теме посвящены десятки статей, видосов и докладов. А отношения отделов ставят в один ряд с другими фундаментальными конфликтами: кошки и собаки, кому дует и кому душно, Хельга и Арнольд. Но мы в компании уверены: чтобы лучше понимать друг друга, нужно просто следовать элементарным правилам.

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

Читать далее

UX/UI портфолио. Часть 1: Я хороший мальчик

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.9K

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

За год изучения вопроса и погружения в тематику посмотрел большое количество текстов и видео. Если все эти материалы сжать в одну эмоцию, то это однозначно будет «страдание». Дизайнеры страдают… Недавно попалось видео в котором молодая дизайнерка рассказывала трагическую и поучительную историю своего трудоустройства, сравнимую по накалу страстей ни много ни мало с самим Гамлетом. Фабула: заказчики дураки, а я в белом пальто стою красивая. Ну, и конечно, не обошлось без советов космического масштаба и космической же глупости…

Высокая конкуренция — это всегда стресс, но это не значит, что действовать нужно наугад в надежде, что в итоге количество перейдет в качество… может не перейти. Про графический дизайн не берусь судить, но в дизайне интерфейсов, UX/UI главная задача — сделать удобно, понятно и эстетично. Ровно эти же требования предъявляются и к хорошему портфолио т.е. умелый UX/UI дизайнер вынужден подходить к своему портфолио «юиксово», но к сожалению так бывает далеко не всегда.

Я задумал написать серию небольших статей в жанре «что такое хорошо и что такое плохо» в отношении портфолио UX/UI дизайнера. Надеюсь, эти скромные труды хотя бы немного снизят градус страданий от отказов и игнора со стороны потенциальных работодателей.

Читать далее

Хаос и структура продуктового дизайнера

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров560

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

Абстракция в процессе — это не когда ты не знаешь, что делаешь. Это когда ты ещё не знаешь, что из этого получится. У тебя уже есть обрывки идей, сырые инсайты, эмоции от пользователей, странные ощущения, которые нельзя выразить словами — но именно они и двигают тебя вперёд. Это как быть внутри тумана, но интуитивно идти в правильном направлении. Никакой структуры. Никаких диаграмм. Только внутренний компас и ощущение: «Тут что-то есть».

И да, это очень некомфортно. Потому что мир продуктового дизайна давно оброс фреймворками, CJM’ами, метриками, таймлайнами и бэклогами. И ты вроде как должен всё объяснить — команде, бизнесу, себе. А у тебя — только странный набросок, скрин экрана и фраза: «Мне кажется, вот в этом что-то есть».

Я научилась уважать этот этап, а не бояться. Это фаза, где не нужно принимать решений. Где можно перебрать десятки нелепых идей, набросать странные метафоры, соединить несовместимое. Это территория, где можно не знать. Именно отсюда потом рождается концепт. Настоящий и точный. Такой, что когда его видит команда — говорит: «Ну да, конечно, так и должно быть».
Но чтобы оттуда выйти — нужна структура. И вот тут начинается мэджик.

Читать далее

Ближайшие события

Новый ЕМИСС 2.0 со сводными таблицами, API и погодой?

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров1.4K

Привет, Хабр! Около года назад мне пришла странная идея: а что, если сделать новую версию ЕМИСС, хранилища российской статистики, чтобы наконец-то было удобно сводить данные. А то постоянно сопоставлять несколько показателей из множества Excel файлов – сущий ад. И вот уже год прошел с момента создания и написания первой версии и сайта, и статьи (недавно был небольшой пост).

Читать далее

Горячие клавиши в Figma с пояснением на русском

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров6.6K

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

Смотреть горячие клавиши

Тренировка дизайнерской продуктовой насмотренности: 2 упражнения

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1K

Прокачивать насмотренность — обязательный навык для любого дизайнера.
Но просто бесконечно листать Dribbble и сохранять "референсы в закладки" — недостаточно.

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

Читать далее

Ах, как хочется вернуться в «старый интернет»

Время на прочтение6 мин
Количество просмотров4K

Ранее в блоге beeline cloud мы вспоминали настоящий «осколок старого интернета» — страничку на миллион долларов. Сегодня продолжим тему и поговорим о том, как энтузиасты стремятся сохранить веб-артефакты, идеи и дух интернета из 90-х.

Читать далее

Как я стал UI/UX-дизайнером после «весёлого» вечера

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.2K

Или как войти в IT из-за пьянки в общаге.

Мою первую работу дизайнером мне устроил… армянский коньяк. Не шучу. Сейчас расскажу.

Читать далее

Почему одни шрифты читаются быстрее других и почему Comic Sans ненавидят

Время на прочтение9 мин
Количество просмотров17K

Вы когда-нибудь замечали, что одни тексты «проглатываете» за минуты, а другие читаете словно через силу или просто кидаете в закладки и забываете, даже если тема интересна? Дело не только в содержании — иногда главную роль играет шрифт. Одни буквы мозг расшифровывает мгновенно, а на других спотыкается и тормозит. Давайте разберемся, какие шрифты ускоряют усвоение информации, а какие годятся только для художественных заголовков — и как это используют в UX, издательском деле и digital-рекламе.

Спойлер: Comic Sans не просто так всех раздражает. Так что, если вы до сих пор тыкаете в Fonts Google наугад — готовьтесь к легаси-проблемам с юзабилити. Детали под катом.
Читать дальше →

Продуктовый концепт. Инструкция по выживанию

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров1.1K

Уууу, страшное слово — концепт... На фоне пугающие звуки...

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

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

Читать далее

Вклад авторов