Как подружиться c дизайнером

Алексей Авдеев, Mish

Как подружиться c дизайнером

Алексей Авдеев, Mish

Дистанция

Как стать ближе?

10
Познакомьтесь

Планы проекта

Сроки разработки

Гайдлайны

Этапы сдачи экранов и приоритетность

Progressive Enhancement

Технические возможности

Сделайте себе интересно

9
Изучите Figma

Десктопная версия

Can edit

Компоненты

Auto Layout

Flexbox

        .block {
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-end;
        }
      

8
Адаптив

Веб адаптивен по-умолчанию

Сколько брейкпойнтов?

Только то, что изменяется

Breakpoints Plugin

CSS Container Queries

7
Платформа

Закон Якоба

Не проектируйте заново нативные элементы

6
Шрифты

@font-face

        @font-face {
          font-family: "Open Sans";
          src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
        }
         
        h1 {
          font-family: "Open Sans"
        }
      

Стек системных шрифтов

Sans-serif

        font-family: -apple-system, BlinkMacSystemFont, avenir next,
            avenir, segoe ui, helvetica neue, helvetica, Cantarell,
            Ubuntu, roboto, noto, arial, sans-serif;
      

Преимущества

  1. Быстрая загрузка

Обсуждайте шрифты

5
Состояния

Сверьтесь
с чеклистом

4
Контент

Работайте с контентом

3
Рефакторинг

Смотрят чаще, чем редактируют

Уменьшайте дизайн-долг

2
Pixel Perfect

Допускаются различия в 5px по высоте и 2px по ширине

Допускаются различия в отображении шрифтов

Pixel Нормально

1
Станьте дизайнером

Представляйте конечную цель

Идеальный конечный результат

Изучайте разные инструменты

Сокращаем дистанцию

Верстайте, будто проводить дизайн-ревью будет склонный к насилию психопат, который знает, где вы живете

👏 Спасибо!

я