Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Алексей Авдеев (Mish) — Как подружиться c фронтенд-разработчиком
Search
Ozon Tech
February 20, 2023
Design
0
1.7k
Алексей Авдеев (Mish) — Как подружиться c фронтенд-разработчиком
Ozon Tech
February 20, 2023
Tweet
Share
More Decks by Ozon Tech
See All by Ozon Tech
Анна Мария Попова (Х5 Tech) – Фантастический техпис: может ли опыт создания художественных книг помочь в написании документации
ozontech
0
160
Александр Мачулин (Gramax) – Справочник фантастических тварей из Docs as Code
ozontech
0
56
Мария Смирнова – Дзен и искусство работы с документацией: как использовать принципы буддизма в работе техписа
ozontech
0
75
Сергей Кузнецов – «Эксперименты с нейросетями в рекомендациях»
ozontech
0
75
Артём Нургалиев – «MLOps, автоматизированное обучение и доставка моделей»
ozontech
0
62
Артём Панин – «Автоматическое управление рекламой в Ozon»
ozontech
0
85
Дмитрий Андросов – «Персональные поисковые подсказки»
ozontech
0
95
Константин Ожерельев – CI/CD для проектов, разрабатываемых в конфигураторе
ozontech
0
92
Юрий Гуреев – 5 продвинутых приемов работы с EDT и Git
ozontech
0
86
Other Decks in Design
See All in Design
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.3k
Breaking News on the Web
souvikdg
0
380
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.4k
Speed Design
sergeychernyshev
9
270
ウェブディレクターを救うBacklog
wattlaa
0
400
Minuto de Aventura
olgastoryboard
0
110
ホワイト化するこの世界の片隅に
hisayosky
0
190
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
930
WHAT ARE ME?
takuro_nakajima
PRO
0
1.8k
Chatwork プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
520
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.5k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
Featured
See All Featured
Building Applications with DynamoDB
mza
89
5.8k
Gamification - CAS2011
davidbonilla
78
4.9k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
How to Ace a Technical Interview
jacobian
274
23k
Ruby is Unlike a Banana
tanoku
96
10k
Building an army of robots
kneath
301
42k
The Invisible Side of Design
smashingmag
294
50k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Mythical Team-Month
searls
217
43k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Producing Creativity
orderedlist
PRO
340
39k
Transcript
1
2
3
4
5
6
None
8
9 Дистанция
Как стать ближе? 10
9 Компоненты 11
None
None
None
None
None
Компоненты
Проектируйте, а не рисуйте 18
8 Адаптив 19
Веб адаптивен по-умолчанию 20
None
Сколько брейкпойнтов? 22
None
None
Только то, что изменяется 25
None
CSS Container Queries 27
None
None
None
None
None
Flexbox .block { display: flex; flex-flow: row wrap; justify-content: flex-end;
} 01. 02. 03. 04. 05. 33
Auto Layout
Продумывайте адаптив 35
7 Платформа 36
Закон Якоба 37
None
None
None
Не проектируйте заново нативные 41
6 Шрифты 42
None
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
None
None
47
Стек системных шрифтов 48
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
Преимущества Быстрая загрузка Отличная поддержка Привычный пользователям 1. 2. 3.
50
Изучайте популярные шрифты 51
5 Скролл 52
None
60 кадров в секунду (FPS) 54
None
None
Минимум вычислений на скрол 57
4 Состояния 58
None
None
None
None
Сверьтесь с чеклистом 63
None
3 Контент 65
None
67
Работайте с контентом 68
2 Рефакторинг 69
None
None
Смотрят чаще, чем редактируют 72
None
None
None
None
None
None
None
None
81
82
83
84
Уменьшайте дизайн-долг 85
1 Разработка 86
None
None
Представляйте конечную цель 89
90
Идеальный конечный результат 91
92
Нет разработчика — нет проблем 93
94
None
None
None
None
None
Изучайте разные инструменты 100
Сокращаем дистанцию
None
Проектируйте макеты, будто верстать их будет склонный к насилию психопат,
который знает, где вы живете 103
👏 Спасибо! 👨 Алексей Авдеев 🌐 github.com/avdeev 🌐 twitter.com/avdeev_alexey 🌐
Продуктовая лаборатория Mish — — — — 104