Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Unit 28 Designing a Website

No description
by

Julie Warner

on 13 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Unit 28 Designing a Website

Designing
a Website

Identification of Need
It is important to start out by finding out exactly what your client is looking for
Specify the requirements clearly, in writing - list the key objectives
It is important to produce a thorough design of the requested website
You will create concept designs such us mood boards and storyboards
You will show the designs to your client to make sure he/she is happy with it before you build the site
It is very likely that your client will request you to make some changes before starting to create the website
Design Tools
Try to convey look and feel of the website
Mood Board
Storyboards
Show the structure of the website including the navigation
Used to represent the skeletal framework of the website. Excludes style, colour, graphics. Focuses on “what a screen does, not "what it looks like."
Wireframes
Web Design Software
Most modern websites involve some level of interactivity in order to engage the user.

Static - no interactivity, usually just a presentation of information

Dynamic - can involve any level of activity from a simple feedback form to a database that personalises the website for each individual visitor

Online Transactions - making purchases
Identification of Need
Nature of Interactivity
The website must convey the correct business image - it must look professional - clear layout, choice of colour, pictures and text
Development Timescales - must be agreed at the start and written down
Maintenance contract and support - this may be required in addition to designing the website - e.g. updating it when necessary and providing support when needed
Costs - would depend on size and any maintenance/support
Security - can anyone access the site or will there be an account system with passwords. What protective methods will be required on the web server?
Visibility on search engines
Identification of Need
Client Needs
End User Needs
Consider the users (visitors) of the website carefully - they need to be attracted to the site and be encouraged to visit again
Appropriateness of graphics
Complexity of site
Content delivery
There are a number of techniques that you can use to ensure your website is found by search engines:
Metatags in the HTML code (key words)
Incoming links - the more links you have leading to your website (from other websites), the more you get 'crawled'.
Pay per click
Site map - to help 'spiders' understand the structure of your website and find the important pages
Use heading tags (H1, H2, etc) - search engines use these to identify key topics
There are lots more techniques
Search Engine Visibility
Design Tools Continued
Layout Techniques
Frames
Div
Span
Templates
Colour schemes
Screen Designs
Other Content
Mark-up languages, e.g. HTML
Client side scripting languages, e.g. JavaScript, VBScript,
Features and advantages of software languages
Software development environments
Mark-up Languages
HTML
Client Side Scripting
JavaScript or VB Script
Usually embedded in the HTML code of a web page to enable an enhanced user experience not possible using HTML. Instructions are executed by the client browser (on the user PC) rather than on a server.
JavaScript
There are many different applications to develop web pages, including:

Microsoft FrontPage
Good for beginners - similar layout to other Microsoft Office programs
User friendly
Limited functionality

Adobe Dreamweaver
Current industry standard software for web design
More difficult to learn
Wide range of tools
Supports client and server side scripting languages.
Software Development Environments
Designing a Website
There are a number of steps you need to go through when designing a website:

1. Identification of Need (Specification)
2. Create designs
3. Identify software
4. Identify the different tools and techniques to be used
5. Consider accessibility
Tools and Techniques
Navigation (linear, hierarchy, matrix
Building interactivity tools
Animation, audio/visual elements
Meta-tagging
Cascading style sheets
Navigation
Interactivity Tools
Static Web Page:
Dynamic Web Pages (two way interaction):
Achieved using server side scripting (e.g. ASP, PHP) - this might be used if the user was purchasing online or for customised websites
Some dynamic content can be delivered by client-side scripting - e.g. JavaScript. The user's browser interprets the script.
Animation, audio, visual elements
Aid user engagement but will increase the download time

Too many will look amateurish

Create animations in software such as Adobe Flash and then add to your website

Animated GIFs can be created in Adobe Photoshop (small files)

Consider whether animation, audio or other visual elements might enhance your website (add to your spec and designs)

Metatags
Used for search engine visibility

Metatags are embedded in the html code (the web designer will include the code) - e.g.

<Head>
Meta name = "description" content = "Fancy That - fancy dress costumes"
Meta name = "keywords" content = "costumes,pirate,disney,fancydress,blah,blah,blah">

Search engines use 'spiders' to trawl the internet - they read the metatags

They store the keywords in a huge database that is referred to when a user types in search criteria
Cascading Style Sheets
Can be used to control the formatting of a website efficiently

They can appear in the head of a particular web page to which they are to be applied

Or they can be held in a separate file so that they can serve the whole site

Cascading Style Sheets continued
Full transcript