A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.

Purpose

Wireframes help guide us to:

  • Connect the site’s information architecture to its visual design by showing paths between pages
  • Clarify consistent ways for displaying particular types of information on the user interface
  • Determine intended functionality in the interface
  • Prioritize content through the determination of how much space to allocate to a given item and where that item is located

Creating Wireframes

It’s important to remember that wireframes reveal  where the major navigation and content elements of your site will appear on the page.  Since the goal of the illustrations is not to depict visual design, keep it simple.

  • Do not use colors. Use various gray tones to communicate the differences, do not distract with use of different colors.
  • Do not use images. Images distract from the key focus.  Indicate where you intend to place an image and its size with a rectangular box sized to dimension with an “x” through it.
  • Use only one generic font. Typography is not  part of the wireframing discussion.  Within the wireframes, however, you may still resize the font to indicate various headers and changes in the hierarchy of the text information on the page.

Wireframes are two-dimensional, they don’t do well displaying interactive interface features. Eliminate auto-rotating carousels, accordions, drop-downs and hover states.

Although wireframes differ from site to site, the following elements are typically standard elements:

  • Logo
  • Search field
  • Breadcrumb
  • Headers, including page title as the H1 and subheads H2-Hx
  • Navigation systems, including global navigation and local navigation/li>
  • Body content
  • Share buttons
  • Contact information
  • Footer

Sitemaps are a planning tool used to map out the structure, navigation and page hierarchy of your website, for our purpose.

Typically, sitemapping is one of the first tasks to be completed in any web design and development project. However, sitemaps can be created and updated at any point of the process.

  • Define and organize every page of your website
  • Sort pages from most broad to most defined
  • Keeps your entire design, development and SEO team on track
  • Define the content (copy points, illustrations, widgets, etc.) of an individual page
  • Define the layout or hierarchy of information on a single page
  • Define the final visual layout

Homepage – This page is usually shown at the top of a sitemap. However, depending on the structure of the website, the “homepage” may be depicted as part of the primary navigation.

Primary navigation – Is the main navigation of a  website. These pages are at the top level of your site.

Secondary navigation –  or “secondary pages,” are typically in a dropdown. They are one level deeper than the primary navigation.

Tertiary pages – These pages are located one level deeper than the secondary navigation. Often these pages will not be visible in the site’s navigation. An example of this type of page would be product pages on an e-commerce website. These pages are not in the main navigation but can typically be accessed through a category page that is included in the primary or secondary navigation.

Call-to-action items – Usually highlighted separately, they often take the form of a button you click to complete an action or access a form. Examples of this type of content include a donation button or a shopping cart. Usually these items are located in or near the main navigation of the website.

Special file types – Interactive or downloadable elements such as forms, downloadable PDFs and documents may be identified in the sitemap.

External links – Important links to external websites that are likely to be included in the header or footer of the website such as social media channels and affiliate or partner websites should be included in the sitemap.

Your website may have many more types of pages and or less pages that may include more complex actions. This is all normal. Sitemaps are infinitely adaptable and always unique.

A complex website with expansive information can quickly become challenging. Keeping track of data placement becomes even more difficult as  additional content contributors join the process.

Good sitemaps take a lot of work and a certain level of expertise. An expert is essential  for excellent web design to achieve the best design for user interaction  outcome.

When adding a new section, reevaluate how it  fits into the overall site.

  • Create short concise names (e.g. contacts or events-staff)
  • User lowercase letters, numbers and hyphens (-) for folder and page names.
  • Files with underscores (_) are generally shared files therefore we recommend using hyphens (-) instead.  
  • Do not use spaces in file names since it may not render properly in all browsers.

Websites consist of page files, image files, documents, etc. that are organized into folders. Each folder signifies a section of the website. For example, “Business and Financial Affairs” is the root folder. “Human Resources” is a folder inside the root folder. “Current Employees” is a folder inside of “Human Resources.” And so on. (This is how we get the web address address “http://bfa.sdsu.edu/hr/sdsuid-info.aspx”.)

Each of these folders has multiple files (which are displayed as Web pages in a browser) as well as additional folders (which include more files).

Every Folder of the website will include the following items:

  • index.pcf: The Index file is the “Homepage” for the folder that it lives in. The Index.pcf file name cannot be changed or removed from the section folder.
  • Additional Page Files: Most folders will include additional page files (i.e. about, apply, etc.) All page files end in “.pcf”
  • Additional Folders: The section you are in may have subsections. For example, “Job Seeker” is a subsection of the folder “Human Resources.” If you are in the Human Resources folder, you will see a folder called “Job Seeker.”
  • Images Folder: The images folder is where all images in that section are saved
  • Documents Folder: The “docs” folder is where all documents included in the section are saved (typically these are PDFs or other documents that have been linked to on various pages of the section)

The image below is a screen shot of the root folder of the OU Resources website.

Folders and files