Basic design principles for developers

Basic design principles for developers Justine Pocock @wigglykoala Basic design principles for developers | Justine Pocock | WigglyKoala

NOTICE You Already Know All Of This!!!! instinctively!!!!!! brain scan studies reveal that the sight of an attractive product can trigger the part of the motor cerebellum that governs hand movement. Instinctively, we reach out for attractive things; beauty literally moves us. Basic design principles for developers | Justine Pocock | WigglyKoala

Learn the Rules Like a Pro, So You Can Break Them Like an Artist - Pablo Picasso Basic design principles for developers | Justine Pocock | WigglyKoala

P ro x i m it y Purpose To arrange content into a format that is easy to read at a glance. Basic design principles for developers | Justine Pocock | WigglyKoala

Drupal is great at helping to make sensible Information architecture (e.g. Views) and with D8 being more Object-Oriented The space between bits of different information is just as important KEYWORD: WHITE SPACE Basic design principles for developers | Justine Pocock | WigglyKoala

P ro x i m it y video Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

repetition repetition repetition repetition Purpose To create familiarity and add visual interest Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

repetition video Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

Alignmen t Purpose To unify and organise Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

Alignmen t video Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

Contrast Purpose To create interest and catch the eye Basic design principles for developers | Justine Pocock | WigglyKoala

If two elements are not exactly the same then make them different, very different Reverse out background colours and text Break the previous rules, sparsely! Basic design principles for developers | Justine Pocock | WigglyKoala

Contrast video Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers | Justine Pocock | WigglyKoala

Proximity Embrace white space and photographs Group related elements together, logically and with a hierarchy Basic design principles for developers | Justine Pocock | WigglyKoala

Repetition Things that are the same should look the same (lists, buttons, headings etc.) Limit your styles, be consistent Basic design principles for developers | Justine Pocock | WigglyKoala

Alignment Not just about the text Line up all the elements visually for cohesive a design Basic design principles for developers | Justine Pocock | WigglyKoala

Contrast Make elements stand out and get noticed It’s not just about colour but shape, texture, size Basic design principles for developers | Justine Pocock | WigglyKoala

CRap will make your websites look better Basic design principles for developers | Justine Pocock | WigglyKoala

Further reading… The Non-Designer’s Design Book Robin Williams Basic design principles for developers | Justine Pocock | WigglyKoala

Basic design principles for developers Justine Pocock @wigglykoala Basic design principles for developers | Justine Pocock | WigglyKoala