Веб-дизайн *

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

Всем здравствуйте, дорогие читатели!

Меня зовут Рамазан, я Frontend-разработчик, энтузиаст и я люблю исследовать грани возможностей современных Web-технологий.

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

Что объединяет пенсионеров-лудоманов, барсука-полицейского и сайты из нулевых? Сегодня мы погрузимся в веб Страны восходящего солнца, чтобы найти ответ на этот вопрос.

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

Сегодня публикую материал из внутренней базы знаний — обо всём, что касается правильной работы с листингами. Вы узнаете, почему важно уделить внимание листингам товара с точки зрения UX, что обязательно должно быть в превью карточек товаров, почему стоит избегать функционала «Быстрый просмотр» и чем его заменить.

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

«Инвертированный», «вогнутый», «впуклый» угол, а также negative border radius или inverted border radius. Когда слышите это — знайте, дальше будут страдания.

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

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

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

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

Почти все элементы мира хайтека, от самых современных ИИ-систем крупнейших компаний до обычных кусков кода, написанных студентами, аннотируются и описываются в одном простом текстовом формате. Когда вы пытаетесь дать сложные инструкции ChatGPT, хотите поделиться списком покупок в Apple Notes или скопировать чью-то домашнюю работу в Google Документах, вы пользуетесь одним и тем же форматом. Самое безумное заключается в том, что этот формат придумал не конгломерат технологических корпораций, а ворчун с добрым сердцем, который сейчас, вероятно, пересматривает фильм Кубрика или болеет за любимую спортивную команду. Но нам стоит разобраться, как родились столь простые текстовые файлы; не только для того, чтобы я мог похвастаться щедростью и умом моих друзей, но и чтобы напомнить вам, как работает Интернет на самом деле: умные люди придумывают хорошие вещи, а затем отдают их бесплатно, снова и снова, пока их технология не захватит мир и не сделает его лучше для всех.

Шариковые мыши и забитая в них пыль, колоритные сайты с гостевыми книгами, форумы и мееееедленный выыыыход в Сеть. А главное — писк диалап‑модема. Мы собрались с коллегами Сlevertec и вспомнили, как это было. Вот наши истории.

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

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

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

Крупные ставки на ИИ без участия людей не оправдывают ожиданий: там, где сокращали специалистов «под нейросеть», результаты оказывались слабее, а часть сотрудников возвращалась обратно. Рассказываю, как меняется работа благодаря ИИ, какие нейросети доказали эффективность, а также о нашем собственном ИИ-агенте для управления проектами.

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

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

Раньше, чтобы сделать круговой прогрессбар, мы страдали с SVG. Мне до сих пор больно заглядывать в инспектор на старых реализациях. Сегодня всё кардинально упростилось.

Современный CSS позволяет собрать сложный, гибкий и красивый круговой прогрессбар буквально на одном div и на одном CSS-свойстве. И всё это — с отличной браузерной поддержкой.

В этой статье я разберу именно этот приём. Сначала — ключевую идею подхода, затем — возможности кастомизации, после этого добавлю немного визуальной «дороговизны», удобные ручки управления и экспериментальную CSS-логику. Да-да, напоследок мы немного попрограммируем на CSS!

Привет, Хабр!

У меня есть хобби — смотреть записи собеседований фронтенд-разработчиков. К моей радости, во многих из них встречаются вопросы про accessibility. На этом хорошие новости заканчиваются.

Далее я начинаю тихо плакать в уголку. Что интервьюер, что кандидат строят весь диалог в стиле: «Это про адаптацию для слепых». В общем, набрался я сил, решил написать статью, чтобы показать всем, где у нас ошибки.

Я на практике покажу, в каких местах появляется accessibility. Дам несколько советов. Также важно сказать, что все термины, используемые в статье, моя вольная интерпретация. Пожалуйста, учтите это и больше обращайте внимание на смысл.

Давайте посмотрим, что я вам подготовил.

Привет, Хаброчане!

Если вы думаете, что Chrome DevTools нужны только для того, чтобы посмотреть на ошибку в консоли или скопировать путь к элементу, вы используете лишь малую часть их возможностей. На самом деле, это рабочая среда, которая должна быть открыта у фронтенд-разработчика постоянно. С её помощью можно не только искать баги, но и проектировать интерфейсы, тестировать поведение на разных устройствах, анализировать производительность и вносить правки в код прямо из браузера.

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

Предпраздничные дни для веб-разработчика — это дни высокой нагрузки. Многие заказчики хотят новогодних обновлений: добавляются игры, адвенты, украшения и, конечно, пасхалки.

В этой статье мы решили поделиться лучшими апдейтами и сайтами, заточенными под новогодние праздники и зимние развлечения. Давайте все вместе отдохнём, играя в «компьютерные игры» (ведь из-за игр мы и потянулись к разработке! Кто не делал своего питона или сокобан?), и устроим голосование за самые интересные новогодние активности онлайн!

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

«Через год дизайнеры будут не нужны» — в конце 2023 года эту фразу мы слышали постоянно. В новостях, в чатах. Midjourney, Stable Diffusion, Кандинский — все это выглядело как начало конца профессии. Прошел год. И реальность, как это часто бывает, оказалась менее громкой, но гораздо интереснее. Сегодня я Дарина Костина, дизайнер с 10 летним опытом, практикующий преподаватель поделюсь с вами опытом использования нейросетей в нашей студии karma.web.

Здравствуйте, товарищи! Меня зовут Валентин, и сегодня мы снова поговорим про Atomic CSS! Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на лучшие практики этого подхода и сделаем выводы.

Эту статью можно отчасти считать продолжением моей предыдущей, по данной теме, хотя напрямую они не связанны. Но если там был хардкор и технические детали, то здесь уже разберем прикладные вопросы: как верстать в Atomic CSS, чтобы получить заявленный эффект.

Хабр, привет!

На носу Новый год. Все друг друга поздравляют. Мне это время очень нравится. Для меня Новый год — самый главный праздник.

В общем, мы же фронтендеры. Я подумал: а почему бы не придумать специальную открытку с поздравлением? Использовать я буду только HTML и CSS. Никаких картинок. Да-да, даже векторного SVG.

Единственным «хаком» будет шрифт — мы подберём красивый. Также у нас будет анимация снега. В общем, сделаем всё по красоте!

В ходе реализации я буду использовать все последние фишки CSS. Вдруг вы о них не слышали — заодно и что-то полезное для себя найдёте.

Давайте уже сделаем новогоднюю открытку!

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!

Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.

Я ничего не имею против JS, но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS.

В этой статье я приведу несколько примеров; сможете придумать свои?

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

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