1 / 73

PBA Front-End

PBA Front-End. Week 2. Web D evelopment Organisation. In place: Website purpose Website goals Target audience Can we start designing now…? Almost, need to set the team first. Web Development Organisation. Web site development projects cover many diciplines – just as SW development

yasuo
Download Presentation

PBA Front-End

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PBA Front-End Week 2

  2. Web Development Organisation • In place: • Website purpose • Website goals • Target audience • Can we start designing now…? • Almost, need to set the team first

  3. Web Development Organisation • 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

  4. Web Development Organisation Creative Administrative Technical Production

  5. Web Development Organisation • 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

  6. Web Development Organisation • Core development team roles • Project stakeholder/sponsor • Project manager • Usability lead • Information architect • Art director • Technology lead • Site production lead • Site editor

  7. Web Development Organisation • 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!

  8. Web Development Organisation • 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,…)

  9. Web Development Organisation

  10. Web Development Organisation • 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

  11. Web Development Organisation • 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

  12. Web Development Organisation

  13. Web Development Organisation

  14. Web Development Organisation • 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

  15. Web Development Organisation

  16. Web Development Organisation • 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)

  17. Web Development Organisation • 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

  18. Web Development Organisation • 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)

  19. Web Development Organisation • 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?

  20. Web Development Organisation Large project

  21. Web Development Organisation • Small Project • Project stakeholder/sponsor (in-house) • Project manager • Usability lead • Information architect • Art director • Technology lead • Site production lead • Site editor

  22. Web Development Organisation

  23. 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

  24. 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

  25. Pre- and Post-design activities

  26. Pre- and Post-design activities • Website definition and planning • Definition (purpose, goals, target audience,…) – been there, done that  • Planning • Technology considerations • Website Lifecycle

  27. 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!

  28. 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

  29. Pre- and Post-design activities ”Merry X-Mas to all our customers..”!? • 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 

  30. 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!

  31. Pre- and Post-design activities • Information Architecture • Piles of content has been delivered • How do we organise it on the website?

  32. 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

  33. 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 )

  34. Pre- and Post-design activities • Next dicipline: Web Design

  35. 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!

  36. 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

  37. Pre- and Post-design activities • Outcome of the website construction phase: A website ready for use and maintenance!

  38. 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 • …

  39. 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

  40. Pre- and Post-design activities • Possible channels for adverting a website • Banner ads • Search engines (of course) • Blogs/Wikis • Social media • Sponsorship

  41. 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

  42. Pre- and Post-design activities • Interesting features to track • Users per day • Page per user • Page popularity • Geography • Recurrence • Browser type • Screen resolution • …

  43. 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)?

  44. Pre- and Post-design activities

  45. 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

  46. 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)

  47. Web design elements

  48. 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

  49. Web design elements • Why are colors important…?

  50. 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!

More Related