Веб-дизайн *

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

Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure.

Летом 2023 года в Фигме появились условия и переменные, благодаря которым можно показывать всё более сложные взаимодействия. А также меньшими усилиями добиваться того, что раньше требовало усилий значимых, например, давать респондентам возможность заполнить поля формы в произвольном порядке.

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

В этой статье осторожно прикоснёмся к sin() и cos(). Есть и другие функции, в том числе tan(), зачем же останавливаться только на синусе и косинусе? Они идеальны для размещения текста по краю круга. Об этом уже рассказывалось на CSS-Tricks, когда Крис поделился подходом к размещению текста по кругу с миксинами Sass. Это было шесть лет назад [оригинал опубликован 8 марта 2023 года], поэтому поработаем с размещением чисел по-новому.

Вот о чём я говорю:

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

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

В данной статье содержатся тесты фреймворка Cample.js версии 3.2.0-alpha.12. Это первый отчёт о производительности. Нулевой отчёт вышел несколько месяцев тому назад. Отчёт включает в себя сравнения по производительности с популярными фреймворками и библиотекой, а также сравнение с реализацией на чистом javascript. Все результаты тестов основаны на показателях keyed реализации в репозитории js-framework-benchmark в github. Сами они располагаются на странице выпуска №122.

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

«А зачем платить за курсы? 99% материала, который там дают, можно найти на ютубе. Покупай, если не найдешь нужный материал. Но сначала попробуй бесплатно!» — сказал мой брат после того, как я поделился идеей пойти учиться на дизайнера.

Я так и сделал. Но вскоре понял, что самый сложный вопрос «какие навыки мне важнее развивать именно сейчас», а не «найду ли я нужный материал». Новичкам проще — им нужна база. Но какие навыки надо развивать когда ты middle или senior?

Привет! Я Дима, автор телеграм канала Дизайн тусовка. Я собрал полноценный гайд для всех грейдов на основе своего опыта и недавнего поиска работы в топ IT компаниях России, вот мой результат:

Вы знаете, каково это.

Часто ли у вас бывало, что отклонение куки вызывало дискомфорт? Вроде есть уведомление на половину экрана. Есть кнопка «настроить свои параметры», при нажатии которой открывается меню, где нужно выбрать конкретные параметры. Но зато в любой момент, конечно, вы можете «принять всё» и не думать о дополнительных шагах.

Или, может, вам была нужна та самая пробная подписка на 7 дней, но когда вы решили её отменить, то это резко из одного действия превратилось в лабиринт до надписи «Отменить подписку». Все эти техники объединены в группу, называемую «Тёмные паттерны», шаблоны для создания манипулятивных схем взаимодействия системы и пользователя.

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

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

Хочу поделиться своим опытом и рассказать, как я прокачиваю насмотренность в ux (не ui). Надеюсь, это кому-нибудь поможет.

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

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

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

Приглашаем присоединиться к этому разговору 21 февраля в 18:30 — офлайн в Москва Сити и онлайн в трансляции на Youtube. Под катом найдёте подробный анонс и ссылку на регистрацию

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

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

Всем привет! Меня зовут Александр Григоренко, я фронтенд-разработчик, и я часто сталкиваюсь с разработкой веб-интерфейсов с использованием Drag and Drop. В своей предыдущей статье про Drag and Drop я рассказывал про историю появления и развития этого подхода: появившись в первом в мире графическом интерфейсе, Drag and Drop продолжает быть одной из самых актуальных технологий и на сегодняшний день. В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop. В первую очередь, я буду приводить примеры и говорить об особенностях Drag and Drop в рамках сложившихся практик в современных веб-интерфейсах, но многое из этого будет справедливо и для интерфейсов классических настольных приложений.

Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности как с точки зрения accessibility, так и usability.

Это неполный список и он не включает в себя недостатки ARIA. Мне хотелось найти баланс между широко известными проблемами и чаще встречаемыми (но менее известными), а также добавить в список то, что мы воспринимаем, как должное. В каждом из разделов я укажу степень серьёзности проблемы, альтернативные решения и ссылки, по которым можно найти более подробную информацию.

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

Привет, друзья! Сегодня мы поговорим о том, как  добиться эффективной обработки заказов, оформленных на сайте стандартного интернет-магазина на Tilda. Я на примере своего проекта (интернет-магазин карликовых кроликов) расскажу, почему менеджерам неудобно работать с заявками, которые приходят из Tilda напрямую, а также покажу, как можно подключить к обработке заказов чат-бота на примере сервиса ChatApp. Мы поговорим о принципе этой интеграции (то есть о механизме веб-хука) и о проверенных на практике сценариях использования бота. Статья будет полезна тем, у кого уже есть сайт на Tilda (или скоро будет), и кто хочет автоматизировать коммуникацию так, чтобы она была комфортна и заказчику, и менеджерам, и конечно, владельцу проекта.

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

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

«А» — начальная точка проекта. Любой проект должен начинаться с правильной постановки задачи. От постановки и понимания задачи зависит результат, за который отвечает исполнитель. Важно услышать саму потребность, с которой к вам пришел заказчик, и интерпретировать её в постановку задачи. Запросить необходимые материалы и задать достаточное количество вопросов для качественного результата — зона ответственности исполнителя. Постановкой задачи является формулировка пользы и способа ее достижения в конкретные сроки. Польза должна быть сформулирована в мире заказчика, а не в мире исполнителя. Финальную постановку задачи нужно согласовать с заказчиком, чтобы убедиться, что вы правильно друг друга понимаете. Выявленное полезное действие в проекте будет служить вам надежным инструментом для конструктивного диалога и принятия верных решений.

«Б» в проекте — это сделанная работа. Делать ≠ сделать. Для заказчика результат либо есть, либо его нет. Путь из точки «А» в точку «Б» существует только в мире исполнителя. Если вы профессионал и цените свою репутацию, то ваши критерии к выполняемой работе должны быть выше, чем у заказчика. Работу нельзя делать плохо, даже если это устроит клиента или он не сразу заметит. Сделать ≠ сдать, сделать — это действительно сделать, вовремя запустить качественный проект и принести пользу.

Если CSS для вас все еще боль и страдания, добро пожаловать под кат. Мы наткнулись на интересную подборку советов по CSS на английском языке и решили перевести ее, дополнив собственными примерами с кодом.

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