Назад

Почему верстальщики так любят портить дизайн?

Мы тратим кучу времени, чтобы придумать оригинальный, интересный и функциональный дизайн, разрабатываем прототип, выбираем цвета и элементы сайта, расставляем формы, заморачиваемся над кнопками и прочими деталями, вносим правки перебираем множество вариантов, чтобы клиент реально остался доволен. А также не только клиент, но и будущие посетители сайта. Мы дизайнеры думаем об этом всем наперед!

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

И это только вершина айсберга ведь не обладая нужными навыками тестирования (адаптивности, кросбраузерности, валидности, функциональности) клиент не видит и половины всех существующих проблем.

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

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

Приведу пример:

Я подбирала фото в слайдер так, чтобы описание легко и удобно воспринималось, не перекрывая фото, шрифт читаемый, его размер позволяет вставить достаточно строк. В форме импуты были скругленные, как и кнопки. Иконки специально проработаны под импуты.

Что же получилось после верстки?

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

Приведу типовые ошибки несоответствия верстки и дизайна:

  • Не соответствие шрифта!
  • Не соответствие размера (элементы меньше – больше чем в дизайне) и расположения блоков, без сохранения стилистических решений.
  • Не соответствие интерактивных элементов (кнопки, формы поиска и обратной связи) Кнопки более простые без стилей, эффектов подсветок скруглений и тд.
  • Дизайн рассыпается в телефоне и разных браузерах.
  • Не соответствие цветов.
  • Верстальщик не заморачивается на детали, использует иконки, стрелочки и другие элементы те, что ему удобнее, а не те, что были в psd.

Приведу примеры сервисов, которыми можно протестировать готовую верстку:

Google Structured Data Testing Tool
Простой и удобный валидатор микроразметки от Google. Можно скопировать код или указать страницу прямо в браузере, сервис выполнит сканирование и покажет слева исходный код, а справа — размеченные данные. При наличии ошибок укажет на них подсветкой.

Google PageSpeed Tools
Измеряет скорость загрузки страниц. Дает рекомендации, какие изображения на странице необходимо сжать, а какие скрипты и стили — сократить или спрятать. Также показывает, какие приемы оптимизации уже были внедрены.

Google Mobile-Friendly Test Tool
С помощью этого сервиса от Google можно узнать, насколько оптимизирована конкретная страница для мобильных устройств. Сервис показывает, какие ошибки могут возникнуть при обходе страницы роботом мобильного поиска, а также дает возможность отправить запрос на индексирование страницы в Google.

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

Заключение

Заплатив большие деньги за дизайн нельзя расслабляться. Верстка не менее важный этап. Старайтесь максимально участвовать в процессе, контролируйте ход работ, просите максимального соответствия, обязательно тестируйте верстку через сервисы и в ручную, используя разные браузеры, телефоны, планшеты. Ищите реально дельных специалистов, которые делают с душой. Лучше всего узнавать о верстальщиках у самих дизайнеров, так как если они работают в паре, значит их устраивает работа друг друга. Процесс разработки проекта уже слажен и отточен. Так что скорее всего вы получите готовый (предсказуемо хороший) результат за более короткие сроки. И вы сможете быть уверены, что ваш сайт люди увидят таким каким вы его запланировали.

PS. У меня есть и множество примеров очень качественной, в целом отличной верстки ( их вы увидите по ссылкам к работам в портфолио, к этому и надо стремиться!

Готовы работать со мной?
Отправьте мне письмо по электронной почте: jillianz20@mail.ru или заполните форму:
Ваше имя

Ваш телефон

Ваш E-mail

Ваше сообщение