Web Design: Steps

Ten steps to launching your website

 

Ten Steps To Website Design

When working with clients on a website design project I find the following 10 steps help clarify the process and the dialog needed to create a beautiful and functional site.

You might find it useful to think about your own website project.


1. What do you want your website to do?

Be clear about the goals of your website. For what reason do you want to be online? E.g.

  • To promote your hobby, interests or business
  • To offer information, media and resources
  • To be a social hub
  • To sell a service
  • To sell a product

When visitors and your potential customers arrive at your site how do you want them to interact with the content? What are the calls to action to be? E.g. register, contact you, order a product, book accommodation etc

10-steps-target.jpg


2. Who are you aiming your website at?

Knowing what type of people you are aiming your web site at will help to create a site that is engaging and relevant for them. It will help when deciding on the content and design to know the age range, gender, characteristics and interests of your users.

10-steps-people.jpg


3. Website Name & Keywords

Some people will arrive at your site from a direct link on another website, from a business card or other advert or via word of mouth. However most people will arrive at your site having entered some keywords into a search engine. You will need your site to be ranked high on the search results for your site to be spotted. This search engine optimisation needs some planning from the start not the end of the web design process.

So thinking about your goals from step 1 list 10 keywords that people would use to find what you offer. Try those keywords in search engines and see if they return similiar websites/ businesses. Refine your list of keywords to improve the results. If there are hundreds of similar businesses, think about what keywords might be linked uniquely to your website. What is your unique selling point?

Have you got a website name yet? If you have and its established and fits with your goals then keep it. If you are starting up or need to change it here's a few tips to think about.

  • Test your ideas in a search engine or domain registration site like www.one.com
  • First see if your business/ brand name is available. Remember websites names are unique - So if its already on the web you can't have the same identical name. You might try a variation or a different ending top level domain (e.g. use .co.uk instead of .com) but if the other site is very similar to yours this may be counter productive.
  • Make it short and memorable for people to remember.
  • Try and include a keyword or two from your keyword list.
  • Try variations of different word order, hypens and underscore etc but its recommended to go for no punctuation between the words if possible.
  • Since your first idea is likely to be taken be prepared to change your ideas a lot!

10-steps-keywords.jpg


4. Sitemap

Before thinking specifically about the content of your site just think about the pages that you want to have and write them down in an indented list like this example for a simple self-catering apartment website:

  • Home Page
    • Accommodation
      • Apartment 1
      • Apartment 2
    • Bookings
    • Getting here
    • Contact Us

10-steps-sitemap.jpg


5. Content

Now put some details on each of the pages in your site map. What sort of content is needed on each page given your goals, target audience and keywords. Think about what the content needs to say but also what "content type" would be best for this e.g.

  • Text
  • Images
  • Banner slideshows
  • Video
  • Blog
  • Forms
  • Forum
  • Advertising
  • Search box
  • RSS feeds
  • E-commerce
  • Photo gallery
  • Social media sharing links
  • Links to other sites
  • Calendar
  • Maps

For each page think about what the "calls to action" are for the visitor from that point. So in our sitemap example above there will need to be a direct link from the "apartments" page to the "bookings" page.

10-steps-content1.jpg


6.  Design

Here are some useful steps in planning and agreeing a website design that help develop the web sites "brand image".

Research

Sometimes its easier to see what you like than explain what you want. I would recommend exploring the internet and selecting five websites that have elements that you want to include in your own web site. They do not have to be in the same line of business but they demonstrate things that you like that would suit your brand image. E.g. layout, colour schemes, fonts, functionality, navigation structure.

Wire frames

These build on the content and research to sketch in the pages required and the basic format of the page layouts. These determine where the navigation will be and the general positioning of blocks of content. Whilst anything is possible there are fairly standard layouts that make help to engage your visitors not confuse them. E.g.

Most sites have:

  • Header content - good for a name, logo, banner, navigation links
  • Main content - the content of the page sits here. It may be full width or divided into columns e.g. main with right or left sidebar or two, three or four column layouts. It might be a combination of these.
  • Footer content - good for copyright, additional links, quick contact details. Sometimes used for additional navigation links.

Think about the navigation of your site - Where do you want the menu to be. Make it simple for your visitors to follow. Most sites have either a horizontal menu bar at the top of the page or the bottom of the header. Some place the navigation links in the sidebar -usually the left. Others may use a combination of these.

Style Tiles

Style tiles define the look and feel of a site without the detail of a full mock up. 

If you already have an established brand then this is likely to inform this process.

If this is a new business or website the stile tile define how different elements represent the values of the business/ website and attract the target audience. These can include:

  • Colours of backgrounds, banners, logos, buttons and fonts
  • Fonts used for titles and paragraph text
  • The positioning of key brand elements
  • The use of lines, shape, gradients, textures and space to

Mock-Ups

Mock-ups bring the wire frames and the style tile together in an exact sample of the home page and one internal page. This is the last stage to confirm the elements of the website design.

Wireframes10-steps-wireframes.jpg

Style Tile

10-steps-styletile.jpg

Mockup

10-steps-mockup.jpg

 

 

 


7. Website Conception

Now all the foundations are in place the website can be created. For a brand new site this will include:

  • Registering the domain name and receiving FTP and MYSQL database passwords
  • Uploading the Concrete5 content management system to the domain
  • Uploading a base template for the site theme - usually forked on "bootstrap"
  • Designing the Concrete5 page layouts in line with the Wire Frame plans
  • Modifying the base template and designing the website theme in line with the agreed mock-ups.
  • Adding the content
    • Uploading media - graphics, photos, videos
    • If content exists, transfer this to the new site.
    • If content doesn't exist, create this on the new site
    • Add metadata and descriptions to every page and media
  • Check search engine optimisation - sitemap, robots txt, 404 page not found, 301 redirects
  • Install some analytic software
  • Back up the web site content and files
  • Test the site - Proof read, functionality and link checking

10-steps-jigsaw.jpg


8. Launch

The website is goes live and any promotional activities take place to encourage people to visit it.

10-steps-launch.jpg


9. Review

Track website hits, usage and search engine rankings over time.

Are your keywords working?

Are visitors reaching the website?

Are visitors responding to the calls for action?

What feedback have you had?

How could the website be improved?

10-steps-review.jpg


10. Updating

Websites should not be static content if you want to continually engage your visitors overtime. Build on your reviews.

Make your site dynamic and continually improving and your visitors will keep on coming back.

10-steps-cogs.jpg