Intro to Web DevSession 2 – Planning and Structure

Wireframes• Wireframes are one of the design tools used to

ensure smooth development of any Website, App or Software pages

• They are a graphical representation of layout plans ready for programming / coding

• They can be used to plan and keep track of sizes, colours and div id’s

1040px – id=“pagecontainer” background=“#______”1020px –

id=“contentcontainer” background=“#______”1000px – id=“headercontainer” background=“#______”

id=“slideshowcontainer” background=“#______”

id=“sidebar-box” background=

“#______”

250pxid=“sidebar” background=

“#______”

id=“maincontent” background=“#______”

id=“home-box-left” background=

“#______”

id=“home-box-mid” background=

“#______”

id=“home-box-right” background=

“#______”

1020px – id=“footercontainer”

background=“#______”

Storyboards• Storyboards are a planning tool for Website, Apps and

Software user journeys

• There are many differing ways to layout storyboards, the key fact is that they contain details about the content for each page

• Storyboards are often used to display and give customers the opportunity to authorise site plans and content.

• Bear in mind the journey a customer will take when viewing the site in deciding on pages and content

HOME

Site Structure• Each page of the website should be stored in its own folder

and named index.html

• This allows us to reference filesfrom any page of the site. And also only keep files near pages that they are required for which improves loadtime.

• Home page index file is stored in the root directory