Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Алексей Авдеев (Mish) — Как подружиться c фронтенд-разработчиком

Ozon Tech
February 20, 2023

Алексей Авдеев (Mish) — Как подружиться c фронтенд-разработчиком

Ozon Tech

February 20, 2023
Tweet

More Decks by Ozon Tech

Other Decks in Design

Transcript

  1. 9
    Дистанция

    View full-size slide

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

    View full-size slide

  3. 9
    Компоненты
    11

    View full-size slide

  4. Компоненты

    View full-size slide

  5. Проектируйте,
    а не рисуйте
    18

    View full-size slide

  6. 8
    Адаптив
    19

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. CSS Container Queries
    27

    View full-size slide

  11. Flexbox
    .block {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    }
    01.
    02.
    03.
    04.
    05.
    33

    View full-size slide

  12. Продумывайте
    адаптив
    35

    View full-size slide

  13. 7
    Платформа
    36

    View full-size slide

  14. Закон Якоба
    37

    View full-size slide

  15. Не проектируйте
    заново нативные
    41

    View full-size slide

  16. 6
    Шрифты
    42

    View full-size slide

  17. url("/fonts/OpenSans-Regular-webfont.woff2")
    @font-face
    @font-face {
    font-family: "Open Sans";
    src: format("woff2");
    }
    h1 {
    font-family: "Open Sans"
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    44

    View full-size slide

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

    View full-size slide

  19. Sans-serif
    font-family: -apple-system, BlinkMacSystemFont, avenir next,
    avenir, segoe ui, helvetica neue, helvetica, Cantarell,
    Ubuntu, roboto, noto, arial, sans-serif;
    01.
    02.
    03.
    49

    View full-size slide

  20. Преимущества
    Быстрая загрузка
    Отличная поддержка
    Привычный пользователям
    1.
    2.
    3.
    50

    View full-size slide

  21. Изучайте популярные
    шрифты
    51

    View full-size slide

  22. 5
    Скролл
    52

    View full-size slide

  23. 60 кадров в секунду
    (FPS)
    54

    View full-size slide

  24. Минимум вычислений
    на скрол
    57

    View full-size slide

  25. 4
    Состояния
    58

    View full-size slide

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

    View full-size slide

  27. 3
    Контент
    65

    View full-size slide

  28. Работайте
    с контентом
    68

    View full-size slide

  29. 2
    Рефакторинг
    69

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 1
    Разработка
    86

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Нет разработчика —
    нет проблем
    93

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Проектируйте макеты, будто верстать их
    будет склонный к насилию психопат,
    который знает, где вы живете
    103

    View full-size slide

  39. 👏 Спасибо!
    👨 Алексей Авдеев
    🌐 github.com/avdeev
    🌐 twitter.com/avdeev_alexey
    🌐 Продуктовая лаборатория Mish




    104

    View full-size slide