Interaction Design 01: GRPH 325
Spring 2015

Portfolio Web Site

As an introduction to webdesign, students who do not have a portfolio website will begin by creating a portfolio website using WordPress, the most widely used CMS system today. Students will have to understand how servers, databases and templates are created, installed and manipulated. Students will select a WordPress template install it and begin blogging daily on the content they are learning in class.

Concepts:

Introduction to server, databases, CMS systems, Fetch, WordPress, File naming, Animated GIFs, Image resolution for the web, plug-ins, sidebars, parallex, responsive vs. adaptive.

Typography

Good typography is the foundation of good design. Often times beginning web designers step too quickly into user centered design without having mastered the art of good web typography. As an introduction to code, students will begin applying Robert Bringhurst’s guidelines found in Elements of Typographic Style and at the same time examining the the inherent differences in screen-based typography vs. print-based typography as highlighted in Richard Rutter’s book, The Elements of Typographic Style Applied to the Web.

Concepts:

Introduction to CSS & HTML, syntax, formatting, @font-face, ems vs. pixels, % layout, box model, floats, anchors, margins, padding, links, hang quotes, proper quotes, special characters,…

Web Design

Students will create a web site based on best practices web design processes. User-centric design principles will be applied to research, architecture, wireframing, prototyping. Students will create fast prototypes based on design tiles and then conduct usability testing on the designs. Feedback will be incorporated iteratively in design process. Students will then begin developing fully responsive designs of all key page types, then programmed style sheets & design guidelines.

We will examine how to include interactive design pieces into portfolios. We will learn to create animated examples of navigation, key functional tools, interactive experiences that they are not yet able to program due to their technical ability. Using Photoshop, After Effects, Invision or code, examples will be incorporated into their portfolios on their own website and Behance.

Concepts:

Wireframing, information architecture, UX/UI, user-centric, design tiles/styles, liquid/responsive/fixed width/%width designs,

Spring 2015 Project Showcase

Spring 2015, students are still coming to class with very different skillsets and expectations. Of the 12 individuals in the class 1 was a computer science major, expert programmer but novice designer, 3 had completed the web design class in JOMC, 1 was an artist with no code, nor design skills, and the rest were designers who had never tried programming. Most of the students were graduating seniors but 3 were sophomores eager to continue with coding next semester. Due to the diverse student body, flexibility was given on the last project — they could choose to use WordPress or hand-code the final assignment.

  • Assignment 1: Usability Testing & Re-Architect Hixson-Lied Home Page (Group Project)
  • Assignment 2: Creation of an Event Website for Lincoln Nebraska
  • Assignment 3: Beautiful Web Typography
  • Assignment 4: Portfolio Website or Website Redesign of their Choice

Online Resources

Fall 2014 was the inaugural offering of CSCE 120 (offered as CSCE 196). 12 individuals successfully went through this offering and produced 4 group projects.

Creative Leaders to Follow

NOTE: Next time this course is being offered is Spring 2016. For a class in the Fall 2015 ~ look for Interaction Design 02. Qualified students can get a permission code to take this course without first taking ID1.

 

Prof. Colleen Syron

Assistant Professor of Practice
University of Nebraska Lincoln
Art & Art History Department
210 Woods Art Building
syron@unl.edu
402-472-6810

 

FONTS

Font Squirrel
Google Fonts
IcoMoon
Typecast

 

SOFTWARE

Dreamweaver
InVision
Wordpress
Fetch

 

LANGUAGES

CSS3
HTML5

 

TUTORIALS

Code Academy

Drop us a line!