CREATE 2 - 3 SCREENS OF A WIRE-FRAME DESIGN

 

 

Use any software you want

You can use  sketch/illustrator and invision or adobe XD

Create a folder in YOUR google drive folder called "sprint files"

Export the final designs in jpeg/png format and put them in google drive folder "sprint_files"

If you have a link to the prototype - create a google doc and place it into the document, name it (Sprint_links)

If you have a video file from adobe XD - place it into the "sprint-file" folder with the name "sprint_video"

 

 

 

 

 

 

CONTINUE THE SPRINT AND

PICK 1 SCREEN AND

APPLY VISUAL DESIGN TO IT.

 

 

HERE'S AN EXAMPLE

THE WIRE FRAME

GOOD

NOT

HAVE JUST THE RIGHT AMOUNT FIDELITY

LOOKS LIKE A FINAL PRODUCT

DOES NOT HAVE FAKE COPY (lorem ipsum)

USES FAKE COPY

USES REAL PHOTOS AND QUICK ICONS WHEN NEEDED

JUST USES GRAY SQUARES TO INDICATE PHOTOS

HIGHLIGHTS THE CONTENT

LOOKS SLOPPY AND NOT "STRUCTURED"

VALIDATES THE WORK-FLOW AND INTERACTION MODEL

EVERYTHING IS A 1-OFF AND NO RE-USE OF MODEL MATERIAL

HAS GOOD PLACEMENT FOR USER LOCATION (pagination)

THE USER HAS NO IDEA OF "LOCATION"

USES GOOD DESIGN PATTERNS AND DEVICE PARADIGMS

INTERACTION DETAILS ARE NOT MAPPED WITH LOGIC (CHECK BOX)

GETS INTO THE DETAILS AND VALIDATED MICRO INTERACTIONS

DOES JUST HI-LEVEL AND DOESN'T ACCOUNT FOR DETAILS (ERROR)

GOOD

EXAMPLE

Has clear work-flow location, content and highlights content

EXAMPLE

NOT

EXAMPLE

Don't know what the boxes are. The square bars are confusing..

EXAMPLE

GOOD

Does good at mixing the repetitive while giving photo context.

NOT

Context is unclear and repetition isn't distinct enough

Getting into the details and micro interactions

Not showing enough details

Good use of alignment, grid and negative space

No a good use of negative space and symmetry

HOME WORK WIRE-FRAME EXAMPLE

00:00

00:00

GOOD

GOOD

NOT

NOT

EXAMPLE

EXAMPLE

EXAMPLE