Design an Attractive Website: 4 Important DOs
We've all seen them. The websites that are so visually unappealing that we read no further ... OR so cluttered with conflicting slogans that nothing stands out and so we read no further ... OR so cluttered with small, hard-to-read text that we find it hard to find what we want and so read no further ...
Yes, we've all seen them but people keep on creating them.
Here I share 4 of the VERY IMPORTANT DOs that I have learnt over the years to make your website stand out from the crowd and GET READ. Examples are taken from our own web design business in Bury St Edmunds, Suffolk.
Yes, we've all seen them but people keep on creating them.
Here I share 4 of the VERY IMPORTANT DOs that I have learnt over the years to make your website stand out from the crowd and GET READ. Examples are taken from our own web design business in Bury St Edmunds, Suffolk.
Website Design DO 1: Add Visual Appeal With "Visuals"
Websites With Obvious Visuals
This website for a Gascony chateau uses a split design of visuals and text to create a slightly staggered masthead section. The stone archway illustrates up front one of the chateau's unique selling points (the "historic charm" mentioned in the masthead text) whilst the swimming pool tells users at a glance that a pool is available - no need to clutter the masthead with unnecessary claims when a visual does the job "at a glance".
Make the Visuals Tell a Story
We created this design for a Suffolk-based company that imports components from the Far East and Europe. The map works with the slogan to tell browsers immediately where goods are being imported from.
Websites With No Obvious Visuals
When a website has no obvius visuals - as for this Suffolk charity for alcoholics website - you can always try an abstract image. For this website, we used a photo of candles of different shapes and sizes glowing in the darkness to symbolically represent people of all backgrounds coming together to create hope in a dark spell. The master candle is repeated in the shaded sidebar to provide a linking visual with inspirational text.
For this Gnostic UK website (which also had no obious visuals), we again used an abstract image but we then created further visual interest by using religious phrases in a script typeface for the body of the website and then took a small section of the main visual and stretched it to provide a visual interest for the menu options and quotations.
This website for a Gascony chateau uses a split design of visuals and text to create a slightly staggered masthead section. The stone archway illustrates up front one of the chateau's unique selling points (the "historic charm" mentioned in the masthead text) whilst the swimming pool tells users at a glance that a pool is available - no need to clutter the masthead with unnecessary claims when a visual does the job "at a glance".Make the Visuals Tell a Story
We created this design for a Suffolk-based company that imports components from the Far East and Europe. The map works with the slogan to tell browsers immediately where goods are being imported from.Websites With No Obvious Visuals
When a website has no obvius visuals - as for this Suffolk charity for alcoholics website - you can always try an abstract image. For this website, we used a photo of candles of different shapes and sizes glowing in the darkness to symbolically represent people of all backgrounds coming together to create hope in a dark spell. The master candle is repeated in the shaded sidebar to provide a linking visual with inspirational text. For this Gnostic UK website (which also had no obious visuals), we again used an abstract image but we then created further visual interest by using religious phrases in a script typeface for the body of the website and then took a small section of the main visual and stretched it to provide a visual interest for the menu options and quotations. Website Design DO 2: Add Visual Appeal With Borders and Shading
Borders
For this Theatre Winches website ,we drew the website together by creating a strong 30px dark blue border around the website as a whole and around the menu options. We created a unified feel by echoing this border as a thinner border between the sidebar and content sections and as a 1px border around the content tables.
Note however that some modern websites achieve very effective results by removing/breaking the website borders - see website design: beyond the box.
Shading: Separating Text and/or Pictures
For this Quick House Sale website for a Suffolk property company, we used shading to make the claims in the left hand column stand out from each other and also used shading and the colour of the text to separate the two columns.
As the Gascony Chateau website shows, subtle shading can also be used effectively to separate chunks of text and also to link each chunk of text to the corresponding pictures.
Shading: Linking the Website Together
In one of the designs offered to Etica, a Suffolk company, shading was used to link different parts of the website together. The semi-opaque shading over the main masthead picture effectively ties the two white sections together, providing a visual vertical section of the website as you look down the page.
In the design that Etica finally selected, the line down the page was again kept via semi-opaque grey shading overlying the top visual.
For this Theatre Winches website ,we drew the website together by creating a strong 30px dark blue border around the website as a whole and around the menu options. We created a unified feel by echoing this border as a thinner border between the sidebar and content sections and as a 1px border around the content tables.Note however that some modern websites achieve very effective results by removing/breaking the website borders - see website design: beyond the box.
Shading: Separating Text and/or Pictures
For this Quick House Sale website for a Suffolk property company, we used shading to make the claims in the left hand column stand out from each other and also used shading and the colour of the text to separate the two columns. As the Gascony Chateau website shows, subtle shading can also be used effectively to separate chunks of text and also to link each chunk of text to the corresponding pictures.Shading: Linking the Website Together
In one of the designs offered to Etica, a Suffolk company, shading was used to link different parts of the website together. The semi-opaque shading over the main masthead picture effectively ties the two white sections together, providing a visual vertical section of the website as you look down the page. In the design that Etica finally selected, the line down the page was again kept via semi-opaque grey shading overlying the top visual. Website Design DO 3: Add a Slogan
A slogan should tell a browser at a glance WHAT you do and WHY you are different from your competitors. Create ONE slogan that will catch the eye - don't muddy the waters by creating competing slogans or adding too much detail that diverts attention away from your main message.
Our own website - Affordable Web Design Bury St Edmunds offers small businesses in the Bury St Edmunds area high-quality, websites that are pleasing to look at AND that are affordable as well. Our slogan "Attractive, Affordable Websites" says it all in three simple words. The fact that our web design business is based in the Bury St Edmunds area is stated in the headings below the masthead - it doesn't need to clutter up the masthead.
Note that our company name is well to the left and doesn't compete with the slogan - unless you are a well-known brand, you need to make people interested in your product/service before they care who you are. The main justification for having your company name so prominent that it competes with your slogan is if the name fulfills the telling people WHAT you do part of the slogan.
Our own website - Affordable Web Design Bury St Edmunds offers small businesses in the Bury St Edmunds area high-quality, websites that are pleasing to look at AND that are affordable as well. Our slogan "Attractive, Affordable Websites" says it all in three simple words. The fact that our web design business is based in the Bury St Edmunds area is stated in the headings below the masthead - it doesn't need to clutter up the masthead.Note that our company name is well to the left and doesn't compete with the slogan - unless you are a well-known brand, you need to make people interested in your product/service before they care who you are. The main justification for having your company name so prominent that it competes with your slogan is if the name fulfills the telling people WHAT you do part of the slogan.
Website Design DO 4: Use Subheadings
Subheadings help browsers to quickly assess what information a page contains; they also help break the text up and make it look less daunting.For anyone interested in SEO, use h1 tags for the main page heading and h2 - h6 tags for the other subheadings. For this Website Design Suffolk page, we are targetting the terms "Website Design Suffolk" - hence the h1 tag (which is THE most important in SEO terms) says "Website Design Suffolk" and the h2 tags repeat these keywords in various ways - eg "Website Design Suffolk and South Norfolk" or "Website Design Suffolk: Affordable Prices".
Suggested Web Design Reading
Check out these reference books, although, personally, I have found the best way to learn web design is to surf the net, look at what websites you like and then experiment with creating designs that are similar although NOT identical. Over time, you start assimilating the best ideas into designs that are all your own.
Bookmark the designs you like - I have bookmarks for "interesting mastheads", "interesting navigation", "wide-screen designs", "out-of-the-rectangular box designs", "business websites", "hotel websites" etc etc.
Bookmark the designs you like - I have bookmarks for "interesting mastheads", "interesting navigation", "wide-screen designs", "out-of-the-rectangular box designs", "business websites", "hotel websites" etc etc.
Bookmark This Lens
by jjj1
Hi everyone. My name is John and I am a busy father of 4, husband, resource analyst, website developer and property investor - not to mention an avid... (more)
