unit 28 week 5
Post on 11-Sep-2014
571 views
DESCRIPTION
BTEC Level 3 IT Web Design Unit 28 week 5 - Web design toolsTRANSCRIPT
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Web DesignThe process of designing
a website
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Designing a WebsiteFirst 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
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
The ProcessGather
Info Plan Design Develop Test & deliver
Maintain
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Gather InformationKey Questions• 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?
Possible Deliverables• Notes• Mindmaps• User profiles
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
PlanningKey Questions• 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?
Possible Deliverables• Notes• Mindmaps• User profiles• Site map• Development plan/
timeline
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
The ProcessGather
Info Plan Design Develop Test & deliver
Maintain
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
DesignKey Questions• 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?
Possible Deliverables• Sketches• Wireframes• Moodboards• Mockups• Prototypes Increasing
complexity
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
DevelopmentKey Questions• How can I create a webpage
from the design?• How can this feature be best
implemented? • What is the structure of the
page?
Possible Deliverables• 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
The ProcessGather
Info Plan Design Develop Test & deliver
Maintain
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Testing & DeliveryKey Questions• 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?
Possible Deliverables• 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
MaintenanceKey Questions• 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?
Possible Deliverables• Updates to the live
website• SEO/SES reports
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
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
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
Present your ideasShow 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
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
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
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
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
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
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
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
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
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
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
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
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
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!