Болдырев Михаил

Что ответить клиенту, если он приносит плохой дизайн-макет и говорит, что ему всё нравится (кейс)

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

Болдырев Михаил Михаил БолдыревГен. Директор студии Клондайк
Пример плохо дизайна

Предложение по дизайну (критика)

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

— Техническая реализация элементов

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

Правильная техника:

Дизайнер должен знать функции HTML и CSS (в идеале HTML5 и CSS3). Можно использовать один из популярных CSS Фреймворков или шаблонные решения.

Перед созданием любого элемента (кнопки, градиенты и др.) необходимо чётко представлять его реализацию в CSS. В противном случае верстальщику придётся использовать графические элементы, что снизит качество конечного продукта. В таких случаях разумнее сразу применять готовые CSS-решения.

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

— Работа со шрифтами

Необходимо использовать одно семейство шрифтов из рекомендованных для web разработки. Иначе нам придётся делать настройки для шрифтов в CSS или подгружать нестандартные шрифты пользователю сайта (здесь надо смотреть PSD, что именно применил дизайнер, но на данном макете точно можно сказать — что не то, что надо).

— Учёт функционала CMS

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

Этих основных тезисов должно быть достаточно для оценки данного макета.

Возможные решения:

  1. Верстка "как есть"
    Технически возможно, но результат будет некачественным. Мы не сможем предоставить гарантию, а все доработки потребуют отдельной оплаты. Смета на реализацию при этом не изменится.
  2. Ориентируясь на вариант дизайнера, можно сделать сайт на CSS фреймворке с сохранением колористики и структуры. Визуально по цвету сайт будет похож на макет, но каждый отдельно взятый элемент будет немного отличаться. Также в этом варианте могут возникнуть неровности структуры, нарушения сетки и т. п., так как эти ошибки уже есть в проекте и исправить их без помощи опытного дизайнера не получится.
  3. Использование готового шаблона
    • Можно применить заранее купленную HTML-вёрстку, адаптировав её под ваш проект. Примеры: смотреть тут
    • Использование чистого CSS-фреймворка (например Bootstrap). Примеры: смотреть тут. Это технологически грамотное решение стоимостью $0-50.

Другое дерево решений вашей задачи — это использование дизайнера, ориентированного для веб-дизайна (дизайнера web сайтов), которому не придётся объяснять тонкости и нюансы. Но это невозможно без увеличения бюджета.

Оставить комментарий