• Какие должны быть размеры в дизайне?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Не оттуда пляшете.

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

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

    Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
    96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

    Кроме этого есть аспекты адаптивности.
    И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
    При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

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

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

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

    Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.
    Ответ написан
    6 комментариев
  • Пример хорошего ТЗ/гайдлайна для вёрстки?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Основные требования: здесь
    Примеры стайл-гайдов: здесь

    1. Требования к вёрстке: здесь, здесь, здесь, здесь
    2. Как проверять качество вёрстки: здесь.
    3. Как определять стоимость (трудозатраты) вёрстки одной унифицированной страницы: здесь.
    4. Требования к дизайнеру: здесь и здесь.
    5. Пример документации (генератор шаблона, Helix3 для CMS Joomla!): здесь
    6. Готовые "скелеты" шаблонов HTML5 для начала вёрстки: простой (с поясняющими комментариями), www.initializr.com (ещё 3 простых) и максимально полный html5boilerplate.com.
    7. Вопросы на вакансию верстальщика (front-end developer): здесь

    Бонус по-теме: Turning Design Mockups Into Code With Deep Learning
    Ответ написан
    3 комментария
  • Как сделать такие контуры у блоков?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Я хотел сначала дать решение, но после последнего абзаца
    Помогите пожалуйста специалисту, который только возобновил работу после 3 лет декретного отпуска:)

    подумал, что вам будет очень полезно самой почитать и разобраться https://css-tricks.com/building-progress-ring-quickly/
    Эта штука называется по разному - radial progress, ring, progress, cyrcle progress, просто гуглите это название с добавкой "css", найдете много материала.
    Ответ написан
    5 комментариев