Удобные интерфейсы
Личные кабинеты, дашборды, рабочие инструменты. Мне интересно превращать сложную логику в интерфейс, в котором человек может спокойно разобраться и сделать своё дело.
- React
- Next.js
- Доступность
zeRET / фронтенд-разработчик
Привет,я Кирилл.
Делаю сайты и веб-приложения на React и Next.js. Люблю разбираться, как всё устроено, собирать удобные интерфейсы и возиться с анимацией.
Что я делаюПочта пока недоступна
⌘ zeret.pw / playground
Маленький рабочий мир↗
Из идеи — в интерфейс._
Превью / 001Всё складывается.
Немного структуры. Немного движения. Интерфейс, который отвечает.
Наведи курсор — управление твоё · нажми, чтобы исследовать
Можно обсудить проект
Листай — всё сложится ↓01 — 03Что я делаю
Один интерфейс. Много деталей.
Сцена выше складывается из того, с чем мне нравится работать: полезных сервисов, общих компонентов и продуманного движения.
Общие компоненты
Когда одна и та же кнопка нужна в десяти местах, хочется менять её один раз. Собираю общие компоненты, чтобы страницы оставались согласованными, а правки занимали меньше времени.
- TypeScript
- Дизайн-системы
- Storybook
Осмысленное движение
Нравится оживлять интерфейс: пробовать переходы, работать с движением и 3D. Главное — вовремя остановиться, пока обычный скролл не превратился в аттракцион.
- GSAP
- Three.js
- Веб-платформа
От отдельных деталей — к цельному опыту.Как я работаю ↓
Как я работаю
От задачи к интерфейсу.
Сначала разбираюсь, что нужно сделать человеку. Потом собираю экран и проверяю, как он ведёт себя в работе. По пути обычно находится что упростить.
01 / Разобраться в задаче
Что человек хочет сделать?
Начинаю с вопросов: зачем нужен этот экран, откуда берутся данные и что с ними можно делать. Когда это понятно, проще решить, какие компоненты понадобятся.
- Задача пользователя
- Данные и действия
- Структура компонентов
02 / Собрать и проверить
А если что-то пойдёт не так?
Данные могут долго загружаться, а запрос — закончиться ошибкой. Проверяю такие случаи отдельно: обидно заполнить форму и потерять всё из-за одного неудачного запроса.
- Медленная загрузка
- Пустые данные и ошибки
- Разные права доступа
03 / Довести детали
Теперь можно навести красоту.
Уточняю отступы, расставляю акценты, подбираю анимацию. Смотрю, удобно ли пользоваться экраном с телефона и понятно ли, что произошло после нажатия кнопки.
- Текст и визуальные акценты
- Телефон и клавиатура
- Отклик на действия
Что остаётся в коде
Код, к которому можно вернуться.
Интерфейс будет меняться: появятся новые поля, страницы и требования. Стараюсь писать так, чтобы следующую правку было легко внести — мне или другому разработчику.
cart.tsДо правки
Работаю...
function calc(a: number[]) {
const x = a.reduce((s, n) => s + n, 0)
return x
}
const data = [120, 80, 40]
const result = calc(data)
По названию должно быть понятно, что делает функция и что хранится в переменной. Оставляю меньше поводов ходить по файлам в поисках объяснения.