24 Jan 2017

Understanding the Website Design Process

Understanding the Website Design Process

Understanding the Website Design Process

If you are thinking about creating a new website or redesigning your existing website having a realistic understanding of the “process” is key to success and not losing your mind. The process include the following steps.

1. Planning – This is the most important part of the whole process.

  • Purpose
    What are the objectives/purpose of the website? Are you going to provide information, service, or sell a product? Will you need a shopping cart?
  • Target Audience
    Who are you try to reach? Consider age, sex, or interests, this will help to determine the best design style.
  • Content
    What is the message that will attract and motivate your target audience to visit your website?
  • Competition
    A competitive analysis will help determine who is your direct competition. Keep in mind that the competitor down the street might not be a competitor online.
  • Site Map / Flow Chart
    The site map is a list of all main topic or pages of your site. A flowchart is a diagram of your website that will help your understand a visitors user experience.

2. Design

Once the information has been outlined in the planning phase you can then move forward with design.

  • Wireframe
    Wireframes help you better visualize how the content will appear on each page. They do not show any actual design, the wireframes provide a guide for nailing down content on the page.
  • Mock-ups “Prototype”
    Photoshop is a fantastic design software that allows for relatively easy modification, it keeps you organized in layers.
  • Style Guide
    Choosing the colors scheme, font style, and layout is very important. Creating a style guide will help keep your design consistent throughout the whole website.

3. Development

The developmental phase is the point where the web site itself is created. At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site.

  • Framework
    Here you might want to use basic HTML or go with a content management system like WordPress.
  • Code templates
    For each page type your website will have several pages (e.g. home, general content, blog post, form) that can be based on templates.
  • Mobile Version
    Responsive design is required now and can affect you organic listings.
  • Content
    Time to fill all pages with written content. Content should not be taken from other website as tempting as that might be.
  • Test, test and test again
    This is the perfect time for a full website review. Go through every single page from the home page to the form submission confirmation page and make sure everything is working.
  • Cross browser
    Don’t forget to check the website in multiple browsers, you are going to hate Internet Explorer.

4. Launch

Ready for public viewing.

  • Test again just to be sure
    This might seem boring but you might catch something you missed.
  • Maintenance
    Look at your website as a living breathing organism that will need care an attention almost on a daily basis.