Industrial Design Outreach Style Guide


  1. Page Dimensions

    • Target Window Size: Our target window size will be 1050px wide on standard browsers with an average screen size. In its maximized state, content will be visible at a window size of 1200px wide.
    • Viewable & Maximized Size: The iDo website has a fixed width, so it will always be visible, so long as the screen it is being viewed on is larger than 1050px.
    • Liquid or Fixed Width: Fixed width.
  2. Headers: Headers for feature stories and captions will be distinguished by changes in color and size.
    • Color: C60D44
    • Font-Sizes: 12px, 15px, and 18px.
  3. Sub-Headers: sub-headers for all content featured within the iDo website will be distinguished by a color change and bold typeface.
    • Color: Black
    • Font-Sizes: 12px and 15px.
  4. URL's: URL's featured within body text will be distinguished by a color change.
    • Color: C60D44 & FF6600
    • Font-Sizes: 10px, 12px, and 15px
  5. Navigation
    • Visited links will appear in a light pink (#CB4454), while non-visited links will appear in pink (#C60D44). Users will also see an underline appear when they roll over each link.
    • In addition to color changes and text decorations, it is our goal to establish vertical call out menus for each of the primary links, appearing on the orange navigation bar. Using this structure, users will only be one click away from their desired location. Also at the primary level of navigation is a series of white arrows-showing users that there are multiple levels nested amongst each other.
    • Navigation found within a body of text will be noted by a graphic. There are five specific graphics:
      • Pink Arrow: represents an ability to move forward and backwards.
      • Globe: represents the ability to donate monies online.
      • PDF: informs the user that they are downloading a document to their computer.
      • Survey: informs the user that they are being redirected to a separate website to take a survey.
      • Polaroid: lets the user know that they are leaving our site to visit an external slideshow.
  6. Dimensions
    • Logo: 165px X 101px
    • Banner: 1025px X 71px
    • Text Size: 10px, 12px, 15px, and 18px.
  7. Colors
    • Background Hex Number:
      • Yellow: #FDB913
      • Orange: #FF6600
      • Light Orange: #FFCC99
    • Main Palette Hex Numbers:
      • Yellow: #FDB913
      • Orange: #FF6600
      • Green: #99CC33
      • Pink: #C60D44
    • Accent Hex Numbers:
      • Light Orange: #FFCC99
      • Light pink: #CB4454
      • Green: #99CC33
      • Pink: #C60D44
    • Navigation Hex Number:
      • Orange: #FF6600
      • Medium Orange:#FF6633
      • Light Orange:#FFCC99
    • Text Hex Numbers:
      • Black: #000000
      • White: #FFFFFF
    • Graphic Hex Numbers: Not Applicable
  8. HTML Text
    • Text Treatment
      • Color:
        • Pink: #C60D44
        • Black: #000000
      • Font:
        • Arial, Helvetica, Sans-serif
      • Size:
        • 10px
        • 12px
        • 15px
        • 18px
  9. Graphic Treatment
    • Graphic Type
      • HTML Fonts: Arial, Helvetica, or any available sans-serif
      • Graphical Fonts: Arial
      • Point Sizes:
        • 10px
        • 12px
        • 15px
        • 18px
          • Universal
            • Font-Sizes:
              • Bread Crumb: 13px/Bold
              • Navigation: 12px
              • Body Text: 12px and 15px
              • A-Head: 15px and 18px
              • B-Head: 12px and 15px
              • Quote/Caption Text: 12px
              • Footer: 10px and 12px
              • Photo Counter: 12px
        • Colors
          • Accent-Magenta: #C60D44
          • Primary/Accent-Orange: #FF6600
          • Primary/Accent-Golden Yellow: #FDB913
          • Accent-Florescent Green: #99CC33
          • Text-Black: #000000
          • Logo-White: #FFFFFF
  10. Photo/image treatment
    • Graphic Effects
      • Flash Motion Tween
        • Home Page: A motion tween of scrolling photos will be created in Flash and will appear on the main page-giving the viewer a visual look into the program.
        • Levels 1, 2 and 3: A similar motion tween will be created for layout/levels 1, 2 and 3.
      • Gallery Slide Show
        • Much like the motion tweens, images of student work will be set up in individual galleries, however, viewers will be allowed to scroll through them at their own pace, instead of a specified pace.
      • Video
        • The community bench videos, created by Dylan will upload to a specified page within the video section of the website. Its intended player will be You Tube.
      • Text wrap with a 1/4" gutter on specified pages.
      • Key lines are used in the navigation bar and breadcrumb area to create a break between each individual link.
      • All photos will have a 1/4" gutter and/or border surrounding them where it is deemed appropriate. Photos used in Flash motion tweens will be modified appropriately based on size. No other transformations to the appearance of the image will be made.
  11. Embellishments
    • Navigation:
      • Rollovers: When rolled over the background of a link will change color, indicating that it is a working piece of the navigation.
        • Links within the body text will have a graphic decoration created specifically for that link.
          • Pink Arrow: represents an ability to move forward and backwards.
          • Globe:represents the ability to donate monies online.
          • PDF: informs the user that they are downloading a document to their computer.
          • Survey: informs the user that they are being redirected to a separate website to take a survey.
          • Polaroid: lets the user know that they are leaving our site to visit an external slideshow.
  12. HTML Code
    • Flash
    • You Tube

    • Google Search

  13. Naming Conventions
    • File TITLE tags
      • The title of each page appears in the title bar by itself, without the affiliation of the program name.
    • For images
      • Images are named by the section in which they appear and in chronilogical order. Ex: online_community_img_1.png, online_community_img_2.png, online_community_img_3.png, etc.
      • Images are stored in the images folder, which is located inside the main directory.
    • For Cascading Style Sheets
      • CSS Naming Conventions: CSS documents correspond to the matching html document. An example of this naming convention would be: benefit.html and benefit.css.
      • CSS Styles: For additional information about text sizes and colors please see the beginning sections of this document.
    • Files/folders
      • Prefixes/Suffixes: Prefixes and suffixes are not used in identifying folders within the website.
  14. Formating of Code
    • Comment Tags
      • Comment tags are used prodominently througout each html. page to identify funcitonality, such as levels of navigation, where bread crumbs start and end, etc.
    • Absolute vs. relative links
      • Absolute tags are used in all places except for the navigation. Navigation that appears in the right hand side bar is positioned relatively because of it use of flyouts.
    • Definition of Templates
      • All templates have a banner, logo, breadcrumb, and side bar navigation that is positioned the same as every other page.
      • On the four main pages where a Flash slide show appears, the layout begins to differ slightly. On these pages all layouts call for a Flash slide show that appears just below the breadcrumb. Also on all of these layouts, the main body text appears below the Flash slideshow, surrounded by a broken line. However, secondary elements vary from one layout to the next. Please see below for variations.
        • Layout One: Below the main body contnet in this layout should appear four smaller images with quotes relating to the images.
        • Layout Two: To the right of the main body content appears two smaller images with quotes and/or captions relating to the images.
        • Layout Three: Below the main body content in layout three appears two larger images which relate to the following press release summaries.
        • Layout Four: Below the flash slide show appears the body content wrapped around one single image that relates to the text. No additional images or captions appear on this page.
      • Secondary Layouts
        • Layout Five: To the right of the main body content in layout five appears a larger image. Below the main body content appears a caption and/or quote that relates to the image.
        • Layout Six: For images and video that appear in our galleries there is a main content box that appears centered below the breadcrumb. This is also the area where the image or video appears. Below the appropriate media appears a brief description of the project and/or video footage.
        • Layout Seven: To the right of the main body content appears a column of links that lead to pdf documents relating to content within the site.
        • Layout Eight: To the left of the main body content appears a small picture of the featured person with their contact information below.
        • Layout Nine: Below the breadcrumb appears the main body of content without any secondary images or text.
  15. Site Organization
    • Site Structure
      • ido_website folder: Contains all html, pdf, swf, and javascript files.
        • css folder: Contains all css files.
        • Images folder: Conatins all image files found within the website.

  Go to Top

iDo:Industrial Design Outreach | Fine Arts Building 419 | 1600 Holloway Avenue San Francisco, CA 94132