Guest

Cisco.com User Experience Guidelines and Standards

Layout Your Pages

Once you've developed the information architecture and understand the navigation, the next important step in developing your website is deciding how to design the pages. This section explains the layout options and page elements that are available to you, as well as offering guidance on choosing photography, understanding the color palette, using graphics and illustrations, using sub-brands. It also provides access to the icon library.

The following column widths in pixels provide guidance when selecting elements for the pages to make sure they’ll fit on the page.



Click for larger image



Page Layout Options

This section describes the types of content created and the layout options available for each page level.



Page Elements

This section provides design guidance and sample Content CSS implementation code for the following page elements. This is sample code taken from the Content CSS module library and is provided to make it more convenient to build your pages.

Note: You must already be using Content CSS and have completed the CUEG and CSS training before using the code snippets. Copying and pasting the code alone will not create Cisco-approved UE designs. You must also be using the correct Content CSS setup files and wrapper divs.

For more information on the engagement process and for a complete description of the rules and responsibilities for content authors using Content CSS see Engage with UE.




Visual Imagery

Read this section before using photography, graphics, illustrations, icons, or sub-brands on your pages.