Последнее время, карточка товара — моя Римская империя, с мыслями о которой я засыпаю. Попалась на глаза статистика от WB, где они обрабатывают 750 тысяч заказов в день. И это только один магазин.. Миллионы сценариев..
В общем, компонент карточки товара сейчас безумно популярный. И захотелось поразгонять, а что с ним станет через 10 лет.
Представьте дизайн-агентство, которое создает не просто красивые макеты, а целые технологические экосистемы. Один раз вложившись в разработку уникальных компонентов и фирменного стиля, дизайнеры получают возможность генерировать профессиональные сайты со скоростью 50+ проектов в час.
На практике это сводится к простому циклу: вы отправляете промпт в ChatGPT, получаете в ответ конфигурационный файл, загружаете его в приложение и одной командой сборки создаёте готовые, стилизованные страницы. Всё это уже настроено в стартовом шаблоне, включая авторизацию и многоязычный AI-чат.
Или используйте полную автоматизацию так же как в v0, но с прицелом под крупные корпоративные интеграции.
Капчи, которые должны «отделять» людей от ботов, стали настоящей головной болью для пользователей. Порой приходится не выбирать светофор или «зебру», а решать сложные головоломки или математические примеры, многие из которых ставят в тупик — а вот боты, кажется, щёлкают их как орешки. Мы в beeline cloud решили разобраться в теме.
Разберем типовые ошибки на сайтах, которые мешают бизнесу продавать свой продукт, каким бы хорошим он не был. Такие ошибки встречаются у компаний любого масштаба — от стартапов до крупных игроков. Исправив их, бизнес сможет повысить эффективность сайта на том же трафике, то есть без дополнительных вложений.
Раньше создание веб-сайта требовало недель кропотливой работы: приходилось нанимать разработчика или осваивать сложные инструменты веб-дизайна. Сегодня появились платформы на базе ИИ, способные сократить время разработки в несколько раз и значительно снизить затраты, обеспечивая при этом продуманный и профессиональный дизайн страниц.
Современные ИИ-инструменты предлагают за считанные минуты оптимизированные шаблоны с возможностью бесплатной настройки каждого элемента под фирменный стиль. Например, знаменитый Wix позволяет создать полноценный сайт буквально за 10 минут с сохранением полного контроля над внешним видом страниц.
Мы отобрали 5 лучших ИИ-конструкторов сайтов в 2025 году. Они помогут заниматься разработкой намного эффективнее и выгоднее, чем классическими методами.
SVG – одна из самых интересных технологий браузера. С его помощью можно делать массу полезных и интересных компонентов. Это неотъемлемая часть моего стека.
В этой статье я поделюсь основами, чтобы заложить прочный фундамент для дальнейшего развития. Я покажу вам, почему SVG так хорош, и поделюсь фишками, которыми вы сможете пользоваться прямо сейчас.
Для понимания этой статьи не требуется специальных знаний и опыта работы с SVG, но предполагается, что вы знакомы с основами HTML/CSS/JS.
Аудит дизайна сайта — это системный анализ его визуальной и функциональной составляющих, который помогает выявить ошибки, мешающие пользователям комфортно взаимодействовать с ресурсом.
В этой статье разберём:
- Что такое аудит дизайна и зачем он нужен?
- Как провести аудит самостоятельно: пошаговая инструкция
- Основные ошибки дизайна и способы их исправления
- Инструменты для проверки юзабилити и визуальной привлекательности
Привет, Хабр! Меня зовут Рома, я арт-директор Битрикс24. Я не могу назвать себя заядлым геймером, но после того как приобрёл PS5, стал замечать, насколько точно видеоигры управляют вниманием. А после прочтения книги Селии Ходент «Мозг Игрока» и множества исследований по когнитивной психологии понял, что некоторые механики из геймдева можно успешно «переложить» на разработку интерфейсов для ежедневных B2B и B2C сервисов. Делюсь своими наблюдениями с вами.
Некоторые интерфейсные решения не устарели — они просто не были пересмотрены. Они живут по инерции: из-за юридических формальностей, технических ограничений или просто потому, что «так уже есть». Часто — это не чья-то ошибка, а результат слишком длинной цепочки допущений.
Во второй части (первая тут) продолжу разбирать рудименты — те фрагменты UX, которые когда-то имели смысл, но больше не работают. Мы посмотрим на них не с точки зрения «плохо», а с точки зрения: почему так получилось, почему до сих пор так, и как это решают сейчас.
Фокус на российском рынке.
Как-то попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как UX-дизайнера удивили несколько из этих советов, сегодня расскажу об одном:
«Рекомендуем настроить форму таким образом, чтобы при её открытии курсор ввода автоматически падал в первое поле формы».
Сразу хочется спросить: «Зачем?»
Давайте попробуем сравнить два сценария.
Вы замечали, что посетители быстро покидают ваш сайт, едва заглянув на него? Это может быть связано с высоким bounce rate (показателем отказов) — процентом пользователей, которые ушли, не совершив никаких действий. Разберём, почему это происходит и как улучшить ситуацию через грамотный дизайн. В данной статье разберем:
- Что такое bounce rate и как его рассчитывают?
- Основные причины высокого bounce rate
- Влияние bounce rate на SEO
- Мифы о bounce rate
- Инструменты для отслеживания и анализа bounce rate
Встречались ли вы с бейджем 18+ и думали, зачем он тут?
Такие значки мы часто видим на афишах спектаклей, фильмах, играх, книгах и даже в онлайн-магазинах. Это возрастная маркировка — система обозначений, которая указывает, с какого возраста рекомендуется просмотр, использование или участие в контенте. Её цель — защитить детей и подростков от информации, способной навредить психике или развитию, и помочь взрослым принимать обоснованные решения.
Разберёмся, откуда взялась эта маркировка, какие бывают категории и как с ней работать в интерфейсах и визуале.
Одна из наиболее востребованных и горячих тем, связанных с дизайном — это, конечно же, трудоустройство, портфолио, собеседования и все, что связано с профессиональной реализацией. На Youtube такие видео набирают просмотры даже на небольших каналах.
За год изучения вопроса и погружения в тематику посмотрел большое количество текстов и видео. Если все эти материалы сжать в одну эмоцию, то это однозначно будет «страдание». Дизайнеры страдают… Недавно попалось видео в котором молодая дизайнерка рассказывала трагическую и поучительную историю своего трудоустройства, сравнимую по накалу страстей ни много ни мало с самим Гамлетом. Фабула: заказчики дураки, а я в белом пальто стою красивая. Ну, и конечно, не обошлось без советов космического масштаба и космической же глупости…
Высокая конкуренция — это всегда стресс, но это не значит, что действовать нужно наугад в надежде, что в итоге количество перейдет в качество… может не перейти. Про графический дизайн не берусь судить, но в дизайне интерфейсов, UX/UI главная задача — сделать удобно, понятно и эстетично. Ровно эти же требования предъявляются и к хорошему портфолио т.е. умелый UX/UI дизайнер вынужден подходить к своему портфолио «юиксово», но к сожалению так бывает далеко не всегда.
Я задумал написать серию небольших статей в жанре «что такое хорошо и что такое плохо» в отношении портфолио UX/UI дизайнера. Надеюсь, эти скромные труды хотя бы немного снизят градус страданий от отказов и игнора со стороны потенциальных работодателей.
Увидели скриншот интерфейса — и сразу захотелось вставить свои пять копеек? Не спешите с критикой.
Вот один из комментариев к моему редизайну интерфейса для радиоприёмника:
— Как говорится, а теперь сравните размер шрифта, контрастность и читаемость в исходном интерфейсе и в новом. Учитывайте мелкий размер экрана. Да, новый интерфейс "красивее", но экран монитора и дисплей устройства — это две большие разницы (с).
А вот другой — от друга, которому я показывал концепт за неделю до публикации:
— Ну у меня всё ещё вытекают глаза, но стало лучше.
Возможно, оба были правы :) Но за годы работы я научился относиться к такой критике спокойнее — потому что знаю, как легко ошибиться, глядя только на скриншот. Ниже — список факторов, которые стоит учитывать, прежде чем делать выводы о качестве чужого интерфейса.
В силу личной специфики (я чаще работаю не над веб-страницами, а над интерфейсами для десктопных и мобильных приложений, которые пишу на HTML/CSS), я долго избегал рабочие процессы сложнее, чем «отредактировал CSS-файл и сохранил его», и открыл для себя CSS-препроцессинг довольно поздно, но… В наши дни он, в общем-то, ничуть не устарел, и актуален не меньше, чем раньше. Так что, если вы пишете CSS (а не генерируете его) для чего угодно (SPA, приложения, лендинги, веб-аппы и т.д.), но до сих пор не пользуетесь LESS или SASS — приглашаю под кат, где я, стараясь не опускаться до уровня «очередной-пересказ-учебника», немного расскажу о принципах LESS, инструментах, его текущем состоянии и поделюсь своими техниками и приёмами (с примерами). А если вы не пишете CSS, но знакомы с традиционными языками программирования, всё равно добро пожаловать: я провожу параллели между ними и LESS, а заодно рассказываю об очень полезных принципах проектирования от Алана Кея.
Карта карьерного развития в дизайне, в виде путешествия по «землям» и «территориям» профессионального роста. Предположительно Facebook
Самый заинтересованный человек в своём профессиональном росте — ты сам. Поэтому важно чётко понимать, куда двигаться и как это делать осознанно. Сегодня разберёмся, что такое компетенции, какие они бывают и как развивать их с умом. Поговорим о том, как сфокусироваться только на тех навыках, которые действительно открывают возможности для роста, и как прокачать их максимально эффективно. А ещё узнаем, что такое матрица компетенций и посмотрим, как с ней работают ведущие компании в России и за рубежом.
Почему опасно знать свой продукт слишком хорошо
Недавно в разговоре с коллегами стало как-то грустно.
Многие работают над одними и теми же продуктами по два-три года. Уверенно обсуждают итерации, паттерны, приоритеты, знают систему до болтика. Но в этой уверенности — странная тишина. Как будто внутри всё давно разложено по полочкам, и новые решения больше не требуют усилий.
Параллельно вспоминаю свои собеседования год назад.
Если вакансия была из e-commerce, спрашивали, есть ли у меня опыт в e-commerce. Если из B2B — интересовались, работала ли я с B2B-интерфейсами. Если это CRM — уточняли, сталкивалась ли я с CRM-системами.
Каждый раз — этот логичный вопрос, ибо чем ближе предыдущий опыт, тем быстрее адаптация и выше шанс дать результат.
Но внутри эти вопросы вызывали удивление. Не потому, что мне нечего было ответить. А потому что в них слышался намёк: «ты — дизайнер чего-то». Дизайнер дашбордов. Дизайнер маркетплейсов. Дизайнер финтеха.
Всем привет! Я Женя Белодед, ex-арт-директор в Студии Райт. К нам пришел клиент — CSI, разработчик IT-решений для автоматизации ритейла. Его запрос — обновить интерфейс касс самообслуживания CSI K, которыми будут пользоваться покупатели в 90 торговых сетях России и СНГ.
Сегодня о важности проектирования в контексте и о том, как окружение интерфейса и его эргономика все меняют. Спойлер: без факапов не обошлось, но они сделали нас сильнее! Погнали!
Текст — это не просто набор букв. Это мощный инструмент, который влияет на восприятие дизайна, удобство чтения и даже доверие пользователей. Хотите, чтобы ваш сайт или печатные материалы выглядели профессионально? Тогда давайте разберём основы типографики простыми словами.
В данной статье разберем:
- Важность подбора правильного шрифта
- Как выбрать шрифты?
- Где искать шрифты?
- Размер и расстояние – основа удобства
- Контраст и цвет текста
- Ошибки, которые портят типографику и как их избежать
Мой веб-сайт — это путешествие по волнам памяти. Я не хочу сказать, что нужно прекратить современную веб-разработку. На моём веб-сайте используются технологии, которые в обсуждаемые на нём времена были ещё недоступны. Он работает на мобильных (протестировано в Firefox для Android), отсутствует только фоновое изображение.
Свой первый веб-сайт я создал где-то в начале 2000-х, и как и большинство веб-сайтов того времени, он был очень простым. Это неудивительно, учитывая то, что большинство (включая и меня) писали такие веб-сайты в Блокноте, что накладывало ограничения на сложность. Можно было выбрать или Блокнот, или какой-то из WYSIWYG-редакторов, которые привязывали к себе тем, что сгенерированный ими HTML было бы совершенно невозможно поддерживать без них, а если вносить изменения вручную, то это вполне могло поломать всё в редакторе.
Тогда не было iPhone, почти не было SEO, а JavaScript, как и CSS, использовать было совсем необязательно.
Цветопередача первых ЖК-экранов была плохой, поэтому лучше было выбирать цветовую схему с высокой контрастностью.
Оптимальным разрешением было 1024×768 (или 1280×1024, если вы могли себе это позволить), однако стоило и обеспечить работоспособность размеров окна и панелей в 800×600. Вам же не нужно, чтобы контент выходил за левый или правый край экрана?
