Web Design Theory - Day 2

Content Management Systems

CMS's empower clients to easily create and update the content on their website. This doesn't mean that ALL content is editable within the CMS but the majority of content is.

Enterprise Level

  • OpenText (Red Hat)
  • SiteCore
  • Adobe DayCQ
  • Microsoft Share Point
  • Many Many More



  • Written in PHP, Open Source
  • Initial release in 2003
  • Used by more than 18.9% of the top 10 million websites as of August 2013
  • Over 26,000 plugins available
  • Thousands of free themes available
  • Hosted version available at Wordpress.com
  • Great for smaller, simple sites



  • Written in PHP, Open Source
  • Initial release in 2005
  • One of the most popular worldwide open source content management systems for managing Web sites
  • 1000's of plugins/extensions available
  • Thousands of free themes available
  • Great for a variety of sites



  • Written in PHP, Open Source
  • Initial release in 2001
  • Over 30,000 free contributed modules
  • Over 1,000 free themes available
  • Very Powerful
  • Steep Learning Curve
  • Powers the Internet of Things

There are also thousands of pay templates available

Site Maps

What is a site map?

A site map is like a floor plan for your site. Site maps give you a visual representation of the site's organization and how different sections are linked together.

For more detail take a minute to read - UX 101: The Site Map

SEO Sitemaps

An SEO sitemap is a way to tell search engines about the pages on your site. It's similar to a UX sitemap but much more detailed and has to be created in a specific XML structure. You'll learn more about this in your SEO class.

For more info review Google's page About Sitemaps.

Lets take a look at a Site Map

Lets Make a Site Map

The first step in making a site map is identifying the content and pages required for the site. Lets review the current Leverage Point Learning website and make a sitemap for it.

Let's Go Car Shopping

Farmer Jones Needs a New Website

Farmer Jones Carz

Review The Competition

Spend 30 to 45 minutes, in small groups (3 or 4) or individually and review other car dealership sites. Identify the elements that you believe should be present in Farmer Jones new website.

Lets Make a Site Map

Using your knowledge from reviewing the competition lets build an ideal site map for Farmer Jones together.


What is a Wireframe

A wireframe is a skeleton of a page. It shows the priority and the organization of things on the screen and how users will get to other parts of the site.

For more detail take a minute to read - UX 101: The Wireframe

Wireframe Tools

There are many tools available to create professional wireframes but the 2 most prevalent in the industry today are:

But All You Really Need Is Pen & Paper

If you're working on smaller sites and a full UX Wireframe doc is not needed as a deliverable, all you really need is to spend some time thinking through and sketching your ideas until you're happy. This is also much faster than using any software so all wireframes should start with pen and paper and then move onto another tool if needed.

Online Tools

• There are a bunch of online tools available to create wireframes. You can get a good list from Sitepoint.

• I personally use Adobe Illustrator to do sitemaps and wireframe diagrams.
• It will be up to you as to what you want to use.

Lets take a look at some wireframes

The Leverage Point Learning website has three basic wireframes.

Farmer Jones Needs A Homepage

Using the site map we created lets create a wireframe for the homepage of our new site together.

Farmer Jones Carz

Farmer Jones Needs To Sell Some Carz!

Now that we have a homepage lets create a product page to showcase his cars. Break out into small teams of 3 or 4 to create the product details wireframe.

  • Start with paper
  • Create a wireframe on one of the white boards

We'll compare and discuss these wireframes together.

In Class Exercise

A local realtor needs a new website. Following the same process we did today you need to:

  • Review realtor websites throughout North America, don't limit yourself to just Calgary
  • Create a basic site map outlining your recommended site structure
  • Create a wireframe for your new homepage
  • Create a wireframe for a house detail page
  • Every person is responsible for their own site map and wireframes

We'll be working on this a lot in class and you're free to discuss with others ask questions about this while working.

Extra Exercises

If you have extra time and have already emailed me the first assignment we'll be repeating the same exercise but in a different context. Choose any of the next options to work on.

Sell Some Yogurt

In this industry we're constantly asked to create brand websites for everyday consumer items. How would you represent yogurt online? Note with this kind of site you're talking about the product but you can't actually buy it online.

Sell Some T-Shirts

The internets ecommerce darling. Create your own ecommerce store and sell some T-shirts online.

Sell Yourself

Create a portfolio site for yourself, how would you represent yourself online? You'll all need to create a site like this eventually.


Read chapters 3 and 4 of
"Information Architecture - Blueprints for the Web"

See You Tomorrow