Павел Гук
6 февраля 2014

Здравствуйте!

Что должен содержать макет сайта, который передают на вёрстку? Ховеры и другие состояния интерактивного элемента вносят в макет или прописывают в отдельной документации? Как сделать работу дизайнера и верстальщика более эффективной?



Павел!

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

Но систематизировать знания на этот счёт интересно. На мой дизайнерский взгляд главные качества верстальщика — внимательность и сметливость. По этим критериям верстальщики делятся на три типа.

Неандертальцы

Худший вариант. Каждую мелочь приходится подписывать, покрывая макеты слоем выносок и пояснений. Проблемные места неандертальцы игнорируют, так что длинный «Константин Константинопольский», не нарисованный в макете, будет обрезан самым уродским образом, а при изменении ширины браузера всё развалится. Из-за невнимательности допускают много ошибок, которые приходится показывать наглядно, повторно сравнивая вёрстку с макетами. При работе с неандертальцами дизайнеры быстро выдыхаются.

Планктон

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

Суперзвёзды

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

Чтобы сделать работу эффективной, дизайнер растит верстальщика, устанавливая планку суперзвезды и требуя к ней тянуться.

Приглашаю уважаемых верстальщиков предложить классификацию дизайнеров :-)

P. S.
Это был совет об управлении проектами, людьми и собой. Присылайте вопросы в новую рубрику.
P. P. S.

Я проведу практический курс «Управление проектами, людьми и собой» 7, 8 и 9 апреля в Москве

 

Запись открыта до СБ 1 апр


Поделиться

Комментарии

Никита Прокудин
7 февраля 2014

Здравствуйте, Николай! Не мог не дополнить ваш совет: http://yoneg.ru/…sajta-kotory-j-peredayut-na-vyorstku


31 марта 2014

Спасибо, Никита.

Иван Душин
6 февраля 2014

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

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

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

Ещё стоит советоваться с верстальщиком по поводу теней, полупрозрачностей и вообще различных эффектов. Например, какой-нибудь светящийся элемент при вёрстке легко можно разделить на фон, сам эффект и объект, который находится поверх. Загружаться они будут отдельно друг от друга и гораздо быстрее. Хитростей тут много. Именно поэтому все эффекты нужно держать и в виде эффектов, и в виде склеенных слоёв — если нужно будет что-то изменить или подправить, это всегда можно будет сделать.

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

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

Я своим дизайнерам рекомендую придерживаться принципов http://ilovepsd.ru, все базовые знания там. Остальное — это диалог с верстальщиком и опыт.

Василий Неандертальский
6 февраля 2014

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

И раз уж дизайнер специализируется в вебе, то он должен быть в курсе какие существуют состояния у кнопок и прочих элементов. И должен представлять, что такое и как работает html, css.

Николай Маров
6 февраля 2014

Личинка дизайнера
Молодой человек, как правило, девушка-манагер. Имеет базовые знания в ретуши фотографий и нулевые в дизайне. Макеты больше похожи на кучу мусора. Нет согласованности цветов и линий. Используется много нестандартных шрифтов. Фон элементов, как правило, неоднороден, из-за чего приходится использовать изображения большого размера. Нет постоянства в иконках. Их вид незначительно и не обоснованно меняется от макета к макету, увеличивая общий объём мелких картинок. В шаблоне остаётся много лишних (скрытых) элементов. Многие слои слиты в один. Названия слоёв не имеют ничего общего с их назначением.

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

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

Дизайнер думающий
Редкий вид. Работает в любых условиях. Делает аккуратные и лёгкие макеты. Каждый элемент в отдельном слое. Слои сгруппированы в логические группы, обособленные цветом. Каждый слой имеет понятное имя. Управляющие элементы сделаны в едином стиле. Шаблон в целом продуман так хорошо, что нет никаких непоняток. Недостающие элементы с лёгкостью додумываются при вёрстке. Всё логично и обоснованно. Такой макет вызывает радость, граничащую с оргазмом, макет хочется сохранить для потомков, а нарисовавшему его дизайнеру отдать свою почку при необходимости.

Всеволод Рудой
6 февраля 2014

Для неандертальца
Мечта. Прикладывает css-файл.
Ночной кошмар. Делает мини-ТЗ с описанием поведения каждого элемента. Прорисовывает все состояния. Сверяет и не отстаёт до полного совпадения.

Для планктона
Мечта. Прикладывает css-файл.
Ночной кошмар. Делает мини-ТЗ с описанием поведения каждого элемента. Прорисовывает все состояния. Сверяет и не отстаёт до полного совпадения.

Для суперзвезды
Мечта. Делает мини-ТЗ с описанием поведения каждого элемента. Прорисовывает все состояния. Сверяет и не отстаёт до полного совпадения.
Ночной кошмар. Прикладывает css-файл.

Владимир Родкин
6 февраля 2014

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

Павел Радьков
10 февраля 2014

А бывает дизайнер-Суперзвезда, который отдаёт 15 страниц макета и страницу, на которой прорисованы все базовые элементы: заголовки, списки, цитаты, таблички, формы с полями ввода, чекбоксами и кнопочками.

Сверстаешь такую страницу, а дальше все остальные пятнадцать страниц автоматически «собираются» пиксель-в-пиксель как на макете, только теги добавляй, и новые стили дописывай. И в стилях при этом ничего не приходится обнулять, переписывать, идти на компромисы.

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

И ты знаешь, что если в исходнике растровый слой, его надо нарезать картинкой, а если векторный — верстать, используя CSS. И каждый растровый элемент сайта или склеен в один слой, или является смарт-объектом. И нет в макете скрытых слоёв, которые не пригодились дизайнеру, а все растровые фоны даны с запасом на резину. И все шейпы попадают в пиксели. И тени на элементах в нормальном режиме наложения, а не каком-нибудь «Multiply». И вообще в слоях порядок.

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

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

Вот о таких дизайнерах мечтают верстальщики. Такой дизайнер способен подтянуть верстальщика на новый уровень за несколько проектов.

Владимир Родкин
6 февраля 2014

Попытался изобразить два типа веб-дизайнеров.
Вторые попадаются гораздо реже :-)

Илья Зуб
20 июня 2014

Добавлю к совету Никиты: http://warpspire.com/kss/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

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




Недавно всплыло

Как создавался новый сайт бюро. Часть вторая 2 Расскажите об обратной связи в интерфейсе 1 4 4