1. Website
Planning
EIT, Author Gay Robertson, 2018

2. Planning your website
Using the approved brief you can now begin to develop your plan to show how you will complete the website
You need to ensure that the site is finished on time and complies with the brief
You need to ensure that the plan provides a clear picture to all those involved with the project

3. The plan … A website project plan should include:
A summary of the business and its objectives
A brief discussion of the purpose of the website (goal) and how you will evaluate success
Description of the target audience
Content and resources required eg a Content Matrix
Any restrictions or constraints eg database to use, colours, fonts
A testing plan
Project milestones and time constraints
Stakeholder consultation and sign off

4. Resources and Materials
When creating a website, you may be working alone or working with a team to create a site
Either way it is important that you have the resources, materials, and time to complete the project successfully
Do you or your team have the required skills to fulfil the requirements, or do you need additional people to be involved eg a graphic designer for images

5. Content Matrix
A Content Matrix is a simple table used to provide a summary of all the content elements that are required for the website
It lists information including name of resource, description, type of resource, who is responsible for the resource etc
This is to ensure that all resources are tracked and correctly managed
Content Matrix
Name
Description
Type
Format
Supplier
Existing
Required by
Cookies
Cookie Image
Graphic
.jpg
Grover
Yes
1/1/18
Contact
Contact info
Text
MS Word
Larry
Price List
Produce Price List
Spreadsheet
MS Excel
Gay

6. Website Content
Once you have received the content from the client, it is time to decide how many pages your website will include
Take all the content and break it up into relevant sections
For example, one section/page might include all the contact information, including operating hours etc - you might call this page “Contact Us”
The next step it to create a hierarchy of the pages and produce a site map

7. Sitemap Contact Us Home About Us Products Sitemap
A sitemap is a representation of the hierarchy of webpages and shows the logical structure of a website
Generally on the top of the site map will be the “Home Page” which is the main page of the site, and the first page loaded when a user first accesses the website. Under that will be the other pages that are linked to the homepage, followed by the subsections of each page
You can create a site map in a range of ways including using Microsoft Word SmartArt
Contact Us
Home
About Us
Products
Sitemap

8. Page layout
Once you have your content, the next step is to start designing the layout of your web pages
The first step is to create a ‘wireframe’ which is a rough sketch of the layout of the page and where your elements such as headings, navigation section, text and images etc will be shown
The ‘wireframe’ can be created as a simple sketch or drawn in a software program

9. Screens and web design
Screen width is important to consider when it comes to web design Today people are not only browsing on computers but phones and tablets - all with various screen sizes
There are two kinds of web page design:
‘Fixed’ is where the web designer sets a screen width and it does not change no matter what device the screen is being viewed on
‘Liquid’ is designed to automatically change on different sized screens

10. Scroll depth
It is important that when a user accesses a website all the most important information is viewable from the start of opening it. Although you can go lower it is better design if users don’t have to scroll down to find the information they are looking for. Only 5% of visitors are likely to view your entire website
For example having the links to the other pages of your site only viewable once a user scrolls down or across is considered poor web design – how many times has this happened to you??
Most users will not scroll down unless your site captures their attention or they find what they need when they open the page. Otherwise they may simply close the site and look elsewhere for the information

11. Mock-Ups
A ‘Mock-up’ is a visual representation of how the finished website will look on the screen. This helps to show the full design and feel of the website compared to a wireframe, which simply shows location and description of content.
You can do this through a graphic program or simply in Microsoft Word or publisher.
If you want to insert random text to fill your text blocks, to help show the design on a site you can use a text generator such as:

12. Milestones – major steps
It is important in any project to note what the major steps or Milestones are. These must be included in your plan
If you don’t document and sign off milestones it can be difficult to track your progress or know if you are on track to complete the project on time

13. Testing Plan
Website Testing is one of the most important and essential parts of a web design project. There is no point creating and launching something that is full of errors and is not created to an acceptable and usable standard
Today so many consumers not only have a computer, but also have phones, tablets, laptops and other devices all with different screen sizes, operating systems and web browsers
For your site to be successful it needs to be accessible, function well and behave well on multiple devices, screen sizes and web browsers

14. Client Consultation and signoff
It is important to be in communication with your client during the planning process - much like your brief, it is a way to ensure that what you are planning to create meets their requirements
The client should be involved in:
The initial consultation and approval of brief
Approval of mock-ups and feedback on proposed design
Final Review of site
The client may provide feedback at any stage of the project.
It is important to document any changes requested by your client to avoid any misunderstandings later in the project

15. End of presentation Press Esc