Process of Designing a Web Site

1
Process of Designing a Web Site

• Planning a Web site is a two-part process
• First you gather your development partners,
  analyze your needs and goals, and work through
  the development process.
• The second part is creating a site specification
  document that details what you intend to do and
  why, what technology and content you'll need, how
  long the process will take, what you will spend
  to do it, and how you will assess the results of
  your efforts.
• The site specification document is crucial to
  creating a successful site, as it is both the
  blueprint for your process and the touchstone
  you'll use to keep the project focused on your
  agreed goals and deliverables

2
Planning

• Web sites are developed by groups of people to
  meet the needs of other groups of people.
  Unfortunately, Web projects are often approached
  as a "technology problem," and projects are
  colored from the beginning by enthusiasms for
  particular Web techniques or browser plug-ins
  (Flash, digital media, XML, databases, etc.), not
  by real human or business needs. People are the
  key to successful Web projects. To create a
  substantial site you'll need content experts,
  writers, information architects, graphic
  designers, technical experts, and a producer or
  committee chair responsible for seeing the
  project to completion. If your site is successful
  it will have to be genuinely useful to your
  target audience, meeting their needs and
  expectations without being too hard to use.

3
Developing a site specification

• The site specification is the planning team's
  concise statement of core goals, values, and
  intent, to provide the ultimate policy direction
  for everything that comes next. Designing a
  substantial Web site is a costly and
  time-consuming process. When you're up to your
  neck in the daily challenges of building the
  site, it can be surprisingly easy to forget why
  you are doing what you are, to lose sight of your
  original priorities, and to not know on any given
  day whether the detailed decisions you are making
  actually support those overall goals and
  objectives.

4

• A well-written site specification is a powerful
  daily tool for judging the effectiveness of a
  development effort. It provides the team with a
  compass to keep the development process focused
  on the ultimate purposes of the site. As such, it
  quickly becomes a daily reference point to settle
  disputes, to judge the potential utility of new
  ideas as they arise, to measure progress, and to
  keep the development team focused on the ultimate
  goals.

5
Goals and strategies

• What is the mission of your organization?
• How will creating a Web site support your
  mission?
• What are your two or three most important goals
  for the site?
• Who is the primary audience for the Web site?
• What do you want the audience to think or do
  after having visited your site?
• What Web-related strategies will you use to
  achieve those goals?
• How will you measure the success of your site?
• How will you adequately maintain the finished
  site?

6
Information architecture

• At this stage you need to detail the content and
  organization of the Web site. The team should
  inventory all existing content, describe what new
  content is required, and define the
  organizational structure of the site. Once a
  content architecture has been sketched out, you
  should build small prototypes of parts of the
  site to test what it feels like to move around
  within the design. Site prototypes are useful for
  two reasons. First, they are the best way to test
  site navigation and develop the user interface.
  The prototypes should incorporate enough pages to
  assess accurately what it's like to move from
  menus to content pages. Second, creating a
  prototype allows the graphic designers to develop
  relations between how the site looks and how the
  navigation interface supports the information
  design. The key to good prototyping is
  flexibility early on the site prototypes should
  not be so complex or elaborate that the team
  becomes too invested in one design at the expense
  of exploring better alternatives.

7
Site marketing

• Your Web site should be an integral part of all
  marketing campaigns and corporate communications
  programs, and the URL for your site should appear
  on every piece of correspondence and marketing
  collateral your organization generates.
• If your Web site is aimed primarily at local
  audiences you must look beyond getting listed in
  standard Web indexes, such as Yahoo and Info
  seek, URL and publicize your URL where local
  residents or businesses will encounter it. Local
  libraries (and schools, where the content is
  relevant) are often the key to publicizing a new
  Web site within a localized geographic area.

8

• You may also find opportunities to cross-promote
  your site with affiliated businesses,
  professional organizations, broadcast or print
  media, visitor or local information agencies,
  real estate and relocation services, Internet
  access providers, and local city or town
  directory sites. Your organization could also
  feature local nonprofit charitable or school
  events on your Web site. The cost in server space
  is usually trivial, and highly publicized local
  events featuring a Web page hosted within your
  site will boost local awareness of your Web
  presence. Site sponsorship might also interest
  local broadcast media as an interesting story
  angle.

9
Tracking, evaluation, and maintenance

• An abundance of information about visitors to
  your site can be recorded with your Web server
  software. Even the simplest site logs track how
  many people (unique visitors) saw your site over
  a given time, how many pages were requested for
  viewing, and many other variables. By analyzing
  the server logs for your Web site you can develop
  quantitative data on the success of your site.
  The logs will tell you what pages were the most
  popular and what brands and versions of Web
  browser people used to view your site.

10

• Server logs can also give you information on the
  geographic location of your site readers. The
  usefulness of your site logs will depend on what
  you ask of the server and the people who maintain
  the server. Detailed logs are the key to
  quantifying the success of a Web site. Your
  Webmaster should archive all site logs for
  long-term analysis and should be prepared to add
  or change the information categories being logged
  as your needs and interests change.

11
Navigation

• A rich set of graphic navigation and
  interactivity links within your Web pages will
  pull users' attention down the page, weaning them
  from the general-purpose browser links and
  drawing them further into your content. By
  providing your own consistent and predictable set
  of navigation buttons you also give the user a
  sense of your site's organization and make the
  logic and order of your site visually explicit.
  In this example the rich graphics and many links
  offered by the Salon technology and business page
  immediately draw the reader into the site

12
(No Transcript)
13
(No Transcript)
14
General design considerations

• Understand the medium
• Readers experience Web pages in two ways as a
  direct medium where pages are read online and as
  a delivery medium to access information that is
  downloaded into text files or printed onto paper.
  Your expectations about how readers will
  typically use your site should govern your page
  design decisions. Documents to be read online
  should be concise, with the amount of graphics
  carefully "tuned" to the bandwidth available to
  your mainstream audience. Documents that will
  most likely be printed and read offline should
  appear on one page, and the page width should be
  narrow enough to print easily on standard paper
  sizes.

15
Summary File formats

• Uses for GIF and JPEG Files
• Netscape Navigator, Microsoft Internet Explorer,
  and most other browsers support both GIF and JPEG
  graphics (as of this writing, PNG graphics are
  not adequately supported). In theory, you could
  use either graphic format for the visual elements
  of your Web pages. In practice, however, most Web
  developers will continue to favor the GIF format
  for most page design elements, diagrams, and
  images that must not dither on 8-bit display
  screens. Designers choose the JPEG format mostly
  for photographs, complex "photographic"
  illustrations, medical images, and other types of
  images in which the compression artifacts of the
  JPEG process do not severely compromise image
  quality.

16

• Advantages of GIF files
• GIF is the most widely supported graphics format
  on the Web
• GIFs of diagrammatic images look better than
  JPEGs
• GIF supports transparency and interlacing

17

• Advantages of JPEG images
• Huge compression ratios mean faster download
  speeds
• JPEG produces excellent results for most
  photographs and complex images
• JPEG supports full-color (24-bit, "true color")
  images

18
Video

• Video is the most challenging multimedia content
  to deliver via the Web. One second of
  uncompressed NTSC (National Television Standards
  Committee) video, the international standard for
  television and video, requires approximately 27
  megabytes of disk storage space.
• The amount of scaling and compression required to
  turn this quantity of data into something that
  can be used on a network is significant,
  sometimes so much so as to render the material
  useless. If at all possible, tailor your video
  content for the Web.

19

• Shoot original video that way you can take steps
  to create video that will compress efficiently
  and still look good at low resolution and frame
  rates.
• Shoot close-ups. Wide shots have too much detail
  to make sense at low resolution.

20

• Shoot against a simple monochromatic background
  whenever possible. This will make small video
  images easier to understand and will increase the
  efficiency of compression.
• Use a tripod to minimize camera movement. A
  camera locked in one position will minimize the
  differences between frames and greatly improve
  video compression.
• Avoid zooming and panning. These can make low
  frame-rate movies confusing to view and interpret
  and can cause them to compress poorly.
• When editing your video, use hard cuts between
  shots. Don't use the transitional effects offered
  by video editing software, such as dissolves or
  elaborate wipes, because they will not compress
  efficiently and will not play smoothly on the
  Web.
• If you are digitizing material that was
  originally recorded for video or film, choose
  your material carefully. Look for clips that
  contain minimal motion and lack essential but
  small details. Motion and detail are the most
  obvious shortcomings of low-resolution video.