'

What Developers Need To Know About Visual Design

Понравилась презентация – покажи это...





Слайд 0

What Developers Need To Know About Visual Design @Ben_Hall Ben@BenHall.me.uk Blog.BenHall.me.uk


Слайд 1

What Developers Need To Know About Visual Design @Ben_Hall Ben@BenHall.me.uk Blog.BenHall.me.uk


Слайд 2

Who exactly is Ben Hall? I am not a designer Ocelot Uproar


Слайд 3

Follow me and my drunken activities @Ben_Hall


Слайд 4

Key Topics Layout Images & Icons Colours Typography Feedback


Слайд 5

Why design matters?


Слайд 6


Слайд 7

Attractive things work better http://www.jnd.org/dn.mss/CH01.pdf


Слайд 8

Emotional reaction http://www.jnd.org/dn.mss/emotion_design_at.html


Слайд 9

Preconceived expectations Opinion are formed before we’ve even realised


Слайд 10


Слайд 11

Result === influence / creditability


Слайд 12


Слайд 13


Слайд 14

Software Craftsmanship “Raising the bar of professional software development”


Слайд 15

In Startup, everyone should be a designer


Слайд 16

Design is very similar to code Patterns, Practices, Heretics, Rules, Logic. TDD, Feedback Cycles.


Слайд 17

Junior Designers vs. Senior Designers https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e


Слайд 18


Слайд 19


Слайд 20


Слайд 21


Слайд 22


Слайд 23


Слайд 24

Layout


Слайд 25

http://blog.usabilla.com/how-the-left-brain-right-brain-theory-improves-the-user-experience/ The right side of the brain looks at visual reference as a whole then works its way into noticing finer details The left side first sees the details and puts them together to form the bigger picture


Слайд 26

whitespace


Слайд 27


Слайд 28


Слайд 29

EMPHASIS If everything has it, nothing does.


Слайд 30

Emphasis If everything has it, nothing does.


Слайд 31

Emphasis If everything has it, nothing does.


Слайд 32

Two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities Golden ratio


Слайд 33

1.61803398875


Слайд 34


Слайд 35

Twitter as an app example


Слайд 36


Слайд 37

Cognitive science


Слайд 38

Round v square http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/


Слайд 39


Слайд 40

”RECENTABLES WITH CORNERS ARE EVERYWHERE!” Steve Jobs


Слайд 41

Real life isn’t square - Road signs


Слайд 42

Sharp corners take our focus outside the rectangle


Слайд 43

Rounded corners take our focus inside the rectangle


Слайд 44

Windows 8


Слайд 45

Sketch layouts until natural


Слайд 46

Copy / clone to learn & train brain.


Слайд 47

Images & Icons Picture is worth a thousand words. No one reads on the internet so… A good picture is priceless.


Слайд 48

Recognition


Слайд 49

Consistency. What does the user expect? *REALLY* important on mobile ?


Слайд 50

Spacing and layout matters


Слайд 51


Слайд 52


Слайд 53


Слайд 54

Great images create Desire and expression


Слайд 55

Stock photography


Слайд 56

Define colour scheme for site kuler.adobe.com


Слайд 57

Blurry images as backgrounds


Слайд 58

DRIVE USER ATTENTION


Слайд 59

DRIVE USER ATTENTION


Слайд 60

Accelerators


Слайд 61


Слайд 62


Слайд 63

Optimise images for download


Слайд 64

Responsive icons?


Слайд 65

COLOURS


Слайд 66


Слайд 67

http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm Complementary color scheme Analogous color scheme Triadic color scheme Split-Complementary color scheme Rectangle (tetradic) color scheme Square color scheme


Слайд 68


Слайд 69


Слайд 70

STOP THINKING “RED” AND “ERROR” TO CAPUTRE ATTENTION WHAT ARE YOU TRYING TO ACHIEVE? BUILD PASSED INFO: DID YOU KNOW… WARNING: 10 HOURS LEFT


Слайд 71

Typography


Слайд 72

Massively creative


Слайд 73


Слайд 74

Works of art


Слайд 75

"In some ways, the most difficult part of design process is finding the initial inspiration to make a font" ~ Karen Cheng Most important aspect of design


Слайд 76

"Typefaces, like people, have their own personality" - Core Brand


Слайд 77

More engaging and compelling content


Слайд 78

Looks Better = Works Better.


Слайд 79

Dangerous


Слайд 80

http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk


Слайд 81

http://i.imgur.com/MPSSfXj.jpg


Слайд 82


Слайд 83

Font weight – not just 100-900 https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06


Слайд 84

Why is all caps shouting?


Слайд 85

Experiment lots


Слайд 86


Слайд 87


Слайд 88

Don’t use more than three


Слайд 89


Слайд 90


Слайд 91

Respond to touch EVENTS


Слайд 92

Progress bars – cloudflare example


Слайд 93


Слайд 94

Help users make the right choice in the first place


Слайд 95

Undo.


Слайд 96


Слайд 97

Usability tests


Слайд 98

Not asking “do you like this?” Everyone will say yes!!! People are awesome.


Слайд 99

Chance to learn. Ask more than you talk. It’s like a date


Слайд 100


Слайд 101

Other people SPOT mistakes EASIER than the creator.


Слайд 102

“Oh yeah, of course, I didn’t notice”


Слайд 103

New startup!!!


Слайд 104

AND FINALLY


Слайд 105

Layout, Images, Colours, Typography, Feedback Just like code… Copy, Test, Iterate, Feedback, Play. Sign up to... TBC. Ask me. Tweet me for slides @Ben_Hall


Слайд 106

@Ben_Hall Ben@BenHall.me.uk Blog.BenHall.me.uk


×

HTML:





Ссылка: