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

Question

[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, форма заявки и т.д. Названия даю на русском. Лучше на англ?
- соблюдаю иерархию слоев.

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

Comments

[Shadowman69]

Как по мне. если бы все дизайнеры делали хотя бы то, что Вы уже описали выше. то мир бы стал намного лучше. Варианты для Retina, насколько я знаю, это следующее - поскольку дисплеи Retina обладают высокой плотностью пикселей, то обычные картинки на них будут смотреться "квадратиками". Поэтому для них подготавливают отдельные картинки высокого качества, которое достигается тем, что картинку большого расширения "втискивают" в нужный размер, соотношение должно быть минимум в 2 раза. Например, на сайте есть картинка 300*200 пикселей, но чтоб она смотрелась хорошо на ретине, нужно картинку с расширением 600*400 пикселей "втиснуть" (фотошопом или чем то еще) в 300*200 пикселей, без потери качества.

[Иван]

Пока читал,кончил три раза.

[zorca]

Хороший план. Этого вполне достаточно. Главное осознанные названия, которые будет понятны верстаку тоже. Все по папочкам в макете тоже. Ну и самое главное забыли - ПРАВИЛЬНЫЙ ШРИФТ и ГАРМОНИЯ ЦВЕТА.

[Kadzi]

zorca, Что значит правильный шрифт? Не это ли вы имели ввиду:
- использовать желательно стандартные шрифты из гуглфонта ( или говорить верстаку типа вот который я нашел, а вот еще 3, на замену, альтернативных, похожих из популярных. Читал об этом в штмлакадемии)

Что значит гармония цвета? Не это ли вы имели ввиду:
- использовать например определенную цветовую модель ( а какая лучше?) + использовать настройки цветовой схемы в фотошопе правильную для веба

[zorca]

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

[Kadzi]

zorca, понял, точно, ведь замысловатые шрифты некомпетентный верстак так переведет, что я выпаду в осадок :О

[zorca]

Kadzi, все что есть на fonts4web.ru можно смело брать. Про кириллицу не забывайте.

Answer 1

[deeppines]

Господи пусть такие дизайнеры плодятся и размножаются!

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

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

Comments

[Kadzi]

Хороший ответ, братишка, пш.

Я немного позадаю?

пункт 4) самый первый макет, а делал их всего 2, я делал фотки именно круглыми, без масок :D
пункт 5) поясни пожалуйста, вот например у меня есть коллаж, 5 фоток, одна поверх другой, и от каждой например падает слабая тень. Как тут быть? Если тень рисуется не отдельно, а используется свойство слоя. Она как то вычленяется? Как?
пункт 6) Что ты думаешь об этом? Разнеси её. Это моя вторая в жизни форма (первая была просто треш), а вторую я рисовал спустя 100 статей всяких бабичей, горбуновых и прочих чуваков. Я считаю что моя форма отличная. Она приятная, понятная, кнопка отправить работает только при заполнении всего, если ты например забудешь 1 цифру или не укажешь год, поле подсветится приятным оранжевым. В мобильной версии правая колонка соответственно опустится вниз и будет 1 столбик. Дату я сделал слева а не справа, потомучто считаю что в данной форме так понятнее и удобнее. Там где год я предлагал сделать хинт. Я чсв? Или форма реально хороша? Ну и использовал я Робото. Так как прочитал, что для форм он хорош для разных устройств и популярен.

[deeppines]

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

Форма норм, в плане сверстать так же проблемы не вижу. И так на будущее старайся мыслить не такими крупными блоками, скажем эта форма состоит из элементов, у элемента есть label и input, в конечном итоге на продакшене форма может быть (и будет!) изменена до неузнаваемости, изменится набор полей, изменится их порядок, так вот самое крутое это сделать диз так, что как не перетасовывай твои элементы они все равно будут смотреться отлично. Погугли UI/UX kit - это по сути большая простынка с элементами, которые можно впихнуть куда угодно и они везде будут смотреться целостно и в рамках одного дизайна/стиля.

Пока писал заметил:

Хотя например радио кнопки "Причины" сломать очень просто, достаточно добавить еще две три и они уже не будут строиться в одну строку, вот этот момент скорее всего не продуман.

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

Вот есть неплохой доклад для дизайнеров от Вадима Макеева.

[Kadzi]

Lucas Kane, Спасибо за ссылки! Макеева настолько полюбил, что записался на курсы по базе штмл и ксс :) еще 2 месяца назад. Ролик смотрел, но сейчас открыл снова и понял, что многое проигнорировал.

по поводу формы:

там всего 3 варианта и больше быть не может, я уточнял по каждому пункту, поэтому вместо дурацкого списка я решил бахнуть группу радио кнопок, как раз вычитав в тот день статью про это :) Так что не сломаешь, Лукас :3

А по поводу ширины полей, я просто понял 1 вещь, посмотрев сотни хороших форм. Длина - под реальные нужды. Вильгельмина длинное имя и встречается редко, поэтому ширина подогнана максимальная с учетом ширины телефона.

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

[deeppines]

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

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

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

Answer 2

[Kadzi]

Кто оказался тут, в поисках ответов:

Требования к PSD макетам

Answer 3

[Danil Sapegin]

Захотелось поверстать ваш макет