PBA Front-End

PBA Front-End

Week 2

Web Development Organisation

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

• Can we start designing now…?

• Almost, need to set the team first


• Web site development projects cover many diciplines – just as SW development

• Size and skill set of team determined by– Budget– Available resources in development organisation– Website focus

Technical


Creative Administrative

Production


• Core skill set (diciplines) needed– Strategy and planning (Strategic level)– Project management (Tactical/Operational level)– Information architecture– User Interface design– Graphic design– Web technology– Site production


• Core development team roles– Project stakeholder/sponsor– Project manager– Usability lead– Information architect– Art director– Technology lead– Site production lead– Site editor


• Project stakeholder / sponsor– ”The guy who pays the bills”– Provides purpose, vision and goals– Provides domain knowledge– Point-of-contact to sponsoring organisation– Delivers web site content– Not a call-when-you-are-done role; must

participate actively in project!


• Project manager (admin)– Keeps the project on track on a day-to-day basis– Point-of-contact between team and sponsor– Manages internal team communication– Project administration (meeting, minutes, notes,

plans, schedules, budgets,…)



• Usability lead– ”Shape the overall user experience”– The users advocate on the team– User research (interview, field studies,…)– Develop usability standards– Conduct usability tests, and provide feedback to

relevant team members– Involved in measuring project success


• Information architect– Organise web site structure and content– Develop terminologies, categorisation schemes,…– Ensure consistency across the website– Enure overall content quality– Design web pages at ”wireframe” level, in

cooperation with Art Director




• Art director– Establish ”look and feel” for the website– Ensure consistency with e.g. corporate identity

standards, UI standards,…– Visual interface design– Color palette, typography, illustrations, …– Page design details



• Technology lead– ”The programmer guy” – Deciding on web publishing tools, development

languages, databases, network,…– Responsible for technology integration– Responsible for back-end development– May manage sub-teams of programmers,

database developers,… (back-end)


• Site production lead– ”Builds” the website– Converts detailed page designs into actual web

pages (HTML, CMS, development tool,…)– Develops page templates (XHTML, CSS) to be filled

with actual content


• Site editor– Responsible for written content on the website

(quality, style and tone,…)– Collect, organise and deliver finished text to

website production team– Responsible for maintaining the website content

after site launch – ongoing effort– Improving website visibility (Search Engine

Optimisation)


• Roles, skills and people– What background, education, experience,

attitude, etc is needed for each role?– How does our ”resource pool” look?– How large is the project– When are people rolled on/off the project?


Large project


• Small Project– Project stakeholder/sponsor (in-house)– Project manager– Usability lead– Information architect– Art director– Technology lead– Site production lead– Site editor


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


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



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

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


• 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!


• 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


• 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..”!?


• 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!


• Information Architecture– Piles of content has been

delivered– How do we organise it on

the website?


• 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


• 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 )


• Next dicipline: Web Design


• 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!


• 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


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


• 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– …


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


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


• 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


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


• 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)?


Web design elements

• For now, we will primarily focus on web design as such

• Given the– Purpose– Target Audience– Information Architecture– …

• … create ”good” web page designs

Web design elements

• Overall principle: Simplicity– KISS (Keep It Simple, Stupid)– Don’t make me think…– Minimal surprise– The user doesn’t want to spend time on our

website (usually)

Web design elements

Web design elements

• Design elements to consider– Colors, and other visual elements– Fonts/typefaces– Choice of proper text– Website structure and navigation– Page composition (Gestalt laws)– Using contrast

• Overview now, details later

Web design elements

• Why are colors important…?

Web design elements

• Vision is (usually) the ”strongest” human sense – primary source of information

• Humans are good at spotting differences in colors (~10 million hues)

• Colors and feelings are closely related• On a website, colors is the first thing we

notice – first impression is important!

Web design elements

Web design elements

• Fonts/typefaces – the visual form of text• Why is it important…?• Practical – must be easy to read textual

content on the website• Emotional – we also associate certain

typefaces with certain feeling, etc..

Web design elements

The Cocoa Libre Club

Ye Olde Pirates Inn

Web design elements


Ye Olde Pirates Inn

Web design elements


Ye Olde Pirates Inn

Web design elements

Death and Honor

Death and Honor

Web design elements

• Different target audiences require different textual formulations and complexties

• Kids hate long words!• Is your site supposed to be– Explicit (Introductory/casual)– Implicit (knowledgable/experienced)– Focused (kids/elderly/ethnic/subculture/…)

Web design elements

Uhhh, what…?

Web design elements

• How do we divide content into multiple pages?

• Depends on purpose!• Two main structures– Linear– Hierachical

• Search!

Web design elements

• How do we navigate from one page to another…?

• …through links!• Manifestations of links– Explicit link (www.cnn.com)– Text link (click here for info)– Metaphor (picture, icon, symbol,…)

http://www.cnn.com/

http://www.cnn.com/

Web design elements

Web design elements

Web design elements

• How do we ”put it all together” – how do we compose a good web page?

• Again, main driver is– KISS– Minimal surprise– Get the users job done

Web design elements

• Gestalt psychology deals with how humans make sense of visual input

• Gestalt laws: laws (empirical) about how humans assign meaning to collections of visual elements

• A sort of ”visual grammar”

Web design elements

• Example: Law of Proximity

Web design elements

• Example: Law of Similarity

Web design elements

• Example: Law of Isomorphism

Web design elements

• List of Gestalt Laws– Law of Proximity– Law of Symmetry– Law of Similarity– Law of Common Fate– Law of Continuation– Law of Isomorphism

– Law of Closure– Law of Figure-Ground– Law of Focal Point– Law of Simplicity– Law of Prägnanz– Law of Unity

Web design elements

Web design elements

• Gestalt laws deal primarily with perception of similar elements

• Elements are only similar if they are different from something else

• Making elements that are different or in contrast to other elements is a powerful effect

Web design elements

Web design elements

• Types of contrast– Color (several variants)– Size– Shape– Position– Formulation

Web design elements

Date post:	25-Feb-2016
Category:	Documents
Upload:	yasuo
View:	37 times
Download:	0 times

PBA Front-End

Documents