web design fundamentals n.
Skip this Video
Download Presentation
Web Design Fundamentals

Loading in 2 Seconds...

play fullscreen
1 / 24

Web Design Fundamentals - PowerPoint PPT Presentation

  • Uploaded on

Web Design Fundamentals. Planning Your Attack: Web site planning process. After completing this lesson, you will be able to:. Define your goals for a Web site. Analyze your audience. Create a blueprint for your Web site. Design your home page and get ready to build your site.

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

PowerPoint Slideshow about 'Web Design Fundamentals' - derron

Download Now 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
web design fundamentals

Web Design Fundamentals

Planning Your Attack: Web site planning process

after completing this lesson you will be able to
After completing this lesson, you will be able to:
  • Define your goals for a Web site.
  • Analyze your audience.
  • Create a blueprint for your Web site.
  • Design your home page and get ready to build your site.
define goals
Define Goals

To define the purpose of your Web site, answer the following:

  • Why do I want a Web page or Web site?
    • Curiosity Shoppe owners wanted to make their shop easily accessible to more customers through an online presence.
  • What are the immediate goals for the Web site?
    • The owners’ immediate goals were to inform people about the store, provide a means of contact, and advertise their products and store location.
define goals1
Define Goals

To define the purpose of your Web site, answer the following:

  • What are the long-term goals for the site?
    • Long-term plans are to offer their entire line of products for sale online and update the home page daily with a featured item.
  • What is the timeline?
    • Timeline can be summarized like this: static site online (live) within 2 months of the home page’s inception; sales feature fully functional within 6 months after the home page has gone live; and a full line of online products available within 12 months from the date the initial home page went live.
getting to know your audience
Getting to Know Your Audience

After you’ve outlined your goals for your site, you need to consider who’s going to be visiting your Web pages. In other words, you need to think about your audience. You must have at least some perception of the people you want to visit your Web space. You need to address this planning step early in the process because many design and content decisions are based on your audience.

analyze the audience
Analyze the Audience
  • Who makes up the core target audience?
  • What does the audience want to find out from my site?
  • How experienced with the Web are audience members?
  • What types of Internet connections and bandwidth capabilities will audience members have?
  • Where is the core audience located?
  • What’s the typical age group among audience members?
  • How will users find out about my site?
drawing the blueprints for your site
Drawing the Blueprints for Your Site

After setting your goals and defining your audience, you’re ready to design your Web site’s framework. If possible, your first step should always be to collect your content before you design. Organizing your content—or at least its main concepts—can help you organize your overall site in a logical manner.

After you gather the main types of information you want to include on your site (don’t worry—your text and graphics don’t have to be polished at this point), you need to figure out how best to present your information.

site organization
Site Organization

Web sites can be organized in the following ways:

  • Alphabetically
  • Chronologically
  • Graphically
  • Hierarchically
  • Numerically
  • Randomly
  • Topically
url rules
URL Rules

When naming a Web site’s HTML files:

  • Keep filenames short, simple, and meaningful
  • Avoid symbols and punctuation
  • Use an underscore (_) to indicate a space
  • Use all lowercase letters
image names
Image Names

Create a meaningful file-naming system for graphics files. For example:

  • b_image name = button image file
  • p_ image name = picture image file
  • t_image name = title bar image file

Storyboarding your site’s structure means illustrating the relationships among your site’s pages and information to ensure that you’ve created a clear site layout that includes all your information in an easily accessible format.

One common practice in the business community is to create a paper version of a Web site before developing the site electronically. A paper version is cheaper and quicker to build than an electronic version and it allows non-technically savvy people to provide input and opinions in a “friendly” environment.

site planning checklist
Site Planning Checklist
  • Research similar site
  • Specify who you are
  • Pick colors that evoke desired emotion
  • Classify site to yourself
  • Design for users’ navigation
  • Offer contact information
  • Name files appropriately
  • Create easy-to-understand buttons
  • Divide content logically
  • Make important information prominent
  • Use a unifying look or theme
  • Encourage users to return
laying your home page s foundation
Laying Your Home Page’s Foundation

After the site-planning dust settles, you can clean off your slate and start to design your home page (and subpages). By now, you should have a very strong idea of what your home page should include—logo, title bar, links to your site’s main pages, and so forth.

In this design phase, focus your attention on how you can creatively present all the necessary home page components in a way that reflects your site’s goals, optimizes your site’s theme, and elicits the proper “emotional” response from users.

After you start to think of creative ways to present your ideas, start to sketch various layouts and ideas.

home page planning checklist
Home Page Planning Checklist
  • Creation or revision date
  • Consistent navigation links
  • Home page icon or logo
  • Important information “above the fold”
  • Informative title
  • Intentional emotional effect
  • Logo or other identifying graphic
  • Opening page “hook”
  • Quick loading approach
  • Clear purpose and movement
  • Subheads when necessary
  • Text links
  • Upper-left corner effectively used
  • Identity clear
supplies check list
Supplies Check list
  • Text—edited, spell checked, and proofread
  • Photographs, graphics, and illustrations
  • Page sketches and templates
  • HTML editor, text editor, or Web page creation tool
  • Graphics program
  • Domain name (purchased or assigned)
  • Server space
next step
Next Step

Demystifying Basic HTML

exercise 2

Intentional emotional effect or theme created by means of words, colors, layout, font, and so forth

Informative title

Upper-left corner is put to good use with your logo

Organization’s identity

Home page icon or logo that can be used throughout the site

Site’s purpose

Easily identified and consistent navigation buttons

Important information displayed above the fold

Text navigation links

Revision date

Exercise 2
exercise 3
Exercise 3

Our Web Site (folder)


images (folder)