One of my favourite things to do is to scour the web for examples of great web design. I love seeing what creative and talented designers and developers come up with and how these people find new ways to present usable and accessible content. Too often websites can start to look like they’re mirroring one another but that’s not always a bad thing. After all, part of user experience relys on what people know and are used to in order to make accessing information easy and quick. But don’t you just love it when you see something new and spectacular?
Let’s look at some great web design.
For this catch up with great web design, I’m going to focus on two website designers and look at how they’ve broken the mould and created something left of centre, but still accessible.
Green Peas For Breakfast
https://www.greenpeasforbreakfast.com/
Monica Higgins is the designer behind Green Peas for Breakfast and from the very first second I laid eyes on her website, I was in love. Full confession, I’m very much a lover of vintage styling and design and so it’s no surprise that I love this website. The overall feel of the site is quirky and light, but professional. There is definitely no denying that Monica is a fabulous illustrator and designer and understands how to apply these skills to web design.
Her use of colour is fabulous. Pink can be a tricky colour to manage, particularly where text contrast is concerned but somehow she manages to find the right tone of brown and dark blue/grey for the text which is easily readable. I particularly like the simple use of bold pink lines through some of the text headings for emphasis. The different tones of pink used as a backdrop to her portfolio are balanced really well also.
The use of vintage machines to illustrate her different services are genius and a great twist on the usual icons that you would normally find in this kind of layout. Not content to let it rest there, she’s added a parallax effect to the machines which is brilliant and not something I’ve seen done in this way before.
Her subtle use of animation on text, buttons and portfolio images add more movement to the site and also function to provide user feedback when hovering to indicate something is clickable here.
When you click on a portfolio item, you are taken to a page showcasing that work. Could I gush anymore about her amazing use of colour? Each portfolio item has its own design palette and accents, but somehow each page manages to clearly stay within the Greenpeasforbreakfast brand.
If there is anything mildly negative that I could say about this website is that I’m not a fan of cursor images as it can be a little jarring to the user experience, but only mildly so. I love the visual design of the cursor, I’m just not a fan of cursor images in general.
Doers
Doers are a design agency based in based in Singapore and like Green Peas For Breakfast, their design is a little quirky, yet they keep everything clean and clear.
Admittedly, the first time I came to their website I was a little confused by the hand imagery. Perhaps because the open palm gesture is such a universal image but can have several different meanings – stop, greeting, pick me, openess, salute, hands on to name a few. But I soon realised that here it’s referring to hands on, doing-ness (yes, I just made up that word) of the agency, since they’re called Doers.
But I digress. What makes this great web design?
The company’s name is front and centre with a tag line that clearly states what they do and a bold call to action button.
The log is in the top left corner as per user expectation – tick.
The navigation is written in a clear font and contains less than 7 top level items and shows a roll over state to the user. – tick.
Their socials are at the bottom in a blog icons so hard to miss. – tick.
The internal pages are just as well designed. Take this page for example: http://doers.sg/people/
A lovely contrast to the strong blue colour of the homepage, is the white background and use of lots of white space. The blue colour is carried through into the typography and buttons for emphasis.
The logo and navigation has remained unchanged – big tick for user experience.
Every internal page begins with the same layout – an animated icon/s with a short tag line communicating what content the user can find on the page. Design consistency – another big tick for user experience.
I particularly like how they have used the animations to help break up the white space and give movement to the flow of information. The page content is sparse and easy to read on the plain white background and only two (possibly 3) fonts have been used to great effect.
The content style and tone nicely reflects the slight quirkiness of the design and both work well together to create an overall feeling of playful professionalism.
So in a nutshell:
- The playful brand is well executed and its design elements are used consistently across the website.
- The written content is clear and easy to read.
- The minimal colour is used to great effect in both imagery and in the typography.
- The simple animations complement the content and are not overbearing.
Nice work Doers!
