1-Designing an interactive website

Category: Education

Presentation Description

No description available.


Presentation Transcript

Designing an interactive website : 

Designing an interactive website Before a website can be created, it must be designed. If this stage is skipped, major problems are likely to occur when building the website and errors might not be found until the website goes live What does it mean? When a website goes live. It is uploaded to a web server and made available to the public for the first time.

1.1. Identification of need : 

By investigating the requirements of a project, a web designer can ensure that the website fully meets both the client’s needs and those of the users. 1.1.1. Nature of interactivity. Most modern websites involve interactivity; static websites risk losing users. It is important to decide how much interactivity will be in a dynamic website. 1.1. Identification of need

What does it mean? : 

What does it mean? A static website is one with no interactivity and is usually just a presentation of information. Changes have to be hard-coded into the site. A dynamic website can involve any level of interactivity from a simple feedback form to a database that personalises the website for each individual visitor. Changes can be made on the fly.

Slide 4: 

Too little interactivity on a website and users may lose interest; too much and they may feel overwhelmed. It is important to get the balance right. If a website is to be an e-commerce site, the designer needs to decide how online transactions will be carried out. There are two parts to this issue: How will the user browse the catalogue? How will they make purchases?

Slide 5: 

Activity 1.1 Browsing and buying Visit five websites that have e-commerce facilities. Note the URL and business name of each website you visit. Make notes on the design decisions that have been made for each website. Describe the interactivity possible on each website. For Example : www.include.com,www.Amazon.com, www.llbean.com, www.CompUSA.com, www.travelocity.com, and www. hotels.com. Note : Make a separate record for each activity.

1.1.2. Client needs and user needs : 

1.1.2. Client needs and user needs Web designers must always have two sets of needs in mind; Those of the client : - The client is the person who has commissioned the site to made. If the client is not happy with the site, you may not get paid for your work. Those of the users : - The users are the visitors to the site. they need to be attracted to this site initially to make their first visit, and encouraged to revisit. This may be for several reasons: For example : - to make more purchases, to look at new content or to take part in discussions on forums. One aim of websites is to persuade their users to bookmark the website, therefore increasing the probability of their returning on regular basis.

Activity 1.2 : 

Activity 1.2 Bookmarks Think about websites you have bookmarked in the past. Why did you choose them? What persuaded you to become a potentially regular visitor? If you haven’t bookmarked a website before, why do you think that is? Would you like to bookmark any you use frequently? Note : Make a separate record for each activity.

Image : 

Image A website must convey the correct image, especially if it is for a business. It should be professional and demonstrate that the organisation behind the website can be trusted. Image can be conveyed through a clear layout, choice of colours and pictures and the content of the text.

Activity 1.3 : 

Activity 1.3 Business Image Find three e-commerce websites: one for children, one for teenagers and one for adults. What meanings are the images trying to convey? What techniques have the designers used to suggest these meanings? Have they successfully portrayed appropriate images for each business? Note : Make a separate record for each activity.

Level of security : 

Level of security A level of security must be decided upon at the design stage, as this will impact on both the design of the website and its management. You will need to ask questions such as : Can anyone access the site or will there be an account system with passwords, or a mixture of both? What protective methods will be used on the web server? Example : Firewalls.

Development timescales : 

Development timescales Development timescales must be agreed upon at the start of the project, preferably in a written form which both client, and developer have agreed and signed.

Support and maintenance contract : 

Support and maintenance contract Support and maintenance contract are important factors which need to be decided at the beginning of the project. The web developer might be contracted just for designing and building of the website, or they might a be contracted to provide maintenance, updates and support when needed. The type of contract agreed on will affect the cost of the project

Costs : 

Costs Pricing a website for a client is difficult. Items to consider when estimating costs include the size and content of the website, the timescale of the project and the aftercare of requirements. Some developers charge by the hour for a long as the project takes. Others charge for each elements in the website – the more elements that are in the website, the more expensive it will be. Sometimes a period might be selected purely to undercut the competition.

Other client needs : 

Other client needs Other elements which a client may need include: Logo design. Original images and photographs. Search engine visibility. Online advertising.

What does it mean? : 

What does it mean? Search engine visibility is getting a website listed high as possible on a search engine. This will increase the number of visitors to a site. The user and client requirements are used as benchmark of the success of a project.

1.1.3. End user need : 

1.1.3. End user need The other set of needs a web designer has to consider are those of the users. This can be a difficult task where sites are intended for a large target market. The website must be appropriate to the audience. The content must be suitable : which involves not using inappropriate language or technical jargon. The image should also be suitable for the wide range of people who may look at it. For example : The website for Disneyland Resort Paris needs to be suitable for both children and adults. For children, there are colorful images and magical animations and for adults, there is information about the hotels, the parks and all the facilities available. The aim of the website is to encourage parents to book a holiday.

Slide 17: 

Considering the range of people who may use the website, the complexity of the site must be appropriate. This includes not just the content, but also the method of using it – for example, it must be easy to navigate round the site. Users with little Internet experience must also be taken into consideration. One problematic area of web design is ensuring that the client and user needs are compatible. For example : The client might want to use a colour scheme of yellow and magenta but you know this would not be appropriate for the website’s users – you will need to manage the situation and attempt to come to a compromise, such as using a header of yellow and magenta, but designing the rest of the website in more easily read colours.

1.2. Design tools : 

1.2. Design tools Several tools can be used to ensure that all areas are considered when designing websites. By producing a thorough design using the tools presented in this section, and using this to communicate with your client you can ensure that your client is happy with your plan before you build the site. This should reduce the problems that you could encounter if there was a mismatch between client expectations and the actual outcomes.

1.2.1. Concept Designing : 

1.2.1. Concept Designing What does it mean? Concept designing means outlining the overall design of the product. This gives the general feel of the website and the effect it should have on its user. To convey the concept of a site, you might use one or both of the following tools. Mood boards and Storyboards.

What does it mean? : 

What does it mean? Mood boards are a collage of images, textures and other items aimed at providing an idea of the look area feel of product. They are usually A3 size. A storyboard shows the sequence of a project. In which design, it shows how different pages will interrelate.

Slide 21: 

The aim of a mood board see the figure Is to produce something with the same feel as the finished website. They are useful to focus the design and demonstrate initial ideas to the client.

Slide 22: 

Storyboarding see figure . is key to structuring a website clearly and is a way of expressing a navigation design. Storyboards are used in the design of moving images, such as animation or film, as well as in web design.

Activity 1.4 : 

Activity 1.4 Storyboarding Think of a scene from your favorite cartoon or film. Create a storyboard to show what happens. Use a minimum of 10 boxes and a maximum of 20. Add any notes underneath each box to explain what is happening. Note : Make a separate record for each activity.

1.2.2. Layout techniques : 

1.2.2. Layout techniques As well as the structure of the overall site, the layout of the individual pages must be designed. There are several methods that can be used to arrange items on a web page, including frames, tables and DIVs and SPANs.

Frames : 

Frames The simplest method of layout is to use frames see the figure given… But these are considered old0fashioned in the industry. Each part of the page is contained in its own file and there is a master page which pulls each page in like a jigsaw. Header.html Side.html Page.html

Tables : 

Tables A table as shown in figure. Holds all the content on a web page, with each cell having an individual part of the content. It is a good method of ensuring that the layout is retained on the different browsers that users may uses to view the page. However, the more complicated the table, the longer it will take to load for the user. If a page takes too long, a visitor may lose patience and leave the site, perhaps never to return. Page.html Each button is in its own cell Text and images each need their own cells

DIVs and SPANs : 

DIVs and SPANs A DIV is a method of defining a style for a block of HTML (Hypertext Markup language). It includes an automatic paragraph break. A SPAN is also a method of defining a style for a block of HTML (Hypertext Markup Language). DIVs and SPANs are used to define styles within blocks of HTML; For example, <span class=“red small”>some text</span> However, a more useful method is to combine them with CSS (Cascading style sheets) formatting style. The main difference between DIVs and SPANs is that a DIV includes a paragraph return, whereas a SPAN does not. They are efficient methods of laying out and formatting a page, especially when used in conjunction with effective CSS.

1.2.3. Templates : 

1.2.3. Templates Templates are used to make the process of adding content simple, and are often used to provide as easy maintenance system for users with minimal web knowledge. A template keeps the design and content separate. Generally, a template will provide full design connection to any other system such as database and all interactive coding. The only thing that usually need to be added is the actual content. Templates can be quite expensive, depending on the design, especially if a company has asked for a unique creation. However, using templates can mean that a business that does not have someone with web skills within the organisation does not need to employ someone to create the website. A recent development is the concept of ‘takeaway’ websites. This is where all the parts of a website are provided and a user can add the content. These are mainly targeted at non-technical people who want to put their own personal website on the internet. The result could be a high number of websites that look very similar and have low-quality content.

1.2.4. Colour schemes : 

1.2.4. Colour schemes The colours selected for a website can encourage or detain users, so the selection must be made with care. Several questions must be asked when deciding on a colour scheme. Do the colours combine well? Are they aesthetically pleasing? Are the colours appropriate for the target audience? Fro example, primary colours might be used for a children’s website. Is the text readable? Black text on a purple background may produce an atmospheric effect, but is not easy to read. Does the colour scheme fit with the business’s house style?

What does it mean? : 

What does it mean? House style is a standard design that is carried throughout an organisation's website. It can also be extended throughout the business e.g. On promotional brochures, letterheads, etc,. It can include logos, colour combinations and layouts.

Activity 1.5 : 

Activity 1.5 House styles Find three websites with distinctively different artistic style used on each website. For each of your chosen websites, describe how a house style has or has not been carried through the website. Explain why a house style has or has not been used for each website. In your opinion, is this effective for that website?

Red Buttons - animated : 

Purple logo – house style Red Buttons - animated White text, blue background, Areal, approx size 14pt, left aligned White text, black background, Arial, approx size 20pt, centered Image of mouse Image of cheese Figure : An example screen design 1.2.5. Screen designs To visualize what the pages will look like before building them, designers create screen designs as shown figure. These are mock-ups of the actual. Page and concentrate on layout rather than content.

Activity 1.6 : 

Activity 1.6 Choose an existing website and produce a screen design to show how the designer has created the layout (Following the example shown in figure 1.5). Label the colours, fonts and other specifications. Estimate sizes and give the images suitable labels. Note : Make a separate record for each activity.

1.2.6. Outline of content : 

1.2.6. Outline of content As screen designs deal with the layout of the page, the content must also be considered. Generally, at the design stage, only heading will be defined. Activity 1.7 Content design Select two different websites about the same topic(e.g. computer). Compare the design of their content. Write a list of pros and cons of the quality of their content. Explain whether you think each website has fulfilled the users’ needs in terms of content.

1.1.3. Software : 

1.1.3. Software It is only possible to choose the correct web development software once you know exactly what will be in your website. Otherwise, part of the way through a build, you may find you need another piece of software which will cost money and may take time to learn.

Markup languages : 

Markup languages HTML (Hypertext Markup Language) is the most commonly used markup language. So much so that all the others are just about extinct. HTML forms the basis of all World Wide Web pages, even where other languages are also used. HTML uses a system of tags (indicated by angle brackets, < and >) which contain the instructions. Almost all tags come in a pair of open and close tags which enclose the content to be affected. For example, <font color = “red”> some text </font> Would produce : some text HTML pages should start and end with <html> </html> tags to declare the language being used. If other languages are used, they will need to be declared.

Slide 37: 

Every web page is divided into a head and body section each of which is defined by its tags. The head section is unseen by the user and can be thought of as the brains of the page. It contains all the information for the page to function correctly. The body is the part seen by the user and contains all the content of the page. A well-designed page should have reusable code in the head and minimal code in the body.

How to create a simple HTML web page : 

How to create a simple HTML web page Open Notepad (or a similar text editor). Enter this code :   <html> <head> <title> My First Web Page </title> </head>   <body> <font color=“blue”><b>Hello World!</b> </font> <font color=#000000><i>This is my first ever web page </i></font> </body> </html>

1.3.2. Client side scripting languages : 

1.3.2. Client side scripting languages Even though HTML is the basis of all web pages, as a language it is quite limited and so other languages need to be brought in to create more advanced features.

Activity 1.8 : 

Activity 1.8 Using HTML : Even though there are several web design environments available, it is till important to understand HTML. The best way to do this is to use Notepad (or a similar text editor) to create a web page using purely your own code. In a browser, open a website with which you are familiar, such as your school or college website. View the HTML (e.g. in Internet Explorer the code and compare it with the visual version in the browser. Write down all the tags you recognise and what effect they have on the display of items on the web page. Try to find examples of all the tags in table. A client side scripting language is code which is embedded into the HTML. When the web page is downloaded onto the user’s browser, the script is run or the user’s computer.

Slide 42: 

A client side scripting language is code which is embedded into the HTML. When the web page is downloaded onto the user’s browser, the script is run on the user’s computer

What does it mean? : 

What does it mean? Client side Scripting is when the script is executed on the user’s computer. This is the opposite of server side scripting, which I executed on the web server. Server side scripting is used for more advanced interactive features, such as connecting to a database and is not covered in this unit.

1.3.3. Features and advantages of software languages : 

1.3.3. Features and advantages of software languages There are several languages available for a web designer to use. All websites must have a foundation in HTML, even if it is just used to support the other languages. CSS (Cascading style sheets) is used to ensure standardised formatting across a website – this also makes the site easier to maintain. In order to make a formatting change to a website that is formatted in HTML,

Slide 45: 

The designer would have to search through the whole code, finding every instance of the format that needs to be changed. There could be hundreds of entries, so this is a very time-consuming method and it is likely to produce errors in consistency. By using CSS, on the other hand, only on formatting entry need be changed and it will be immediately applied throughout the whole site for every instance of the formatting style

ASP (Active Server Pages) & PHP (Hypertext Preprocessor)server side web languages : 

ASP (Active Server Pages) & PHP (Hypertext Preprocessor)server side web languages This means that the code is executed using the web server’s processing power. The result is that the code and the data are very secure and can be executed efficiently. Both these languages can create interaction on a website, particularly involving connecting to databases.

VBScript & JavaScriptClient side web Languages : 

VBScript & JavaScriptClient side web Languages This means that the code is executed using the user’s computer and not the web server. This frees up the processing power which would otherwise have been used. Both languages can create interaction on a website, such as forms, searching and even games.

1.3.4. Software development environments : 

1.3.4. Software development environments There are several software development environments available. Microsoft FrontPage : is the most popular web authoring application for beginners, as it uses a similar layout to the other Office programs and is very user friendly. However, the functionality can be limited.

Slide 49: 

Adobe Dreamweaver : Is the current industry standard. Although more difficult to learn, it provides a wide range of tools to create a website and supports several client and server side scripting languages. Using a development environment such as FrontPage or Dreamweaver is not absolutely necessary – as you have seen from the previous examples, it is possible to write the code using a text editor. However, using a development environment can make coding quicker and formatting easier.

Activity 1. 9 : 

Activity 1. 9 Web design software Explain the advantages and disadvantages of using a text editor (e.g. Notepad) for creating a web page. M1 Explain the advantages and disadvantages of using web authoring software(e.g. FrontPage or Dreamweaver) to create a web page. M1

authorStream Live Help