Kadzi
@Kadzi
Ом

Подготовка к верстке, чеклист. Что еще?

Привет, друг.

Для меня важен комфорт верстальщика. Я начинающий веб-дизайнер.

<teg>ЭТО МЫ ЕЩЕ ПОСМОТРИМ </shmeg>

Иногда знаете так бывает, что работая в другой сфере, смотришь за представителями какой-нибудь профессии и думаешь: " Да какого черта? Ну кааааак в такой интересной нише такое убогое качество?" Но пост не об этом :)

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

Хочу перечислить чек лист свой, как я готовлю макет для верстальщика. Что я забыл? Что добавить/улучшить/на что обратить внимание еще? Что вас бесит в дизайнерах? Что вас бесит в дизайне? Помогло ли бы вам, если бы дизайнер знал основы CSS и HTML в скорости разработки?

Список:

1) Создаю папку проекта
2) Отступы соблюдаю везде одинаковые, рисую по сетке. Это касается контента.
3) Я рисую 3 типа макетов. Сортирую их в папки: "для пк, для планшета, для смартфона". Заливаю в каждую папку соответствующие макеты.
4) Делаю отдельный файлик в PSD, где показаны все варианты заголовков и текста, цвета документа и текста, межстрочное расстояние, кнопки, формы (пишу как выглядит валидация и показываю сразу в файле пример, пишу и показываю как выглядит кнопка при нажатии/наведении/клике, при необходимости скидываю ссылку на сайт, с какой-нибудь анимацией, которую можно было бы использовать, если есть какие-то попапы я их тоже рисую, пишу комментарий, в какой части экрана они должны выплывать, нужно ли затухание фона и т.д)
5) Шрифты используемые в макете я заливаю в папку "шрифты", архивами
6) Элементы которые требуют четкости я делаю в SVG, остальное в Jpg.
7) Все SVG и картинки я тоже заливаю в одну папку (я не совсем понял, что значит " в том числе варианты для retina" в одном из ответов в похожем посте)
8) Обговариваю эффекты : "вот тут вот этот блок должен плавно выплывать так-то, например как тут" (даю ссылку на сайт.)
9) В макете я соблюдаю следующие правила:
- удалить ненужные направляющие
- удалить ненужные скрытые элементы
- дроблю по блокам: шапка, подвал, контент : блок 1, блок 2, блок 3, окно 1, окно 2, форма заявки и т.д. Названия даю на русском. Лучше на англ?
- соблюдаю иерархию слоев.

Что я забыл? Есть ли фейспалмы в перечисленном? Что не учел? Как можно лучше? Какие лайфхаки?

5892.jpg
  • Вопрос задан
  • 1441 просмотр
Решения вопроса 2
LucasKane
@LucasKane
Front-end Developer
Господи пусть такие дизайнеры плодятся и размножаются!

А теперь по сути.

1) Названия лучше давать на английском.
2) Не злоупотреблять количеством шрифтов - вполне хватит двух или трех (Шрифт для текст, шрифт для заголовков, хитросделанный шрифт для подписи под лого или других декораций)
3) Хоть немного быть в курсе того, что можно сверстать, а что нет - например цвет заголовков градиентом или картинкой - можно реализовать на css, но работать это будет разве что в Chrome.
4) Не обрезать картинки делая их круглыми - используйте маски перекрытия или как то так, в верстке нет кругов только прямоугольники и квадрат как частный случай прямоугольника, но визуально сделать картинку круглой и скажем с бордером можно стилями - при этом исходник картинки будет квадратом или прямоугольником.
5) Используя тени делать их отдельно от изображений.
6) Элементы форм рисовать без фанатизма и стараться оставлять их такими какие отрисовываются браузером, в основном это касается чекбоксов/радиокнопок выпадающих списков, их можно стилизовать, но до сих пор это такие костыли и гемор, что аж горит, а потом горит у бекэндщиков, так как им все это реализовывать через задницу приходится.
7) Прежде чем нарисовать какую то супермега крутую красивую вещицу, спросить верстальщика (если есть возможность) сможет он это реализовать.
Ответ написан
Kadzi
@Kadzi Автор вопроса
Ом
Кто оказался тут, в поисках ответов:

Требования к PSD макетам
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@ynblpb_spb
дятел php
Захотелось поверстать ваш макет
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы