Slide 1

Slide 1 text

Interface Design for Developers

Slide 2

Slide 2 text

• Introduction • Flow of the Application • Aesthetics • Implementation • Q&A

Slide 3

Slide 3 text

I am @prtksxna

Slide 4

Slide 4 text

son of @sanjayaksaxena (1337 hacker) brother of @anexasajoop (brilliant typeface designer)

Slide 5

Slide 5 text

½ of @pathseventeen

Slide 6

Slide 6 text

with @lut4rp

Slide 7

Slide 7 text

• Designing the Android application for Cascade (http://cascade.xvii.in). • Working on the decision centric sequel of QCOK (http://qcokay.com/) called Decisively. • Porting Vertigo (http://vertigo.clay.io) to iPhone. I am currently working on…

Slide 8

Slide 8 text

Flow of the Application

Slide 9

Slide 9 text

Build Journeys What does your user want to do?

Slide 10

Slide 10 text

A Chat Application

Slide 11

Slide 11 text

Login Friends Chat

Slide 12

Slide 12 text

Login Friends Chat Other Conversations

Slide 13

Slide 13 text

Login Friends Chat Other Conversations Add New Friends

Slide 14

Slide 14 text

Login Friends Chat Other Conversations Add New Friends Register

Slide 15

Slide 15 text

Login Friends Chat Other Conversations Add New Friends Register Activation?

Slide 16

Slide 16 text

Login Friends Chat Other Conversations Add New Friends Register Activation? Start chatting immediately?

Slide 17

Slide 17 text

Login Friends Chat Other Conversations Add New Friends Register Activation? Start chatting immediately?

Slide 18

Slide 18 text

Login Friends Chat Other Conversations Add New Friends Register Activation? Start chatting immediately? } Old users get stu done quickly! } New users get started quickly!

Slide 19

Slide 19 text

Sketch

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

You don’t need Stencils, Expensive Pens or Cartridge sheets! Hell! You don’t even need to know how to draw!

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

while(!functional_design){ } iterate(); // Failure is on its way!

Slide 24

Slide 24 text

And you’ll end up with something great!

Slide 25

Slide 25 text

Maybe not that great, but its a start…

Slide 26

Slide 26 text

Aesthetics

Slide 27

Slide 27 text

How adventurous are you feeling?

Slide 28

Slide 28 text

Stick with Holo You can’t go wrong…

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Follow UI Patterns Your users will already know how to use the app.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Color Guidelines Roses are #F00, Violets are #00F

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Maintain Margins Give breathing space

Slide 35

Slide 35 text

Click Me!

Slide 36

Slide 36 text

Position & Size of Hit Targets So what if we have opposable thumbs

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Light & Shadow How many designers does it take to put a light bulb?

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Implementation

Slide 41

Slide 41 text

Developers ♥ Designers Designers ♥ Developers Said no one ever.

Slide 42

Slide 42 text

Did you just high-five my face? @lut4rp to @prtksxna #overheardatp17

Slide 43

Slide 43 text

We must learn to adjust!

Slide 44

Slide 44 text

“Yaar ghar pe salsa valsa hai?” - @prtksxna “Nahi yaar achaar pada hai” - @lut4rp #overheardatp17

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Line Height

Slide 47

Slide 47 text

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into sti sections. The bedding was hardly able to cover it and seemed ready to slide o any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady tted out with a fur hat and fur boa who sat upright, raising a heavy fur mu that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops

Slide 48

Slide 48 text

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into sti sections. The bedding was hardly able to cover it and seemed ready to slide o any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady tted out with a fur hat and fur boa who sat upright, raising a heavy fur mu that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops

Slide 49

Slide 49 text

Drawable Sizes Tiny. Small. Big. Huge.

Slide 50

Slide 50 text

9-Patch Drawables My knight in shining armor!

Slide 51

Slide 51 text

Memory Considerations

Slide 52

Slide 52 text

♥ Hack Together

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Follow our Design Process http://tflig.ht/XLVF3t

Slide 55

Slide 55 text

Thanks! Any Questions?