Site Design

Mockups and wireframe are below. 

Specifications in addition to those depicted:

  • Lucida Grande (or Lucida Sans) used and recommended for the main pages.
  • Helvetica is the used for contact info. on the sidebar.
  • Header, sidebar and footer need to be in their own modules, i.e. one change affects all pages.
  • The post’s image needs to show up on Facebook when the post is “Liked” or shared on Facebook.

Please click the images for larger views.

This is the style guide for the main page.

Note: The height of the blog post container (white box with rounded corners that contains the text and images) will need to adjust the size of the content.

Style Guide - Main Page

Editing the navigation and content on the periphery of the site needs to be set up to be easily changed by the site owners. The current use of modules for header, sidebar, footer, etc. works well.

Per the style guide for the main page, the last 6 past blog posts are listed by title, with the first 3 lines of the post, and an “READ” option.  When a past blog post is opened, the site defaults to the standard TypePad blog functionality, i.e. blog posts are sequential and can be navigated with arrows at the top of each post.  Here is a mock-up of an “open” blog post.

Blog Page Example

This is the style guide for a static page. On static pages, the height of the container on would adapt (get bigger or smaller) based on the amount of text and images.

Style Guide - Static Page

This is a dropdown menu mock-up.  In the top navigation bar, Services, FAQs, and Contact would have dropdown menus.

Dropdown Menu Mock-up

Here is a wireframe of the site’s navigation.

Wireframe

Our Team
Work: It's Personal