Website Planning EIT, Author Gay Robertson, 2018

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

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

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

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

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

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

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

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

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

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: http://www.ipsm-generator.com

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

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

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

End of presentation Press Esc