slides

interface design

opening slide: Gestalt principles

A look at gestalt principles in interface design: proximity, similarity, Prägnanz, symmetry and closure

opening slide: interface design
2 hands flipping pages in book
text: form follows function, bauhaus + image of milk jug with integrated sugar tray
notes on considering your users
notes on UI language, considering accessibility from the start
illustration of physical, sensory and cognitive disablities
text: Gestalt principles of form perception: proximity, similarity, Prägnanz, symmetry and closure
proximity example: workfu site profile page with 5 grouped icons
similarity example: workfu site profile page with list of tag links
workfu site profile page with list of tag links, 2 groups differentiated by colour
greyscale view of previous: workfu site profile page with list of tag links, 2 groups differentiated by colour
Prägnanz example: windows and mac logos
Prägnanz example: forrst logos
closure example: WWF logo
tips on interface design
case study of 'finding work' services
screenshot : craigslist.co.uk, homepage
screenshot : craigslist.co.uk, job listing page
screenshot : craigslist.co.uk, individual job page
screenshot : totaljobs.com, homepage
screenshot : totaljobs.com, job search page
screenshot : totaljobs.com, individual job page
screenshot: uk.authenticjobs.com, homepage
screenshot: uk.authenticjobs.com, job listing page
screenshot: uk.authenticjobs.com, individual job page
screenshot: breadapp.com, homepage
screenshot: breadapp.com, job listing page
screenshot: breadapp.com, individual job page
screenshot: workfu.com, homepage
screenshot: workfu.com, profile page setup
screenshot: workfu.com, profile page
text: interface design = design for people
credits
closing slide

download slides PDF, 1.6MB (optimised) PDF, 17.4MB (original)