Web Design and Development
theLonelyWolf
0420-20Planning.pptxDevelopment Process & Planning
Some content from:
Deliver First-Class Websites 101 Essential Checklists
(Shirley Kaiser)
Principles of Web Design (Joel Sklar)
Note: This lecture is especially relevant to your first assignment
CP1406/CP5638
Learning Outcomes
apply user-centred design principles and methods to the whole process of the development cycle
appreciate the value of planning and how it really can help you make better websites… really!
be able to clearly articulate:
website goals and target audience
be able to organise content (information architecture) and create a flowchart
2
Planning
planning is an important part of any project
larger projects need a project manager
a good project plan should be helpful
a plan is only good if you actually use it
the plan should answer the questions you will ask later on
remember, the plan informs development
know the goal so you can build a goal-driven website
3
Planning
allow plenty of time to plan and develop your site
beat the deadline – not “last minute”
visit other websites & take notes
good and bad organisation & design
especially study the competition
think about the type of content you're presenting and look to the Web for examples of how best to present it (follow conventions)
4
Effective Organisation
break down your website project into its major phases
initial planning
content planning
design and development planning
implementation
after launch
within each major phase, create smaller, more manageable steps
5
There are lots of variations of project phases. Different people do and name things differently
6
Web development is not really any different from software development
6
Effective Organisation
prepare and follow a task list based on the above task breakdowns. Identify:
what needs to be done
who will do it
when it will be done by
create a realistic schedule... and stick to it
realistic means planning for extra time (over-estimate the time it will take)
7
Identify Your Goal(s) – Starting Point
every site has at least one goal
designing to best achieve that is your goal as a Web designer and developer
examples
sell new or existing products
promote your business and develop your brand
reduce printing costs or call centre overhead
... what else?
8
Identify Your Goal(s)
can you write a short (one- to three-sentence) mission statement that clearly states the site's goal(s)?
what does the client hope to gain from creating and maintaining a Web site?
how will the success of the site be judged?
this question helps check if the goal is valid
if you can't measure the success of the mission, you should change the mission until you can
9
Compare These Mission Statements
Training Zone is a company that has been around for over 150 years. They specialise in training people in IT and management skills. This website presents information about the company, its history, some sample articles, contact information and links.
The website is intended to increase revenue for Training Zone by promoting the services offered by the company in order to get people to sign up for these services online – increasing both new and repeat customers.
10
Establish Your Target Audience
determining who will visit your website is the key to understanding why you need a website, and identifying what it should include.
design your sites with those visitors in mind.
if you can determine why your visitors will want to visit your site, you should find it reasonably easy to identify your site’s primary purpose and goals
11
Design For Your Target Audience
who is the target audience?
now how will that affect your design?
design specifically to suit your specific audience
12
It is very important to see the connection between planning and design – e.g. if we don't design the site to suit our intended target audience then there's no point knowing the target audience
12
Can you design for "everybody"?
13
Herbert Bayard Swope Sr. (1882 – 1958)
The first and three-time recipient of the Pulitzer Prize for Reporting
"I can't give you a sure-fire formula for success, but I can give you a formula for failure: try to please everybody all the time."
Design For Your Target Audience
Who is the target audience for:
http://www.abc.net.au/abcforkids/
14
Establish Your Target Audience
identify technology issues and accessibility constraints
think about where users are located and what their technology level might be
consider the physical capabilities of your users
What are some physical limitations of users that could affect your design?
15
Establish Your Target Audience
You can identify accessibility constraints
review the WCAG 2.0
plan for accessibility from the outset
look to other real-life accessibility implementations
16
Plan a Budget
domain names
include variations and generic names
hosting costs
serving large amounts of content like video is often done best by using a CDN (Content Distribution Network) like Amazon for these parts
content costs (stock photos, videos, fonts, articles...)
outsourcing – the bits you don’t do
logo design, video editing, programming, SEO...
marketing
17
Plan a Budget
clients often have a range of needs
the more you can provide, the more of their money you get
even if you can’t do something, consider being the project manager and organising this for them as if you can... then outsource it
factor in extra expenses and...
profit
18
Information Architecture and Taxonomy Creation
gather and itemise all content
provided by client and from other sources
consider content like legal, privacy, help, etc.
from the content list, start making logical groups
don't just stop when you've organised it once
keep refining until it's the best it can be
19
Information Architecture and Taxonomy Creation
user analysis guides the design of site content
the aim is to create a content structure that is meaningful for your users
taxonomy is a classification and naming of contents in a hierarchy
users need to be able to understand the naming
the taxonomy of the site structures the topic hierarchy and navigation
20
Information Architecture and Taxonomy Creation
structure your information into logical units
users expect relevant and specific information
evaluate importance and create hierarchy
more important things before less important
many website go from the general to the more specific
find connections between units
structure of site has to correspond to mental model of user
21
Creating a Site Flowchart
turn your taxonomy into a flowchart
the flowchart shows this visually
you can visualize and refine your site design – actually "walk through" your flowchart on paper/screen to see if the flow is as logical as it can be
22
22
Rules for Flowcharts!
every box is a page
every line (arrow) is a link
the order matches the site
23
23
Creating a Site Flowchart
24
Top-level navigation – Hierarchy
Don't…
25
Flowcharts Show Structure
note layout and colouring – shows hierarchy
26
Why are these shown differently?
Why are these all in one box?
Guestbook and FAQ look different… so they are different (visual language means something). These are not part of the top-level navigation.
Notice how the box under "Find us" has lots of items but is just one box – it's only one page.
If time – come back to this and draw screenshots for what this flowchart indicates
26
Exercise – Do This Now
arrange the following content into pages, then draw a flowchart. The site is for a freelance creative designer.
Video examples
Contact
Portfolio
Interactive examples
Resume
About me
Announcements
Photography examples
27
Your first question should always be…?
What's the goal?
Screen Designs
turn your flowchart into screen designs
remember that the order and naming of links on the site should match those in flowchart
different levels in the hierarchy will often have different designs
28
Home
Section
Content/Leaf
So the process is…
29
Content List
Taxonomy
Flowchart
Screen Designs
So the process is… (Example)
30
Writing Good Content
writing for the Web is different from writing for print, primarily because people don’t usually read online – they scan the content
http://www.nngroup.com/articles/how-users-read-on-the-web/
research found:
79% always scanned any new page
16% read word-by-word
31
Write Scannable Text
highlighted keywords (hypertext links serve as one form of highlighting; typeface and colour variations are others)
meaningful sub-headings
bulleted lists
one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
the inverted pyramid style – start with the conclusion
half the word count (or less) than conventional writing
32
Write Scannable Text
provide a summary or overview of key points for longer articles before providing the details
use correct title case for headings (like this slide)
provide clear, concise calls to action
one of this subject’s main take-home points
what do you want the user to do now?
33
Rewrite Text For The Web Original:
Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).
34
See: http://www.nngroup.com/articles/how-users-read-on-the-web/
Rewrite Text For The Web Improved:
In 1996, six of the most-visited places in Nebraska were: Fort Robinson State Park
Scotts Bluff National Monument
Arbor Lodge State Historical Park & Museum
Carhenge
Stuhr Museum of the Prairie Pioneer
Buffalo Bill Ranch State Historical Park
this example resulted in 124% better usability
35
See: http://www.nngroup.com/articles/how-users-read-on-the-web/
“better usability” in terms of task time, errors, memory, recall, satisfaction - http://www.nngroup.com/articles/measuring-the-usability-of-reading-on-the-web/
35
Prepare Good Image Content
select high quality images to support your site’s credibility
low quality content implies low quality product
crop images, if required, to target their most important aspects
avoid using photographs that have that ‘stock photo’ feel
overused – now seem tacky and fake
36
Prepare Good Image Content
37
Compare these two sites – what do the images convey about them?
37
Resize Images Appropriately
maintain aspect ratio
don't stretch or squash
balance quality and file size
smallest file size before quality loss is noticeable
do not resize images with HTML height & width
i.e. display images at their actual size
if you want a smaller image, resize it in an image editing program
38
Resize Images Appropriately
demo, including Dreamweaver’s resample option
39
Create Conventions for Easier Teamwork
decide beforehand on details like filenames, file sharing, version control, commenting, etc.
makes working in a team more efficient
make sure file structures are transferable from development machines to the Web server
use relative links
40
Use GitHub!
40
Use Relative Links
relative (partial) URLs locate a file that resides on the same server as the file linking to it
<a href="file.html">in same folder</a>
<a href="dir/file.html">in sub-folder</a>
<a href="../file.html">up a folder</a>
41
Naming Files
file naming conventions vary across OSes
we use Apache on Linux, so:
names are case-sensitive
do not use special characters or spaces
Important: if you work and test on Windows, your site might work fine until you upload it to the server where index.html and Index.html are different files.
42
42
Develop a Website Style Guide
a website style guide documents concise, helpful, and important instructions for the creation and maintenance of a website and its content
provide and promote consistency among all of the website’s elements and content
contains all information for an external designer to work on the site or develop the site further
43
Develop a Website Style Guide
include writing style guidelines and clear examples that show users how to maintain consistent written communications throughout the website
how should you abbreviate the company name, if at all?
what voice and “feel” should text use?
44
Develop a Website Style Guide
include guidelines for, and examples of, the use of logos and other branding elements
https://about.twitter.com/press/brand-assets
provide templates for the site’s key web pages, along with instructions for, and examples of, their usage
45
Testing
quality assurance validates the technology of the site
user testing validates the design
cross-platform testing and usability testing ensure users can access content easily
you should be doing testing (e.g. in different browsers) often in your development
46
Usability Testing (in brief)
vary your subjects (don't just ask your friends)
ask the users to perform representative tasks on the site/prototype
observe without intervening, and take notes
refine design, then repeat the process
(More coming in the Usability lecture)
47
Publishing and Promotion
the site is published to the Web
upload files to server with (S)FTP
promotion of the site begins (if it hasn't already)
In what ways do companies promote websites?
48
Ongoing Maintenance
starts when the site goes live and continues throughout the life of the project
depends on the contract with the client
many developers choose to use content management systems so that clients can update the site themselves
49
Using Web Analytics
Web servers store info on each visit in logs
reporting tools can analyse the statistics
you can track user activity on your Web site
you can see things like:
visitor details: location, browser, screen res…
which pages they visit the most
how long they spend on each page
which pages they leave on (last view)
…
50
Using Web Analytics
Google Analytics is a popular, useful service (and is not dependent on your Web server)
51
Using Web Analytics
these statistics can be used to make decisions
what pages are "underperforming"?
so how can we change those?
what countries are our visitors from?
so how can we include them more?
What other statistics -> decisions can you think of?
52
Planning
don't ignore planning
if it's not helpful, you're doing something wrong
start with the goal
design to achieve the goal and suit the audience
apply structured thinking as well as creativity
plans are useful for you, your team members, the client and future developers of the site
to make an effective website, write a good plan then follow it as you design and develop
53
Summary
apply user-centred design principles and methods to the whole process of the development cycle
planning can help you make better websites
you must be able to clearly articulate:
website goals and target audience
there are rules and guidelines for effective information architecture, including flowcharts
be able to apply these
54
