Module 3: Creating a CMS or Rapid Prototyping Kit

Purpose

After doing this assignment, you should be able to:

  • Create a rapid prototyping kit to flesh out a few webpages into a complete website
  • Work in an open source content management system environment
  • Understand how to enact a content strategy across an entire website

Technologies

On this module, you are encouraged to use any technologies  available to you, including word processors, web browsers, and online applications (e-mail, chat, blogging, productivity, workflow, etc.). We will cover some of these technologies as we go along, but you can use any that you are proficient with or want to experiment with on this module.

You will definitely need access to the following technologies to complete this module:

  1. A working and recently-updated Internet browser (Google Chrome, Firefox, or Safari are recommended)
  2. A word-processing application that allows for the production of HTML and CSS documents in web-standard formats (TextWrangler for Mac  or Notepad++ for PC are recommended)
  3. A reliable email client (Outlook, Apple’s Mail, or Gmail are recommended)
  4. A reliable File Transfer Protocol (FTP) client (Cyberduck for Mac, WinSCP for PC, or FileZilla for all platforms, or FireFTP if you use the Firefox browser, are recommended; Fetch is another alternative for Mac which I personally prefer because of how usable it is, and it is available for $29)
  5. Possibly: an installation of WordPress, which I must provide for you.

Situation

Now that you have begun to scratch the surface of a real workflow for contemporary web design, it’s time to think about sustainability. As you are learning, contemporary web design is a lot more complicated than creating one HTML page, which was the sole substance of all websites when the Web first began. Now we’ve got two separate languages that allow for hundreds of different of combinations of style and content.

And we haven’t even touched on programming languages like JavaScript and PHP. And we won’t, at least not in this class. So now you have a decision to make, and that decision is: how interactive do you want your site to be?

Your assignment in this module is to design either a rapid prototyping kit (RPK) or workflow for designing the rest of your site using HTML and CSS, or to start work on an installation of an open source CMS (e.g. WordPress) that you will edit for your final project.

Your first step toward doing so, as I mention below, is to think about the content strategy you have developed, and what kind of infrastructure this strategy requires to be operationalized.

Deliverables You Must Produce for this Project

The following must be posted to Blackboard by the following date / time:

  • Homework #3 – 6/4/14 by Midnight ET
  • Send me an email indicating whether you plan to use WordPress or your own code to develop your final website for the class – 6/4/14 by Midnight ET
  • Cover Letter, workflow, and a link to your RPK or CMS – 6/9/14 by Midnight ET

The following must be posted to this course website by the following date / time:

  • A workflow and link to your RPK or CMS – 6/9/14 by Midnight ET
  • An answer to my design question (see below) on the posts of each of your peers – 6/10/14 by Midnight ET

Audiences

The primary audience for your module is myself, an experienced web and UX designer who will assess your webpages for their style in relationship to an audience (see the grading criteria for this module). Potential users of the website you will build around this page are an important audience to consider as well, however.

To Complete This Project (Workflow)

1) 6/4/14 by Midnight Eastern Time >>

Do Homework #3

Send me an email indicating whether you plan to use WordPress or your own code to develop your final website for the class.

2) 6/4/14-6/9/14 >>

When building websites in a low resource environment, such as by oneself, there are basically two options:

Option A – Design from “scratch”

  • This is basically what we’ve doing so far. I put scratch in quotation marks, because code is a shared language, like the syntax of the English language, so unless you are on the team making HTML 6 and CSS 4, you are borrowing.
  • For this option, the only sane choice is to create what is called a “Rapid Prototyping Kit,” or a collection of web files that you can use to build an entire website. At minimum this kit is a CSS stylesheet and series of HTMl files. At maximum, well, it can get a little hairy ;-).
  • Basically, the creation of an RPK is the creation of a workflow for building an entire website. It should look like a “complete draft” of the website you are trying to design. Modern websites typically have the following elements: a header, a footer, central navigation, central content, and sidebar content.
  • You might create a single HTML page and CSS stylesheet that map out what your final site will look like, for example, using the above elements.
  • Or you might also want to try your hand at using a free HTML/CSS template from one of the following sources and developing from there: http://www.1stwebdesigner.com/css/fresh-free-html5-and-css3-templates/ or http://www.free-css.com/.

Option B – Use an open source CMS like WordPress

  • This option is recommended if you’re going to create anything that needs to be regularly updated, that has lots of interactive features (blog, social media, user forums, etc.), and that has a lot of content to manage. My own site is built on WordPress because I update it every time I complete a new project, publish something, or teach a class, and I don’t have time to apply custom code. At the same time, I have done significant design of the interface for the site using CSS.
  • Basically, the workflow for building a WordPress site, as described in my guide, is: installation (which I would do for you), theme selection, plug-in installation, content creation, custom code.

Basically, for this module you must choose one of these options and see it through to its conclusion. Email me if you are having difficulty deciding.

Once you decide, you’ll need to write up a workflow for completing your website for this class. Here is a template:

  • What is additional content that you need to generate (e.g. a bio for an About Me page) and/or find (e.g. a copyright free image of something)?
  • What are additional content strategies you need to develop in order to complete your site (chunks, rules, etc.)?
  • What are all the steps, in order, for completing your website (think: code/edit, FTP/upload, test, repeat)?
  • What are all the basic elements of your website that require design (a header, a footer, central navigation, central content, sidebar content, etc.)?

Another way to represent this workflow is as an annotated mockup or wireframe, basically: a picture of your finished site with notes.

Revise all your documents and hand them in:

  • Cover Letter, workflow, and a link to your RPK or CMS – 6/9/14 by Midnight ET
  • Your workflow and a link to your RPK or CMS is due to this course website by Midnight ET

3) 6/10/14 by Midnight ET >>

Post an answer to the following design question as a comment on the posts of each person’s webpage on this course website.

Each module, I will ask you a design question, which you must post a response to as a comment on the posts of each of your peers. Your design question for this module is the following:

  • Looking at this author’s RPK or CMS and workflow: does their workflow for designing their complete site seem sustainable? And does it demonstrate a consistent content strategy? Why or why not?

Grading Criteria

Can be found here: grading criteria for this module