Site development process
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

Site Development Process PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Site Development Process. Learning Web Design: Chapter 20 Don’t Make Me Think: By Steve Krug. Lesson Overview. There are standard steps that can be followed in the web design process: Conceptualization and research Content and organization Art direction Prototype building Testing

Download Presentation

Site Development Process

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Site development process

Site Development Process

Learning Web Design: Chapter 20

Don’t Make Me Think: By Steve Krug

Lesson overview

Lesson Overview

  • There are standard steps that can be followed in the web design process:

    • Conceptualization and research

    • Content and organization

    • Art direction

    • Prototype building

    • Testing

    • Site Launch

    • Maintenance

Conceptualization and research

Conceptualization and Research

  • Every web site begins with an idea

  • The idea must then be expanded through:

    • Brainstorming

    • Comparing what the competition is doing

    • Making lists and sketches

    • Whiteboard drawings

    • Trying to understand client needs

Research questions to have answered

Research Questions to Have Answered

  • Before beginning to code these questions must be answered by the client:

    • Strategy – Why create the site? What purpose will the site provide the client?

    • General Site Description – What kind of site will it be?

    • Who is the target audience?

    • Who will generate content, update and maintain it?

    • What budget and other resources are available?

    • What will be the graphic “ and feel” of the site?

Create and organize content

Create and Organize Content

  • The most important part of a web site it the content – “Content is King!”

  • The content attracts the customer and keeps them coming back

  • Roles involving content must be established:

    • Who is responsible for creating, updating and maintaining the content?

    • Ideally the client is responsible for creating their own content, but they may need help with copy writing and other hand-holding

Information design

Information Design

  • Once content has been identified … it must be organized

  • Decisions about what page will hold what content must be made

  • The goal is to make finding your valuable content intuitive for the user

  • Storyboarding is a visualization technique used to plan where content will be placed on the site

  • The site map is the final result of design

Site map planned viewing

Site Map – Planned Viewing

Information architecture

Information Architecture

  • Many web sites are dynamically “data-driven” in that their content is stored in a database

  • A specialist responsible for the information design of large web sites is called an information architect

  • Security and privacy of customer and client information designed ahead of time

Develop the and feel

Develop the “ and Feel”

  • The “look and feel” refers to the overall graphic design and visual appearance of the web site

  • This includes the color palette, typography choices, navigational elements and image style

  • A graphical mockup is used created to convey the visual design to the client

  • Often more than one mockup is used to give the client a choice

Final uvu banner mockups

Final UVU Banner Mockups

Producing working prototype

Producing Working Prototype

  • The art department creates all graphical content for the site

  • The production team creates markup, style sheets and templates

  • A multimedia team may create videos, flash content or sound assets

  • These pieces are brought together into a preliminary working site

Uvu prototype with sample content

UVU Prototype with Sample Content



  • All web sites must be tested before they are made available on a production server to the public

  • An alpha release of the web site is available in-house within the organization for testing purposes

  • After initial changes are made a beta release may be made available to the client or sample end users for additional testing

Basic quality check

Basic Quality Check

  • Some minimal requirements before publishing to the web are:

    • Is all the content there?

    • Have all typos and grammatical errors been removed?

    • Do all the links work?

    • Do all images display?

    • Are all scripts and applications working?

    • Are pages validated?

Browser environment testing

Browser Environment Testing

  • Your site will be viewed in more than one browser, so thoroughly test for most browsers:

    • Is the layout consistent in different browsers?

    • Does the site navigation work in most browsers?

    • What happens to the layout when the window is resized… very small … and very large?

    • Is the site usable in a text-only browser?

    • Is the site usable with graphics, CSS or JavaScript turned off?

    • How does the site load with a slow connection?

Usability testing

Usability Testing

  • Usability testing involves observing possible users of the web site using the web site

  • The earlier in the development process usability testing is begun the better

  • There are two types of user testing:

    • Observing behavior as user explores

    • Giving specific tasks of varying difficulty and seeing how users fare

Usability 101

Usability 101

  • Every user of your web site has a reservoir of goodwill

  • The reservoir can full or empty or somewhere in between, depending on the user’s experience

  • Be careful because the reservoir is limited

  • If you treat users badly enough, and exhaust their goodwill, there is a chance they will leave your website

Goodwill down the drain

Goodwill Down the Drain

  • Things that will extinguish goodwill:

    • Hiding info users want

    • Punishing users for not doing things your way

    • Asking for information you don't really need

    • Putting sizzle in my way, like a long Flash intro

    • Making a web site that looks amateurish

Keeping it real

Keeping it Real

  • Today's web users are very sophisticated and detest marketeze

    • Overblown or unsubstantiated statements used to sell a product or site

  • Play down marketeze, and organization jargon or acronyms in your content

  • "Call a spade a spade, not a digging implement" (Krug, 2006)

Site development process

  • Tools of the trade needed to create ultra-usable navigation:

    • Make use of breadcrumbs to overcome being lost in "hyperspace”

    • Provide a Search tool and an A-Z listings for anywhere navigation

    • Provide users a Sitemap to find a page by name

    • Page names - Must be prominent, and consistent with hypertext of links

Plan for accessible content

Plan for Accessible Content

  • Some fear that it is more expensive and time-consuming to create accessible web sites. This fear is largely untrue.

  • The benefits of providing access to a larger population almost always outweigh the time required to implement that accessibility.

  • If the leadership of an organization does not express commitment to web accessibility, chances are low that the organization's web content will be accessible.

Site development process

  • Disabled and special needs users have a lot of spending power

  • Baby boomers are retiring and growing older, meet their needs!

  • If your competition do not have accessible sites, here is your chance to gain strategic advantage

  • Positive PR affect for your organization by being listed in accessible website directories

  • Technologies for making your site accessible will also help it appear higher in the search rankings

It s also the law

It’s also the Law

  • If you live in the United States, applicable laws include ADA, IDEA, and the Rehabilitation Act of 1973 (Sections 504 and Section 508)

    • If your organization has government contracts, or takes any government grants, loans, or other monies you must comply

  • Many international laws also address accessibility

Accessibility 101

Accessibility 101

  • Easy accessibility must-dos:

    • Use alt text to convey meaning of graphics

    • Avoid blinking text or images- may trigger seizures

    • Avoid client-side image maps

    • Do not use color alone to convey meaning

    • Use relative font sizes so they can be modified by the user in the web browser

    • Do not put important images in the background

    • Use CSS for page layout instead of tables

Create readable content

Create Readable Content

  • Reading on the web can be hard work for anyone, not just the aged

  • Eye strain runs rampant in the online crowd

  • Numerous studies have shown that reading performance drops dramatically on the web

  • Giving users control over text size can greatly improve readability for some

  • Anything you can do to make your web site more readable will be valuable

Go towards the light

Go Towards the Light

  • You could compare the process of adding readability to a web site to turning on a light in a store

  • A well-lit store makes everything in the store seem more appealing and enticing

  • Customers don't have to squint and pour over things to understand what they want

  •  A web site that is readable is a pleasure to visit and is effortless to use

Readability 101

Readability 101

  • Some techniques to increase readability are:

    • Text is easiest to read when the font text color and the background color are in high contrast

    • Chunk up your content with headings, lists and short paragraphs

    • Omit needless words – simplify, simplify, simplify

    • Remember the F scan studies, users scan pages quickly in an F pattern

Ultimate usability

Ultimate Usability

  • Many web designers worry about usability, accessibility and readability as separate steps or checks of their work

  • But you could consider accessibility and readability to be subsets of usability

  • By making a website more accessible and more readable, you contribute to the overall usability of the site

"A rose by any other name would smell as sweet. "- William Shakespeare -

Launching a web site

Launching a Web Site

  • After testing and verifyingthe site, it is ready to go live

  • Upload the site pages and resources to a web server

  • A final round of testing should be done once the site is transferred:

    • Check for broken links and images not displaying

    • Test other behaviors and scripting

Maintaining a site

Maintaining a Site

  • The work of web site development is never done

  • The ability to make updates and keep content current is a main advantage of the web medium over print

  • Decisions as to who will maintain the site should be made at the beginning of the project

  • Usually a full site redesign is needed after a few years to keep up with the competition

Lesson summary

Lesson Summary

  • Following a web development process can ensure creation of successful sites

  • A process can be used by a team of developers and designers or by an individual

  • Most time and effort should be spent on conceptualization and research

  • Usability testing, and creating accessible and readable content will help your site stand above the competition

  • Login