Дизайн сайта: считаем непохожие экраны, а не страницы
Вопрос, с которого начинается работа, звучит неудобно: сколько у вас на самом деле непохожего. Сорок карточек каталога — это один экран, а не сорок; три страницы услуг, где человек принимает одинаковое решение, — тоже один. Зато две внешне похожие страницы могут оказаться разными экранами, если на одной выбирают по цене, а на другой по срокам. От этого числа и считается смета, поэтому первый этап — инвентаризация того, что уже есть, а не рисование.
- Сначала карта экранов, потом смета: обычно непохожего меньше, чем страниц
- Каждый тип рисуется один раз, дальше страницы собираются из готового
- Состояния рисуются вместе с экранами: пусто, много, ошибка, длинный заголовок
Слева — то, за что предлагают платить, когда считают страницы. Справа — то, что действительно рисуется. Разница между этими двумя столбиками и есть разница между сметой, собранной из копий, и сметой, собранной из работы.
Что считается непохожим экраном, а что копией
Этот блок стоит третьим намеренно: пока не решено, что именно считать, разговор о смете бессмысленный. Правило простое и проверяемое — экраны непохожи не тогда, когда на них разный текст, а тогда, когда на них принимаются разные решения.
| Что на сайте | Рисуется отдельно | Собирается из готового | Почему так |
|---|---|---|---|
| Главная | да, всегда | — | единственный экран, где человек ещё не выбрал, куда идти: работа здесь не про блоки, а про развилку |
| Раздел со списком | да, один на все разделы | остальные разделы | услуги, проекты, статьи устроены одинаково: список, фильтр, карточка в списке. Различается содержимое, а не решение |
| Страница услуги | да, по одной на каждый тип решения | услуги с той же логикой | если у одной услуги выбирают по цене, а у другой по срокам и допускам — это два экрана, даже если верстка одна |
| Карточка каталога | да, один шаблон | все сорок или четыреста карточек | карточка — это шаблон, а не страница. Рисуется один раз, дальше в него подставляются данные |
| Статья или новость | да, один шаблон | весь блог | здесь важнее не макет, а правила: что будет с длинным заголовком, таблицей, цитатой и фотографией без подписи |
| Контакты, о компании, политика | нет | да, из типовых блоков | решение на них не принимается, а проверяется. Рисовать их отдельно — тратить смету на то, что читают после выбора |
| Формы и их состояния | да, один набор на сайт | все формы сайта | пусто, ошибка, отправка, успех. Один набор закрывает и заявку, и подписку, и обратный звонок |
Сорок карточек каталога — это один экран, а две похожие страницы услуг могут оказаться двумя. Отсюда и практический вывод для сметы: она почти никогда не совпадает с числом страниц в вашем меню. Мы считаем её после того, как разложим ваш сайт по этой таблице, и показываем разложенным — чтобы было видно, за что именно вы платите и что решили не рисовать.
Как собирается система экранов
Четыре шага, и первый не про рисование вовсе. Его пропускают чаще всего — и именно из-за этого смета оказывается больше нужного, а сайт через год всё равно расходится: каждая новая страница рисуется с нуля, потому что правил, по которым её собрать, никто не оставил.
-
Шаг 1
Инвентаризация
здесь смета и определяется
Собираем карту всех страниц — из меню, из карты сайта, из выгрузки адресов — и склеиваем те, где человек принимает одинаковое решение. На выходе список типов вместо списка страниц. Часто он оказывается короче ожидаемого, и это хорошая новость: платить за копии не придётся.
-
Шаг 2
Шаблоны типов
по одному на тип
Каждый тип рисуется один раз: сначала прототипом, потом макетом, мобильный первым. Здесь же решается, из каких кусков собирается страница, — чтобы потом раздел можно было добавить, не вызывая дизайнера.
-
Шаг 3
Состояния
то, что забывают чаще всего
Пусто, много, ошибка, загрузка, длинный заголовок, отсутствующая фотография. Экран в жизни бывает не только таким, каким его нарисовали для презентации, и разница между хорошим и плохим сайтом живёт ровно здесь.
-
Шаг 4
Сборка и передача
сопровождение до сдачи
Собираем из шаблонов оставшиеся страницы, отдаём исходники, набор компонентов и описание поведения текстом рядом с макетом. Дальше отвечаем на вопросы вашего разработчика, пока он не закончит: дизайн, который некому объяснить, дорисовывается на вёрстке и обычно не в вашу пользу.
Сроков в подписях нет намеренно: они зависят от числа типов, а не от числа шагов. Общий срок берётся из канона направления — 5–7 недель, и считается он от утверждённой карты экранов, а не от первого письма.
Посчитайте свои непохожие экраны — семь типов
Отметьте те типы, которые у вас есть или появятся в ближайший год. Не страницы, а именно типы: если разделов пять, но устроены они одинаково, это одна отметка. Ничего никуда не отправляется, отметки остаются в этом браузере.
Вердикт появится после первой отметки и скажет, ваш случай — одна страница, система экранов или уже продукт. Это не смета: смету мы называем после того, как посмотрим на ваш сайт вместе.
Отмечено 0 из 7
Считать по этому списку можно и вручную — и, если честно, именно так мы и считаем на разборе, только вместе с вами и с вашим сайтом перед глазами. Список нужен для другого: он переводит разговор со «сколько стоит дизайн сайта» на «сколько у нас непохожего», а это единственный вопрос, на который вообще есть ответ.
Прислать карту разделов
Насчитали больше пяти типов?Пришлите адрес сайта или карту разделов — разложим её по таблице выше и скажем, что из этого действительно надо рисовать, а что соберётся из уже нарисованного. Полчаса, бесплатно, без доступов.
Прислать в Telegram Цены на все услугиЧто вы получаете вместо стопки макетов
Разница между «нарисовали сайт» и «собрали систему» видна не в день сдачи, а через полгода, когда появляется новый раздел. В первом случае его рисуют заново, во втором — собирают из готового за вечер, и выглядит он как часть сайта, а не как гость.
Список типов вместо списка страниц, с пометкой, что рисуется, что собирается и что решили не делать вовсе. Эту карту можно показать любому другому подрядчику и получить сопоставимую оценку — она и есть предмет договора.
По одному на тип: главная, раздел, карточка, статья, форма. Внутри шаблона — из каких кусков он собран и какие из них можно менять местами, не ломая страницу.
Пусто, много, ошибка, загрузка, длинный заголовок, нет фотографии. Их забывают чаще всего, и тогда их придумывает верстальщик — обычно серым текстом по центру, ровно в тот момент, когда человек решает, остаться или уйти.
Не сжатый десктоп, а нарисованный экран: свой порядок блоков, своё место кнопки, свои размеры. На многостраничнике это особенно заметно в разделах со списком и фильтром — они на телефоне устроены иначе.
Кнопки, поля, карточки, отступы и типографская шкала — собранные в набор, а не разбросанные по макетам. Именно он отличает систему от красивых картинок: без него сайт расползается за полгода. Если набор нужен подробнее, чем страницам, — это отдельный формат
Исходники, экспорт изображений и иконок, описание поведения и анимаций текстом рядом с макетом, ответы на вопросы вашего верстальщика до сдачи. Мы не исчезаем в день отправки файла — это самая дешёвая часть работы и самая заметная.
От чего зависит смета: от 140 000 ₽, срок 5–7 недель
Своей цены у формата нет: это вторая смета направления, и сумма подставлена из того же канона, по которому считается родительская страница. Меняется она от четырёх вещей, и ни одна из них не про длину страницы. Для сравнения: одна страница, сделанная как следует, — это первая ступень, от 45 000 ₽; все три описаны на странице направления
-
Сколько непохожих типов, а не страниц
Главный множитель. Сорок карточек каталога прибавляют к работе один шаблон, а три раздела с разной логикой — три. Поэтому разговор о смете начинается с карты экранов, и до неё любая названная сумма будет выдуманной — не потому, что мы скрытничаем, а потому, что считать пока нечего.
-
Сколько состояний у каждого типа
Карточка товара без фотографии, список с одним результатом, форма с ошибкой на третьем поле, статья с таблицей на половину экрана. Состояния — это половина работы над системой и почти весь запас её прочности: именно они превращают макет в то, что можно верстать без догадок.
-
Структура переносится или собирается заново
Если сайт живой и разделы остаются на местах, инвентаризация занимает день и дальше идёт рисование. Если структуру надо пересобирать — что с чем объединить, что вынести, что убрать, — это отдельная работа до макетов, и мы говорим о ней до сметы, а не в середине проекта.
-
Тёмная тема и второй язык
Оба пункта удваивают не работу, а внимание: каждый экран приходится проверять дважды, а тексты на другом языке ломают вёрстку там, где на русском всё помещалось. Это не повод отказываться — это повод сказать о них заранее, чтобы они не превратились в «ещё немного правок» после сдачи.
Наценки за срочность у нас нет: либо успеваем в нормальном темпе, либо честно говорим, что не успеем. Доработки после сдачи считаются по часам — 3 000 ₽ вне договора и 2 000 ₽ в абонементе, — но в пределах двух итераций правки входят в смету и отдельно не выставляются.
Что нужно от вас, чтобы посчитать
Список короткий и известен заранее — это принципиально: сметой, которую нельзя проверить, легко управлять в свою пользу. Всё, что здесь перечислено, у вас либо уже есть, либо собирается за вечер.
Один человек, который принимает решения. Не потому, что мы не любим комитеты, а потому, что на системе экранов их цена видна сразу: каждый новый согласующий добавляет не правку, а свой порядок блоков. Если утверждающих действительно несколько и у каждого свой раздел, ваш случай — корпоративный сайт, там это устроено иначе и заложено в работу.
- Карта разделов в любом виде: меню, список адресов, выгрузка из карты сайта или просто перечисление вслух
- Доступ к текущему сайту и счётчику на чтение — чтобы видеть, какие разделы люди вообще открывают
- Фактура о продукте в любом виде, голосовыми тоже: тексты мы соберём сами, придумывать факты не станем
- Контакт разработчика, который будет верстать: макеты передаём напрямую ему и отвечаем на его вопросы
- Ответ на вопрос, какие разделы будут расти: то, чего сегодня нет, дешевле заложить в шаблон, чем дорисовать потом
- Логотип в векторе и фирменные цвета, если они есть. Если нет — работаем без них, а стиль это отдельная работа
Кому система экранов, а кому — нет
Система окупается не размером сайта, а тем, будет ли он меняться. Сайт, который сдали и забыли, спокойно живёт на наборе отдельных макетов; сайт, куда каждый месяц что-то добавляют, без общих правил расходится — и это видно даже не специалисту.
- Непохожих типов несколько: разделы, карточки, статьи, формы — и решения на них принимаются разные
- Сайт будет расти: появятся услуги, проекты, филиалы, и добавлять их будете вы, а не дизайнер
- Уже есть ощущение, что страницы разъехались: кнопки разные, отступы гуляют, каждая новая похожа на гостя
- Верстать есть кому: свой фронтенд, ваш подрядчик или команда продукта
- Предложение одно и действие одно. Тогда это одна страница и первая смета — дизайн лендинга
- Сайт наполняет редакция, а утверждают макет несколько отделов — корпоративный сайт устроен под это
- Экраны у вас уже нарисованы, не хватает правил — набора компонентов. Рисовать заново не нужно
Если каталог — главное на сайте и покупают прямо на нём, ваш случай точнее закрывает дизайн интернет-магазина: там предмет работы другой — не типы страниц, а состояния карточки, каталога и корзины.
Эта страница — один из девяти форматов дизайна
Общее для всего направления осталось на родительской странице: три сметы с составом, гарантии, что остаётся у вас после сдачи, чем мы отличаемся от фрилансера и агентства и главный вопрос — брать дизайн отдельной строкой или сразу разработку. Здесь этого нет намеренно, чтобы не повторять одно и то же девять раз.
Там же ответ про исходники: файл в Figma передаётся вам с правами редактирования и историей версий, а не картинками. Это правило всей студии, а не условие этого формата. Дизайн сайтов и интерфейсов
Когда дизайн сайта отдельной строкой вам не нужен
Четыре ситуации, в которых мы отговариваем. В трёх из них работа всё-таки нужна — но другая, и мы называем какая прямо на разборе, до счёта.
-
Если собирать макеты некому
Система экранов в Figma — это файл, а не сайт. Чтобы она заработала, нужна вёрстка, движок, формы, аналитика и домен. Без своего разработчика отдельный дизайн окажется дорогой половиной пути. Вам в разработку сайтов: там дизайн входит в работу и отдельная смета на макеты не понадобится.
-
Если страниц много, но все они одинаковые
Каталог на двести позиций и сайт на двести страниц — это разные вещи. Если непохожий тип у вас на самом деле один, платить за систему незачем: хватит одного шаблона и первой ступени. Мы скажем это на разборе и потеряем разницу в смете — зато не потеряем следующий разговор.
-
Если сайт работает, а «надоел»
Самая дорогая гипотеза и заодно риск уронить то, что приносило заявки. Сначала замер: обычно теряет один-два экрана, а не весь сайт. Что именно — покажет аудит сайта, письменный и с точкой отсчёта. После него разговор о новых макетах становится предметным: видно, что переделывать, а что трогать не надо.
-
Если проблема в вёрстке, а не в макетах
Бывает, что макеты в порядке, а сайт всё равно разваливается: страница едет на телефоне, шрифты грузятся секунду, вёрстку правили пять человек подряд. Новый дизайн это не чинит — он ложится поверх той же вёрстки. Такой случай закрывает редизайн, и начинается он с кода, а не с картинок.
Во всех четырёх случаях мы называем, что делать вместоПубличный список таких ситуаций по всем услугам студии собран на отдельной странице — вместе с причинами, по которым мы отказываемся.
Когда вам это не нужноКому в соседний формат, а не сюда
Соседи различаются предметом работы. Здесь считают типы экранов; рядом — состояния карточки, шаблоны для редакции или правила без макетов. Попасть не в тот формат не страшно, но обидно: работа будет сделана хорошо и не про то.
Нижние границы всех направлений собраны на странице цен, а условия работы и гарантии — на странице оплаты и гарантий. Если не понимаете, какой формат ваш, разберём на созвоне: мы называем не сумму, а предмет работы.
Дизайн сайта: что стоит знать до заказа
Почему смету нельзя назвать по числу страниц
Число страниц — это не объём работы, а результат того, как устроен ваш каталог и сколько у вас услуг. Четыреста карточек товаров добавляют к дизайну один шаблон; шесть разделов, устроенных одинаково, — тоже один. Зато две страницы услуг, внешне похожие, оказываются двумя экранами, если решения на них принимаются по-разному: у одной выбирают по цене, у другой по срокам и допускам.
Отсюда правило, по которому мы считаем: экраны непохожи не тогда, когда на них разный текст, а тогда, когда на них разное решение. Поэтому первый этап работы — инвентаризация, а не рисование: карта страниц склеивается в список типов, и уже по нему собирается смета. Список типов почти всегда короче списка страниц, и это главная экономия, которую здесь можно получить.
Практический вывод для разговора с любым подрядчиком, не только с нами: просите разложить ваш сайт по типам до того, как называется сумма. Если в ответ звучит цена «за страницу», уточните, что считается страницей, — и почти всегда выяснится, что копии в этой смете считаются наравне с работой.
Что такое состояния экрана и почему они дороже красоты
Состояние — это тот же экран в другой жизненной ситуации: список, в котором ничего не нашлось; карточка без фотографии; форма с ошибкой на третьем поле; заголовок, который оказался вдвое длиннее, чем в макете. В презентации таких экранов не бывает, а у людей они случаются каждый день — и именно в этот момент человек решает, остаться или уйти.
Когда состояния не нарисованы, их придумывает верстальщик. Он не виноват: перед ним стоит задача, а образца нет. Получается серый текст по центру, кнопка, которая ведёт в никуда, и пустая страница вместо объяснения, что делать дальше. Стоимость такой экономии видна не сразу, зато видна долго.
Поэтому состояния рисуются вместе с экранами и входят в смету. Это и есть разница между макетом, который красиво выглядит на защите, и макетом, который можно верстать без догадок. Заодно это проверяемый пункт приёмки: попросите показать список состояний по каждому типу — он либо есть, либо его нет.
Когда нужен набор компонентов, а когда хватит макетов
Набор компонентов — сетка, шкала отступов, типографика, кнопки и поля со всеми состояниями — окупается не размером сайта, а его изменчивостью. Сайт, который сдали и не трогают, спокойно живёт на отдельных макетах. Сайт, куда каждый месяц добавляют услугу, проект или филиал, без общих правил расходится: кнопки отличаются, отступы гуляют, новая страница выглядит гостем.
Если сайт уже расползся, а рисовать заново незачем, работа устроена иначе: мы описываем то, что есть, и собираем из этого набор. Это отдельный формат — UI-kit и дизайн-система, и он дешевле, чем новый дизайн. Если же наоборот, сайт наполняет редакция и утверждают макет несколько отделов, вам в корпоративный формат
И последнее, о чём стоит договориться до начала: собирать сайт в браузере мы в этом формате не будем. Вы получаете макеты, набор и сопровождение вашего разработчика, а если разработчика нет — честный ответ находится на странице разработки сайтов, где дизайн входит в работу. Три сметы направления с составом каждой описаны на странице дизайна
Вопросы про дизайн сайта
Шесть вопросов, которые задают именно про систему экранов. Общие — про договор, оплату и гарантии — собраны на отдельной странице, а про дизайн вообще написано на странице направления
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутНе по сорока. Мы разложим их по типам и посчитаем непохожее: обычно из сорока страниц получается четыре-шесть экранов, а остальное — тот же шаблон с другим содержимым. Смета собирается по этому списку, и список мы показываем до счёта, а не после. Вторая смета направления — от 140 000 ₽, срок 5–7 недель; если непохожий тип окажется один, честно скажем, что вам хватит первой ступени, от 45 000 ₽.
Входит: во второй смете он и есть главное отличие от набора отдельных макетов. Сетка, шкала отступов, типографика, кнопки и поля со всеми состояниями собираются в набор, а не остаются разбросанными по экранам. Отдельным форматом набор становится в одном случае — когда экраны у вас уже нарисованы и рисовать заново не нужно: тогда работа называется UI-kit и стоит меньше, потому что рисования в ней почти нет.
В этом формате — нет. Вы получаете макеты, набор компонентов, исходники и сопровождение вашего разработчика до сдачи: мы отвечаем на его вопросы и правим то, что в макете оказалось неочевидным. Если верстать некому, отдельный дизайн вам невыгоден — это разработка сайта, и дизайн там внутри, отдельной сметой его брать не нужно. Мы говорим об этом на разборе, а не после сдачи файлов.
Смотрим на статистику. Если разделы открывают и через них приходят заявки, структура рабочая: переносим и правим точечно. Если половина разделов не открывалась ни разу за год, их незачем переносить — это не смелое решение, а экономия на рисовании. Вопрос «что с чем объединить» решается до макетов, вместе с вами, и он входит в первый этап. Что именно теряет текущий сайт, точнее покажет аудит, но для карты экранов обычно хватает счётчика.
Две, и это записано в составе сметы направления. На системе экранов важнее другое: правки идут по типу, а не по странице. Поменяли карточку — поменялись все страницы, где она используется, и переделывать сорок макетов не нужно. Именно поэтому мы утверждаем прототипы типов до рисования: спор о структуре там стоит разговора, а в готовых макетах — перерисовки всех, кто эту структуру использует.
Дороже, и мы скажем насколько после того, как посмотрим на состав экранов. Тёмная тема — это не «инвертировать цвета»: контраст, тени и картинки ведут себя иначе, и каждый экран проверяется дважды. Второй язык ломает вёрстку там, где на русском всё помещалось: немецкие и английские строки другой длины. Оба пункта дешевле заложить сразу, чем добавить после сдачи, — поэтому мы спрашиваем о них на разборе.
Пришлите карту разделов — посчитаем экраны
- Полчаса разговора: раскладываем ваш сайт по типам и считаем непохожее вслух
- Скажем, что можно не рисовать вовсе, — обычно это треть списка разделов
- Если возьмёмся — от 140 000 ₽, срок 5–7 недель, исходники и набор ваши
Заявка принята
Посмотрим ваш сайт своими глазами и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут