Редизайн сайта с дизайн-системой в Figma

Редизайн — это не «перекрасить кнопки». Чаще всего сайт перестал работать потому, что за годы к нему пристроили десяток разделов, и каждый живёт по своим правилам. Разбираю это в Figma и собираю обратно так, чтобы дальше сайт можно было развивать без меня.

Сначала смотрю, что уже собрано

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

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

Дизайн-система, а не набор картинок

Вместо десяти отдельных макетов собираю библиотеку, из которой они складываются:

• шрифтовая шкала и цвета с их назначением, а не просто палитра;
• компоненты со всеми состояниями: кнопки, поля, карточки, таблицы, меню;
• сетка и отступы, одинаковые на всех страницах;
• готовые шаблоны типовых страниц, из которых редактор соберёт новую сам.

Мобильная версия наравне с десктопом

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

О чём стоит договориться заранее

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