Minimalist Designer behind the curious Developer

Slide 1

Slide 1 text

the minimalist Designer Developer within the curious a case study of a fun weekend project Wednesday, 16 January, 13

Slide 2

Slide 2 text

www.sayan.ee coder . explorer . speaker Wednesday, 16 January, 13

Slide 3

Slide 3 text

coder Wednesday, 16 January, 13

Slide 4

Slide 4 text

explorer Wednesday, 16 January, 13

Slide 5

Slide 5 text

explorer thanks!! Wednesday, 16 January, 13

Slide 6

Slide 6 text

speaker Wednesday, 16 January, 13

Slide 7

Slide 7 text

Process iteration . cycle . repetition Wednesday, 16 January, 13

Slide 8

Slide 8 text

desire design develop decide ideas ux code feedback Wednesday, 16 January, 13

Slide 9

Slide 9 text

ideas ux code feedback Wednesday, 16 January, 13

Slide 10

Slide 10 text

Desire emotions . features . ideas Wednesday, 16 January, 13

Slide 11

Slide 11 text

emotions encouraging open curious friendly current hands-on accessible local global quality Wednesday, 16 January, 13

Slide 12

Slide 12 text

2 features encouraging open curious friendly current hands-on accessible local global quality open events open source Wednesday, 16 January, 13

Slide 13

Slide 13 text

sketch desktop & laptop mobile & tablet paper & balsamiq 2 col 1 col Wednesday, 16 January, 13

Slide 14

Slide 14 text

ideas components color scheme responsive design general Wednesday, 16 January, 13

Slide 15

Slide 15 text

Design components . layout . structure with adobe ﬁreworks Wednesday, 16 January, 13

Slide 16

Slide 16 text

ui kit ui Wednesday, 16 January, 13

Slide 17

Slide 17 text

ui kit color form table fonts typography buttons Wednesday, 16 January, 13

Slide 18

Slide 18 text

color scheme adobe kuler dribbble or = swatch webuildsg.ase add to swatch color pallette Wednesday, 16 January, 13

Slide 19

Slide 19 text

fonts choice ﬁlters download opensans-regular.ttf code preview font pairing Wednesday, 16 January, 13

Slide 20

Slide 20 text

960 grids ﬁreworks > menu > ﬁle > new from template Wednesday, 16 January, 13

Slide 21

Slide 21 text

ﬁlters properties panel eﬀects drop shadow Wednesday, 16 January, 13

Slide 22

Slide 22 text

shapes rounded rectangles corner design resize without distortion Wednesday, 16 January, 13

Slide 23

Slide 23 text

state 1. 2 states 2. slice tool 3. behaviors 4. preview hover File > Preview In Browser > Preview in Google Chrome Window > Behaviors Window > States Wednesday, 16 January, 13

Slide 24

Slide 24 text

pages master page - repeated parts header, footer, etc Wednesday, 16 January, 13

Slide 25

Slide 25 text

export ﬁle > export preview in browser options hover eﬀects Wednesday, 16 January, 13

Slide 26

Slide 26 text

logo geometric shape ﬁrst letter mobile app icon apple touch icons logo, favicon Wednesday, 16 January, 13

Slide 27

Slide 27 text

Develop css . html . javascript Wednesday, 16 January, 13

Slide 28

Slide 28 text

structure sass + compass > css Wednesday, 16 January, 13

Slide 29

Slide 29 text

slicing 1. web slice 2. optimise 3. export Wednesday, 16 January, 13

Slide 30

Slide 30 text

grids Wednesday, 16 January, 13

Slide 31

Slide 31 text

color variables font variables sass > css Wednesday, 16 January, 13

Slide 32

Slide 32 text

css properties Wednesday, 16 January, 13

Slide 33

Slide 33 text

jade > html viewport facebook og google fonts apple touch icons gridline in dev stylesheet Wednesday, 16 January, 13

Slide 34

Slide 34 text

responsive 2 col > 1 col wider smaller Wednesday, 16 January, 13

Slide 35

Slide 35 text

Decide launch . feedback Wednesday, 16 January, 13

Slide 36

Slide 36 text

feedback constructive! Wednesday, 16 January, 13

Slide 37

Slide 37 text

next steps show more api user entry user entry url performance design development social icons Wednesday, 16 January, 13

Slide 38

Slide 38 text

api integration github facebook eventbrite meetup.com manual manual Wednesday, 16 January, 13

Slide 39

Slide 39 text

desire design develop 2 features 2 base colors 2 fonts 1 logo 2 weekends 1 stylesheet simple intuitive many devices decide 2 features 2 design change performance Wednesday, 16 January, 13

Slide 40

Slide 40 text

resources html5boilerplate.com sass-lang.com compass-style.org mhs.github.com/scout-app/ jade-lang.com Wednesday, 16 January, 13

Slide 41

Slide 41 text

thanx ;-) Wednesday, 16 January, 13