CMD 308 Web Design and Social Media FA17

Instructor
BARRY C. ERDELJON

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

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.

e-mail: barry.erdeljon@marymount.edu

Required Text: Online readings as assigned
Recommended Text:
1) WordPress:Visual Quickstart Guide
2)
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 http://www.journeyed.com/
Apple Education Store"
http://store.apple.com/us/browse/home/education_routing?mco=MTIxODk0Nw

Marymount WordPress
MU Commons login: http://commons.marymount.edu


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

RESOURCES
Creative Commons
http://search.creativecommons.org/

Music
http://www.royaltyfreemusic
.com/free-music-clips.html


Flash Kit
http://www.flashkit
.com/index.shtml


Inexpensive stock images
http://www.istockphoto.com
http://canstockphoto.com/
http://www.123rf.com
http://www.bigstockphoto.com

Clip art, photos,
sounds, and video clips

URL SHORTENER
https://bitly.com/shorten/

INSPIRATIONAL SITES
Lynda.com
Dreamweaver Showcase

REFERENCES
1. Web Monkey
2. http://www.wpdfd.com/
3. Designinteract.com
4. Creativepro.com

WRITING
Citing other Sites, Photos & Sources
Writing for the Web

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

FILE FORMATS
Graphics & photos

SEARCH LISTINGS
Keywords & Description
Search engine registration

DREAMWEAVER HELP
Dreamweaver Support
On-line Tutorials

Weekly Videos & Readings

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

DUE WEEK 9/4:
1. "Watch" video and post 3 key points – things you learned from the video.
http://www.youtube.com/watch?v=NLlGopyXT_g

DUE WEEK 9/11:
1.
Read:http://mudesign.net/webdesign/fake_news.pdf 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: http://mudesign.net/webdesign/ad_blockers.pdf
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: http://mudesign.net/webdesign/stolen_photos.pdf 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

2.
Read: http://wapo.st/1NHAQ5C?tid=ss_mail 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:
1.
Read: http://www.ms-ds.com/our 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: http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/ and
2a.
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.

DUE WEEK10/2:
1. Read: http://mudesign.net/webdesign/snapchat_tgif.pdf
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: http://adage.com/article/goodworks/influential-marketing-campaigns/142037/
Using Social media for digital advocacy: http://ctb.ku.edu/en/table-of-contents/advocacy/direct-action/electronic-advocacy/main
8 Tips for sucessful social media campaigns: http://mashable.com/2010/05/10/social-cause-campaign/#_OWpphuymkq8
5 Tips for running social media campaigns: http://www.socialmediaexaminer.com/successful-social-media-campaigns/

DUE WEEK 10/9:
1.
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.
https://www.amnesty.org/en/
http://www.conservation.org/Pages/default.aspx
https://www.npca.org
https://www.nrdc.org

http://www.hawksbillhope.org

DUE WEEK 10/16:
1.
Visit http://webbyawards.com/ 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:
1.
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.
http://www.cnn.com/2017/05/19/health/instagram-worst-social-network-app-young-people-mental-health/index.html

2. After reading this articles explain how social media is affects your brain:
http://edition.cnn.com/2016/07/12/health/social-media-brain/

DUE WEEK 10/
30:
1. Read:
http://mudesign.net/webdesign/jonathan_harrise_netwirk_effects.pdf
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:
1.
Visit: http://networkeffect.io (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:
1.
Read How artificial intelligence is moving from the lab to your kid’s playroom http://mudesign.net/webdesign/ai_toys.pdf
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:
1.
TBD

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

LECTURE/LAB
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 http://commons.marymount.edu
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
    MySQL
    PHP
    WordPress

  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: http://mudesign.net/resources.html

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:
http://oceanexplorer.noaa.gov/explorations/explorations.html

  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: https://organicthemes.com/demo/bold/

Selecting Homepage slideshow images:

http://www.nationalgeographic.com/125/the-new-age-of-exploration/#/1
https://www.nationalgeographic.org/projects/okavango/

  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: http://mudesign.net/webdesign/writing.html

Inverted pyramid: http://www.easymedia.in/why-the-inverted-pyramid-format-is-the-best-way-to-write-for-web/
Active voice: https://owl.purdue.edu/owl/general_writing/academic_writing/active_and_passiv
e_voice/active_versus_passive_voice.html

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 FA17

Website based social media cause campaigns
The most Influential Cause Marketing Campaigns: http://adage.com/article/goodworks/influential-marketing-campaigns/142037/
Using Social media for digital advocacy: http://ctb.ku.edu/en/table-of-contents/advocacy/direct-action/electronic-advocacy/main
8 Tips for sucessful socail media campaigns: http://mashable.com/2010/05/10/social-cause-campaign/#_OWpphuymkq8
5 Tips for running socail media campaigns: http://www.socialmediaexaminer.com/successful-social-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: https://www.facebook.com/business/learn/set-up-facebook-page
Facebook page for a nonprofit organization: http://boostlikes.com/blog/2015/06/build-facebook-page-non-profit-organization

Instagram: A Beginner’s Guide To Getting Your Cause on Instagram http://www.dutiee.com/a-beginners-guide-to-getting-your-cause-on-instagram
Instagram for Nonprofits: 4 Tips to Get You Started http://wiredimpact.com/blog/instagram-for-nonprofits/

Snapchat: For cuase campaings http://coyotecommunications.com/coyoteblog/2016/03/24/snapchat/


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:

https://www.amnesty.org/en/
http://www.conservation.org/Pages/default.aspx
https://www.npca.org
https://www.nrdc.org

http://www.hawksbillhope.org

Due 10/9 No class Monday schedule of classes:

Due 10/16
Create your campaign website using Organic Nonprofit Theme:
theme demo
1.
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

Causes: https://www.causes.com/about

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

WEEK 12-15 Personal portfolio webiste

Due 11/20-27:
A. Choose a web hosting service for your portfolio:
Possible portfolio web host or service 

Wixs http://www.wix.com/
Behance (comes with Adobe creative suite) https://www.behance.net/
Portfoliobox http://www.portfoliobox.net/
Squarespace http://www.squarespace.com
Krop http://www.krop.com/creativedatabase/ 
Coroflot http://www.coroflot.com/
Carbonmade http://carbonmade.com/ http://carbonmade.com/
Impactfolios http://www.impactfolios.com/index.htm 
BLU Domain http://www.bludomain.com/website/template/100 
WordPress.com http://wordpress.com/

10 Awesome Solutions for Creating Your Online Portfolio
http://www.1stwebdesigner.com/freebies/solutions-creating-online-portfolio/

The 9 Best Services for Building an Online Portfolio
http://www.complex.com/tech/2012/01/the-9-best-services-for-building-an-online-portfolio/


Your online portfolios should have the following:

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

Example: http://brittmansourimoaie.wixsite.com/portfolio
Example: http://rms93641.wixsite.com/rebeccastibrik
Example: http://www.kaitmillerportfolio.com
Example: http://mahaha87.wixsite.com/malrasheed
Example: https://fjc67847.wixsite.com/fjdesign

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)

About
Design Philosophy: http://mudesign.net/wordpress/designer_statement.pdf
Resume
Contact

C. 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: http://rms93641.wixsite.com/rebeccastibrik/copy-2-of-project09-7
Example: hhttp://brittmansourimoaie.wixsite.com/portfolio/journey-magazine
Example: (scroll down on this page) http://thegeekdesigner.com/projects/netmag/#.Vh0FR8uR-JU

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.

Due Dec. 4 Completed portfolio website due online - linked to your course website
With changes based on 11/28 in class critique.

WEEK 16: Dec. 11 Tuesday 6:30- 9:30 FINAL EXAM
Presentation of web and social media campaign analytics

Analytics goals