DSGN270
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
Wordpress
- 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
Joomla
- 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
Drupal
- 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
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.
Wireframes
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 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.
Tonight
Read chapters 3 and 4 of"Information Architecture - Blueprints for the Web"