Веб-дизайн сайта: что входит в услугу и как понять качество

Веб-дизайн: что за ним стоит на самом деле

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

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

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

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

Четыре части работы над веб-дизайном

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

Вот из чего складывается работа.

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

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

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

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

• Написание текстов: дизайнер расставляет текст по экранам и подсказывает, где он длинный, а где короткий, но сами формулировки — это отдельная работа.
• Фотосъёмка и подготовка собственных изображений: если своих фотографий нет, решается, чем их заменить.
• Сборка сайта на платформе: дизайн и сборка — разные этапы, даже когда их делает один человек.
• Логотип и фирменный стиль: если их нет, дизайн страницы можно сделать и без них, но это стоит проговорить до начала.

Кому нужен свой дизайн, а кому хватит шаблона

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

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

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

Ещё один понятный случай — когда у компании уже есть свой стиль: цвета, шрифты, логотип, оформленные материалы. Шаблон в них не встроится, и сайт будет выглядеть чужим рядом с остальным.

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

Дизайн с нуля, по фирменному стилю или на шаблоне

Три подхода отличаются не только ценой, но и тем, что требуется от вас и что можно менять потом. Разница видна, если положить их рядом.

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

Чем дизайн отличается от красивой картинки

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

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

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

Из этого следует практичный вывод для приёмки работы. Оценивая макет, полезно смотреть не «нравится или нет», а «понятно ли человеку со стороны». Это разные вопросы, и второй важнее.

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

Что дизайнер решает до того, как начнёт рисовать

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

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

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

Как дизайн ведёт себя на разных экранах

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

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

Спросить об этом стоит заранее, одним вопросом: входит ли макет для телефона в объём работ. Ответ «там всё само подстроится» означает, что решать будет сборщик, а не дизайнер.

Как понять, что дизайн сделан хорошо

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

• С первого экрана понятно, что предлагают и кому: человек со стороны отвечает на этот вопрос сразу, не листая дальше и не спрашивая вас.
• На каждом экране один главный элемент: взгляд сам находит, куда смотреть, и не мечется между несколькими одинаково яркими кнопками.
• Текст читается без усилия: строки не слишком длинные, размер шрифта не заставляет приближать экран, между блоками есть воздух.
• Порядок блоков отвечает на вопросы в том порядке, в каком они возникают: сначала что это, потом кому подходит, потом как устроено, потом как начать.
• Всё выглядит одной работой: кнопки везде одинаковые, отступы повторяются, шрифтов не больше двух-трёх начертаний.
• На телефоне ничего не разъезжается и не приходится двигать страницу вбок, чтобы прочитать строку.

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

И наоборот: макет может быть очень красивым и не проходить по половине пунктов. Это не значит, что дизайнер плохой — чаще это значит, что не согласовали структуру до отрисовки.

Что смотреть в портфолио дизайнера

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

Первое — есть ли работы, похожие на вашу задачу по типу, а не по отрасли. Страница услуги и интернет-магазин устроены по-разному, и опыт в вашей отрасли значит меньше, чем опыт с похожей задачей.

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

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

И полезный вопрос вслух: попросите рассказать про одну работу — зачем там такой порядок блоков. Ответ по существу и ответ «так красивее» звучат очень по-разному.

Отдельно имеет смысл посмотреть работы на телефоне, а не только на компьютере. Портфолио обычно показывают широкими картинками, и как эти же страницы ведут себя на узком экране, из подборки не видно.

Как проходит работа над дизайном

Порядок этапов почти не зависит от размера проекта — меняется только их длина. Понимание этого порядка помогает вовремя вставить свои правки и не платить за переделку.

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

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

Что потребуется от вас во время работы

Дизайн — не та работа, которую можно заказать и вернуться за результатом через месяц. Часть материалов и решений есть только у вас, и без них процесс встаёт.

1. Тексты или их смысл: что за услуга, из чего состоит, чем отличается.
2. Изображения: свои фото работ, помещения, команды — или решение, чем их заменить.
3. Решения по ходу: что показываем первым, называем ли цену на странице.
4. Один человек с вашей стороны, который собирает правки.

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

Где дизайнерский проект чаще всего буксует

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

• Правки по структуре начинаются после отрисовки: поменять порядок блоков в списке — минуты, а в готовых макетах — переделать несколько экранов, поэтому структуру утверждают до дизайна.
• Дизайн обсуждают словами «нравится — не нравится»: это про вкус, а не про задачу, и такой разговор может идти бесконечно, потому что у него нет критерия окончания.
• Тексты обещают прислать позже: макет рисуется на заглушках, а когда приходит настоящий текст втрое длиннее, экраны приходится перекраивать.
• Правки приходят от нескольких человек и противоречат друг другу: без одного ответственного за замечания работа встаёт или начинает ходить по кругу.
• Не обсудили, что дизайн ещё нужно собрать: макет — это картинка, а не сайт, и сборка на платформе — отдельный этап со своим сроком.

Общее у всех пунктов одно: они стоят не денег, а времени, и обнаруживаются на приёмке, когда переделывать дороже, чем было договориться на старте.

Лечится это одним разговором до начала работы: назвать состав работ, порядок этапов и то, что остаётся на вашей стороне.

Дизайн после запуска: что дальше

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

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

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

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

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

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

Чем ускорить дизайн: список заранее

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

• Описание услуги своими словами: что делаете, для кого, чем отличаетесь.
• Список того, что должно быть на странице, даже черновой и в свободном порядке.
• Тексты или их черновики: хотя бы смысл каждого блока.
• Свои фотографии: работы, помещение, команда, продукция.
• Логотип и фирменные цвета, если они есть, в исходных файлах.
• Два-три сайта, которые вам нравятся, с пояснением, чем именно.
• Понимание, что человек должен сделать на странице: позвонить, написать, оставить заявку.
• Имя одного человека с вашей стороны, который собирает правки и принимает решения.

Один абзац для первого разговора о дизайне

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

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

Третье — честно посмотреть, какие материалы у вас есть. Есть ли свои фотографии, есть ли логотип в исходниках, написаны ли тексты. Это не требование, а исходные данные: от них зависит и срок, и объём.

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

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