Веб-дизайн *

Какой сайт вам нужен: когда пойдет шаблон за 50 тысяч, а когда интернет-магазин за 20 миллионов рублей

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

Рефлексия дизайнера о целеполагании в российских IT-компаниях

В какой-то момент я поймала себя на том, что слова «план развития», «точка роста» и «привязка к целям команды» вызывают у меня не скуку, а ощущение, будто мне выдали маршрут, по которому я не собиралась идти, но теперь обязана сдать отчёт.

Несомненно, появление концепции лайка открыло новую страницу в механизме feedback. Не только для крупных компаний, но и для мелких девчушек, которые гоняются за лайками от своих сверстников. Однако, в какой‑то момент времени, лайки стали тормозить развитие механизмов получения того самого feedback. Зачем что‑то выдумывать новое, если уже есть лайк, понятный даже макаке‑резус и регулярно повсеместно используемый? Концепция лайков противоречит количественной социологии? Да ну ее на фиг, эту социологию! Одним лайком сложно получить качественный feedback? Зато лайк это уже традиция — так еще наши прадеды делали, деды, отцы делали, и мы делать будем, и наши дети и правнуки, ну Вы поняли. В данной статье не только делается попытка поиска следующего за лайком механизма feedback. Но и приводится вместе с исходным кодом действующий компонент на React TypeScript. Если кому интересна тема поиска новых механизмов feedback, добро пожаловать под кат!

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

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

Застрял(а) между макетами и расплывчатым фидбеком вроде «что-то не то»? В этой статье — почему это нормально, как выглядит кривая развития дизайнера, чем полезен T-shaped подход и что помогает выйти за рамки интерфейсов, чтобы по-настоящему влиять на продукт.

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

Итак.

Правда №1: я не знаю объективного способа подтвердить, что с проектированием продукты делаются быстрее и дешевле, чем без него.

То есть, для меня это очевидно. Это логично и рационально. Но не проверить.

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

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

Правда №2: никто не читает…

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

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

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

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

— А тебе нормально, что твои продукты не релизятся?

Я честно зависла. Не потому что не знала ответа, а потому что не поняла вопрос. Нормально… в смысле — как? Физиологически? Психологически? Или по корпоративной этике?

Этот вопрос задал мне тимлид просто между делом, с лёгкой интонацией делового удивления.
Как будто есть два типа дизайнеров: тех, у кого всё релизится, и тех, кто просто любит красивые фигмы «для галочки».

Я тогда промолчала. Но внутренне отметила: вот она, формула фрустрации. Не в том, что проект не выжил. А в том, что кто-то спрашивает — а зачем ты вообще все это наделала?

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

Привет! Мы UX-исследователи из Контура Серёжа и Маша. Этот текст — первый в серии о методах статистического анализа. 

Представьте себе ситуацию: вы замерили удовлетворенность пользователей и получили среднюю оценку в 6.5 баллов из 10. Затем вы упорно и долго работали всей командой над тем, чтобы эту оценку повысить. Через полгода вы с надеждой повторяете опрос и получаете… 6 баллов. Бизнес-начальник врывается к вам в кабинет и начинает ругаться: «Как же так?! Весь год работали, а удовлетворенность упала!».

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

Как выйти на международный рынок в 2025 году и начать зарабатывать в валюте.

Этим гайдом я хочу поставить точку в вопросе, который мне задают с завидной регулярностью: как найти зарубежную удалёнку дизайнеру из СНГ. Без воды, максимально честно и информативно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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