CMD 308 Web Design and Social Media SU17


Class meeting times
SEC. A1 MON WED TH 6:00-9:30P.M.
Rowley G215

Office Hours
MON 5:00-6:00, after class
Gailhac G106,  703-284-1652
Other times by appointment.


Required Text: Online readings as assigned
Recommended Text:
1) WordPress:Visual Quickstart Guide
Photoshop:Visual Quickstart Guide

Required Supplies: At least one 32GB+ USB Drive.
Two are recommended!
Recommended: Kingston Digital DataTraveler SE9 32GB USB 2.0 Flash Drive!

Educational priced software:
Journey Ed
Apple Education Store"

Marymount WordPress
MU Commons login:

SU17Student Website URLs FA08 SU09 SU10 SU11 SU12 FA12 FA13 FA14 FA15 FA16

Creative Commons


Flash Kit

Inexpensive stock images

Clip art, photos,
sounds, and video clips


Dreamweaver Showcase

1. Web Monkey

Citing other Sites, Photos & Sources
Writing for the Web

1. Good Sites Bad Sites
2. Layout
3. Typography
4. Color
5. Navigation

Graphics & photos

Keywords & Description
Search engine registration

Dreamweaver Support
On-line Tutorials

Weekly Videos & Readings

Due start of class each Wednesday
posted to your class website under link "Readings"

1. "Watch" video and post 3 key points – things you learned from the video.

2. Read: Facebook “satire” tag could wipe out the Internet’s terriblehoax-news industry article and explain why you think the satire tag is a good or not. Cite at least 2 additional articles in support of your thoughts.

3. Read: and explain what 4can is. And explain how this effects the way graphic designers work with their clients and client files of confidentiality. Cite at least 2 additional articles in support of your thoughts

Read: What would be a reason you think a country should censure the Internet. Do you believe the Internet should be censured by authorities or not. Site at least 2 additional articles in defensive of your opinion.

2. Read: thinking/insights/effective-nonprofit-website-design-10-case-studies and explain what each of the following does for a nonprofit website: design; Engagement; Imagery; Storytelling; and sociability.
Pick your favorite case study website
and explain why you found it effective.

3. Read: and explain how reading this article will affect your approach to organizing website content. Then list the six particle tips and seven processes under "Wrapping it up" the author provides you.

1. Read:
and explain if you think this is a brilliant leveraging of a companies branding or exploitation of teenager social media users and why?

2. Read and explain The Majority Illusion in Social Networks by Lerman. Also explain how social media networks can be used for social activism. Provide a breakdown of the site navigation.

3. Read the following 4 articles and explain what you learned:

3. Visit and review the webby awarding winning websites for:
1. Best Use of Photography
2. Best User Experience
3. Best Writing (Editorial)

For each explain why they are particular effective in meeting the objectives of the website and providing a viewer added value experience.

2. Read:
How the Internet’s most earnest evangelist became its fiercest critic.

2a. Answerer the following questions:
“It will help us feel connected, but will it help us feel loved?” he wrote. “It will help us uncover facts, but will it help us be wise?”

2b. Explain why you agree or disagree with this statement: “We have become slaves to devices that addict us,” Harris said. “But everyone is the custodian of his own mind. We all have the potential to be the steward of our own consciousness.” Include 3 cited sources besides the article that support your answer/view.


SUGGESTED: Readings:
1.Visit: (Chrome Browser required) and write a review of you experience including which search words you chose and why and how the overall viewing experience affected you.

2: Read:
and explain why you think add blocking apps are a good or bad thing and the potential longterm impact of ad blockers on Internet content. Cite one additional article on this subject in your answer.

3.The voice of Twitter users:

4. How artificial intelligence is moving from the lab to your kid’s playroom

Due every class posted to your class website under a link "Inspiration" - add a link to your class blog to a well designed and well written educational, topical, or nonprofit organization Website you find inspirational. Explain why and be prepared to present to the class why the site is effective and how it adds value to you when visiting the site.


    May 30 May 31 June 1 June 2 June 3
June 4 June 5 June 6 June 7 June 8 June 9 June 10
June 11 June 12 June 13 June 14 June 15 June 16 June 17
June 18 June 19
June 20 June 21

June 22

June 23 June 23

WEEK ONE & TWO: 5/22 - 6/1

Course Introduction.
What this class will achieve.
Discuss syllabus.

The Internet and the World Wide
Web Browser
WordPress Lecture notes:
Open Source Software Lecture notes
WordPress & Themes Lecture notes:

The phases of the Web design process include the following steps:

  1. Project Definition - audience and objectives
  2. Wireframes and Site Architecture – navigation
  3. Content development - text, images, graphics and media
  4. Visual Design – appearance of pages
  5. Site Development – adding content and functionality
  6. Site Testing – by intended audience
  7. Launch and Site Updating

WordPress - setting up your course website – organized and easy to navigate
Link to WordPress How-To

Due 5/24 Create a course website on
per in class instructions using the Cutline theme:

  1. Add an "Inspiration" page and an "Exploration Website" page
  2. Create a post with the following terms and definitions:

    The Internet
    World Wide
    Web Browser
    Open Source Software

  3. Select appropriate type styles and fonts for for your terms and definitions
  4. Elminate sidebar -
  5. Add a featured image related to web design and the Internet - a copyright free image
    ...Sized to fit the home page slideshow without being distorted - squished or stretched
    ...Using Mac Preview or Windows Photo Gallery or Lightroom

    Image sources: Public domain, royalty free and royalty stock:

Due 5/24: Feature photo and slider exercise - as discussed in class
Choose a NOAA Ocean Exploration website/blog – a site without a slideshow at the top of the page from:

  1. Create a new WordPress website
  2. Name your new WordPress site "your last name exploration"
    Using Mac Preview or Windows Photo Gallery or Lightroom
  3. On your course website "Exploration Website" page add two links:
    ...1) A link to the original NOAA exploration website and
    ...2) A link to your new WordPress website "your last name exploration"
  4. Change the Website theme to Organic Bold Theme:

Selecting Homepage slideshow images:

  1. Create a home page Featured Slideshow for you exploration website
  2. Select 3 meaningful images from your NOAA exploration website
  3. Size/crop/scale and format your images to fit the homepage slider – 1200 pixels wide x consistent height
    ...1) All three images have to be the same size
    ...2) None of the images can be distorted – squished or stretched
  4. In WordPress create post for each slideshow image
    ...1) Create a new "Category" named "Home page slideshow"
    ...2) In each post add the slideshow images as "Featured Images"
    ...3) Select the "Home page slideshow" category in each of the three posts
    ...5) "Publish" each of the three posts
  5. In WordPress "Appearance" - "Theme Options" - "Slider" tab - "Featured Slideshow Category" - select "Home page slideshow"
    ...1) "Save Options"

Due 5/24: Navigation for websites exercise - as discussed in class

  1. Create home page navigation for you exploration website
  2. Create 3 new pages with meaningful navigation bar link titles plus - e.g. "Explorers" or "Mission" or "Findings" etc.
    .... ..A link for "Home" and "Blog" and "Contact"
  3. Under "Appearance" - Menus" - "Menu Name" - type "main menu"
    ...1) "Create menu"
    ...2) Bottom of page select both:
    .... ..Auto add pages - "Automatically add new top-level pages to this menu" and "
  4. For each page Turning off comments and ping backs - "Pages" - "Quick Edit"
  5. Eliminate the sidebar on each page - "Appearance" - Widgets" - "Delete" widgets

Due 5/24: Header website exercise - as discussed in class

  1. Create a header Image for you exploration website
  2. Size/crop/scale and format your images to fit the homepage slider – 300 pixels wide x 80 pixels high
  3. Under "Appearance" - "Customize" - "Header Image"
    ...1) "Add new image" - upload your logo branding symbol
    ...2) "Save"

Due 5/25: Copy editing for websites exercise - as discussed in class

Writing for websites:

Inverted pyramid:
Inverted pyramid diagram
Active voice:
Copy sources and citations: Citing photographs, websites, blogs and other sources

  1. Edit copy from your selected NOAA Exploration website for use on your exploration website
  2. Select engaging and memorable copy that will be educational – from multiple pages on the NOAA website
    .... ..Copy for each of your website's three pages and blog page
  3. Edit the selected copy using:
    ...1) Active voice and
    ...2) Inverted pyramid style
  4. Add the edited copy to each of the appropriate pages on your exploration website
  5. Add three engaging meaningful subheads to break up the copy on each page
  6. "Update" each page

Due 5/25: Websites images exercise - as discussed in class

  1. Select images from your selected NOAA Exploration website for use on your exploration website
  2. Select 3 images for each of your three webapages – from multiple page/sources on the NOAA website
    ...Meaningful, engaging and memorable images that will be educational
  3. Size/crop/scale and format your images
  4. Add the images to each of the appropriate pages on your exploration website
  5. For each page make one image the page "Featured Image"
  6. For each page upload the other two images within the text
  7. Set image text wrap around for each image
  8. "Update" each page

No Class 5/29 Memorial Day

Due 5/31 - 6/1: Finish exploration website

  1. On your exploration "Blog" page change "Page Contribute" - "Template" to "Blog"
  2. Add three blog postings on your exploration website "Blog" page
  3. Activate "Plugins" - "Contact Form 7"
    ...Copy the short code provided
    ...Paste the short code on your exploration website "Contact" page
  4. Update the homepage header to include a logo
  5. Check that everything assigned is on your exploration website
  6. Check that all exercise requirements were done correctly
  7. Check that all links on your entire website are working
  8. For extra credit add relevant video to one of your pages - Use embed video


WEEK THREE & FOUR: 6/5-6/15

Due 6/5: Web and socail media campaign

Posted on your course website under a new tab "Campaign"

1) For your campaign:
    a. Campaign hashtag/name
    c. Objective of your campaign

2) For your campaign website:
    a. Revised website definition:link to assignment

3) For your campaign social media: link to assignment
    a.  Goals of your social media - not for your camping but what your social media can do to help meet your campaign goals
    b.  Potential partners e.g. clubs, orgs etc.
    c.  How you are going to energize (how you are going to get your trageted auniences to participant in your social media channels) 
    d.  How your going to stick out be heard/seen through the social media clutter

link to assignment

Website based social media cause campaign

The most Influential Cause Marketing Campaigns:
Using Social media for digital advocacy:
8 Tips for sucessful socail media campaigns:
5 Tips for running socail media campaigns:

Facebook: As a rule of thumb if you are posting a page for your interest, i.e. a gym you attend, or a place you get your coffee, create a Fan group – go to groups in your home page and start a group for your interest- then invite all your friends to join you!

If you are posting for your cause/organization mostly for a posting and a listing under a category – a business page may be what you want

Facebook page for a business:
Facebook page for a nonprofit organization:

Instagram: A Beginner’s Guide To Getting Your Cause on Instagram
Instagram for Nonprofits: 4 Tips to Get You Started

Snapchat: For cuase campaings

Due 6/7 & 8: Create your web and socail media campaign website

Examples of strong copy appeal and effective use of supporting visuals:

1. Create a home page with:

  1. Header logo image - that identifies whose website it is
  2. A slider with 3 call-to-action" featured images slider with call-to-action copy
    Enticing copy to meet your campaign objectives
  3. 3 relevant campaing goal pages different from the slider images
  4. Add a featured inage to each of the three pages
  5. Have the thumbnail of the featured image for each of the three pages appear under the large featured image on the homepage
  6. Add a contact page with with the "Contact 7" plugin form on the page

2. On each of the three pages linked to the homepage add:

  1. Add 3 subheads
  2. Add copy – written in active voice and inverted pyramid style
  3. Add 3 smaller supporting images with captions
  4. Set copy to warp around the three smaller images
  5. Include relevant 1st person quotes on each page

3. Add a sidebar to each of the three pages with:

Using the "Shortcodes Ultimate" plugin

  1. a block of call-to-action-copy
  2. Three links to 3 relevant websites and
  3. A thumbnail image that links to a relevant website

4. Add links to your social media pages where appropriate

Due 6/9, 12, 13 and 14 TBD: Web and socail media campaing - social media pages


WEEK FIVE 6/19, 21, 22

Due 6/19, 21, 22 TBD: Personal portfolio webiste

Choose a web hosting service for your portfolio:
Possible portfolio web host or service 

Behance (comes with Adobe creative suite)
BLU Domain

10 Awesome Solutions for Creating Your Online Portfolio

The 9 Best Services for Building an Online Portfolio

Your online portfolios should have the following:

Home page:
1) White space between each thumbnail - add the white space in the jpeg you create


2) The arrangement and relative size of your thumbnails should create a pleasing well balanced designed page 
that creates eye flow - no singular thumbnail should dominate the page

3) Links on home page need to include:: (for this class)

Design Philosophy:

Project pages:
1) Sizing: Each piece needs to be large enough to be easily scene so your design of the project is appreciated.

Example: Click on any project on this page to see the size: 

2) Multiple page projects: of a brochure or website etc should be smaller – There is no need to show every page.

Example: h
Example: (scroll down on this page)

3) Descriptions: only include:
Use typography that doesn’t over shadow your design pieces - that is subtle and sophisticated and not horsey  

Client name - no mention of being a school project
What it is e.g. poster, calendar, brochure etc
What you did - e.g. design and photography or design writing and illustration or producer videography and editing or design and editing etc.

JUNE 22nd FINAL EXAM: completed portfolio website due online