Notice: The called constructor method for WP_Widget in waipoua_flickr is deprecated since version 4.3.0! Use
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4718

Notice: The called constructor method for WP_Widget in waipoua_video is deprecated since version 4.3.0! Use
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4718

Notice: The called constructor method for WP_Widget in waipoua_sociallinks is deprecated since version 4.3.0! Use
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4718
Class Four - Interactive / Web Design 1Interactive / Web Design 1

Class Four

Code: Introduction

In order to understand why we construct sites the way we do, we are going to study how code and content and style operate together.

Look at HTML & CSS:

Some great resources:

Handouts and code:

User Centered Design

Personas : a template I found for you

Folder/file structure and asset management

Asset management is not just for large business sites—you need to be systematic in how you name and organize your files. It will help you when you need to find old files, and keep you from saving over what you are currently working on.

File Naming

Have a clear nomenclature, or system of naming files. For instance, I name all of my files like this:


The first part stands for the client (or project), the second part stands for the page the file represents, and the third part stands for the version number. Sometimes there is a fourth field, but basically, this is all I need.

Some pointers for naming files:
  • Use all lowercase letters: that way your file paths are nice and clean for Linux servers
  • Use underscores instead of spaces: once again, for Linux servers
  • Do NOT use periods inside of the file names: sometimes servers see them as connoting a file type, and don’t know what to do to open your file.
  • The name starts out with the most general information, then gets more specific the more to the right you go.
  • Keep your file names as short as you can without losing legibility: you don’t want 56-character long names, but you also don’t want them to become inscrutable.
Folder Names and Hierarchies

Your folders need to have clear, logical names. They also need to be stored within each other in a systematic way—the whole point is to make it as intuitive as possible for you to find the file for which you are looking.

For example:

website > psds > gra_hp_01.psd

Here is an example of a simple website folder: the only file on top is the index.html doc. All other docs go in the docs folder, all images in the images folder. Not only do clear file and folder names help you stay sane while building your site, but your file paths in your code will be neat and tidy.


Develop a Rough Draft of a Persona

(feel free to develop your own page, the template is just an example)

Develop a persona sheet for your ideal user. Try to base it on some actual research. In order to do this research, read at least 2 of the following articles which we will discuss these next week.

Posted by

Libby Clarke is an artist, designer, and educator living in Maplewood, NJ. She received her BFA in Printmaking from James Madison University and her MFA in 2D Design from Cranbrook Academy of Art. Professionally, Libby has worked as an interaction art director for over 15 years for such companies as and She was an Assistant Professor at the New York College of Technology in Brooklyn, New York. She also served as the Director of the Studio School of the Visual Arts Center of New Jersey. As an artist, Libby has produced a series of multi-media conceptual products under the name Monstress Productions since 1996. She gives workshops and lectures across the United States on the intersection of art, activism, and technology, and her pieces are exhibited and collected internationally.

Leave a Reply

Required fields are marked *.

seven − 1 =