A presentation at Drupalcamp London in in London, UK by Justine Pocock
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
I will cover 4 visual design principles which are easy to follow and apply to all websites. They will help you to make a better-looking website, comply with accessibility laws and provide a better user experience.
I will not be talking about front-end tooling or even any complex CSS, this is solely how to look at your website and make some considerations towards its design.
I was also invited to give this talk at Drupalcamp Ghent later in the year.
The following resources were mentioned during the presentation or are useful additional information.
If you can’t listen to the video, or decphering my slides is too hard then check out my Medium post on this. You already know this, you know what is a good design and what is a bad design. Trust your gut. But how do you trust your gut when you don’t know what it’s saying?
The wonderful Drupalcamp Belgium invited me to talk at their camp. I wasn’t going to say no…
for free. You
can too.