За что верстальщики скажут вам спасибо. 5 ключевых моментов. Часть I
Если вы настроены на качественный конечный результат, всегда просите связывать вас с верстальщиком напрямую. Это поможет избежать недопонимания и затруднений при верстке.
Зачастую в таких переписках вы узнаете много нового и полезного для себя. Верстальщики — такие же креативные ребята, и иногда именно они могут подсказать вам интересную реализацию эффекта или анимации для проекта. Решать задачи вместе — гораздо эффективнее и интереснее.
Так же, перед стартом работ лучше сразу спросить, кто будет верстать проект и сделать запрос на требования к макету. Это позволит сэкономить время и не делать двойную работу.
Ниже перечень некоторых пунктов, который поможет при работе с любым проектом.
🔑 Анимация, эффекты, механика
По возможности, всегда предоставляйте референсы на конкретные анимации. Если можете сами анимировать элементы — загружайте архивом. Если не умеете — прописывайте ссылки на уже реализованные сайты, с пометками и уточняющими комментариями.
🔑 Прикладывайте к каждому проекту Style Guide
Когда у вас есть свой верстальщик-знакомый, которому можно все объяснить на пальцах по скайпу, это здорово. Но если клиент обратился только за дизайном, а дальнейшая судьба проекта неизвестна, прилагайте к макету стильгид с комментариями в виде текстового файла или видеоразбора (скринкаста).
(На мой взгляд, стильгид уместен в обоих случаях; даже если верстает ваш коллега, все материалы в любом случае передаются клиенту; если в дальнейшем вы не будете поддерживать проект, посторонним специалистам пригодятся ваши доп.материалы. Да и презентовать работу в портфеле будет гораздо проще)
О стильгиде могу написать отдельный пост. Здесь можно поднять вопрос об актуальности макетов на артбордах, но знаю специалистов, которые их почему-то не любят. Да и слабые компы их могут не потянуть.
🔑 Шрифты
При возможности юзайте Google fonts. Такие сайты будут быстрее прогружаться (проверьте все начертания, лигатуры и символы в нем)
Если шрифты нестандартные, предоставляйте .ttf
Если у вас изначально есть пак с оригинальными форматами, то предоставить не лишним будет форматы .woff или .woff2. (необязательно, но полезно) Всегда проверяйте на демо-страничке, как выглядят ваши шрифты в действии. https://transfonter.org/ — устанавливайте галки только на woff и woff2.
При масштабировании кнопкой shift не забывайте проверять, чтобы значение кегля было целым, а не 0.05 пт и др. А лучше, маштабируйте стандартным методом, а не шифтом
Проверьте, чтобы в макете не было «левых» гарнитур, которые случайно занесло в ваш макет. Такое бывает
Не забывайте про интерлиньяж и кернинг, если они нестандартны - указывайте в стильгиде! (про термины здесь — https://vk.cc/6qSFnQ)
Используете маски к шрифтам? Загружайте их отдельными изображениями в архив, либо выносите эти текстуры на отдельную монтажную область с комментарием (артборд)
Никогда (!!!) не выравнивайте текст по ширине.
🔑 SVG
Старайтесь предоставлять иконки в SVG-формате, загружая их в отдельную папку. Либо оставляйте в макете, но в любом векторном формате.
Если изначально вы скачивали иконку в png-формате, несложными манипуляциями ее можно перевести в вектор, используя Illustrator
(Для оптимизации после иллюстратора можно использовать https://jakearchibald.github.io/svgomg/)
Хороший ресурс по иконкам с возможностью скачивания в svg и встроенным редактором — https://www.flaticon.com/
🔑 И еще:
— Избегайте режимов смешивания (как в слоях, так и в эффектах, применяемых к тексту/объекту)
— Не делайте эффекты, которые невозможно реализовать в вебе (тиснение, глянец и опять же режимы наложения)
— Не делайте скругление обводки фигуры. Делайте обводку по уже скругленной фигуре :)
— По возможности предоставляйте изображения смартобъектами. Изображения можно (но необязательно) так же отдельно выгружать и оптимизировать через http://compressjpeg.com/ru/
— Не называйте модальные окна поп-апами :)
— Старайтесь все файлы писать на латинице, или хотя бы понятными русскими словами )))
— Группируйте слои по блокам. Систематизируйте макет, называя все своими именами. «блок 1», «block 1», выглядит гораздо понятнее, нежели «Блок контакты», «Блок с слайдером» или «Группа 1».
— Не оставляйте названия «слой 1», «слой 25», «пустые слои», невидимые . Если есть невидимая группа слоев, выделите ее маркером и подпишите в названии пояснение.
— Проверяйте все тексты на ошибки (необязательно, но очень желательно). — Тире. - дефис. Не забывайте про кавычки-«ёлочки». Не допускайте больше одного пробела между словами. Пробелы ставятся только перед тире, скобками и кавычками. Ставятся после: запятой, двоеточия, точки с запятой и всех знаков на конце предложения.
— Не забивайте хуй на направляющие/сетку в макете .
— Не забывайте про адаптивные версии макетов :)
Пост был полезен? Ставь 👍
