PBA Front-End Programming

Pre- and Post-design activities

Pre- and Post-design activities

• In place:– Website purpose– Website goals– Target audience– Development organisation

• Can we start designing now…?• Almost, let’s see the bigger picture

Pre- and Post-design activities

• The complete development process– Website definition and planning– Information architecture– Website design– Website construction– Site marketing– Tracking, evaluation and maintenance

Pre- and Post-design activities

Pre- and Post-design activities

• Website definition and planning– Definition (purpose, goals, target audience,…) –

been there, done that – Planning• Technology considerations• Website Lifecycle

Pre- and Post-design activities

• Technology considera-tions – why this early?

• Can have major impact on– Budget– Delivery date– Needed competences

Oh BTW, the website should also work on

smartphones!

But… we are going live next week!

Pre- and Post-design activities

• Relevant technological considerations– Operating systems (Windows, iOS, Android,…)– Browsers (IE, Firefox, Chrome,…)– Hardware platforms (PC, pads, phones,…)– Bandwidth– Advanced features (DHTML, plug-ins,…)– User support channels– Traffic volumes

Pre- and Post-design activities

• Website lifecycle– Websites rarely die…– Who will ensure that the

website is always up-to-date (whatever that means)?

– ”Everyones responsibility” -> no one’s responsibility

”Merry X-Mas to all our

customers..”!?

Pre- and Post-design activities

• This is a job for…. The Site Editor• The Site Editor becomes the

”custodian” of the website• May edit site directly, or may

coordinate the effort of others• BUT, the Site Editor has the

responsibility!

Pre- and Post-design activities

• Information Architecture– Piles of content has been

delivered– How do we organise it on

the website?

Pre- and Post-design activities

• Making an inventory – what do we have?• Filling holes – what do we need?• Quality assurance – is it good enough?

• Sketch out an architecture– Wireframes– Small prototypes

Pre- and Post-design activities

• Outcome of Information Architecture work– Detailed site design (not page design)– Content inventory and descriptions– User-tested wireframes/prototypes– Sketches for interface/page design– Technical considerations (updates to previous

technical considerations )

Pre- and Post-design activities

• Next dicipline: Web Design

Pre- and Post-design activities

• We will deal with Web Design in much more detail during subsequent classes

• Outcome of Web Design work– Detailed page design specifications– Page templates– Graphics components (logo, illustrations, buttons,

headers & footers, etc)• NB: Not finished pages – that is construction!

Pre- and Post-design activities

• Site construction– Now the ”physical” pages are produced– Tempting to ”rush” to this stage prematurely, just

as coding prematurely in SW development– Still allowed to reiterate designs as a result of

concrete experiences (not waterfall)– Also includes any back-end development needed

Pre- and Post-design activities

• Outcome of the website construction phase: A website ready for use and maintenance!

Pre- and Post-design activities

• Site marketing – informing people that your website exists

• ”Just Google it” – not always enough• What is the target audience?– Local/global– Private/commercial– Experts/novices– …

Pre- and Post-design activities

• Possible channels for adverting a website– Printed advertisments– Radio/TV– Direct mail– Business cards / stationery– Company communication in general– Press releases– Posters/billboards

Pre- and Post-design activities

• Possible channels for adverting a website– Banner ads– Search engines (of course)– Blogs/Wikis– Social media– Sponsorship

Pre- and Post-design activities

• Tracking, evaluation and maintenance• Very important, significant risk of neglect

(”We’re done, on to the next one…”)• Evaluation should be related to goals• Fairly easy to track many quantitative features

of the web site usage

Pre- and Post-design activities

• Interesting features to track– Users per day– Page per user– Page popularity– Geography– Recurrence– Browser type– Screen resolution– …

Pre- and Post-design activities

• Maintenance - this is a job for…. The Site Editor

• Not only the textual content, but also ”look and feel”, link validity, etc.

• Can the customer be the Site Editor (CMS)?

Pre- and Post-design activities