This design studio uses black backgrounds with a muted peach shade for its text. This understated look contrasts the brightly coloured animated shapes that gently float across the screen.
These moving shapes recur throughout the website. Their neon shades and random shaping are for the most part not recognisable as any familiar objects. This very much gives the impression that we are looking at a work of design, where thought has been put into every shape, quite possibly beyond the scope of the viewer’s understanding. All we know is that we are looking at the work of designers, with meaning that might elude us due to their seeming complexity.
For call to action sections, such as the contact page, bright colours are taken away and replaced with a more conventional photo of a team member.
This wine producer eschews the understated look of most product pages, and instead is an explosion of layered colours and images.
A warm shade of yellow is reminiscent of sunlight and hazy weather, while the verdant greens remind the user that nature is a central theme of the business.
Black and white Python-esque imagery contrasts with the warm shades of the backgrounds, as well as the tropical, exotic imagery.
When buying online, shoppers have become accustomed to minimalist layouts, few colours, and linear product listings. With highly stylised fonts, as well as slightly psychedelic warm tones and patterns, this site by all means should not ‘work’. Yet it does.
Ree Drummond’s carefully crafted image as a country gal is reflected in her site’s choice of colours. The slightly twee pinks, reds, and blues of the flowers in the header are reminiscent of a country living room, as is the muted green that resembles slightly faded wallpaper.
The background textured yellow would also not look out of place in a Southern drawing room (or kitchen, given that this is predominantly a recipe site). Yellow, as well as being a bright, friendly colour, is often used in fast food logos. According to Stellen Design, yellow is a colour often intended to evoke hunger, as is red. The Pioneer Woman site uses this yellow throughout, as well as the red lettering of the logo and nav links.
In the fashion section, we see a light teal shade that contrasts with red and light coloured flowers, again reminiscent of wallpaper. The colours in this context are feminine and cheery, and while blue is often labelled a cold colour, here it is warm and inviting.
This Massachusetts hotel uses two main fonts throughout. Its header, subheadings and nav links are a bold sans-serif that immediately draws the eye. Note that its call to action (‘Book Now’) is the only colouring.
The heading font is warm, with somewhat rounded edges and a use of caps that seem reminiscent of the Tintin book series. This gives a sense of adventure, and with its almost khaki background colour, seems to harken to a time of colonial exploration, safaris, and travels of yesteryear.
The site chooses to use a monospace font for its secondary typeface. This is a somewhat bold move, as its fine, small lettering threatens to be easily ignored. However, it serves to contrast with the bold headers, and is not eclipsed by them. It seems like text suited to a mission brief, hastily typed out on a typewriter. This works well with the site’s vintage aesthetic, and a sense of adventure in unknown lands.
The New Yorker (Desktop view)
Established in 1925, The New Yorker has not strayed far from its origins in terms of type. It uses characteristic headers with extremely wide counters, giving a rounded appearance to the characters. Serifs are ornate but understated. Overall, there is an art deco, Roaring Twenties feel to the headings.
When an article is opened, there is a lot of whitespace surrounding the headline. This makes it very clear to the reader which article they are currently reading.
The New Yorker makes the decision to use all uppercase on its headlines, dates, and its logo. While this may create difficulty for some readers due to all of the characters appearing on the same level, the use of white space around these areas helps to prevent cluttering and confusion.
A much more ‘web-friendly’ bold sans-serif is used for the author’s name and date, while the byline is in italics. The different weights and styling help the reader to distinguish these pieces of information from each other.
Interestingly, The New Yorker chooses to use serifs for its article text, as well as drop caps for its opening line. In this way, the text closely mimics that of a printed article. Line height also prevents the text from becoming too blocky and difficult to read on phones, tablets, and desktops. This imitation of the printed word gives the reader the sense that they are indeed reading a magazine, and that they are not losing the pleasurable aesthetics of print simply because they have opted to use a screen.
9 Hours (Mobile view)
9 Hours is a Japanese capsule hotel, and its website has been fully translated into English from the original Japanese.
With the exception of the logo, where the words ‘nine hours’ are slightly less weighty than the ‘9h’ in bold, this page chooses to use the same bold typeface throughout the site.
This minimalist approach to type is symbolic of the hotel itself, which makes much of “stripping away the unnecessary.” The site’s use of pictographs and icons in conjunction with text further gives the reader the feel that text has been chosen carefully.
Subheadings are bolder than body text to differentiate between the amenities. Key information such as check-in times have slightly wider character spacing/kerning than the rest of the body text to set it apart and draw attention to it.
Sections of information are arranged into small blocks or pods, almost as if they too are capsules themselves.
Study – read recommended texts, watch videos and tutorials
Reflect – make notes based on studies. Write “what I learned” blog posts
Practice – complete project tasks to practise what you have learned. Seek support if needed
Feedback – make notes on how to improve
HTML points to bear in mind
<br> and <hr> – to use or not to use? They are used for presentational purposes. If so, then why bother using them if you can then just style in CSS (say by creating border-bottom lines?). Best not to use.
Don’t necessarily need to indent the <head> and <body>, but it’s a good idea for ease of viewing.
NEVER add anything to your code that you don’t understand.
Always make alt text as clear for screen readers as possible.
NO inline CSS or <head> <style> CSS!
By default an img should always have a height and a width. But are they considered presentational and therefore irrelevant? However, height and width has a specific function. The browser then knows how much space to reserve for the image. Otherwise, all the text jiggles about as the image loads, which is very annoying.
On organisation – it doesn’t matter how you organise your folders, as long as it is very clear to you.
For file and folder names – we use hyphens, not spaces or underscores.
Here’s the best suggested practice for beginners:
CONTENT OUT
Do NOT use lorem ipsum. Remember we build from the “content out”. How does the content influence the design? Layout has to be meaningful. We do not design first.
“Content precedes design. Design in the absence of content is not design, it’s decoration.” Jeffrey Zeldman
Who are you designing for? Remember it’s not about what YOU like. What do people need?
PROTOTYPES
Learn to prototype well using HTML and CSS.
Mockups are no longer the way to do things. They are static. We should go straight from wireframing to prototypes we can interact with. The client should get a real feel for the product straight away.
IDEAS
Do not dismiss the importance of pen and paper. It can be an effective tool for brainstorming.
We should always have evidence of the design process. The tools are not important.
Write down your ideas. Even if they are stupid to you.
Affinity Photo and other programmes are alternatives to Adobe. Figma and Sketch are other alternatives.
Ultimately the choice is software is no longer important. There are many choices, so use what you have access to. Just get on with it.
FILE SHARING AND BACKUPS
More than one backup – on your machine, an external drive, and also online.
CarbonCopyCloner is one piece of software that aids backup to an external drive, and SYNC is a tool for online backup. Have now made a SYNC account and uploaded my files to it.
Never rely on a single copy of your work. Set this up ASAP.
Jeffrey Zeldman – Designing with Web Standards is a hugely significant book. Jeremy Keith has put the ideas into easier to understand terminology, but this book is still worth reading for context.
Don’t forget A List Apart articles.
Check out work by Eric Meyer and his writings on CSS.
Take a look at Dave Shea’s Zen Garden. Look at how different the CSS can make a site look despite the HTML remaining the same.
Remember you have access to Linkedin Learning.
Read as much as you can from the recommended material.
Clear Left – a well-known agency in Brighton. They do internships.
About: Etsy is an online marketplace where users themselves are the merchants. The content is ever-changing, and users are encouraged to review any purchases they make.
The homepage
Upon entering the homepage, the eye is drawn to the large searchbar at the top of the screen.
The logo is also relatively understated, while the pastel colour theme of the banner is minimal and muted. Aesthetics are not the main focus.
Sub categories at the top are clearly laid out.
The layout makes the user journey clear; most users will have a specific idea of the sort of products they are looking for and either head for the subcategories or the searchbar. Options for browsing more casually are located further down the page, and less of a priority.
Once a search term has been entered
Search results are displayed in a clear grid, with images of the products taking up the most real estate. Only the key information (the information the user is most interested in) is in bold – the rating of the seller and the price. Even the name of each product is not what the eye is drawn to.
The subscribe button
The invitation to subscribe to a mailing list is almost at the bottom of the page. Only those specifically looking for it are likely to see it, and its presence is unobtrusive. There are no pop-ups.
The footer
Hierarchy plays a role in the layout, with information less relevant to the user displayed in the footer.
The bottom of the page, where more ‘corporate’ information can be found, has a completely different aesthetic to the higher parts of the page. It is a solid, official blue and very unadorned. It creates a sense of being more business-like. Users looking at this section are more likely to be jobseekers, businesses, or those seeking to make a complaint or report. The overall tone is one of professionalism, which creates a sense of trust.
If the main part of the page is the shop front, then the footer is the back office.
Summary: It is easy for users to look for specific items and quickly assess the information they need. Aesthetics play a smaller role, and mainly the content (products) itself make up the visuals on the page. Etsy’s corporate presence is minimised on the page in favour of user content.
About: Brent Council is a website for residents looking to perform various online tasks and find local information. It was redesigned in 2021/2.
The homepage
Brent Council’s website is relatively unadorned, with little in the way of decoration to it. It uses the additive primary colour green in background blocks. This gives a sense of feeling ‘official’. Its navbar is also very plain, and the navlinks’ dropdown options prevent the navbar from being too cluttered.
Not many options are given upon viewing the homepage; you are either a resident or a business, with an additional option to view the council’s structure. Should a resident navigate to the site in order to find local information, their pathway would be very clear.
A mosaic of local residents imparts the message that the focus is on Brent’s population itself.
Reachdeck toolbar a clear option at the top of the page
The 2011 Census found that around one in seven Brent residents (14%) had a long-term health problem or disability that limited their day-to day-activities. The inclusion of Reachdeck software clearly placed in the header assists accessibility, with options for text-to-speech and page reading.
Options for residents
Clicking the residents’ option in the navbar opens a list of subcategories that navigate to the relevant page.
Visual subcategories
According to the 2011 census, 37% of the Brent population used a main language other than English – the 2nd highest in England. Around 9% of adults in Brent have poor proficiency in spokenEnglish. The inclusion of an icon grid below the resident subcategories further helps residents determine which section to navigate to.
Further options lower in the residents’ section
Options for residents are further simplified if they scroll past the subcategories; they are presented with a four-part grid made up of keywords. This can help users who might feel overwhelmed or unsure of which section to navigate to, and also those with limited English ability.
News and activities are placed closer to the bottom of the page. Most who log on to the site will have an idea of the action they wish to accomplish, and so more casual browsing is not prioritised.
Summary: Users and any difficulties they might face when using the site are prioritised on the Brent website, with accessibility a clear focus. Pathways are made as clear and short as possible, while any aesthetic visuals on the page are limited to images of the residents themselves.
About: The landing page for the Moulin Rouge theatre in Paris, which offers dining, live shows, and various experience packages. There is also an online shop.
Homepage when first navigating to the site
Aesthetics play a large role in the website, evident from the animation that plays upon first navigating to the site. This cover screen is fully animated and takes up the entire browser window.
However, this screen can be removed by a prominently placed cancel button on the top right. Once the user is on the page, this animated cover does not repeat. If left alone, the animated cover recedes after a few seconds, revealing the homepage. This prevents aesthetics from encroaching on the functionality of the site.
The navbar
The navbar is minimal, with few options and a call to action button on the right. The call to action button has inverted colours to make it stand out from the navlinks. Interestingly, the logo/homelink is placed in the centre of the navbar, which is a change from the usual left-hand alignment seen on most websites. This may be a matter of aesthetics, in order to showcase the logo while ensuring it is prominently placed for easy navigation.
As the Moulin Rouge is a renowned tourist destination, language options are available via a dropdown menu above the main navbar. However, the site automatically loads in either French or English, depending on the user’s location.
Drop-down menus on the navlinks
Drop-down menus on the navlinks allow for subcategory selection while keeping the header uncluttered.
Booking options page
Booking options and offers are presented via a series of ‘cards’ that the user scrolls down to explore. Each ‘card’ takes up the majority of the browser window in order to fully present its contents. This may be more effective than say, a carousel, as users can quickly scroll up and down between the cards to compare them.
The accompanying images on each card are the only images upon the page. The eye is drawn to these areas and nowhere else.
Unique aspects of each offer are highlighted in red text. While it may be chalked up to being a sales tactic to draw customers in, highlighting key features of each offer helps the user compare the offers faster, perhaps while skim-reading.
Footer
As is often the case with footers, it is mostly stripped down, without the spectacle of the main part of the page. This serves to provide a more ‘official’ tone to more functional information, such as contacts and parking.
The footer also includes some hidden features, such as video links to performances that are not available in the main site. In this way, the user is ‘rewarded’ for scrolling this far.
The most prominent feature of the footer is the call to action section, where the newsletter subscription and social media buttons are the only sources of colour. Furthermore, information on hearing aid assistance is highlighted in bold.
Summary: The Moulin Rouge places a lot of emphasis on its visuals, as is to be expected due to the establishment’s reputation. However, these aesthetic touches are minimal and do not eclipse the content of the page. In the case of the offers page, accompanying visuals help guide the eye to key information for the user.
Finally, some food for thought:
“Good web design is a balance between aesthetics and ethics.”
– Elliot Jay Stocks
“…design seeks to negotiate the qualities of the content with the affordances* of the format to produce a cohesive whole greater than the sum of the parts.”
– Frank Chimero
“Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design.”
– Dieter Rams
“Less is more.”
– Ludwig Mies van der Rohe
Good web design is user-centred. When we build web properties or create web content, we do it for the user, we do not do it for ourselves and we do not do it for our client.
“In a world where content creation is cheap and 90% of it is crap, we have a decision to make: do we want to be part of the 90% noise or the 10% signal of the web.”
– Brad Frost
And lastly:
Content over aesthetics – aim for a balance, but content is the key draw overall.
The hook’s head is thick and solid, making it easy to push through tighter yarn weaves. It is also rounded, making it difficult to snag on the yarn and damage it. Its curve is also relatively open, making it easy to ‘catch’ the yarn on the first try. Immediately after the hook’s head, the ‘neck’ is quite narrow, meaning that that the user can avoid stretching out the yarnwork if necessary by not pushing the hook through too far.
The hook itself is separate from the handle, which is thicker than the hook. Its thickness prevents the hook from slipping through the work by accident when put down. The soft, almost rubber quality of the plastic makes it comfortable to hold for long periods of time. Its matte texture also makes it non-slip, and can be gripped well while working on projects.
The measurement of the hook is also printed on the handle towards the base, where the user is less likely to grip it and therefore rub it off over time. The colour of the handle is also vibrant, making it easy to spot if lost, perhaps under a skein of yarn. The colour also makes the hook easy to identify if bought as part of a multicoloured set, with each colour identifying a different hook size.
What is it?
A bath shelf.
How is it an example of good design?
The shelf unit is extremely simple in its execution. It has no adhesive qualities whatsoever, which makes it very easy to reposition depending on where the bath’s occupant chooses to sit. Gravity and measurements alone are enough to keep it in place.
The choice of wood as the material as opposed to plastic or metals is aesthetically pleasing and creates an overall rustic feel, which might be preferred due to the relaxing connotations of a hot bath. Wood also softens somewhat when wet, which would help prevent damage to the bath itself if knocked out of position, as well as prevent scrapes on the surface.
To prevent the shelf from sliding too far left or right, the central portion of it is set lower than the narrow ‘arms’ of the unit. The unit’s width is also carefully measured to fit the width of varying bath sizes. The curved sections serve to minimise the chance of the unit knocking directly against the bath’s rim. The shelf surface is also enclosed, preventing items from falling into the water below. Its bottom is also slatted, allowing any excess water to drip back through into the bath.
What is it?
A sealing clip.
How is it an example of good design?
It is minimal and unadorned. Its very shape makes it clear what its purpose is, and using it requires very little intuition.
The material is a sturdy plastic, which helps prevent it from losing its shape and therefore its grip on any packaging. Its stiff nature also allows the fastener to audibly snap into place. his serves to reassure the user that their packaging will indeed remain closed. That said, the fact that the product is plastic does allow it a small amount of flexibility, which is important to prevent it from shattering or snapping if a lot of pressure is placed on it. It can therefore be used on thicker or bunched up packaging if needed.
The grooves that run along the back of the fastener prevent it from slipping from the user’s grasp, which is particularly important as the user in most cases would only be using one hand, as the other would most likely be gripping the product they wish to seal.
The clips come in a variety of lengths, and each one is colour-coded. This makes it easy to know which clip to grab if there is a collection of them, perhaps in a disorganised drawer.
The clip is also inexpensive, which is essential as its relatively small size means that it is likely to become lost in a busy kitchen.
Responsive websites will be pushed higher up on search engines. Think of it as Google rewarding for good practice.
Content
Accessibility
SEO – fresh quality content that is regularly updated will get better search engine results
Content over aesthetics – aim for a balance, but content is the key draw overall
What makes a bad website?
long loading times (slow server hosts, large imgs, etc.)
poor quality content, signups
poor aesthetics, different fonts
unclear layouts, unpredictable navs
long user journey
unresponsive
A little bit on the history of the web (as read in Jeremy Keith’s book Resilient Web Design)
the Mosaic graphical browser was released in 1993 and was the first to contain images.
The beauty of the web – it is backwards-compatible. Content from 1989 can be viewed today.
Growth of the Web
The number of domain names is falling in recent years. There are so many domain names that they can’t be snapped up and sold on for a profit. For example, there isn’t just .com, there’s now .blue, .pizza etc.
Nobody should be excluded from the web. However, we can see that not every continent has equal access to the web.
Who coordinates Web technologies?
We need an independent org to moderate the web and set the rules. We have Web Standards that set the rules, created by a consortium known as WWWC (World Wide Web Consortium) and founded by Tim Berners-Lee.
On Designing
Think of all the things that need to be considered when designing something.
Look at the laundry liquid dispenser evolution. Watch how beautiful, efficient simplicity becomes ridiculous complication and over-decoration. The problem is if one does it, other producers do it as well. It is no longer functional. A masculine looking dispenser to appeal to the ‘new man’ of the 1990s for example.
Think about the role colours and other design features play in conveying info to the user.
Design Principles
Check out the book the Universal Principles of Design
Look at the slides on the Golden Ratio and Hierarchy.
Hick’s Law, where too many choices can take more of the user’s time.
Ockham’s Razor – the simplest design wins.
The Expectation Effect – you pick up a bag of red crisps and expect them to be ready salted. Or looking at a collection of rectangles and know that the bottom rectangle is a footer. Or knowing that upside down bottles are likely to be conditioner, as opposed to shampoo.
What is Good Design?
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”
Simple and inclusive is key. How can you make the design feel invisible as you take it for granted so much?
To become a better designer, you must become critical of every designed object you see and use.
