Unit 28 Week 5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Unit 28 Week 5

on

  • 747 views

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

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

Statistics

Views

Total Views
747
Views on SlideShare
747
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Unit 28 Week 5 Presentation Transcript

  • 1. Web Design The process of designing a website Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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