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

page?

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!

Education

Unit 28 Week 5