Agency Hub Site Design 101

Posted by at 16 February, 2010, 8:00 am

There is a popular saying in the blogosphere, “Content is king.” While in many instances this is very true, what can also be said truthfully is that “Design is queen.”

Having a good set of design elements and creating an aesthetically pleasing experience for the end user is not always the highest priority of content creators. Still, it is not something that should be overlooked because the truth is that the quality of a design is an initial indicator of an the content creator’s credibility as an authority on the subject matter.

Here is a list of some simple tips when designing the look and defining the usability of your Agency Hub:

Design Elements

Colors

  • Learn the basics of color theory
  • In order to determine compatible colors, reference a color wheel
  • Your primary content area should have a light color background with a dark color font
  • Your hyperlinks should be a different color than the rest of your text
  • Blue is considered the best color for links (it is what Google and the vast majority of the web uses)

Back to the top

Content

  • The primary content area should be in the center of the screen
  • Subscription methods to dynamic content, either RSS Feeds or E-Mails, should be visible “above the fold”
  • Your content should not look like an ad
  • Your main content area and sidebar content areas should be clearly defined
  • There should be slight style differences between the main content area and the sidebar content area
  • Images in content should be aligned and buffered with white space

Back to the top

Font

  • Choose a basic font (ex. Times News Roman, Arial) that is compatible with all browsers and mobile devices for content
  • The font size should be a minimum of 12 points to be sure it is readable on all display types
  • When using specialized fonts (ex. Igloo, Airwolf) for titles convert the titles into graphics

Back to the top

Layout

  • Main content areas should be the widest container on the page
  • Sidebar content should not extend past the main content area
  • Sidebar content should have a different background color than the main content area, even if it is just a shade or two different
  • Layout should be scaled to a 1024X768 screen resolution, but be mindful that there are both bigger and smaller resolutions being used so centering your site will help maintain the focus on your main content area
  • Featured content should be in a clearly marked area above the fold

Back to the top

Navigation

  • Navigation for the entire site should be visible “above the fold”
  • Navigation should maintain the same location throughout the site layout
  • Navigation should be easily readable as both active and visited links
  • Navigation should be clear and concise
  • If possible, utilize “breadcrumbs” in your navigation menu so users know exactly where they are on your site

Back to the top

Usability

  • Your site should be “browser friendly” and not coded for one specific browser or another
  • It is important to understand that both Javascript and Flash elements may not be viewable by all users
  • While Flash based sites are fancy and eye appealing, mobile users, in all likelihood, will not be able to view anything since the majority of mobile platforms currently do not support Flash
  • Form labels on your site should be placed above the field
  • Blue is considered the best color for links (it is what Google and the vast majority of the web uses)
  • White space between elements helps declutter a site and improves viewer understanding of content differences
  • The majority of users are “ad blind” and will not only not “see” an ad but also anything that looks like an ad so be sure that your content is not too similar to an ad

Back to the top

About the author

Dave Konig wrote 204 articles on this blog.

Dave has been involved in Social Media since 2005 through the current major services and some defunct ones as well. During this time he has been able to hone the craft by testing out the theories of others, creating his own philosophies, and gathering a better understanding of the mediums involved through networking and most importantly actual practice.

Related posts:

  1. Design and Production of Social Media Content

Category : 100 Series | Social Media | Tutorials

4 Responses to “Agency Hub Site Design 101”


Greg Friese February 16, 2010

What are breadcrumbs for the navigation menu? I am not familiar with that concept. Thanks.

    DavidKonig February 16, 2010

    Breadcrumbs is a dynamic navigational menu used on primarily static sites to show a user where they are and how they got there, hence the name referring to a method to get back to where you had come from on a site.