Giveaway Templates - PowerPoint by jfj20219

VIEWS: 30 PAGES: 56

More Info
									TC 240
Web Design Principles

March 26, 2007
Our Assignment
   Web Portfolio
   Personal site
     Show off TISM and other work
     Demonstrate ability to design and maintain a site
     Audience is prospective employers, etc.

   Original work… design from scratch
   200 points
   www.msu.edu/course/tc/240/web.htm
The Web Medium
Characteristics of the Web
   Both graphic and text content
   Writing – “copy”
     Quality
     Appropriateness
     Readability

   Interactivity
   Visually appealing
   Usable and intuitive arrangement
Technologies
   HTTP: HyperText Transport Protocol
   HTML: _______________________
     Describes   a web page’s organization, using tags
   CSS: Cascading Style Sheets
   URL: Uniform Resource Locator
     The   name that identifies and directs to the site
   IP Address:
     The actual name of the site… the server address
     4 numbers separated by periods, e.g. 216.27.61.137
Website (definition)
   A collection of Web pages,

    which are collections of
    files, HTML, other code,

    all held together with HTML.
Audience

The first consideration for
design in any medium
Designing for your audience

   Who is your audience?
   What is the goal of the site?
   What are the needs and wants of the audience?
   What are their expectations?

   How can your design address the answers to
    these questions?
Five Steps for
Building a Site
Five Steps for Building a Site
1.   Definition
2.   Design
3.   Development
4.   Testing and Launch
5.   Maintenance
1. Definition
 The site is defined by goals and user
  needs
 Make a list of things the site should have
  “the ability to do”
 Make a production schedule
2. Design
 Develop an outline and page index
 Develop a site map
 Develop wireframes/mock-ups
 Redesign
3. Development
 Writing copy
 Designing buttons, banners, backgrounds,
  etc. in Photoshop
 Developing any needed Flash, audio,
  video, etc.
 Developing page templates based on
  wireframes
 Placing content into individual pages
4. Testing and Launch
 Debugging: browser problems, broken
  links, etc.
 Usability testing
 Moving the site from local storage to the
  server
5. Maintenance
 Monitor for problems
 Frequent content updates
 Redesigns
Design
Develop an Outline
 Group content and features together
 Create an outline that establishes
  organization for pages and their
  connections to each other
Guidelines for Outlines
   Home page designated as 0, and several major
    categories 1,2,3
       Typically three categories
   No more than two levels of subcategories
   No more than 7 subcategories within a category
   Pages follow convention of 1.2.4, 3.2.2, etc.
   Prioritize outline
       Category 1 should be most important… becomes primary
        navigation
       Final category should include global navigation (home, search,
        contact, privacy policy, etc.)
Example of Outline
0 Home Page
1 Listen to the Impact
     1.1 Listen Online
             1.1.1 Impact Web Stream
             1.1.2 The Fix Web Stream
             1.1.3 Podcasts
     1.2 Listen in HD
     1.3 Listen to Win
             1.3.1 Upcoming giveaways
             1.3.2 Giveaway sponsors
2 Find out more about the Impact
     2.1 Specialty Shows
             2.1.1 Exposure
             2.1.2 Specialty Music Shows
             2.1.3 Underground
             2.1.4 Weekends
     2.2 Contact
     2.3 Impact History
3 Global Navigation
     3.1 Privacy Policy
     3.2 Member Login
Develop a Page Index
 Needed if building a complex or large
  website
 Create spreadsheet of pages, with ID
  (e.g. 2.3.6), page template used, page
  name, and file name
 Will avoid the misplacement of pages, or
  the use of wrong templates or titles
Example of a Page Index
Page ID   Page Template   Page Name               File Name
0         Home            Impact89fm              index.htm
1
1.1       New Subpage     Listen Online           listenonline.html
1.1.1     New Subpage     Impact Web Stream       stream.html
1.1.2     Subpage         The Fix                 fix.html
1.1.3     New Subpage     Impact Podcasts         podcasts.html
1.2       Subpage         Listen in HD            hd.html
1.3       Subpage         Listen to Win           win.html
1.3.1     Subpage         Upcoming Giveaways      upcoming.html
1.3.2     Subpage         Giveaway Sponsors       sponsors.html
2
2.1       Subpage         Specialty Shows         specialty.html
2.1.1     Subpage         Impact Exposure         exposure.html
2.1.2     Subpage         Specialty Music Shows   specialmusic.html
2.1.3     Subpage         Impact Underground      underground.html
2.1.4     Subpage         Impact Weekends         weekend.html
2.2       Subpage         Contact                 contact.html
2.3       Subpage         Impact History          history.html
Develop a Site Map
   What’s a site map?
Example of a Site Map
Wireframes
   Wireframes are sketched or designed mock-ups of page
    design
   Map out layout and content zones
   Develop a wireframe for the index (home page) and for
    subpages
   Use placeholder text (Lorem ipsum…)
   Design the area “above the fold” to be 800 x 600
       Area below the fold about another 600 pixels high
   Color schemes and texture
   Wireframes would be submitted as mockups for client
Navigation Design
    Three types of navigation built into a
     site’s design
    1. Primary navigation
    2. Global navigation
    3. Section navigation
Primary Navigation
 Typically runs horizontally below a banner
 Does not vary
     Remains  constant across all pages
     May vary slightly between homepage and the
      subpages
Global Navigation
 Basic tools and functions, but not
  important parts of the site’s content
 Typically found in the footer and header
 Like primary navigation, global remains
  constant
 Not applicable to web portfolio (except
  maybe homepage)
Section Navigation
 Appears to left or right side, in vertical
  center of a page
 Should remain constant throughout a
  section
 On the home page, may include items in
  an outline’s secondary category
Navigation Rules and Tips
   Should remain consistent. Never make the user work to
    find something.
   Redundant navigation is okay, especially for important
    parts
   “You are here” feedback. Altered navigation lets the user
    know where they are. Often, the link to the current page
    is not active
   Breadcrumb trail
       Gives user a powerful “back” feature & awareness of where they
        are
   Buttons that use icons should also include text
    descriptions.
Development
Buttons
   Responsive navigation
     Text and button rollovers
     Different versions of the button must be created
     Feedback can also be through audio or animation
   Buttons should also look clickable
   Buttons in a navigation set should look the same
   Designing your site to be intuitive for the user
    makes your site usable and effective
Color
 Should be appropriate for content
 Tighter color palettes are more effective
    A  couple main colors, a couple support colors,
      a few neutral, and a few accent colors
     Fewer colors typically means smaller file sizes
      for graphics, therefore faster download times
   Complement, contrast (color wheel)
Big, Medium, Small Strategy
   Emphasizes most important content
   Improves navigation and ease of use by
    avoiding placement of the same emphasis on
    everything
   A way of using contrast
   Create a focal point with most important element
   Page layout should have clean, clear structure
Fold Line
   Like a newspaper, websites have “fold lines”
   Considering the size of many monitors and the
    loss of space from the browser window, 800
    pixels wide by 600 pixels high is the space
    available for displaying content
   User shouldn’t have to scroll horizontally
   User shouldn’t have to scroll down for important
    content
   Vertically scrolling is fine for secondary content
White Space
   Include blank space on the page
   It provides a clean look and aids the user
   Larger spaces around important elements
    provide emphasis
   25% white space is rule of thumb
   Less is more
   The focal point of a page can be emphasized by
    giving it offset placement
Text
 Like any other medium, the copy for web
  pages must be thoughtful and well written
 Be concise
 Write and layout text so it can be scanned
 Use headings, bold, lists, etc.
 Never, ever use CAPS
 Reading on the screen is 25% slower
Graphic vs. HTML Text
   Graphic                       HTML
     Created   in graphics         Created   in the page’s
      program                        code
     Not easily changeable         Easily changeable
     Will look same to all         Will look different
      users                          based on computer
     Can use effects, fancy         and browser
      fonts                         Use simple fonts
     Buttons, headers,             Body, captions, etc.
      banners, etc.
Text Tips
   Size 10 or 12 for HTML, usually larger for
    graphic text
   Contrast… either negative or positive text
   No distracting backgrounds
   Leading is the space between lines
     Makes   reading easier
   T r a c k i n g is spacing between letters
   Avoid wide columns
   Justify to the left
Text Tips
 Break it up into sections
 Serif vs. sans-serif
 Contrast header font with body font
 Consistency, as always
RGB Color
 RGB color
 Hexidecimal numbers
     #RRGGBB
     Use   eyedropper to identify number for a color
Graphic Formats
   .jpg                        .gif
     For photo quality           For flat colors
      images                      Non-lossy
     Lossy compression            compression
     No transparency             Transparency
     Creates artifacting,        Limited in colors
      especially on text          Useful for text
     Larger file sizes           Smaller file sizes
Graphic Formats
   .png
     Has  best of .jpg and .gif qualities
     Non-lossy, preserves range of colors
     Transparency
     Originally not widely supported
     Increasingly used
Artifacting
Graphics Tips
   Most monitors are 72-96 ppi, so use 72 for
    graphics
   Check download times: 5-8 seconds is ideal
   Watch out for anti-aliased edges that create
    white or other colored halos around graphics
     Use your web page background as the background in
      Photoshop if this is an issue
Graphics Tips
   To save file space and download times:
     Use  60-80% compression on .jpgs
     Use fewer colors when an option
     Transparency saves space
     Reuse graphics across the site
     Split up large graphics
Organizing Content
on the Page
Tables
   Merge and divide cells to create flexibility
   Color cell backgrounds as another mean of applying
    color accents or creating colored section
   Fixed width vs. stretchy tables
   Cell spacing: white space between cells
   Cell padding: extra room in cells
   Spacing, padding, or an empty cell can be used to create
    a “gutter” – space between columns of copy

   Advanced users: CSS <div> tags
More organization
   Page margins
     Defaultwith HTML is 10 pixels
     Can be changed in properties

   Text breaks
     Enter   for hard break, Enter+Shift for soft
Target Browsers
   Different browsers read HTML differently, so a
    page may look different across machines
   Target a particular browser for an optimal look,
    but ensure your pages works well in others
   Test in both PC and Mac, using IE, Firefox,
    Safari (also Opera and Camino)
   Target browser for this assignment is Safari
     Also   test it in IE and Firefox on Macs and PCs
Links
What Links Do
 Means of navigating the Web
 Major source of interactivity
 Relative links are to pages within your site
 Absolute links are links to other sites
 No broken links!
 Links can open up destinations in the
  same page, or a new page
Types of Links
 Relative: file name, plus any folder path
 Absolute: require http://....
 Graphic or html text
 Anchor link: link to a lower section on the
  same page
 Email link
Getting Inspiration
Resources
   View other sites’ code
   www.designinteract.com
   www.styleboost.com
   www.gettyone.com
   www.corbis.com
   http://www.sxc.hu/
   http://www.imageafter.com
   CSS: www.w3schools.com and www.alistapart.com


   Accessibility: www.w3.org/WAI/Resources
Examples
Web Portfolio

								
To top