site development process
Download
Skip this Video
Download Presentation
Site Development Process

Loading in 2 Seconds...

play fullscreen
1 / 31

Site Development Process - PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Site Development Process' - nasia


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
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
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
testing
Testing
  • 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)
slide20

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

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
ad