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

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

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

DUE WEEK 3:
1. 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. Site at least 2 additional articles in defensive of your opinion.

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

3. Read: http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/ 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.

DUE WEEK 4:
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. 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:

http://www.socialmediaexaminer.com/successful-social-media-campaigns/

http://mashable.com/2010/05/10/social-cause-campaign/#_OWpphuymkq8

http://adage.com/article/goodworks/influential-marketing-campaigns/142037/

http://ctb.ku.edu/en/table-of-contents/advocacy/direct-action/electronic-advocacy/main

DUE WEEK 5:
3. 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.

2. Read: http://mudesign.net/webdesign/jonathan_harrise_netwirk_effects.pdf
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: 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.

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 one additional article on this subject in your answer.

3.The voice of Twitter users: http://www.ted.com/talks/lang/en/evan_
williams_on_listening_to_twitter_users.html

4. How artificial intelligence is moving from the lab to your kid’s playroom http://mudesign.net/webdesign/ai_toys.pdf

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

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

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: 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 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
   .... ..Display location - "Header Menu "
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: http://mudesign.net/webdesign/writing.html

Inverted pyramid: https://owl.english.purdue.edu/owl/resource/735/04/
Inverted pyramid diagram
Active voice: https://owl.english.purdue.edu/owl/resource/539/01/
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

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: 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 6/7 & 8: Create your web and socail media campaign website

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

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

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

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:

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

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.