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