Unit 28 Week 5

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

Web DesignThe process of designing

a website

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

Designing a WebsiteFirst up: Don’t imagine we jump straight into HTML and CSS as soon as a project task has been set!

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

The ProcessGather

Info Plan Design Develop Test & deliver

Maintain

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

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

The ProcessGather

Maintain

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

DevelopmentKey Questions• How can I create a webpage

from the design?• How can this feature be best

implemented? • What is the structure of the

Possible Deliverables• Prototypes• Templates• HTML + CSS webpages• Live website on a

testing server

The ProcessGather

Maintain

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

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

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

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

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

Present your ideasShow us what you have – describe & explain what you’ve thought about, the designs etc.

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.

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?

Development Plan• Timeline or Gantt Chart • To plan order and time required for

each part of the process• Key deadlines for deliverables

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!

Wireframes• A computer version of the sketch –

no effort put into styling, just position and annotate with more detail if necessary

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

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

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

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

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

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

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

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!

Unit 28 Week 5

Education

Week 28: March 24-28, 2014 PSSA testing week #1 of 2 = variety of class period lengths and/or activities due to schedule adjustments Unit IV: Post WW II

Week 1- Unit Unit Pengolahan Air Minum

AP Chem Week 28 Unit 10 Electrochemistry 2019

Unit 28 Week 10

De week van twenterand week 28

Unit 28 Week 15

Unit 2 Week 4 Key Words. Unit 2 Week 4 launched Key Words

csdelak5.wikispaces.comcsdelak5.wikispaces.com/.../Unit_5_Word+Work_2nd+Grade.pdf2nd Grade Practice Station Unit 5 Word Work Unit 5 Week 1 Unit 5 Week 2 Unit 5 Week 3 Unit 5 Week 4

Hickman Mills Treasures Curriculum First Grade / Unit 1 ...€¦ · Hickman Mills Treasures Curriculum First Grade / Unit 1 Pacing for This Unit Week 1 Week 2 Week 3 Week 4 Week 5

English - Wheeler Heights€¦ · Web viewWeek 2: Unit 16 Week 3: Unit 17 Week 4: Unit 18 Week 5: Unit 19 Week 6: Unit 20 Week 7: Unit 21 Week 8: Unit 22. Week 9: Unit 23. Week

Syllabus Chemistrybkssps.com/wp-content/downloads/n59254ea9d981f.pdfIII Week : Unit 5 states of Matter IV Week : Unit 6 Thermodynamics I Week : Unit 6 Revision and Test II Week : Unit

US History Unit 6, Week 4. Homework for the Week Monday 1/27 ● Begin studying for the unit test on block day Tuesday 1/28 Put together unit 6 checklist

Unit 2 Week 3 Key Words. Unit 2 Week 3 investigating Key Words

UNIT 1 WEEK 3

Week 28 day 1- unit 7- independence movement

Unit 28 Week 14

Unit 2 Week 5 Key Words. Unit 2 Week 5 damages Key Words

English 10 Week 28 Intro. to unit five: Short Story Unit

English 10 Week 28 Intro. to unit five: Short Story Unit March 28, 2011-April 1, 2011

US HISTORY Unit 9 Week 3. Monday, April 28 th Computer lab time