Web Design
The process of designing
a website
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start...
Objectives
• To be able to describe an overview of
a typical web design process
• To have experience with a range of
tools...
Designing a Website
First up: Don’t imagine we jump
straight into HTML and CSS as soon as
a project task has been set!

Im...
Web Design is a process
• If we miss out steps or try to take
shortcuts we will not produce our
best work
• The evidence o...
The Process

Gather
Info

Plan

Design

Develop

Test &
deliver

Maintain

Image from: http://antiqueradios.com/forums/vie...
Gather Information
Key Questions

Possible Deliverables

• What is the purpose of the
site?
• What goals do you want to
ac...
Planning
Key Questions

Possible Deliverables

• What should be in the site
map?
• Who is the end user?
• What technologie...
The Process

Gather
Info

Plan

Design

Develop

Test &
deliver

Maintain

Image from: http://antiqueradios.com/forums/vie...
Design
Key Questions

Possible Deliverables

• Who is the end user? How can
we meet their needs?
• What does the home page...
Development
Key Questions

Possible Deliverables

• How can I create a webpage
from the design?
• How can this feature be ...
The Process

Gather
Info

Plan

Design

Develop

Test &
deliver

Maintain

Image from: http://antiqueradios.com/forums/vie...
Testing & Delivery
Key Questions

Possible Deliverables

• Does it work as designed?
• Does it meet the standards for
the ...
Maintenance
Key Questions

Possible Deliverables

• Does any content need to be
changed/updated/added?
• Is the site visib...
What to do with this?
• Set up the template for the design
report
• Use the key questions and
deliverables from the powerp...
What to do with this?
• We need to practice this process and
how to create these deliverables
• It will help to discuss an...
Practicing Web Design
• Your client: A small secondary school in
south Birmingham
• You should:
– Discuss ideas – make not...
Present your ideas
Show us what you have – describe &
explain what you’ve thought about,
the designs etc.

Image from: htt...
User Profiles
• Description of an imaginary person
that represents the intended target
audience
• Can include quite detail...
Site Map
• To plan out the links between sites
• Do all link to all the others?
• Are there key ‘central’ pages that link
...
Development Plan
• Timeline or Gantt Chart
• To plan order and time required for
each part of the process
• Key deadlines ...
Sketches
• Literally hand drawn ideas for layout,
annotated with colours,
ideas about
images etc.
• Quick & easy to
do, no...
Wireframes
• A computer version of the sketch –
no effort put into styling,
just position and
annotate with
more detail if...
Moodboards
• Just like in Art or DT work
• Combination of images,
colours, fonts,
ideas, some notes
• Not about layout,
bu...
Mockups
• Using image editing software
• Exactly how the website will look –
fonts, backgrounds, colours etc.
• Often uses...
Prototypes
• Actual HTML/CSS of the website
• Often used when a complex “Content
Management System” will be created to
go ...
Templates
• An outline page, just like the “slide
master” view in PowerPoint
• No content, blank and ready to be
filled in...
Testing Server
• If you have a big brand you don’t
want a half finished site on your
main web page!
• A ‘testing server’ i...
Test Plan
• Testing is on-going throughout the
development, of course!
• Testing must be done by end users
and client to e...
Validating Code
• Broken HTML/CSS may work or it
may not – and it may be different on
different browsers & devices
• There...
Delivery
• Once testing has been completed to
a satisfactory standard, the website
will “go live” to the actual internet!
...
Upcoming SlideShare
Loading in …5
×

Unit 28 Week 5

1,303 views

Published on

BTEC Level 3 IT Web Design Unit 28 week 5 - Web design tools

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,303
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unit 28 Week 5

  1. 1. Web Design The process of designing a website Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  2. 2. Objectives • To be able to describe an overview of a typical web design process • To have experience with a range of tools to aid the web design process • To create simple sketches/mockups of websites Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  3. 3. Designing a Website First up: Don’t imagine we jump straight into HTML and CSS as soon as a project task has been set! Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  4. 4. Web Design is a process • If we miss out steps or try to take shortcuts we will not produce our best work • The evidence of following this process will be important for the assignments you submit in the rest of this unit Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  5. 5. The Process Gather Info Plan Design Develop Test & deliver Maintain Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  6. 6. Gather Information Key Questions Possible Deliverables • What is the purpose of the site? • What goals do you want to achieve by building the site? • Who is the target audience – a specific group of people who will help reach your goal? • What content should be on your site? • Notes • Mindmaps • User profiles Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  7. 7. Planning Key Questions Possible Deliverables • What should be in the site map? • Who is the end user? • What technologies do we plan on using? • What is the timeline for completion? • • • • • Notes Mindmaps User profiles Site map Development plan/ timeline Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  8. 8. The Process Gather Info Plan Design Develop Test & deliver Maintain Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  9. 9. Design Key Questions Possible Deliverables • Who is the end user? How can we meet their needs? • What does the home page look like? • What colours, fonts, images etc. will we use? • What feedback does the client have? • Can we include all the required functionality? • • • • • Sketches Wireframes Moodboards Mockups Prototypes Increasing complexity Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  10. 10. Development Key Questions Possible Deliverables • How can I create a webpage from the design? • How can this feature be best implemented? • What is the structure of the page? • • • • Prototypes Templates HTML + CSS webpages Live website on a testing server Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  11. 11. The Process Gather Info Plan Design Develop Test & deliver Maintain Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  12. 12. Testing & Delivery Key Questions Possible Deliverables • Does it work as designed? • Does it meet the standards for the chosen technologies? Does the code validate? • Does it function on a range of devices/browsers? • Does it meet the needs of the user/client? • Where do we finally upload it? • • • • Test plan Proof of validation End-user testing Uploaded, live website Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  13. 13. Maintenance Key Questions Possible Deliverables • Does any content need to be changed/updated/added? • Is the site visible on search engines • Is there user feedback that needs to be taken onboard? • Updates to the live website • SEO/SES reports Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  14. 14. What to do with this? • Set up the template for the design report • Use the key questions and deliverables from the powerpoint to make the heading pages for each section of the process Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  15. 15. What to do with this? • We need to practice this process and how to create these deliverables • It will help to discuss and share ideas at this stage Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  16. 16. Practicing Web Design • Your client: A small secondary school in south Birmingham • You should: – Discuss ideas – make notes or a mindmap – Create a/some user profiles – Make some sketches or wireframes of ideas – Create a moodboard Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  17. 17. Present your ideas Show us what you have – describe & explain what you’ve thought about, the designs etc. Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  18. 18. User Profiles • Description of an imaginary person that represents the intended target audience • Can include quite detailed stories about who they are, what they want, how the site can help them. Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  19. 19. Site Map • To plan out the links between sites • Do all link to all the others? • Are there key ‘central’ pages that link to a number of others? Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  20. 20. Development Plan • Timeline or Gantt Chart • To plan order and time required for each part of the process • Key deadlines for deliverables Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  21. 21. Sketches • Literally hand drawn ideas for layout, annotated with colours, ideas about images etc. • Quick & easy to do, no pressure, no problem to throw out! Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  22. 22. Wireframes • A computer version of the sketch – no effort put into styling, just position and annotate with more detail if necessary Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  23. 23. Moodboards • Just like in Art or DT work • Combination of images, colours, fonts, ideas, some notes • Not about layout, but just how it will look Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  24. 24. Mockups • Using image editing software • Exactly how the website will look – fonts, backgrounds, colours etc. • Often uses fake “filler” text called “Lorem ipsum” • Takes longer to do than a sketch or wireframe but quicker than coding HTML/CSS Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  25. 25. Prototypes • Actual HTML/CSS of the website • Often used when a complex “Content Management System” will be created to go behind the scenes to show how the web design works separately from the CMS • Still work to do before it’s a complete site – content, images etc. will only be partially done Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  26. 26. Templates • An outline page, just like the “slide master” view in PowerPoint • No content, blank and ready to be filled in with all the details Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  27. 27. Testing Server • If you have a big brand you don’t want a half finished site on your main web page! • A ‘testing server’ is only accessible to the developers, anyone involved in testing (possibly including the client) • It’s an actual webserver, just private to those people only Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  28. 28. Test Plan • Testing is on-going throughout the development, of course! • Testing must be done by end users and client to ensure it is clear to them and does what it should • Results recorded in test plan Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  29. 29. Validating Code • Broken HTML/CSS may work or it may not – and it may be different on different browsers & devices • There are sites that will check your code to make sure it is valid • The evidence needs to be shown to the client Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  30. 30. Delivery • Once testing has been completed to a satisfactory standard, the website will “go live” to the actual internet! • This means uploading it to the webserver, removing the old site • It’s important to have a smooth transition! Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

×