Download Effective Web Design File

DMT612 Professional Preparation
EFFECTIVE WEB DESIGN
…is the result of careful thought and planning
It doesn't matter if you're a beginner or a web-master and it doesn't matter what tools you
use to build your website, what makes the difference is your plan.
Decide what to include on your website and how to present it. If you spend time thinking
about your website's design before you start building it you will create something appealing
that visitors will want to revisit.
Your website has to be quick to load, nice to look at, easy to use and intuitive to navigate.
People will remember if your website was full of useful information or if it was a jumbled
maze full of pop-ups, pop-unders and flashing gifs. Keep this in mind as you get started.1
1
PLANNING
Start by imagining that your website is there to solve a problem. People use the internet to
find answers, so create your website to meet that need. Find a niche and provide highquality and unique content.
Google is a good example, their website is an extremely simple, clean design that
contains their logo and a box for you to enter what you are searching for, nothing on
the webpage distracts the user from the solution they offer. When you visit Google's
website there is no question who they are and what they do. They are focused on
quickly providing the visitor with relevant search results. That is why they have one
of the most successful websites ever created.
https://www.google.co.uk/
All other elements of web design are secondary to filling the visitor's need. They will simply
click away to the next website looking for a solution if you can't help them.
SUMMARY




Thoroughly plan your website before you start building it.
Make your website load with lightning speed.
Make site navigation clear and simple.
Focus on solving visitors' problems.
QUESTION
What other websites do you find appealing? Are there any that you would like to emulate
(as opposed to copy!)?
1
Much of the material included in sections 1-6 has been adapted from http://www.websitedesignbasics.com/
2
SO WHAT DO YOU WANT YOUR WEBSITE TO DO FOR YOU?
What is your brand? What is your identity? What are you selling? Who are your
audience? Where is your market?
Having answered these questions, you can now focus on delivering solutions.
As with any networking opportunity where you only have a few seconds to make a good
impression, studies have shown that you only have a few seconds to get a visitor's attention
and hold it before they click away, so don't waste any time. Don't use intro pages that take
too long to load. People want to get to your content and you should remove anything that
gets between the user and the information. Guide them to their goal with as few "clicks" as
possible.
PLAN TO SUCCEED
Many people get frustrated when they try to create a web page simply because they don't
do any planning. If you jump in and start writing HTML with no plan you may find yourself
lost and so will your visitors. Before you start up your computer get out a pencil and some
paper. Create a diagram that illustrates how your website will be laid out.
Build your website one page at a time focusing on one topic per page. As you add new
content expand your website diagram adding new pages in a logical order. This will make it
much easier for you to build your site and for visitors to find their way around. If you follow
a plan you will avoid leading viewers to blank pages, dead links or having them run in circles
trying to navigate your website.
Don't worry if you think your website is not perfect, it is always going to be work-inprogress, organic, like your career and CV themselves. You should continue to develop and
fine-tune your content. You may want to develop your technical skills and create something
even more dynamic over time.
SUMMARY




3
Decide what you are trying to say and to whom.
Figure out how to deliver the solution quickly.
Map out your website on paper before you start building it.
Continue to fine-tune your website after it is created.
COLOUR
Many people finding choosing colours difficult. But it doesn't need to be. As creative people,
we actually make these choices every day.
People have an emotional response to colour so you want to pick those that will
complement your website's content. As you do this, be aware of what your choices say
about you both as an individual and as a practitioner.
EMOTIONAL RESPONSE






Reds: energy, passion, danger
Blues: calmness, tranquillity, stability
Greens: growth, nature, freshness
Yellows: happiness, playfulness, sunshine
Browns: stability, earthy
Blacks: solemnity, mystery, power
BASIC COLOUR SCHEMES
MONOCHROMATIC COLOUR SCHEME
The monochromatic colour scheme uses a primary colour to create an
overall mood. Tints and shades of the primary colour are used to enhance
the scheme. This scheme is easy to balance and is soothing to look at. It
can be used with neutral colours like black, white or grey.
ANALOGOUS COLOUR SCHEME
The analogous colour scheme uses adjacent colours on the colour wheel.
The primary colour is dominant while the others are used as highlights.
The analogous colour scheme is similar to the monochromatic scheme but
offers a more vibrant look.
COMPLEMENTARY COLOUR SCHEME
The complementary colour scheme uses colours that are directly opposite
each other on the colour wheel. This colour scheme creates a highcontrast effect. It is best to use one colour as the dominant colour and the
second colour as an accent in your design. This technique will allow you to
highlight important information and make it jump out at your readers.
SUMMARY




4
Colour can create an emotional response in people.
Monochromatic colour schemes are soothing and work with neutral colours.
Analogous colour schemes are vibrant but can be tricky to balance.
Complementary colour schemes are high-contrast and allow you to draw attention
to important information.
TYPOGRAPHY
Good typography is part of web page design and is necessary to communicate with your
users. Your typography should be pleasing to look at and easy to read.
Designing for the computer screen offers unique challenges. Unlike text on a printed page,
the web designer does not have complete control over how their text will appear on screen.
Users can decide to change the fonts you have selected and their size. Another problem is
that your webpage will appear differently depending on which browser it is being viewed.
Keeping this in mind, design your website so that it will be legible with a wide variety of
settings.
TYPEFACE
The typeface you select will set the feel of your web site. Fonts are generally divided
between two groups: serif and sans-serif.
Serifs are the extra lines added to the main strokes of the typeface. In print serif fonts are
supposed to be easier to read because the serifs lead the eye across the text. The problem
with this is that printed pages can have a resolution of 2400dpi while a computer screen is
limited to about 96dpi. This means that serif fonts on the screen can appear pixilated. Sansserif fonts generally look cleaner on the screen.
The look of a font should reflect the content of the site. For example, Comic Sans MS is a
whimsical font more suited to a children's page than to a corporate website.
CONTRAST
Contrast is the difference between the colour of the text and the background. Black text on
a white background offers the most contrast and makes your text as clear as possible. Avoid
using colour combinations that will make it difficult to read. The closer the values are
between the text and the background the harder it will be to read.
LINE LENGTH
Excessive line length can make it difficult to read from the end of one line to the beginning
of the next. You can control line length by using BlockQuotes, laying out your page with
narrow columns or using <br/> (break) characters where you want to force a carriage return.
ALIGNMENT
Text is more easily read if it is aligned left - also known as "ragged right" (the text lines up on
the left hand side). Right aligned text and centre aligned text are more difficult to read as
viewers get lost when finishing one line and looking to find the start of the next.
EMPHASIS
When you want to draw attention to certain words or phrases you have several options but
be aware that they can interfere with legibility. Use these sparingly:

Bold: The most common and effective method. Don't overuse or it will lose its
impact.

Italics: Be careful with italics since they can appear jagged and ruin legibility.

Underline: This can cause confusion as it's understood on the web that underlined
words are links.

Colour: Colour can be an effective way to draw attention although it can also be
confused for a link.

ALL CAPS: Rarely do this as it's considered rude and it's hard to read entire
sentences or paragraphs in all caps.
SUMMARY




5
Design so that your web site will be legible with many different browser settings.
Pick a font that is appropriate for your content.
Keep enough contrast between the text and the background.
Keep line-length short enough to enable easy reading.
LAYOUT
LOCATION IS EVERYTHING
Above the fold is gold. In the newspaper industry important stories are placed on the top
half of the page - this is known as 'above the fold'. This is prime real estate because it's
where readers first look. Use this approach when designing your website. Put your eyegrabbing content at the top. Don't eat up the top of the page with ads and graphics which
force your visitors to scroll down the window to find out what you have to say. As an
example consider the BBC website: http://www.bbc.co.uk/
LESS IS MORE
'Less is more' are words to live by. Since you only have a few seconds to capture a user's
interest don't waste any of them with bloated pages that take too long to load. Equally, you
don’t want too long a page resulting in the scroll of death! Potential visitors will just hit
'cancel' and move on to the next guy. Keep in mind that not everyone has a high-speed
internet connection. Try to keep the file size at the bare minimum. That may mean you have
to lose that 'really cool' graphic or flash intro - but ask yourself - does it add to what you are
saying or is it just eye candy? Honestly, no one cares how long you worked on the razzledazzle, they just want to find the answer to their problem. Is the solution really going to be
found in your Photoshopped masterpiece? If not, ditch it.
BE CONSISTENT
Make it easy for your visitors to find their way around by keeping navigation menus in the
same place from page to page. The most common places are a vertical strip at the top left or
a horizontal bar at or near the top of the page. Familiarity make users feel at ease, don't
make them guess what to do with each page they load. The same goes for link colours - use
the same colour and style for links throughout your website so they know what is a link and
what is not.
BREAK IT UP
Divide your content into logical blocks. Use headlines, sub-headlines and paragraphs to
guide your users through your copy. Nobody wants to fight their way through a big, grey
wall of text. Cut it into bite-size pieces readers can digest.
SUMMARY




6
BEST PRACTICE

















7
Put your best content at the top of the page.
Keep images and graphics small so your page will load quickly.
Keep items like navigation menus in the same place from page to page.
Break up your text into logical blocks.
Thoroughly plan your website around serving the user.
Design webpages that load quickly.
Simplify navigation.
Be consistent with fonts, colours and menu locations.
Use plenty of 'white space'.
Preview your website on as many different platforms as possible to eliminate bugs.
Don't make pages too long - users don't like to scroll down too far.
Keep graphics to a minimum to reduce load times.
Carefully select colour.
Keep sufficient contrast between the text and background.
Use fonts that are appropriate to your content.
Keep line-length at a comfortable size.
Don't overuse flashing/animated graphics.
Write as shortly and clearly as possible.
Put your best content at the top of the page.
Break text into logical blocks.
Provide users with a way to contact you.
WHAT ABOUT HTML, CSS AND OTHER CODING FOR THE WEB?
We don’t have the time to go into the intricacies of coding here, but if you’re interested you
can get the basics here: http://www.html-5-tutorial.com/
or take a short course here: http://www.codecademy.com/en/tracks/web
If you really do want to explore coding further, we can have a further discussion.
I’ve created a number of sites from scratch and a couple here from free open-source
templates. To get anywhere near these though, you will need a good knowledge of coding.
EXAMPLES
http://marksimpson.co.uk/msr/
http://marksimpson.co.uk/ismr/
CODE
Here is some of the code for the first page of my own site and I might add that this needs
additional css, javascript and php files to get it working.
Here, I’m editing code in TextWrangler. For web design software I use Adobe Dreamweaver.
However, you will be delighted to know that there are easier ways of achieving very similar
results!
8
SO HOW DO YOU GET YOUR OWN WEBSITE UP AND RUNNING
These two are the most popular online tools for building personal websites and benefit from
requiring no knowledge of code. They also have unlimited free trial periods:
http://www.wix.com/
http://www.weebly.com/
Other popular options may be found here: http://www.top10bestwebsitebuilders.co.uk/
So, whilst other tools are available, I’m going to recommend WIX because it’s easy to set up
an account, has quite a lot of additional features and is simple to upgrade
I’ve started to set up a site on the platform, basing it on the one I showed you earlier:
http://www.wix.com/my-account/sites/
9
SITE ASSETS
One thing we really should talk about is organising your site assets.
Old versions of files can often overburden a web site’s file hierarchy as you continue to
develop your ideas. It is therefore important to develop a system to keep everything sorted.
As a starting point, I would always recommend you have folders for images, audio, video,
css, php, javascript and downloads; but your sites may well have other assets you need to
keep organised.
I would also recommend you sort these files out before getting too far down the design
route, because where these files reside is where the web server will look for them.
Equally, you should keep your file sizes as small as possible so that they render faster. This is
true of images, audio and video…
By the way, many of you will use Adobe Photoshop for image editing, but have you tried
Fireworks? Far more intuitive for web editing, with bulk editing functionality…
We should note here that WIX does help you with this organisation, but once you get into
designing from scratch, you really do have to think about it.
10
CLOSE
So, you get an idea of using templates, layouts and other tools…
To finish, here are my top tips:
1. For audio or video, use a small number of short clips, highlights; no one wants to see
your life’s work at this stage!
2. Use quotes about your work that you couldn't use on your CV
3. Optimise your assets for the web, you need your pages to load quickly
4. A web page is essentially visual, so consider how visually appealing yours are
Time for you to go and play!
MCAS 2015