CMD 308 Web Design and Social Media FA18


Class meeting times
SEC. A WED6:00-9:30P.M.
Rowley G215

Office Hours
TU 1:00-3:00, WED 6:00-7:00 TH 9:00-10:00
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:
Access to your Marymount Google drive with enough room for this course
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:

FA18 Student Website URLs FA08 SU09 SU10 SU11 SU12 FA12 FA13 FA14 FA15 FA16 SU17 FA17

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 "Weekly"

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

DUE WEEK 9/11:
Read: and explain why you think the news with links to "related articles" is a good or not. Cite at least 2 additional articles in support of your thoughts.

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 at least 1 additional article in support of your thoughts

DUE WEEK 9/18:
1. 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. Cite at least 2 additional articles in support of your opinion.

DUE WEEK 9/25:
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.

2. Read: and
explain how reading this article will affect your approach to organizing website content. 2b.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. And explain how social media networks can be used for social activism. Cite at least 2 additional articles on the use of social media activism.

3. Read each of the following articles and explain what you learned that will be helpful for you when developing your Web ans social media campaign:
The most Influential Cause Marketing Campaigns:
Using Social media for digital advocacy:
8 Tips for sucessful social media campaigns:
5 Tips for running social media campaigns:

DUE WEEK 10/9:
Visit each of these sites, pick two and explain for each the campaign goal and how the copy and visuals are helping to meet the goals.

DUE WEEK 10/16:
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

DUE WEEK 10/23:
After reading this articles do you agree with the idea of "To address this, the society has also recommended the introduction of a pop-up warning to alert users that they have been online for too long." and why or why not? Cite at least 2 additional articles that support your view.

2. After reading this articles explain how social media is affects your brain:

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

1a. 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?”

1b. 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.

DUE Week 11/6:
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.

DUE Week 11/13:
Read How artificial intelligence is moving from the lab to your kid’s playroom
And explain why you agree or disagree that AI enables toys are good thing or not. Include 2 cited sources besides the article that support your answer/view.

DUE Week 11/20:

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.
WEEK 1-5 Exercises and NOAA Exploration website

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 8/28 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
    UI - User interface
    UX - User experience
    Open Source Software

  3. Select appropriate type styles and fonts for for your terms and definitions
  4. Eliminate 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 9/4:

  1. Add the following terms and cited definitions to your homepage post.
    URL - Uniform Resource Locator
    ISP - Internet service provider
    Web hosting

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 using the Organic Bold theme: theme demo
  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 9/11:
1) 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

2) 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 9/18:
1) Copy editing for websites exercise - as discussed in class

Writing for websites:

Inverted pyramid:
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

2) 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

Due 9/25: Finished 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 5 -12: Web and socail media campaign - Group topics FA18

Website based social media cause campaigns
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 9/25: Posted on your course website under a new tab "Campaign"

1) For your campaign:
    a. Names of students working on this project
    b. Campaign hashtag (#)
    c. Purpose of your campaign?
    d. How will you galvanize your audience?
    e. What action do you want your aduience to take?

2) For your campaign website:
    a. Website definition using this form: 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

4) Class presentation of your:

  1. Campaing goals,
  2. website definition and
  3. goals of your social media

Due 10/2:
A) Based on in class discussion: Analytic goals for
web and social media campaigns
B) Campaign research - posted to your course website under "Campaign"
(groups can work together on the research)

Research needs to include:

  1. Three (3) related campaigns using websites and social media – related by audience and or by topic
    • Profile of the followers and active participants for each related campaign
    • Explain how successful each campaign is and why?
  2. 3-5 sources for each of the following background research on your topic
    • Definition of your topic
    • Evidence of facts about your topic
    • Evidence of opinion about your topic 
    • Current "in the media" treatment of your topic
  3. (2- 3) Topic related current events with and explanation how they are relevant to your campaign
  4.  (Informal interview at least 10 students) to determine MU students' opinion on your campaign topic
  5. Research sources need to include:

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

Due 10/9 No class Monday schedule of classes:

Due 10/16
Create your campaign website using Organic Nonprofit Theme:
theme demo
Create a home page for campaign website 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 10/23: Social media pages for your web and socail media campaing
Analytics goals


Due 10/30- 12/4 Campaing postings and in class progress updates

WEEK 12-16 Schedule

Due 11/20: 7:00pm – Analytics report
Posted to your campaign site page on your course website

Social media analytics campaign goals
Must use 2 social media a 3rd is extra credit

Website: 50 Visitors 
Twitter: 10 followers, 30 retweets, 5 favorite tweets
Instagram: 25 likes per post, 25 followers, 10 views
Facebook: 25 likes, 10 comments, 2 content shares
Pinterest; 10 followers, 10 repins
Snapchat: 30 Views (Must upload screen shot to website)

Due 11/27: Attend – Voices of the Sea Film Screening and panel discussion
Posted to your course page under a new link "Voices of the Sea"
Please RSVP on Eventbrite:

1) Three of more things you learned by attending the event?
2) What is effectively promoting the 1 Journey Festival on and at ?
3) Why you will or will not attend the 1 Journey Festival?

Due 12/04: Personal portfolio website
By end of the class add a link to your finished personal portfolio website

Your online portfolio should have the following:

B. Home page:
1) Your full name in the header and a personal logo is you have one

2) Thumbnails - screen captures converted to jpegs of NOAA Exploration website, campaign website, and campaign social media (Extra credit if you add additional designs or writings.) Each should have a link to a project page that explains the project.

3) White space between each thumbnail - add the white space in the jpeg you create


4) 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

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

Resume PDF if you have one
Contact form

C. Project pages linked from your homepage thumbnails
1) Sizing: Each piece needs to be large enough to be easily scene so your design of the project is appreciated. 5" x 7"

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

2) Descriptions of each project: only include the following:
Use typography that does not’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. website, or social media etc.
What you did - e.g. design and photography or design writing and illustration or producer videography and editing or design and editing etc.

3) Links to actual websites and social media

Due 12/04:
A. 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

WEEK 16: Dec. 11 Tuesday 6:30- 9:30 FINAL EXAM
A. Class presentation of web and social media campaign hashtag, goals and analytics

Analytics goals determined by the class

B. Posted on your course website under new link "Campaign outcomes"

  1. Written explanation of how your campaign met your campaign goals?
  2. And how effective your website and social media was for meeting your goals?
  3. What you would do differently if you were to redo your campaign?