Cached

Cached
Cached

Николай Товеровский

Павел!

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

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

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

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

Планктон

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

Суперзвёзды

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Управление проектом155

В процессе создания сайта клиент не даёт всей нужной информации для наполнения Вы не обязаны соглашаться Как вести документацию по дизайну Как флексить. Перенести на следующую итерацию Как флексить. Не выходить в надсистему В коллективе принято ставить разнообразную музыку в качестве рингтонов Если принимается решение флексить фичи, как вы поступаете с ними в дальнейшем? Подрядчик скрывает стадию готовности проекта Как флексить. Отступить от идеала 2 • Как защищать ОЧЕНЬ простые дизайнерские решения?

Как же мне сделать систему, удобную и понятную для конечного пользователя?

2 • Как флексить: сделать говно Как работать с классическими компаниями. Параллельная структура Как флексить. Заменить решение Как работать с классическими компаниями? Как работать с классическими компаниями? Как работать со слабомотивированными кадрами. Как мотивировать 1 • Как работать со слабомотивированными кадрами? Как флексить. Убрать в гаражик Как организовать личный рост? Как организовать личный рост? 1 • Как флексить. Рассогласовать Как профессионально вырасти? Как вырасти профессионально? 1 • Кто клиент? Как сделать все дела за день? 2 • Как избавиться от авралов? Как одному человеку работать над несколькими проектами? Должен ли менеджер читать хотя бы по диагонали документы, которые он передаёт от исполнителя заказчику? Как флексить. Уменьшить глубину проработки Что делать, если нет идей для собственного сайта? Как флексить. Снизить управляемость Что отвечать на «А вот здесь что-то шрифт нечитабельный» Как флексить. Метод «Зафиксировать» Дизайнер — это булочник 3 • Как влезать на профессиональную территорию коллег, чтобы они видели в этом пользу, а не угрозу? 1 • Зачем сначала платить себе? Как справляться с желанием всё бросить 2 • Как не позволять музе влиять на дедлайны? Что делать дизайнеру сайтов, если он не умеет рисовать иконки? 1 • Как правильно реагировать на смешки? 5 • Что ещё нужно знать о «сделать»? У нас в студии разработан и активно используется движок сайтов 3 • Как получить результат в мире клиента? 3 • Как получить результат в мире клиента? 2 • Что такое результат? Что значит «сделать»? 1 • Как работать с разработчиками на стороне клиента? 3 • Как человеку, мечтающему стать бюрошником, поможет высшее образование? 13 • Как объяснить, что задача не стоит потраченного на неё времени? 1 • Николай, расскажите, как преодолеваете желание спать? 1 • Сделать не удаётся, должен ли клиент оплачивать это время? Как обсуждать личные планы, когда они идут вразрез с рабочими? 3 • Как в бюро подходят к вопросу времени на просмотр фильма или чтение книги Как ФФФ связан со скрамом? 2 • Как планировать время, когда дел очень много? 2 • Решение задачи любым подходящим способом. Получение результата волшебным образом 2 • Что делать с проектами «для себя»? 1 • Как сделать мнение дизайнера в компании более значимым? 2 • С чего начать работу над созданием сайта? 1 • Стоит ли клиенту учить дизайнера уму-разуму? 1 • Зачем редактору уметь всё? 1 • Хотим привлечь специалистов с опытом 2 • Хочется всё старое выбросить и сделать заново 2 • Часто слышу от разработчиков: «покажите пример» 6 • Как вы стимулируете соблюдение сроков вашими сотрудниками? 1 • Каждый тащит одеяло на себя, пытаясь убедить остальных работать в той или иной программе 5 • Как оценивать доработки после запуска? Как использовать ФФФ при создании визуальной части дизайна? 2 • Уговаривать отложить проект или вручить дизайнеру, чтоб хоть видимость работы была? Что делать, если заказчик не заказывает логотип или фирстиль, но он нужен? 2 • Задания описывает менеджер проекта, но совершенно безграмотно Как без глубоких знаний в дизайне выбрать хорошего дизайнера? 3 • Как настоять на обстоятельном обсуждении до начала работы? 3 • Можно ли применить принцип ФФФ для видео? 1 • Как мотивировать клиентов работать быстрее, если им «не горит»? О Скетче и Пиксельматоре 4 • Баги неконтролируемо увеличивают срок разработки 5 • С чего начинать разработку контента для сайта? 1 • Показывать цены на сайте или заманивать в офис продаж? 6 • Как помочь себе на этапе полировки деталей? Каким программным обеспечением вы пользуетесь, когда удалённо показываете работу заказчику? 1 • В прошлый раз вы разобрали лучшие работы второго набора в Школу стажёров. Как вам остальные? Как вам вступительные задания в Школу стажёров второго потока? 1 • Во всех организациях, где мне довелось работать, регулярно собирают деньги на дни рождения 8 • Как организовать превращение макета в продукт? 3 • Интересно узнать о разных способах «сделать» Как избежать простаивания сотрудников, когда не хватает заказов? Можно ли в 31 год начинать карьеру дизайнера с нуля? 10 • Задачи с несколькими решениями. Как выбирать? 3 • Как работать с дизайнером, который не справляется со своей основной задачей? 1 • Постоянно сыплются сообщения о багах 4 • Необходим ли эйчар в небольшой веб-студии? 1 • Как бороться с нехочухой? 3 • Клиент предлагает некомпетентные правки 3 • Как помочь начальнику научиться ставить задачи, если он не читает советы? 3 • Что такое «рисование в стол»? 1 • Что такое точка «невозврата»? 2 • Сколько времени занимает подготовка совета? 1 • Давайте соберём в одном посте студии и фрилансеров, которые работают по принципам ФФФ 42 • Как внедрять правила внутреннего распорядка? 1 • Как отразить в дизайнерском плане поддержку разработки? Как мотивировать членов команды работать над проектом вместе? 1 • Сколько проектов даётся в работу на одного дизайнера в бюро? 5 • Наиболее эффективный путь развития — узкая специализация, не правда ли? 3 • Как искать работников, если не разбираешься в тонкостях и тематике направления? 2 • Как правильно ставить задачу? 6 • Какую систему управления проектами вы используете? 16 • Идти полностью в руководство либо совмещать? Как вводить новых сотрудников в команду? Как вы поступаете, если спустя полгода клиент просит о доработках на сайте? Как из верстальщика вырастить суперзвезду? 2 • Как сделать так, чтобы сотрудники следовали внутренним стандартам? 1 • Что почитать по управлению проектами? 4 • Как в ФФФ снизить стоимость проекта, если клиент ограничен в бюджете? Что вы отвечаете заказчику, который делает много замечаний? 4 • Чем отличается классическая парадигма тасков от недельных итераций? 1 • 4 • Уместно ли тестирование на этапе, когда проект уже готов к запуску? 1 • Как правильно построить свой личный рабочий процесс? 1 • Как быть, если арт-директор не принимает обоснованное решение дизайнера? 4 • Как лучше всего составить ТЗ на сайт? Эффективно ли начинать этап программирования параллельно с этапом визуального дизайна? 1 • Дизайнер обижается на то, что арт-директор вносит правки в его работу перед сдачей 1 • Могли бы вы опубликовать вторую часть «экспресс-концепции», посвящённой организации проекта? Как не утонуть, когда никто не показывает твои ошибки и не подталкивает на развитие? 3 • Как быть, когда хочется делать следующие доработки по новым знаниям, но и от стиля не хочется отклоняться? Есть 40—50 тыс. рублей на хороший сайт, как лучше их потратить? 5 • Как быть, если проектировщик, дизайнер или программист срывает сроки 4 • Поделитесь соображениями, как работать, путешествуя 7 • 1 • Как в бюро ставят задачи? 5 • Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 4 • Надоело работать без сна и отдыха. Что посоветуете? 2 • Расскажите, пожалуйста, вносят ли клиенты свои правки в макеты? Можно ли в договоре добавить пункт, что срок увеличивается пропорционально времени на согласование дизайна? 5 • Как вы объясняете и убеждаете заказчика в необходимости наполнения сайта «умелыми руками»? 3 • Как в бюро отвечают на вопросы «А почему ещё не готово?» и как борются со срывами сроков? 4 • Как вы в договоре описываете понятие ФФФ? 6 • До запуска проекта остаётся немного времени и этот человек, проанализировав рынок, принимает решение переработать полностью дизайн проекта 1 • С недавних пор у нас в студии появился менеджер проектов 6 • На веб-сервис заходит определённое количество потенциальных пользователей, разворачиваются и уходят Как реагировать на категорические заявления клиента о том, что авторский надзор и помощь наших программистов не нужны 2 • Артём, расскажите, как вы договариваетесь с заказчиками работать по флекс-скоупу? 12 • Как в больших студиях организована работа над проектами с точки зрения папок, файлов, серверов и т. д. 9 • Как рассчитывается бюджет проекта? 10 • Как вы оцениваете объём работ по будущему проектированию интерфейса? 8 • Когда работаешь над большим проектом, иногда вдруг понимаешь, что некоторые вещи надо было делать совсем по-другому 3 • Подскажите, при создании сайта что раньше должно быть — дизайн или программирование? 9 • 5 • 1 • Что вы думаете о нотации Гарретта? 10 • 11 • Меня беспокоит проблема хранения, структуризации и передачи информации в рамках одного проекта 8 •
Cached 81
Макет дома из бумаги своими руками схемы - СтроимСвоимиРуками. рф
Cached 4
3 года отношений стихи, смс, поздравления
Cached 62
Cached 32
T
Cached 97
Zlobniy. Бремя лишних (за горизонт 2)
Cached 22
Весна картинки для детей
Cached 57
Cached 32
Cached 49
Cached 11
Cached 79
Cached 37
Cached 61
Cached 86
Cached 44
Cached 56