Как подготовить дизайн-макет для передачи разработчику (верстальщику, программисту)

Поделиться
HTML-код
  • Опубликовано: 1 дек 2020
  • Хочешь больше полезностей о дизайне?
    Вступай в чат Гильдии дизайнеров: ttttt.me/designers_guild
    Подписывайся на мой инстаграм: / yan.ageenko
    Читай мою книгу: www.litres.ru/yan-ageenko/kak...
    Приходи ко мне на курсы: yan.ageenko.pro/school.html?ut...
    Дополнительные видео по теме:
    • Делаем отзывчивый диза... (про отзывчивый дизайн)
    • Делаем адаптивный диза... (про адаптивный дизайн)
    • Что такое pt, px, dpi,... (про плотность пикселей)
    • Дизайн-система на HTML... (про дизайн-систему на HTML/CSS)

Комментарии • 32

  • @kirillfursov6167
    @kirillfursov6167 3 года назад +56

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

    • @ukrainiansongs8557
      @ukrainiansongs8557 9 месяцев назад

      Підскажіть, де проходили курси на верстальщика?

  • @user-em6yk7cy6y
    @user-em6yk7cy6y Год назад +2

    Ян ты очень крутой, ты много делаешь для нас ! СПАСИБО ТЕБЕ ОГРОМНОЕ, ЛУЧШИЙ !!!!❤

  • @liebenickol2971
    @liebenickol2971 Год назад +2

    Спасибо большое, очень ценная и доступная информация! ❤

  • @svetlanaganzha78
    @svetlanaganzha78 3 года назад +3

    Спасибо! Доступно и понятно. Со звуком все ок

  • @lubovporoshina9814
    @lubovporoshina9814 3 года назад +1

    Класс! Спасибо, Ян!

  • @keira8214
    @keira8214 3 года назад +2

    Спасибо большое, очень полезно😊

  • @daryakolas766
    @daryakolas766 3 года назад +1

    Спасибо большое, полезное видео!

  • @lilboweep2907
    @lilboweep2907 3 года назад +1

    Спасибо за видео!

  • @olhatrubitsyna7290
    @olhatrubitsyna7290 3 года назад +2

    Спасибо огромное) Хотелось бы еще вас видеть, когда вот такие видео с презентацией😄

  • @polinapopovastudio
    @polinapopovastudio 2 года назад

    Как выровнять текстовую рамку по тексту?

  • @mariadawnwork9387
    @mariadawnwork9387 Год назад

    Не нашла Color Space в веб версии.

  • @ulyanagorbushina
    @ulyanagorbushina 3 года назад +1

    Спасибо за классные советы) Завтра сдаю первый проект, нужен совет: отрисовали мы все состояния кнопок, тексты и пр., в каком виде это отдавать? В качестве отдельного фрейма в файле с макетом? Без их экспорта?

    • @YanAgeenko
      @YanAgeenko  3 года назад +2

      достаточно вынести всё это в UI kit и открыть разработчикам доступ к файлу

    • @user-up9ct3ef3s
      @user-up9ct3ef3s 3 года назад

      @@YanAgeenko как я понял это просто макет с данными на отдельной картинке которая потом даётся фрон энду чтобы тот все это состовлял заного но уже без придумок) но вопрос так же актуальный как ему размеры те что были в фигме прописать в коде чтобы сайт и все расстояния были точно такими же,может в таблице стилей прописывается всё это?

  • @user-cf2gn2ex9k
    @user-cf2gn2ex9k 3 года назад

    Здравствуйте, не совсем по теме видео, но есть ли цвета которые запрещено использовать для коммерческих проектов?

    • @YanAgeenko
      @YanAgeenko  3 года назад +1

      Нет. Любые цвета можно использовать на любых проектах.

    • @user-cf2gn2ex9k
      @user-cf2gn2ex9k 3 года назад

      @@YanAgeenko то есть для сайтов, презентаций, дизайна соц сетей и продаваемой продукции? Фирменного стиля одним словом можно использовать любой цвет? Просто я где то слышала что цвет Тиффани запрещено использовать...

    • @YanAgeenko
      @YanAgeenko  3 года назад +1

      Любой цвет можно использовать где угодно

  • @user-uz6sr7oe6d
    @user-uz6sr7oe6d Год назад

    Здраствуйте Ян,можете дать безопасную ссылку на photoshop?

    • @YanAgeenko
      @YanAgeenko  Год назад

      безопасная ссылка - только официальный сайт :)

    • @user-uz6sr7oe6d
      @user-uz6sr7oe6d Год назад

      @@YanAgeenko А как назывпется официальный сайт?

  • @helluqp9349
    @helluqp9349 Год назад

    а как именно выдавать работу заказчику ? ссылку из фигмы кидать или как

    • @YanAgeenko
      @YanAgeenko  Год назад +1

      Да, просто ссылкой

  • @anatolykoz
    @anatolykoz 3 года назад +1

    Что-то с микрофоном не то в этом выпуске

  • @user-mp2bt1qk5k
    @user-mp2bt1qk5k 3 года назад +1

    Привет! Все класс! Не поняла ruclips.net/video/xHR-619J3BY/видео.html (про плотность пикселей) - видео "Делаем адаптивный дизайн веб-сайта под мобильные устройства"?
    Восхитительно, какой прогресс 2019-2020...

    • @YanAgeenko
      @YanAgeenko  3 года назад +1

      ошибочка вышла. Про плотность пикселей вот тут: ruclips.net/video/XWzE4_9Zny0/видео.html
      (в описании тоже исправил ссылку)

    • @user-mp2bt1qk5k
      @user-mp2bt1qk5k 3 года назад +1

      @@YanAgeenko thank you very much

  • @user-jk3de1vr9f
    @user-jk3de1vr9f 3 года назад +1

    Слои предпочтительно называть русскими или английскими?

    • @YanAgeenko
      @YanAgeenko  3 года назад +1

      Если проект русскоязычный - не принципиально. Если англоязычный - на английском.

    • @MrSmith42
      @MrSmith42 3 года назад +1

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

  • @totalsportcomua
    @totalsportcomua Год назад

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