Latest Posts

Week11: Final Projects

November 26, 2018
/ / /
Comments Closed

For your final, we will be making a Javascript based infographic.
The next consecutive classes (Nov. 26, Dec. 3rd, and 10th) will be dedicated to in-class lab time working with materials covered in previous classes.  These in class sessions will be opportunities to help each other and get advice from me on how to move forward. December 17th, your finals are due by the end of class.  Class will be optional if you are submitting digital materials.  This will also be the last chance to get help and work out bugs in your code.  However, your projects should be nearly completed at this time.

Due December 3rd:

  • Usable dataset for your final. Attach dataset as a link to your blogs.  There is an opportunity for you to make your own data.  If you do choose to do this, you will need to speak with me about specific expectations.
  • A 600 (minimum) word description of the dataset used.  Post this to your -blogs. Included in your description should be:
    -Where it came from.
    -Who made it.
    -How it was collected.
    -Who did the survey.
    -Potential biases.
    -Potential blind spots in the process of collecting the data.
  • A sketch of your infographic. Post as JPEGs to your blogs.
    -First sketch by hand an idea of your layout and how best to chart your data.
    -Translate this sketch to Adobe Illustrator for legibility.
    -Start a rough sketch in P5.js translating your drawings to JavaScript code (post this as a link).

Due December 10th:

  • 3-5 min Presentation of current progress, where you are, and what you have been thinking with your infographic.
  • Make progress with you work to ask question in class and get help on troublesome issues.

Due December 17:

  • Final projects are due by the end of class, unless you have spoken with me and received an extension. See details above.
Read More

Week9: Infographics

November 8, 2018
/ / /
Comments Closed
  1. Look to the resources provided in the Infographic slides.  Make a infographic using (Illustrator and possibly Photoshop) from data of your choice.  You can choose to make your own data or find data online. Post a high quality image of your final infographic along with a brief description of the data you are using to your blog.  Make sure to cite your sources.
  2. Make a p5.js sketch using a for loop (examples in the slides)
  3. Make a second p5.js sketch which uses logic statements: conditional “if” statements and/or comparative logical operators (less than, greater than, equal to etc.)  You can choose to combine the two sketches into one more complex sketch which uses “for loops” and “logic operators”.
Read More

Week7: Intro to JavaScript

October 24, 2018
/ / /
Comments Closed
  1. Experiment with P5.js.  Make sure to use the reference.  Post these ‘sketches’ as links in your blogs.
  2. Respond to the reading/video below and post to your blog.
    • Reflect on your personal practice.  How do you feel about the ideas discussed in the links below.  What is the difference between plagiarism and remixing?

The Ecstasy of Influence: A Plagiarism
Embrace the Remix

Read More

Week5: Midterm

October 3, 2018
/ / /
Comments Closed


Schedule UPDATE!!!
Monday October 8th: No Class – Columbus Day Holiday
Tuesday October 9th: Submit your website proposal, 3 precedent websites you were inspired by, and the wireframes you made for your final designs.
Monday October 15th:  No Class –  INSTEAD…… I will have office hours by appointment (10 min. intervals).  BOOK TIME HERE.  We will review any issues you are having with your midterm then.
Tuesday October 16th: Final Midterm Due You will submit the CodePen URL for your site home page.  All of your links and subpages need to work by this time.

Midterm Description:
As explained in class, the midterm is a website (via. CodePen).  This site should be for something of personal interest to you. It can be a portfolio, if you are an artist or a designer.  It can be a food blog/cooking site, if you are interested in food.  It can be a fashion blog, if you are interested in fashion.  I’m ok with most anything, but if you are concerned, shoot me an email.
These sites should have a minimum of 4 functioning pages with unique content.  This could include (but is not limited to) a home page, an about page, an article page, a blog page, etc.  The content for these pages should be made by you.  That means, text and images should be made by you and have unique ideas.  Please do not use the content from someone else website. That would be plagiarism.  I’m not grading grammar or image quality, although, you should try to make it as nice as you can.  I’m hoping that some of you will be able to walk away with a foundation for a site you could use professionally.

Post everything to your class blog.  No emails please.

  • Pick 1 subject of interest to you to make a website about. Submit 1 sentence description. (Due Tuesday October 9th)
  • Find 3 precedent sites that inspire you.  These should be related to the theme of your website.  If you do fashion, find fashion type websites. Submit a URL for each site (Due Tuesday October 9th).
  • Based on your precedent sites, you will need to make wireframes.  Wireframes are the design layout for your personal websites.  You should analyse your precedent sites and see what they do well.  If they do something that you like, you should consider implementing something similar in your website. You will need to make 3 variant wireframe designs for your project.  If your project has 3 pages, that means 9 wireframe pages.  If your project has 5 pages, that would mean 15 wireframe pages.  These are quick studies and should be done using Adobe Illustrator as I demonstrated in class. Submit these as JPEGs or PNGs. (Due Tuesday October 9th).
  •  Once you have submitted your wireframes, you should take the one that you think works the best and make that website design for your midterm project.  You should attempt to make your website as closely as possible to your wireframe design.  I will be grading on how well you were able to achieve your intended design.  All your attributes should work in the final project. Images should load. Internal links and hyperlinks should take me to the right places. Menus and navigation functions should also work.  You will submit the home page URL (via. CodePen) for your site with working links to your subpages to your blog (Due Tuesday October 16th)


  • 5%:  Theme
  • 5%:  3 Precedents Websites
  • 40%: 3 Variant Wireframe Designs
  • 50%: Final website with functioning CSS and HTML code.


Example Wireframes:

These are two wireframes that theoretically have the same content but different layouts.  There is a home page and a project page for each wireframe.  The boxes with x’s are place holders for images.  They are called frames.  Note, I also used different fonts for my respective h1, h2, h3, and body fonts.


Read More

Week4: HTML & CSS Basics

September 24, 2018
/ / /
Comments Closed


  1. Read through the HTML & CSS handbook attached.  Also, look through the associated CSS links which will help you style and format your pages for this weeks class.
  2. Pick 2 of the 3 layouts below.  Try to replicate the layouts from the what we learned in class and the examples I provided in the slides.  The boxes with the Xs are place holders for your images.  Use url links to place images in your designs.  To host your images online, make a private account using a service such as  Also, I did not include headers or special fonts in my sketches below.  Feel free to make design choices which have more fonts and extra details.
  3. Link your CodePen work areas to your blogs for me to look over.  Good luck and have fun!

CSS Color
Google Fonts

Read More

Week3: Graphic & Web Design

September 17, 2018
/ / /
Comments Closed


  1. Website Analysis (Post final images to Blog)
    • Take 3 websites and annotate their features. Make note of:
      -Alignments and Grids
      -Hierarchies (How do you know what’s important? I it color, scale, spacing which focus your attention?)
      -Fonts used and why (Is there a system or hierarchy?)
      -Proximity (What items seem to be intentionally groups or paired together?)
      -Consistency (or inconsistency of fonts, styles, colors, spacing etc.)
      -What other principles of design were utilized?  Be specific.
    •  Take 1 of the 3 websites and annotate a secondary page in that site.
      -What are the consistencies between the two pages?
      -Where do alignments and grids break from the proceeding page?
      -Are all the fonts the same? (is the title font the same as the title font on all other pages)
      -What things are missing from the original page?
  2. Graphic Self Portrait or Logo Design (Post final image to Blog) 
    • Using Illustrator (and Photoshop if you would like), make a self portrait or logo design which represents you or professional practice you wish to have.
    • Describe your thoughts and intentions behind the design.  What elements of design did you utilize? What fonts did you choose to represent you?  What line weights? What shapes? What colors?  Why does this represent you? Explain your intent.
  3.  Read the 2 readings below.
  4. Respond to readings and Post to your blog.
    • Describe a design which you have encountered or are very familiar with where the user experience or user interface was appropriate or inappropriate.  This design can be anything from a subway kiosk to a smart phone app.  What about the design was intuitive or difficult? How could it have been better?  Was it uncomfortable? Did you even notice the design?  ~500 words at least.

Attractive Things Work Better – Don Norman
A Brief Rant on the Future of Interaction Design

Tutorials to start with. (Ignore their funny voices….)

Read More

Week2: Design & Media

September 10, 2018
/ / /
Comments Closed


  1. Make a personal blog or web page.   Please send me the URL for your website via email as soon as you have one.  This ‘blog’ will be used to submit weekly assignments and documentation for your projects.
    • This can be a dedicated page from an existing personal website/blog if you already have one.
    • If you do not have a existing website/blog, I suggest… (free)
    • If you want a custom domain (ie., you can purchase and register your domain name through…. (this costs money) (domain registration and remote server hosting) (domain registration and remote server hosting)
    • If you want to start a quick and pretty portfolio for the class consider…. (this cost money, but they have custom templates for ease)
  2. Read the 4 readings below.
  3. Respond (on your blog) to Marshall McCluhan’s The Medium is the Message.
    • What thoughts or issues did you have with anything that he may say?  Do you agree or disagree?  ~150 words.
    • Choose an artist, designer, or project.  Think critically about their chosen media.  Explain why they do (or do not) use the appropriate media/medium for their work.    ~500 words at least…….
  4.  Lastly, come to the next class with a website that you want to work with.  Choose anything.  It can be an artist, design firm, e-commerce site etc.  We will be working with these sites in class analyzing their designs and mechanisms.

Principles of Graphic Design
Guide to Web Design
Graphic Design
The Medium is the Message – Marshall McCluhan

Read More