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

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

Основные параметры дизайн-макета сайта

1. Формат файлов, которые вы сдаете в качестве дизайн макета: PSD либо TIFF. PSD предпочтительней.

2. Разрешение: 72dpi. Цветовая палитра: строго RGB, 8 бит на канал

3. В 90% случаев макет сайта имеет фиксированную ширину рабочей области. Обязательно ограничить эту ширину направляющими линиями в макете. Распространенные размеры: 1170px, 960px, 1100px.

4. Ширину фонов предусмотреть до разрешения мониторов в 1920px. Фоновые изображения могут выходить за пределы контентной части сайта.

5. Обязательно отрисовать к макету дизайна файл favicon.ico, размер — 16*16px. Если нет возможности сохранить его как.ico файл - сделайте в обычном png24.

Слои и группы слоев в дизайне сайта

1. Слои НЕ склеены. Фоны, тексты, формы, изображения поверх фонов — всё это должно быть на отдельных слоях.

2. Элементы одного смыслового блока должны быть объединены в группу с человеко-понятным названием. Например, если это верхняя часть сайта, группа может называться Шапка, header, Верх сайта и т.п.

3. Каждый слой внутри группы так же должен быть назван в соответствии с назначением и/или содержанием. Например, слой с иконкой телефона: tel, phone, телефон и т.п.

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

5. Неиспользуемые слои в итоговом макете нужно УДАЛЯТЬ. Если слой просто остался в дереве и не несет никакого значения — нужно почистить файл перед завершением работы. Сохранит место на вашем компьютере, а так же множество оперативной памяти верстальщика.

Текстовое содержимое в веб-дизайне

1. В первую очередь стараемся использовать стандартные шрифты. Их не так уж много (Arial, Tahoma, Times и т.д.)

2. Когда недостаточно стандартных шрифтов (достаточно часто такое бывает при создании макета дизайна сайта) - идем на www.google.com/fonts и стремимся, чтобы выбранный шрифт был на этом ресурсе. С одной стороны это обеспечит соблюдение авторских прав (т.к. шрифты там бесплатные), с другой намного упростит подключение выбранного вами шрифта для использования на сайте.

3. Все текстовые элементы должны быть без эффекта Сглаживание. Простой стандартный текст.

4. Трансформирование текста недопустимо. Если нужно изменить размер текста — меняем его через Размер текста.

Активное содержимое, формы, кнопки

Очень часто дизайнер закладывает в макет кнопки, формы, ссылки и другие элементы, которые должны по его задумке изменять своё поведение при наведении курсора мыши. Чтобы верстальщик понял вашу задумку — отрисуйте соответствующую кнопку в Активном состоянии, и скройте эту группу слоев. А еще лучше вынести все подобные вещи (кнопки, ссылки, поля форм) в отдельный файл PSD, который принято называть UI Kit.

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

1. Макет сайта в формате PSD

2. Рендер макета в JPG, для быстрого просмотра и оценки сложности дизайна.

3. Приложить файлы используемых шрифтов

4. Favicon для сайта в.ico или.png формате

5. Если в макете используются текстурные заливки - отдельным файлом прикрепить файлы используемых текстур.

Часто ли бывало такое, что результат, полученный вами от 3D визуализатора, не соответствовал вашим ожиданиям? Картинка не выглядела живой, а, что именно не так, объяснить визуализатору сложно. Тем более перед началом работы вы четко не обговорили стандарты качества, которые вы принимаете.

Как вы уже догадались, сегодня речь пойдет о стандартах качества.

Зачем нужны стандарты качества 3D визуализации

1. Определив свои стандарты качества, вы сможете требовать от сотрудника конкретных вещей.
2. Вы сможете обозначить стандарты до начала работы с визуализатором. Таким образом, это поможет вам получить то качество, которое вам нужно.
3. Вы сможете сами четко определять качество изображений, выбирая визуализатора по портфолио.

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

Итак, начнем:

1) Размер изображений

Для того чтобы финальный результат напечатать в альбоме и отдать клиенту мы используем формат изображения в соотношении 1,5: 1. Например, предварительные изображения мы делаем размером 1500×1000, а финальные -3000×2000. Это минимум, при котором изображение можно напечатать на формате А4.

2) Качество моделинга и детализация

Что подразумевается под качеством моделинга:

• моделинг комнаты. Не должно быть ошибок. Ошибки моделинга, как правило, выглядят, когда одна геометрия налезает на другую, появляются темные пятна. Вот таких пятен не должно быть;
• профили карниза и плинтуса редко рисуются от руки. Лучше брать готовый. Как правило, масштабы и пропорции там соблюдены уже хорошо. Если профиль отрисован не красиво - это сразу может испортить все впечатление;
• размеры и масштаб мелких деталей. Например, ручки двери должны быть на правильной высоте от пола и не быть меньше или больше, чем они есть на самом деле;
• качество и детализация моделей. В сцене не должно быть некачественных моделей. Диван с одинаковыми квадратными сиденьями сразу портит всю картину. Это же касается и мелочей. Аксессуары, вставленные в сцену не должны выдавать свое 3D происхождение.

Будьте внимательны, при выборе моделей.

2) Текстурирование

• первое, что важно помнить в текстурах - это масштаб. Масштаб текстуры должен соответствовать реальному миру. Текстура дерева, например, не должна быть сильно растянута;
• качество текстуры должно быть оптимальным. Картинка не должна быть очень большой по размеру, чтобы не увеличить время рендера. И не должна быть очень маленькой, чтобы не размазалась на изображении;
• тайлинг. Любая картинка имеет свои границы. Когда мы накладываем ее на предмет, наша текстура может повторяться на предмете несколько раз. Очень важно избегать стыков между повторяющимися изображениями.

Вот таких моментов не должно быть (в обоих случаях видно повторение текстуры на полу):

4) Освещение

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

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

5) Пропорции и масштаб

• частично об этом мы поговорили на этапе моделинга. Важно, чтобы все предметы, - в том числе, маленькие ручки двери, карниз, плинтус - были в своем размере, как в реальном мире. Ручка не должна быть маленькой по отношению всей двери. Диван не должен быть малюсенький, а тумба под ТВ выше спинки дивана. Все должно быть пропорционально;
• если в сцене меняется масштаб модели - команда масштабирование (растягивание всей модели целиком допускается только в пределах 20%). Это важно, потому что, просто увеличив или уменьшив модель целиком командой масштабирование (например, вытянув дверь из 2100 высотой до 2400), можно нарушить пропорции модели (в случае двери с филенкой или багета картины верхняя и нижняя рамка будет шире, чем боковые). + вместе с масштабированием, масштабируется размер текстуры. Т.е. размеры, которые заданы в текстуре и в модели будут уже не соответствовать реальному миру.

6) Постановка камеры и композиция кадра

• важно соблюдать основы композиции в кадре. Лучше всего выбрать положение камеры вместе с визуализатором;
• камера должна располагаться на высоте 1600-1650 мм от пола. Это стандарт. Можно поставить камеру выше или ниже только в том случае, если этого требует композиция кадра, как на примере ниже (художественный кадр). В этом случае допустимо опустить камеру. Как правило, такие виды являются дополнительными - художественными, но не основными информационными;

22.06.2018 Прочтёте за 3 мин.

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

Организация пространства

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

Еще один нюанс – яркие потоки естественного света в комнатах. Это означает отсутствие тяжелых штор в пользу практичных занавесок светлых тонов. Желательно, чтобы солнечные лучи играли роль основного «осветительного прибора» днем, а не компенсировали его недостаток. В случае расположения жилья на теневой стороне можно воспользоваться лампами с мягким и безопасным свечением в нужном количестве.

Цветовая палитра

На фото: Интерьер гостиной в квартире в современном стиле

Геометрические формы и линии

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

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

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

На фото: Интерьер спальни в квартире в современном стиле

Виды материалов

Все поверхности гладкие, блестящие, ровные. Актуальна хромированная текстура, которая может идти как отдельно, так и в комбинации с другими материалами. Лакированная поверхность имеет удивительное свойство – отражение света, что придает глянец окружающей среде и выгодно подчеркивает достоинства основной идеи.

В основном, для современного стиля подбираются изделия из: металла, пластика, дерева, стекла, натурального камня.

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

На фото: Интерьер гостиной в квартире в современном стиле

Мебель

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

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

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

На фото: Интерьер гостиной в квартире в современном стиле

Элемента декора

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

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

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

На фото: Интерьер детской в квартире в современном стиле

Современные люстры

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

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

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

На фото: Интерьер прихожей в квартире в современном стиле

Тематическое оформление

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

На фото: Интерьер гостиной в квартире в современном стиле

Стены, пол, потолок

Отделка стен незатейлива. Они выкрашены в однотонный цвет или обклеены обоями с непримечательным рисунком. Фактура ровная и спокойная. Ламинированный пол – тоже признак современного стиля. Напольным покрытием может служить паркет, но он не должен иметь узоров. Под стать сдержанному направлению одно- и многоуровневые потолки с комбинированными материалами.

На фото: Интерьер гостиной в квартире в современном стиле

Зеркала

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

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

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

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

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

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

1. Единица измерения - всегда пиксели (px)

Пиксель - базовая единица измерения в веб-дизайне, ей же пользуются наши верстальщики. Если пользоваться разными единицами, то наши 14 пунктов у верстальщиков отобразятся, как 14,22 пикселя. Согласитесь, работать с кратными числами куда удобнее.

2. Соблюдайте модульную сетку

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

Пример модульной сетки из книги Юрия Гордон « О языке композиции »

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

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

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

Макет, сделанный без сетки

Вот сервисы, которые упростят работу с сеткой:

14. Retina-адаптация макета

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

15. Избавляйтесь от хлама в макете

Удаляйте из макета все ненужные слои. Это поможет оптимизировать размер файла. А чем меньше он весит, тем проще его передавать на вёрстку и хранить в дальнейшем.

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

Общий принцип - Не делай брак.
Не бери брак. Не передавай брак.
Тойота.

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

«Почти» по сетке

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

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

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

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

Владимир, руководитель студии:
«Есть миллион случаев, когда программист говорит «это невозможно», а потом берет и делает, как нужно. Значит-таки возможно. И большинство ограничений, неудобных для программиста, но интересных с точки зрения дизайна - искусственные. Чёткую границу провести невозможно. Работает только итерационное обсуждение и попытки реализовать задуманное. Пробовать, смотреть, обсуждать, делать, экспериментировать. Иначе всё скатится к унылым шаблонам. Для части проектов это ОК. А для части - нет. Делаете ли вы в духе конвейера или делаете фестивальные работы? Мы писали про это подробнее в бегунке креативности ».

Копипаст слоёв

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

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

Непонятные отступы

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

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

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

Цвета «на глаз»

В фотошопе есть удобный инструмент - «пипетка», и дизайнеры любят им пользоваться - тыкнул, и не надо запоминать номер цвета. Но если тыкнуть в край элемента, цвет может исказиться оттенком фона. Другая опасность - если радиус пипетки более 1 пикселя, Фотошоп покажет среднее значение между соседними цветами.

Андрей, разработчик

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

Негласное правило не рекомендует использовать чёрный под номером #000000 - он слишком контрастный на фоне белого. Глядите на разницу:

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

Растрированные элементы

Текст

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

Тени и градиенты

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

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

Эффекты наложения

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

Эффекты наложения в разных браузерах

Проблемы со шрифтом

Дробные размеры

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

Множество шрифтов

На весь проект желательно использовать не более 3-х начертаний - это могут быть шрифты одной гарнитуры (Light, Regular и Bold) или разных. Это не жёсткое ограничение - всё зависит от задач проекта, но определённый смысл в нём есть: чем меньше вариаций шрифта, тем выше сосредоточенность на тексте у читателя. Считается правилом вместе с макетом передавать гарнитуры, которые там использовались, или хотя бы давать ссылки на Google Fonts.

Андрей, разработчик:
«Сейчас большинство браузеров отошли от шрифтов в форматах TTF, OTF - и если разработчик будет использовать их по-старинке, не везде они будут отображаться корректно. Мы в студии давно перешли на формат WOFF или WOFF2, чтобы не было проблем. Перевести шрифт в него можно или ».

Использование нестандартных шрифтов

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

Корявая типографика

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

Евгений, разработчик:
«По возможности не стоит использовать сложные эффекты на типовых текстовых страницах, если предполагается, что заказчик сам сможет их менять из админ-панели. Скорее всего, у него получится «обернуть» такие элементы в div. Иногда это решается сниппетами или иными приемами, но всё равно вызывает сложность при наполнении контентом».

Обязательно стоит показать на макете оформление параграфа, абзаца, заголовков 1-4 уровня (h1, h2, h3, h4), маркированных и нумерованных списков. А ещё лучше собрать всё это в отдельный документ - гайдлайн или UI-kit. Сюда же можно добавить поведение ссылок (активная, при наведении, посещенная).

UI-kit для проекта «Спасская башня »

Непонятная анимация

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

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

Желательно пометить слои с анимациями и интерактивами цветами и сопроводить их комментариями. Также очень желательно в комментариях прописать, как именно это должно работать и привести примеры.

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

Иконки в PNG

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

Но бывает, что дизайнеры используют иконки в формате PNG - в нём при масштабировании на экранах с большим разрешением (а сейчас даже на мобилках плотность пикселей бешеная) края изображения расплываются. Отсюда правило: все иконки должны быть в формате SVG - так они остаются чёткими, каким бы ни был их размер.

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

Чек-лист

В творческом порыве сложно уследить за тем, чтобы всё было сделано правильно. Там слой скопировался и остался без названия, там объект немножко вылез за край колонки, тут шрифт случайно «зажирнился» встроенными фотошопными настройками вместо выбора нужного начертания - с кем не бывает? А с тем, у кого есть наш чек-лист!

Чек-лист для подготовки Photoshop-макета к передаче на вёрстку

1. Если дизайнер использовал сетку, все блоки на макете расположены строго по ней.
2. У всех объектов на макете целочисленные размеры.
3. Повторяющиеся элементы на страницах всегда ОДИНАКОВЫЕ.
4. Все слои сгруппированы по папкам и распределены по логике макета. Лишние удалены, похожие - объединены.
5. Отступы от элементов унифицированы.
6. Цвета на макете совпадают с основными цветами проекта.
7. Текст как текст (не растрирован).
8. Эффекты наложения, тени и градиенты не растрированы.
9. Использование эффектов наложения целесообразно.
10. У шрифтов недробные размеры.
11. Шрифты, используемые в проекте, собраны в отдельной папке.
12. Нестандартные шрифты и их начертания проверены на наличие веб-версии. Вес одного нестандартного шрифта не превышает 1 Мб.
13. Межстрочные интервалы и отступы в тексте унифицированы.
14. Все иконки в формате SVG и собраны в одном месте. Наименования иконок одинаковые и понятные, совпадают с наименованием идентичных слоёв на макете.
15. Для всех активных элементов есть слои с ховерами.
16. Объекты, участвующие в в анимациях/интерактивных взаимодействиях, разбиты послойно. Для баннеров - аналогично.
17. К анимациям и интерактивным взаимодействиям прописаны комментарии и указаны примеры, как это должно выглядеть.
18. Для макета создан гайдлайн с палитрой цветов проекта и стилями текста.

Теги: Добавить метки