GD 67 Assignments

Assignment 10

Due Thursday, May 14

 

1. WordPress Exercise

Recreate the page below. Create it in your WordPress site located here:
http://gd67.smcgrdes.com/section_4252/wordpress/

Work on this exercise together as a team or, at the very least, share your findings so that everyone in the team understands how to create this page.

smc_wordpress

Do the following:

  1. Upload and Activate SmartStart WP Theme
  2. Add four pages, change the color of the highlight to match logo
  3. Insert logo graphic
  4. Create slider of three images
  5. Create three columns of text below the slider (lorem ipsum)
  6. Add address and social media icons to footer

Download the images for this exercise: http://everythingaboutweb.com/classes/downloads/wordpress_exercise.zip

The zip file includes:

  • SmartStart WP Theme
  • Documentation for Theme (you will need to read through this!)
  • Images

2. Team Assignment

With your final project team, do the following:

  • Vote for a team leader
  • Select a name for your “creative studio” and create a WordPress.com site for your studio.
  • Email Jamie with name of leader and URL of team/creative studio WordPress.com site.
  • Start managing your Project using Trello
  • Continue researching responsive WordPress themes to use for your final project website.

Assignment 09

Due Thursday, May 7

 

1. Continue working on design comps for 2 pages of the SMC Design Technology Department website redesign.

Complete Design comps for two pages of the SMC Design Technology website redesign (Home page + landing page) from your midterm project. You’ll need to complete a design comp for smartphone, tablet and desktop (all three for each page).

2. Watch WordPress Video Tutorials

Please spend time over the next couple of weeks familiarizing yourself with WordPress. It’s slightly different than WordPress.com.

Visit the website and go through the video library (free videos) located there: https://www.wp101.com


3. Modify the WordPress site you’re using in class.

  • Login to your the site on your own web hosting, or http://gd67.smcgrdes.com/section_4252/wordpress/yourlastname/wp-admin.
    Username: admin
    Password: WebDev4_Smc
  • Pick a theme to work with for this exercise. Choose a theme that is suitable for the Santa Monica College website.
  • Create pages for the Santa Monica College website based on your site map.
  • Set up your menu system to reflect the site structure. Be sure to put the pages in a hierarchy as appropriate.
  • Add “dummy” content to your page. Add Widgets to your site. Appearance > Widgets.
  • Using the Editor, make changes to your CSS file (style.css) such as changing the font-family, color for the font, styling for your h1, h2, etc.
  • Install plug-ins and look for a plug-in you can use to create a slideshow/gallery.
  • Use this assignment to play with WordPress, it’s pretty difficult to “break,” but make sure you have a back up of your CSS file and any .php files you modify.

4. As a team, select a responsive theme to use for final project.

Teams for the final project are posted here:
http://classes.jamiecavanaugh.com/grdes/gd-67/gd-67-final-project-teams/

Remember that you can always contact your team members through the “Email” section for this course on eCollege.

Review Themes to find one your team can use for the final project for the Santa Monica College website.

Theme Forest: http://themeforest.net/category/wordpress 
Themify: http://themify.me/themes 
Elegant Themes: http://www.elegantthemes.com/
Woo Themes: http://www.woothemes.com/

Responsive WordPress Themes

http://cyberchimps.com/responsive-theme/
http://www.webdesignrazzi.com/2014/wordpress-education-university-themes/
http://www.scratchinginfo.com/best-premium-wordpress-themes-2014/
http://speckyboy.com/2014/03/10/free-responsive-wordpress-themes/
http://mashable.com/2013/03/08/responsive-wordpress-themes/
http://responsivethemes.org/
http://www.tripwiremagazine.com/2013/02/responsive-wordpress-themes.html


5. With your final project team, do the following:

  1. Vote for a team leader (email Jamie with name of leader) 
  2. Select a name for your “creative studio” and create a WordPress.com site for your studio.

Self-evaluation + Assignment 08

Due Thursday, April 30

Post the following to your WordPress site. Based on our midterm project presentations, answer the following questions:

  1. How well do you think you’ve done on the project so far, and why?
  2. What are your biggest challenges with the project?
  3. What are the most valuable things you learned from the midterm presentations?
  4. How can you improve your project and what specifically are you going to revise, change, or add to improve your project?

Based on feedback from the Midterm presentations, make any necessary revisions to your files.

1. Create design comps for 2 pages of the SMC Design Technology Department website redesign.

Complete Design comps for two pages of the SMC Design Technology website redesign (Home page + landing page) from your midterm project. You’ll need to complete a design comp for smartphone, tablet and desktop (all three for each page).

Keep in mind the Basics of Web Design:

  1. The Grid (Use this Grid, or you can find your own)
  2. Basic Design Principles (composition, balance, white space, proportion etc.)
  3. Color
  4. Typography (Keep in mind: hierarchy)
  5. Navigation

Reminders

  • Keep in mind the goals and objectives of the College and also the needs of the Users.
  • Refer to your wireframes. Your design should support these although they don’t need to follow the wireframe exactly. Look at responsive websites here: http://mediaqueri.es/

Assignment 07 – Wireframes

Due: Thursday, April 23

Reminder: the midterm project is due on April 23. Be sure to post all the deliverable in one PDF to your student folder on the class server:
http://classes.jamiecavanaugh.com/grdes/gd-67-midterm-project/

Wireframes

Working alone, create wireframes for the 2 pages of your midterm project. Keeping in mind “mobile first,” and referring to the sketches you made for Assignment 06, create a wireframe for the smartphone template and then move on to the tablet layout, and finally the desktop layout. Remember that wireframes are NOT normally visual design (typography, colors, images, final layout, etc.). Wireframes are a rough draft of required content only. You will complete three wireframes for each of the two pages.

Wireframe Template for Responsive Web Design
http://www.rubbercheese.com/blog/comments/a-wireframe-template-for-responsive-web-design

Free Photoshop Wireframe Kit
http://rafaltomal.com/free-photoshop-wireframe-kit/


Assignment 06

Due: Thursday, April 9

Group Presentations Due April 9

Wireframes: Casey Caputo, Jacqueline Pearson, Gaby Velasquez 

Sitemap

Working alone, complete a sitemap for the Design Technology Department website

Feel free to refer to the PDF of the Santa Monica College site map shown in the Class 05 notes.  You may create your own site map from scratch (or use another template)

2. Start sketching the layouts for the 2 pages of your midterm project.

Taking in consideration that “sketching is where creating the basic concept is done,” start sketching the layout for your midterm project.

Keeping in mind “mobile first,” start sketching the layout in the smartphone template and then move on to the tablet layout, and finally the desktop layout. What elements are most important and need to be included in the mobile versions? Review the responsive restaurant websites we looked at in class for ideas.

For this assignment, use the Responsive Web Design Sketch Sheets found here:
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets/

The sketches should be posted to your WordPress site.


Assignment 05

Due: Thursday, April 2

 

Group Presentations Due April 2

Site maps: Toki Ngo Hoangthy, Bill O’Donnell, Marcus Welles 

More info on this page: http://classes.jamiecavanaugh.com/grdes/gd-67/gd-67-group-presentations/

Personas

Working in new pairs, start working on 3 personas (user profiles) for the Design Technology Department website we discussed in class. Again, this will require you getting “inside the head” of the audience to create these profiles/personas. Please create one persona for each of the following 3 target audience groups.

  1. Student
  2. Prospective Student
  3. Faculty

You may use one of the persona templates below (or some combination)— or better yet, create your own. These documents would normally be shared with the client, so you want them to look as professional as possible. Bring the documents with you to our next class. The 3 Personas are due on April 2.

Deliverable: 3 Personas (User Profiles)
Persona Template 1 or
Persona Template 2

Better, yet create your own template

Example from previous semester:

Persona 1
Persona 2
Persona 3

Due Dates
March 12 – Client Survey due
March 19 (no class) – Creative/Project Brief, Estimate and Schedule due
March 26 – Competitive Analysis due
April 2 – Personas + Sitemap due
April 9 – Wireframes
April 23 – Midterm project: All Deliverables + Bootstrap “wireframe” (responsive wireframe is extra credit)


Assignment 04 – Competitive Analysis

Due: Thursday, March 26

 

Group Presentations Due March 26

Personas: Stephanie Hughes, Lisa Kay, JP Powell

More info on this page: http://classes.jamiecavanaugh.com/grdes/gd-67/gd-67-group-presentations/

1. Assigned Reading

Please read this chapter from the book Web Redesign 2.0: Analyzing Your Competition
This is information you’ll follow to complete your competitive analysis.

2. Post to your WordPress blog

Take a look at the current Design Technology Department website: www.smcdesigntech.org

  • What do you think the current problems and issues are with this site?
  • Think about these issues from the perspectives of the different types of users who visit the site.

Post your findings on your WordPress blog.

3. Project Brief, Estimate, Schedule

Working in new pairs, complete a Project Brief, Estimate, Schedule for the redesign of the Design Technology Department website: www.smcdesigntech.org

Again, these documents are normally shared with the client, so make them look as professional as possible.  Be sure to have your name on the file. Bring the documents with you to our next class.

Download the Communication (Project) Brief Worksheet to help in formulating the content for your Project Brief. Here a Sample Creative Brief to use as a template for your Project Brief. Here’s an example of a Schedule and an example of a Estimate that you might find useful for this assignment. The Project Brief, Estimate, and Schedule are due March 19 (But we do not have class on this date).

4. Competitive Analysis

Working in new pairs, start work on a competitive analysis for the redesign of the Design Technology Department website: www.smcdesigntech.org. Follow the four steps outlined in Analyzing Your Competition. (You may skip over the “Conduct Informal Usability Testing” step.) Please analyze 5-6 competitor websites for this assignment. Include the Design Technology Department website as part of the “competitive set.” Your deliverable for this assignment will be the final report and a features grid. Be sure to include all the necessary information in the final report.

Again, these documents are normally shared with the client, so make them look as professional as possible. The Competitive Analysis is due April 2.

Examples from previous semesters:

Competitive Analysis created for Santa Monica College Website:
http://cristenwilson.files.wordpress.com/2013/03/desouza_hosoyamada_wilson_competitiveanalysis.pdf


Assignment 03

Due Thursday, March 12

 

Group Presentations Due:

Creative/Project Brief: Maria Arroyo, Cocoa Dixon
Budget/Project Estimate: Kellie Matteson, Raquel Rivera
Project Schedule: Diana Gurevich, Natsko Mckissack


1. Twitter Bootstrap Videos

Start or continue watching the Intro to Twitter Bootstrap v3 – Part 1 through Part 9. There are a total of nine videos. The videos are posted here:
https://vimeo.com/shokanson/videos/page:3/sort:alphabetical/format:detail


2. Client Survey

Working in pairs, complete a client survey for the SMC Design Technology  website redesign. Typically you work with the client on completing this survey but for this assignment you’ll need to take on the role of the client and the audience. This will require you to get “inside the head” of the audience (often referred to as the “user”) to answer the client survey questions. Since you ARE the one of the target audiences for the website, this will be a good exercise. Think about how a redesigned SMC website could be most useful to you. Note, that some of your answers will simply be a “best guess” at this stage, but that’s okay.

Using the Client Survey PDF below, copy and paste the questions to another document. I’d recommend creating the document in Word and then saving it out as a PDF. Bring the document with you to our next class. The Client Survey is due March 12.

Deliverable: Client Survey (Only need to complete the following sections: Current Site, Reasons for Redesign, Audience/Desired Action, Perception, Content.)


Assignment 02

Due Thursday, March 5

 

Group Presentations Due:

Competitive Analysis: Amanda Johansson, Murray Smith, Michael Lemus

More info on this page: http://classes.jamiecavanaugh.com/grdes/gd-67/gd-67-group-presentations/

1. Assigned Reading: Competitive Analysis

Please read the following articles:

A Guide To Heuristic Website Reviews
http://uxdesign.smashingmagazine.com/2011/12/16/guide-heuristic-website-reviews/

Quick and dirty competitive analysis
http://boagworld.com/business-strategy/quick-and-dirty-competitive-analysis/


2. Discussion Questions

Before our next class, post answers to the Discussion questions on your student WordPress blog. Questions from the reading:

  1. What are the three basic steps for a “quick and dirty” competitive analysis?
  2. What are the series of questions to do a basic visual review?
  3. What are the two tests that you can use to help assess how many users your competition may be turning away.

For students who don’t have a Group Presentation next week:

3. Twitter Bootstrap Videos

Start watching the Intro to Twitter Bootstrap v3 – Part 1 through Part 9. There are a total of nine videos. The videos are posted here:
https://vimeo.com/shokanson/videos/page:3/sort:alphabetical/format:detail


Assignment 01

Due: Thursday, February 26

 

 1. Complete Class Survey (We’ll do this in our first class)

https://www.surveymonkey.com/s/GCZ3FSN

2. Sign up for a WordPress,com site at wordpress.com

(If you already have a WordPress class site, you can continue to use the one you already have, or create a new one). For this class, you’ll post your work and track your weekly design process to your class blog. If you haven’t already done so, please post the URL for your class blog to the comment section below.

If you want to learn more about WordPress, check out learn.wordpress.com


3. Assigned Reading

Please read the following before our next class and be prepared to discuss:

1. Following a Web Design Process
http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process/

2. Responsive Web Design Process
http://responsiveprocess.com/

3. What to Ask a Client Before You Start Their Project (Client Survey)
http://www.webdesignerdepot.com/2011/01/what-to-ask-a-client-before-you-start-their-project/

Take a look at and be prepare to discuss:
Infographic: A website designed
http://awebsitedesigned.co/A-Website-Designed-Infographic.pdf


4. Discussion Questions

Before our next class, post answers to the Discussion questions on your student WordPress blog.

Web Design Process
What are the six parts to the Planning stage?
What are the four parts to the Design stage?
What are the five parts to the Development stage?
What are the four parts to the Launch stage?
What are the three parts to the Post-Launch stage?

Client Survey
What are the eleven questions you should ask your prospective clients before you get started on their project?

28 Responses to "GD 67 Assignments"

Leave a comment