The Art of Web Design

ART 203

Course Description:

This course concentrates on using existing Web 2.0 technology to build and implement marketing web pages for artists. We will examine site building tools, Dreamweaver and Movable Type software, and experiment with their ability to create lush portfolio sites for visual and multimedia artists. The use of blogs and discussion boards as tools for promoting and managing art will be experimented with, as well as exploring the modules needed to edit themes and upload content visual artists need for the presentation of their work.

Course Goals:

Students will create a small autobiographical portfolio site representing a piece of their portfolio
Students will explore ways to use websites, blogs, comments, and discussion boards to enhance the understanding of networked art and design content creation, authoring, and web publishing.

Course Objectives:

  • Demonstrate understanding and use of the Movable Type publishing system
  • Understanding and use of html and css compliant web design and formatting
  • Demonstrate ability to use Web 2.0 as a creative medium and marketing tool.

Link to my ART 203 Blog <– This site is created using Movable Type.  Within this blog I will be posting completed homework assignments throughout the semester.

Link to Mock Business Site <– This was Lesson 2 Exercise 2.  The purpose of the assignment was to prove mastery of the skills learned in the previous 3 exercises.  I designed my Movable Type website based off of a business that I owned from 2008 – 2011.  In addition to using the skills taught up to that point I also learned on my own how to add additional pages to the top navigation bar.

Publishing to Penn State from Dreamweaver – <–This is a Jing video that I made to show a few of my classmates how to publish their sites to Penn State’s personal web space.  There were a lot of help requests so I put this together and emailed it.

How to embed a YouTube video to a blog – <– Another Jing video that I made to help out a classmate that was confused on how to add a YouTube video to his PSU blog.

CSS Formatting Practice <– In this unit we were to watch a lot of tutorials by James Williamson.  I actually watched a few additional videos.  The assignment was that we were to create three different layouts using css to format the pages.

Page 1, Page 2, Page 3 – Page 3 was definitely my favorite.

CSS Poster <– This assignment we were to continue to use our newly acquired CSS skills to create a poster using only CSS formatting.  I think mine turned out pretty good.  I learned how to use @font-face and some alignments to turn font upside down and use non-standard fonts.  *This page is best viewed using Chrome, Opera, or Safari.  Firefox doesn’t pick up the font and IE doesn’t pick up the text alignment.

Image optimization – Save for Web & Devices  <– We learned how to optimize images for use on the web.

Web Banners <– Another optimization assignment.  This time we created a banner and changed the color.  I really had some fun making this one – I downloaded some brushes and patterns and used a newly downloaded font. Instructor comment: ” LOVE the design!”

CSS Poster 2 <– We were to modify our CSS poster to add images to it.  I think it turned out great – so did my classmates.

Unit 2 Project – It is a culmination of both the knowledge gained in the use of Photoshop and Dreamweaver by completing the tutorials, exercises and assignments through both lessons in the unit and of my own conceptual exploration of the topic: Digital Storytelling and Web Publishing.  I chose to illustrate some banners and logos that I’ve designed in Photoshop, in addition to the creation of the “site”.