MAT-225 :: PROJECT 2

WordPress : First site using themes and plugins

20% of Semester Grade

Overview

You will create a completely responsive WordPress website featuring a minimum of 6 places of interest in the greater San Diego area.

MAT-290 PORTFOLIO STUDENT ALTERNATIVE:

If you are currently enrolled in “MAT-290 Portfolio”, you have the option of instead creating a portfolio site that can serve as a 290 portfolio presentation tool. It MUST, however, still be a WordPress site that conforms to all parameters of this assignment, with exception of the topic. Single-page scrolling portfolios will not be considered.


Objectives

  • to explore using different themes before deciding on a final choice
  • to explore a variety of plugins and how they work
  • to get a basic understanding of WordPress’ major components (posts, pages, widgets, plugins, etc.)
  • learn how to modify/style sections of WordPress sites
  • learn how different themes affect content delivery

A Quick Walk-Through with Examples

NOTE: a few things have been updated since this overview was made. For instance, MAT-290 Portfolio students can use this assignment to create a portfolio instead of SD places. Also, required and recommended plugins have changed, so READ this actual page below for requirements


Technical Requirements

(There are also Content Requirements below this section, so don’t miss them.)

Instructor Administrative Login!

You are REQUIRED to create an administrator-level login account for your WordPress site, as follows:

  • username: leigh
  • password: SEE CANVAS ANNOUNCEMENT

Theme:

After getting up-and-running with some basic testing data, you need to explore how different themes will work with your content and choose one to use. You should NOT pay for a theme to complete this assignment.

Required Plugins:

  1. WP Example Content
  2. Disable Comments (see how this works even if you deactivate it later. But definitely keep it activated if you don’t want comments on the site!)
  3. Contact form 7 or Fast Secure Contact Form (more configurable and fully WCAG 2.0 accessible) You MUST use a contact form.
  4. Gallery (you can use other gallery plugin besides this one)
  5. Wen’s Responsive Column Layout Shortcode (Experiment with this or some other responsive column plugin even if you deactivate later.)
  6. Ability to pull posts from select categories within pages (try this and see how it works)
  7. At least one additional plugin of your choice that enhances usability

Suggested Optional Plugins:

Minimum Layout Components:

  • Header
  • Navigation
  • Content Area
  • Footer (or sidebar)

* Each component should be content-substantial in some way. Don’t make a section that you leave empty or full of useless widgets. A couple of widget examples not useful in this assignment: Calendar and Archives. You just don’t have enough content yet.

Styling:

  • Responsive theme required
  • Good use of typography. If you like a theme that has inappropriate typography for your project, you a Google fonts plugin.

Design:

  • Original imagery unless from copyright-free or free-to-use sources (or your own personal photos)
  • Google fonts are required (minimum of 1)… Please, no hard-to-read amateurish script fonts! It’s just plain bad graphic design. (Hint: try different font plugins if your theme doesn’t already have good fonts….)
  • Stick to a succinct color palate.
  • Utilize space well. Fill the space with content; don’t leave awkward voids where content should be.

Lorem Ipsum Warning:

DO NOT leave lorem ipsum dummy text in this assignment. You should author real content. Remember that images go a LONG way in helping you make short text blocks fill space.


Content Requirements

Concept

You will create a site featuring a minimum of 6 places of interest in the greater San Diego area. This area can extend from North County to the Mexican border, and all the way out to Salton Sea if you wish…or it can simply be places in your neighborhood. The locations can be any combination places of natural importance (ex: Salton Sea, Cuyumaca State Park, etc.), hidden gems (restaurants, hiking trails, etc.), tourist attractions (Balboa Park, Hotel Del, etc.),  unexpected places (a special tree, bridges, etc.). The overarching theme of the site/places can be one or more of the following:

  • Unremarkable, forgettable places. This is likely a critique of things that don’t hold the interest they are purported to have.
  • Awesome or inspiring places. These can be well-known areas or ones you have found on your own.
  • Awful places. Obviously a harsh critique of spots to never visit.

MAT-290 Students

If you are a 290 student making a portfolio instead, you should translate the “places” into portfolio items that can be categorized. If you have different types of portfolio work, they can be categorized and possibly cross-listed. For instance, if you worked on a website for another class where you were also responsible for logo design, you can categorize that portfolio post item as something like “web” and “graphic design”.

BE SURE to make full posts with full project descriptions of your work, though! DO NOT make a post that only has an image of the portfolio piece. If you have a hard time coming up with something to say, consider the following:

  • What were the purposes, goals, or objectives of the work?
  • What were the medium, tools, or technologies used to make it? What was your role in the project?
    • were you the lead?
    • was this a collaborative project?
    • did you explore UI/UX?
  • Do you have additional process documents you could post to show a potential employer or client how you approach design projects?
  • And so on….

If you also want to have a page where people aren’t prompted to read, you can create a gallery page that, for instance, would give you a larger graphic with options to link to the piece’s actual page. The NextGen gallery plugin is a great tool for this kind of behavior. You do, however, have to pay for a pro version if you want to unlock all of the types of galleries it has to offer. There are a lot of gallery plugins out there to explore, though, that are free.

Pages (for everyone)

  • Landing page with
    • 1) a slider or grid of site highlights and
    • 2) other intro info as you deem fit
  • Features or Category page with brief blurb/excerpt for each item. This can also be your natural WordPress designated “blog” page, but I suggest that you assign the blog to a page with a different name if you do this. (NOTE: You can use this as your landing page if it makes sense in your theme)
  • Individual article/journal posts for each featured place/piece of interest.
    • Minimum of 6 featured places / pages.
    • Each article/journal post will implement a gallery or slider with images of the destination (minimum 3 images/gallery) and/or embeded video
    • Each location should include a goole map if you are doing the San Diego places topic (either embeded or a link to the map)
  • Contact page
  • Contributor page (not necessary for portfolios)

Resources

Official WordPress Codex

Some Good Plugins

CSS3 Design Tools

Here are some good CSS3 resources to help you design quickly without too much focus on fussy raster image creation details (drop-shadows, rounded corners, etc).

Free Web Fonts

http://www.google.com/webfonts

Background Image Patterns:

Free Stock Images:

Free Creative Commons or Public Domain Video Recourses:

Digital Art, Design, and Communication Education