SlideShare a Scribd company logo
6 UI tips to make your
developers happy
There's a TLDR; at the end if you can't be arsed to read
Work in base 8
We know it's basic, but developers love a bit of
base 8. Especially with Apple & Google adopting
base 8, make everyone's life a little easier.
If you don't know what base 8 is, it basically means - make padding
divisible by 8, so a card could be 8px/pt away from the edge of the
screen
Settle on a naming
convention
Labelling your colors: primary, secondary, accent
is a big step instead of #8224E3, #FF0068,
#170728
It's always worth communicating with your developers to ensure
you're adhering to the same naming conventions, instead of finding
out later from a massive Zeplin file
Make a SSOT
SSOT stands for "Single source of truth" and it
basically means a big file where a marketer,
developer or non-designer can find all brand
assets
It cuts down on messing around finding a company logo, company
colors and assets, and it stops Kevin from using 14 slightly di erent
o -brand variations of your company colors... God-damnit Kevin
Save a hi-res version of
images
Save countless hours, by including the images
you've used within your artboards as a separate
hi-res file.
Us developers usually have 100 ways we can optimise an image,
so getting the original source is a blessing. So don't be shy in
sending a 4k pic because you can always downscale, but never up.
Include the fonts
If you're using fontbase, or another font handling
tool. Make sure you include the original font for
your devs
We only really need 1 version (usually .otf) so we can generate an
optimised pack to be able to use them on the site
Don't use WeTransfer
There's a special place in hell for people that
handle data transfer via WeTransfer, just send a
Google Drive link or better yet, a cloud link
We love WeTransfer and definitely think it's a cool tool, but don't
send countless files via WeTransfer as it's guaranteed to get lost
after 10 or so minutes
TLDR;
Work in base 8
Label colors with naming convention
Learn what SSOT is, then build one
Backup UI stock images in separate file
Include fonts in handover or where to get
Don't use WeTransfer

More Related Content

Similar to 6 UI Tips to make your developers happy

Powerpoint activity 1
Powerpoint activity 1Powerpoint activity 1
Powerpoint activity 1
JaymersonGonzales
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
David Goemans
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
DevGAMM Conference
 
Kopytko Top 10 apps.pptx
Kopytko Top 10 apps.pptxKopytko Top 10 apps.pptx
Kopytko Top 10 apps.pptx
happyanton000
 
Markdown - friend or foe?
Markdown - friend or foe?Markdown - friend or foe?
Markdown - friend or foe?
Ellis Pratt
 
Your Logo & You
Your Logo & YouYour Logo & You
Your Logo & You
TheImageGroup
 
Enterprise ipad Development with notes
Enterprise ipad Development with notesEnterprise ipad Development with notes
Enterprise ipad Development with notes
jaxarcsig
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
Jenn Lukas
 
Power point activity 1
Power point activity 1Power point activity 1
Power point activity 1
RancieCastro
 
Stream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentationStream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentation
streambase
 
Top 10 Flutter IDEs for App Development.pptx
Top 10 Flutter IDEs for App Development.pptxTop 10 Flutter IDEs for App Development.pptx
Top 10 Flutter IDEs for App Development.pptx
Expert App Devs
 
Guide for stream beginners
Guide for stream beginnersGuide for stream beginners
Guide for stream beginners
Amelia Heidenreich
 
Ten tips for creating slides
Ten tips for creating slidesTen tips for creating slides
Ten tips for creating slides
Tola Odugbesan
 
The Ring programming language version 1.9 book - Part 97 of 210
The Ring programming language version 1.9 book - Part 97 of 210The Ring programming language version 1.9 book - Part 97 of 210
The Ring programming language version 1.9 book - Part 97 of 210
Mahmoud Samir Fayed
 
Ppt prsentation
Ppt prsentationPpt prsentation
Ppt prsentation
Lucas Silva Marra
 
Design a Logo Test
Design a Logo TestDesign a Logo Test
Design a Logo Test
Eric Bouthviseth
 
Better problem solving through scripting: How to think through your #eprdctn ...
Better problem solving through scripting: How to think through your #eprdctn ...Better problem solving through scripting: How to think through your #eprdctn ...
Better problem solving through scripting: How to think through your #eprdctn ...
BookNet Canada
 
The Ring programming language version 1.5.1 book - Part 173 of 180
The Ring programming language version 1.5.1 book - Part 173 of 180 The Ring programming language version 1.5.1 book - Part 173 of 180
The Ring programming language version 1.5.1 book - Part 173 of 180
Mahmoud Samir Fayed
 
Adobe Max 2009 - Learnings
Adobe Max 2009 -  LearningsAdobe Max 2009 -  Learnings
Adobe Max 2009 - Learnings
ziblu
 
How to Design a Logo. User Guide for Logo Templates
How to Design a Logo. User Guide for Logo TemplatesHow to Design a Logo. User Guide for Logo Templates
How to Design a Logo. User Guide for Logo Templates
Maxim Logoswish
 

Similar to 6 UI Tips to make your developers happy (20)

Powerpoint activity 1
Powerpoint activity 1Powerpoint activity 1
Powerpoint activity 1
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 
Kopytko Top 10 apps.pptx
Kopytko Top 10 apps.pptxKopytko Top 10 apps.pptx
Kopytko Top 10 apps.pptx
 
Markdown - friend or foe?
Markdown - friend or foe?Markdown - friend or foe?
Markdown - friend or foe?
 
Your Logo & You
Your Logo & YouYour Logo & You
Your Logo & You
 
Enterprise ipad Development with notes
Enterprise ipad Development with notesEnterprise ipad Development with notes
Enterprise ipad Development with notes
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
 
Power point activity 1
Power point activity 1Power point activity 1
Power point activity 1
 
Stream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentationStream SQL eventflow visual programming for real programmers presentation
Stream SQL eventflow visual programming for real programmers presentation
 
Top 10 Flutter IDEs for App Development.pptx
Top 10 Flutter IDEs for App Development.pptxTop 10 Flutter IDEs for App Development.pptx
Top 10 Flutter IDEs for App Development.pptx
 
Guide for stream beginners
Guide for stream beginnersGuide for stream beginners
Guide for stream beginners
 
Ten tips for creating slides
Ten tips for creating slidesTen tips for creating slides
Ten tips for creating slides
 
The Ring programming language version 1.9 book - Part 97 of 210
The Ring programming language version 1.9 book - Part 97 of 210The Ring programming language version 1.9 book - Part 97 of 210
The Ring programming language version 1.9 book - Part 97 of 210
 
Ppt prsentation
Ppt prsentationPpt prsentation
Ppt prsentation
 
Design a Logo Test
Design a Logo TestDesign a Logo Test
Design a Logo Test
 
Better problem solving through scripting: How to think through your #eprdctn ...
Better problem solving through scripting: How to think through your #eprdctn ...Better problem solving through scripting: How to think through your #eprdctn ...
Better problem solving through scripting: How to think through your #eprdctn ...
 
The Ring programming language version 1.5.1 book - Part 173 of 180
The Ring programming language version 1.5.1 book - Part 173 of 180 The Ring programming language version 1.5.1 book - Part 173 of 180
The Ring programming language version 1.5.1 book - Part 173 of 180
 
Adobe Max 2009 - Learnings
Adobe Max 2009 -  LearningsAdobe Max 2009 -  Learnings
Adobe Max 2009 - Learnings
 
How to Design a Logo. User Guide for Logo Templates
How to Design a Logo. User Guide for Logo TemplatesHow to Design a Logo. User Guide for Logo Templates
How to Design a Logo. User Guide for Logo Templates
 

Recently uploaded

Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
jhonguerrerobarturen
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
amrsoftec1
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 

Recently uploaded (20)

Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economicoZAPATILLAS 2 X 110 ABRIL.pdf compra economico
ZAPATILLAS 2 X 110 ABRIL.pdf compra economico
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
Revolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in IndiaRevolutionizing the Digital Landscape: Web Development Companies in India
Revolutionizing the Digital Landscape: Web Development Companies in India
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 

6 UI Tips to make your developers happy

  • 1. 6 UI tips to make your developers happy There's a TLDR; at the end if you can't be arsed to read
  • 2. Work in base 8 We know it's basic, but developers love a bit of base 8. Especially with Apple & Google adopting base 8, make everyone's life a little easier. If you don't know what base 8 is, it basically means - make padding divisible by 8, so a card could be 8px/pt away from the edge of the screen
  • 3. Settle on a naming convention Labelling your colors: primary, secondary, accent is a big step instead of #8224E3, #FF0068, #170728 It's always worth communicating with your developers to ensure you're adhering to the same naming conventions, instead of finding out later from a massive Zeplin file
  • 4. Make a SSOT SSOT stands for "Single source of truth" and it basically means a big file where a marketer, developer or non-designer can find all brand assets It cuts down on messing around finding a company logo, company colors and assets, and it stops Kevin from using 14 slightly di erent o -brand variations of your company colors... God-damnit Kevin
  • 5. Save a hi-res version of images Save countless hours, by including the images you've used within your artboards as a separate hi-res file. Us developers usually have 100 ways we can optimise an image, so getting the original source is a blessing. So don't be shy in sending a 4k pic because you can always downscale, but never up.
  • 6. Include the fonts If you're using fontbase, or another font handling tool. Make sure you include the original font for your devs We only really need 1 version (usually .otf) so we can generate an optimised pack to be able to use them on the site
  • 7. Don't use WeTransfer There's a special place in hell for people that handle data transfer via WeTransfer, just send a Google Drive link or better yet, a cloud link We love WeTransfer and definitely think it's a cool tool, but don't send countless files via WeTransfer as it's guaranteed to get lost after 10 or so minutes
  • 8. TLDR; Work in base 8 Label colors with naming convention Learn what SSOT is, then build one Backup UI stock images in separate file Include fonts in handover or where to get Don't use WeTransfer