"I'm not creative enough" - A lie programmers tell themselves to justify ugly UI's. Knowing where to start is often the hardest part of any problem. This session will explore sources of inspiration for non-designers. You will learn how to formulate and refine a UI and UX that conforms to Material Design. You’ll be introduced to Sketch and Zeplin, two tools that essentially eliminate the need for Photoshop or a professional designer. We will see how these tools can be used to create and export resources that can be then imported into Android Studio with a just few clicks.

1. DISTILLED DESIGN FOR
DEVELOPERS

2. Android @OralEye
Previously Accenture and ClearCall
BAI Computer Engineering, TCD
Maurice Gavin

3. Sketch
Create a mockup
Improve a mockup
Build it faster
Zeplin
Share designs
Design spec
Speed up development

4. Distilled Design for Developers@mauricegavin
Tool #1 - Sketch 4
A tool for creating wireframes

5. Distilled Design for Developers@mauricegavin
Tinder for Horses 5
Task:
Build an interface that shows some
information about a horse.
• Title
• Picture
• Metadata
• Description
TextView
ImageView
TextView
TextView

6. Distilled Design for Developers@mauricegavin
How can we improve? 6
1. Add standard Android components
2. Use default dimensions
3. Add colour

7. Distilled Design for Developers@mauricegavin
Templates for Sketch 7
Material Design Wireframe Kit v2
by Dan Shipley
www.sketchappsources.com/free-source/1954-material-design-wireframe-kit-2-sketch-freebie-resource.html
Sticker sheets & icons
by Google
https://material.google.com/resources/sticker-sheets-icons.html#sticker-sheets-icons-components

8. Distilled Design for Developers@mauricegavin
Add standard Android components 8

9. Distilled Design for Developers@mauricegavin
Use default dimensions 9
Metrics & Keylines
https://material.google.com/layout/metrics-keylines.html
Rule of thumb
All components align to an 8dp square baseline
From the Material Design Guidelines
A two-column, left-aligned list
Floating action button: 56dp
Screen edge start and end margins: 16dp
Content margin from screen edge: 72dp

10. Distilled Design for Developers@mauricegavin
Use default dimensions 10

11. Distilled Design for Developers@mauricegavin
Add colour 11
Adobe Color CC
Choose a primary colour and it creates complimentary or compound colours.

12. Distilled Design for Developers@mauricegavin
Add colour 12
Adobe Color CC
Upload an image and let the tool create a colour palette for you.
Alternatively try Pictaculous
http://www.pictaculous.com/

13. Distilled Design for Developers@mauricegavin
Add colour 13

14. Distilled Design for Developers@mauricegavin
Start to Finish 14

15. Distilled Design for Developers@mauricegavin
Tool #2 - Zeplin 15
A tool for sharing designs

16. Distilled Design for Developers@mauricegavin
Zeplin’s Strengths 16
CollaborationDimensionsExporting Assets

17. Distilled Design for Developers@mauricegavin
Resources 17
Sketch
A design tool that is easier to
use than Photoshop or
Illustrator.
https://www.sketchapp.com/
ZeplinCollaboration and asset
export.
https://zeplin.io/
Books
“Design for Hackers:
Reverse Engineering Beauty”
by David Kadavy
Material Design Guidelines
Prototyping
InVision
https://www.invisionapp.com
Pixate
http://www.pixate.com/
+ https://material.google.com

18. Thank You