Slide 1

PBA Front-End Week 2

Slide 2

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

Slide 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

Slide 4

Technical Web Development Organisation Creative Administrative Production

Slide 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

Slide 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

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

Slide 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,)

Slide 9

Web Development Organisation

Slide 10

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

Slide 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

Slide 12

Web Development Organisation

Slide 13

Slide 14

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

Slide 15

Web Development Organisation

Slide 16

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)

Slide 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

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

Slide 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?

Slide 20

Web Development Organisation Large project

Slide 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

Slide 22

Web Development Organisation

Slide 23

Pre- and Post-design activities In place: Website purpose Website goals Target audience Development organisation Can we start designing now? Almost, lets see the bigger picture

Slide 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

Slide 25

Pre- and Post-design activities

Slide 26

Website definition and planning Definition (purpose, goals, target audience,) been there, done that Planning Technology considerations Website Lifecycle

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

Slide 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

Slide 29

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 ones responsibility Merry X-Mas to all our customers..!?

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

Slide 31

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

Slide 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

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

Slide 34

Pre- and Post-design activities Next dicipline: Web Design

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

Slide 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

Slide 37

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

Slide 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

Slide 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

Slide 40

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

Slide 41

Pre- and Post-design activities Tracking, evaluation and maintenance Very important, significant risk of neglect (Were done, on to the next one) Evaluation should be related to goals Fairly easy to track many quantitative features of the web site usage

Slide 42

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

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

Slide 44

Pre- and Post-design activities

Slide 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

Slide 46

Web design elements Overall principle: Simplicity KISS (Keep It Simple, Stupid) Dont make me think Minimal surprise The user doesnt want to spend time on our website (usually)

Slide 47

Web design elements

Slide 48

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

Slide 49

Web design elements Why are colors important?

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

Slide 51

Web design elements

Slide 52

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

Slide 53

Web design elements The Cocoa Libre Club Ye Olde Pirates Inn

Slide 54

Web design elements The Cocoa Libre Club Ye Olde Pirates Inn

Slide 55

Web design elements The Cocoa Libre Club Ye Olde Pirates Inn

Slide 56

Web design elements Death and Honor

Slide 57

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

Slide 58

Web design elements Uhhh, what?

Slide 59

Web design elements How do we divide content into multiple pages? Depends on purpose! Two main structures Linear Hierachical Search!

Slide 60

Web design elements How do we navigate from one page to another? through links! Manifestations of links Explicit link (www.cnn.com)www.cnn.com Text link (click here for info)click here for info Metaphor (picture, icon, symbol,)

Slide 61

Web design elements

Slide 62

Slide 63

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

Slide 64

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

Slide 65

Web design elements Example: Law of Proximity

Slide 66

Web design elements Example: Law of Similarity

Slide 67

Web design elements Example: Law of Isomorphism

Slide 68

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 Prgnanz Law of Unity

Slide 69

Web design elements

Slide 70

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

Slide 71

Web design elements

Slide 72

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

Slide 73

Web design elements