Assignment 28.2 guidance

Challenge 1

P4: Using appropriate design tools, design an interactive website to meet a client need

Task 1

If you are going to create a website for a client then it is important that you know what the client wants and this is called identification of needs. There are several ways of doing this, one way is to create a questionnaire that client will need to complete and hand back to you or another way is to have a discussion with the client.

It doesn’t matter which method you are going to choose, what matters is that you cover some of the stuff outlined below. Please not this is just a rough copy.

Whether the clients a logo or any other digital images What functionality they want available on the website What are some of the information they need including Who will be their target audience and market The language that is going to be used on the website The type of layout and navigation they would like

You will need to add your own set of questions and put it into your own words. The client will be your teacher and it is important they answer the questions you have set as this is what you will be using to define your requirements for the website as well as the purpose.

Note: sometimes the clients will have extravagant ideas but you have to keep in mind time, resources and your skillset.

Task 2

This section will focus on designing the website and it will focus on creating a two-way interactive website with multiple pages.

You need to use the identification of needs document when designing your website and you need to clearly annotate your designs to show how they meet the user requirements. You can do this within your design or a separate document.

Design tools you can use:

In additional to using design tools you need to have a design plan that will outline the things you will include and consider when making the website. The things you need to include are interactivity that will be on the website like forms, search buttons, interactive menus, javascript being used, image gallery or any flash. Discuss whether the website is going to be static or dynamic.

Other things you need to consider:

image, development timescales, support, costs, visibility on search engines.

How complex will the site be? (pages)What graphics will be appropriate to use?Show how you will get the layout you want. Will you use frames, tables, block level containers (DIV), inline containers (SPAN)Do you plan to use templates?What will the colour schemes be?What sort of things will be on the pages? (page content)When will you HAVE TO USE HTML? (for instance when you are creating a marquee).Will you need to have any client side scripting languages e.g. JavaScript, VBScript?

Within your plan you may also Briefly explain the software you are going to be using and why have chosen to design using that particular program. Is it easy to use? Does it have many features? Is it effective?

The following is a list of design tools you can use to help you:

Moodboard

This will be used for the proposed solution. A moodboard is very easy to make, it is very simple yet it is quite an effective document. This is because it can be quite colourful for the most part and it is a fun way of displaying what the website is going to look like. It will give the person who you are designing the website for a feel of the website, the colours it will include and how it will look.

How do I make a moodboard.

It is really straight forward. You can make your moodboard in Publisher or PowerPoint. The moodboard needs to include:

sample images you will use on the website sample text sample headings sample colours certain words you will be using

Some examples of moodboards:

Link 1: http://weblog.404creative.com/wp-content/uploads/2007/02/moodboard6.jpgLink 2: http://netdna.webdesignerdepot.com/uploads/2008/12/dpcwqxg_201dfcmthff_b.jpgSite map

A site map is used to define the different pages on your site, their subject matter and how they are linked. A site map can be hand-draw or it can be drawn in Microsoft Word.

Remember: a site map is just a diagram that is showing the hierarchical structure of the html pages in a website.

A site map will have:

Page ID or page title Page levels i.e. hierarchy Site map legend / key used for the diagram

Examples:

-

Complete guide for making site maps: http://www.slideshare.net/JeannieMelinz1/creating-a-website-sitemap

Wire frame

You will need to create a wire frame to show the structure and layout of your pages. The wire frame will have the width and height and it will have boxes to show where content will be stored. A wireframe is a design tool to help the web designer plan the layout of the websites, how big each box is going to be and it will not have content on it.

An example of a wireframe:

The wire frame shows the layout of the page. It has the title for the web page as usually every page will have a slightly different layout. It is perfectly fine to do this when you have a small website however for a larger website you will need to have a more strict and consistent design. The only thing that this wireframe is missing is the sizes i.e. height and width of the page and the sizes for the boxes in pixels.

Note: don’t forget that it will make your wireframe even if you includes the sizes for each div or items you will have on your website. This is because it will give you can idea of the layout and it will help you when you start to create your website.

Another example of a wireframe is displayed below to help you. This one includes the sizes as well to give the designer an idea and help when actually making the website.

Links to help you with wireframe:

http://matchist.com/blog/how-do-i-create-wireframes/

The best one:http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/

Style sheets (optional)

You will need to create a table that will show the styles you are using throughout your website. An example of this displayed below:

Style FormattingPage background (The colour you are using throughout your website. If you are using more than one

Blue

Main heading (if you are using an headings Arial 24 point, bold, dark blue

on your website)Plain text (normal text used throughout the website. This could also be referred to

Arial 12 pixels

Storyboard

The storyboard is created towards the end of your website design process. A story board can be hand drawn or it can be done on the computer. A story board has a multi-page drawing or diagram of your website. It is used to show the content and structure of the pages.

The storyboard can be annotated so that you are showing the client the colours you are going to use, the font sizes, what each box is going to be used for and where the hyperlinks will take the users.

You can place assets here i.e. images on your prototype or you can link to your asset list where the images will be stored. It is recommended to use text on your prototypes. The text can be dummy text but doing so will make it more realistic.

Some examples of storyboard /prototype:

The screenshot above shows an example of a prototype. If you look at the example properly it appears as if it is the actual website.

Challenge 2

For this criterion you will need to use the witness statement and make sure your teachers goes through your website. You will need to consider the following points as your manager and the client will be looking through:

• A good page layout• Ease of navigation (linear and non linear)• Use of CSS to create a constituent, easy to change style• Working links to suitable external sites• Interactive features such as a catalogue of products• Suitable images• Suitable animations• Audio visual elements• Meta-tags in the code

Check that your site is as free from errors as possible (spell checker and proof reading).Make sure that you use prose where you should do and bullet points where they are appropriate and tables there they are appropriate.

Check that all your links work

At some point when you have nearly finished, have it checked by the W3C website (it may have to be uploaded to have this done). Keep evidence that it has been done. Look at the report and make any changes it lists, but may not be important.

Finally, it must be tested. Get someone to act as a user and put it through its paces. It may not be finished yet, but they should confirm things like all your links work. At this point it should basically work. Make a note of any feedback that they give you which you can use to improve your website. Look back at what you set out to do and see if you have accomplished it.