Iphone sketches

31
Varia%ons

Transcript of Iphone sketches

Page 1: Iphone sketches

Varia%ons  

Page 2: Iphone sketches

Naviga%on  

Page 3: Iphone sketches

V.1  

Page 4: Iphone sketches

V.2  

Page 5: Iphone sketches

V.3  

Page 6: Iphone sketches

V.4  

Page 7: Iphone sketches

•  Homepage  v.1  – Straigh9orward  – No  descrip%on  on  principles  

– List  format  for  the  nav  

V.5  

Page 8: Iphone sketches

•  Homepage  v.2  –  Sub  nav  in  list  form    –  Requires  a  lot  of  back  and  

forth  nav  (back  buGon  overuse)  

–  BoGom  nav    

V.6  

Page 9: Iphone sketches

•  Homepage  v.3  

•  FUN  SCROLL  WHEEL  <3  

V.7  

Page 10: Iphone sketches

•  Preferred  Version  – Landing  page  has  all  three  necessary  elements  on  the  site  

V.8.1  

Page 11: Iphone sketches

– When  clicked  into  a  por%on  of  the  site,  top  becomes  a  hidden  overlay  nav  

V.8.2  

Page 12: Iphone sketches

•  Preferred  Version  wireframe  –  Immediate  introduc%on  to  the  principles  and  methods  

V.8.3  

Page 13: Iphone sketches

•  The  three  screen  indicators  direct  people  to  the  three  most  important  parts  of  the  site  

V.8.4  

Page 14: Iphone sketches

Specific  Method  Page  

Page 15: Iphone sketches

V.1  

Page 16: Iphone sketches

V.2  

Page 17: Iphone sketches

•  Method  Page  v.1  –  Back  buGon  necessary  –  The  list  subnav  of  a  method  

page  is  sta%onary  –  Only  the  top  moves  when  the  

buGons  on  pressed  

V.3  

Page 18: Iphone sketches

•  Method  Page  v.2  –  Lightbox  overlay  so  you  can  

close  the  x  –  Steps  are  separated    –  Experts  and  download  are  

always  visible  through  the  steps  

V.4  

Page 19: Iphone sketches

•  Method  Page  Preferred  Version  –  Tab  format  –  Includes  overview  –  Can  see  what  category  the  

method  falls  under  

V.5.1  

Page 20: Iphone sketches

•  Possible  Changes  

•  Share-­‐  downlaod  print  email  

•  Or  email  instead  of  download  card  –  What  are  you  downloading?  

•  BackbuGon  with  naviga%on,  contact  an  expert.    

•  Video  push  somewhere  to  be  one  thing.  

V.5.2  

Page 21: Iphone sketches

•  Take  the  frames  from  video  so  you  don’t  have  to  embed  a  video  on  the  app  

•  Creates  fast  snapshot  of  what  the  app  looks  like  

V.5.3  

Page 22: Iphone sketches

Method  Picker  

Page 23: Iphone sketches

V.1  

Page 24: Iphone sketches

V.2  

Page 25: Iphone sketches

V.3  

Page 26: Iphone sketches

•  Method  Picker  v.1  – Ugly  2X5  grid  with  too  much  informa%on  

– Drop  down  filter  

V.4  

Page 27: Iphone sketches

•  Method  Picker  v.2  –  Top  nav  layout  –  Filter  immediately  visible  –  Methods  are  in  a  list  view  with  

descrip%on    –  Pictures  on  the  side  –  But  this  takes  up  too  much  

space  on  the  screen    

V.5  

Page 28: Iphone sketches

•  Method  Fun  Picker  v.nothing  

•  POSSIBLE  coverflow  model  but  just  for  funzies  

V.6  

Page 29: Iphone sketches

•  Filter  Preferred  Version  v.3  –  Drop  down  Filter  –  2x2  Grid  layout  –  With  three  screen  indicator  on  

the  boGom  

V.7.1  

Page 30: Iphone sketches

•  Preferred  Version  Method  Picker  wireframe  v.3  – Sugges%on:  Logo  on  the  boGom  

V.7.2  

Page 31: Iphone sketches

•  Preferred  Version  Method  Picker  v.3.1  – Filter  overlay  (sorry  it’s’  meant  to  be  all  over  the  screen)  

V.7.3