This document contains examples of my teaching work from the past year (since January 2017). My goal is to give a narrative of my approach to teaching at the university or college level and the range of topics I teach.
I chose to highlight two courses I taught at George Mason University’s School of Art and two courses I taught at The Art Institute of Washington. These courses spread most of topics I have taught over the past sixteen years. For each course presented here, I included a copy of the syllabus, a course outline of topics, a project assigned during the course, and examples of student work for that project.
In the interest of keeping the content approachable, I abbreviated some items from the original (removing boilerplate information on the syllabi, for example). I’ve included links to the source documents where needed.
Introduction to Web Design, AVT 217-001, Fall 2017
This fall marks the first time I have taught this particular course here at Mason. While preparing for this course, I drew on my experiences teaching similar intro- and mid-level web design courses at AiW.
The AVT 217-001 syllabus is provided in its entirety online here: http://littleberrystudio.com/teaching-portfolio/avt217-syllabus-fa17.pdf.
Catalog Description: An introduction to contemporary web design, in particular to standards, as a successful tool in design communication. Students gain hands-on experience on design issues specific to Web-based presentations, learn web page layout, effective navigation and delve into the design process. Offered by School of Art. May not be repeated for credit.
Prerequisite(s): Admitted to AVT BFA Graphic Design concentration, AVT 180 or permission of instructor. Prerequisite enforced by registration system.
Course Objectives: Upon completion of this course students will be able to:
- Apply basic design concepts and principles of web delivery.
- Demonstrate a basic understanding of the components and mechanics of a website.
- Acquire a web host, practice web file management, and launch a web site.
- Utilize web software tools at an introductory level.
Texts and References:
References, resources, and articles will be posted to the Blackboard course shell as needed. Book-based readings are accessible via Safari Tech Books Online, courtesy of the Mason Library.
- Internet connection
- Server space for student portal/portfolio and assignments
- Text editor (color-coding capability recommended)
- We will be using Atom or Brackets in the computer lab
- Web browsers
- Expect to test work on multiple browsers, platforms, and devices.
- Word processor and presentation software (as needed)
- Image editing/creating software (as needed)
- Camera or scanner
- Software for creating prototypes (options and methods discussed in class)
- Storage media (USB drive/disk recommended)
Materials and Supplies:
- Index cards (4x6 and/or 5/8). These are not precious. Use them like candy. Get many and bring them to class each week.
- Sharpies or other markers for sketching
- Notebook for storing class materials. Sketchbook for sketching.
- Pens, pencils, and paper for taking notes, sketching out ideas, storyboarding, problem solving, flow charting, etc.
Grades: Grades are based on culmination of points (think XP). Points are earned by completing various challenges. Point values for these challenges are based on their complexity and difficulty. Something easily accomplished (for example, submitting a URL) would have a lower point value than something of higher difficulty (for example, presenting a completed, working website).
Points awarded for a given challenge are based on effort towards the challenge and level of completion. Evaluation criteria for a given assignment is including with the posted assignment details. Work must be officially submitted, per challenge instructions, for points to be awarded. Conversely, work not submitted or work not submitted correctly will receive 0 points. Late work may not received the full amount of points available.
Everyone starts at 0 points. Your standing (grade) in class is based on the percentage of points achieved out of points assigned.
Challenges: All challenges and challenge details are posted to the Blackboard course shell. Challenges include skill and creative building exercises, longer term projects, in class activities, presentations, and assessments. Completing challenges earns points, allowing you to level up. Some challenges may be completed multiple times for additional points.
Plugged In: This specific type of challenge centers around your participation for a given class session. This challenge is worth 50 points for each successful completion. Success looks like arriving on time, being prepared, being an active, helpful participant, and staying for the duration of the class session. Anything less than that receives fewer points. You must be present in the class session to receive any points for a given Plugged In challenge.
Submitting Work: You will maintain a web portfolio portal for all work completed for this class. All work must be posted on your portfolio web portal unless specifically stated otherwise in the challenge details.
For most assignments, work submitted for evaluation must be posted online to your web server and the URL to that specific work is submitted to the corresponding assignment in Backboard. Unless otherwise specified, files should not be submitted for assignments. Always follow the specifications given for a particular challenge. When in doubt, ask questions.
It is your responsibility to ensure that all work online is kept up-to-date with the latest versions. It is also your responsibility to acquire alternate means of posting work online if your main account runs out of space. Finally, work not found via your portal will not be graded—this includes any work sent to me via email.
Late Work: Work turned in late will not be awarded the full amount of available points for the assignment. Point values decrease by 10% of the difference between the awarded grade and 60% of the total points possible, rounded down to the nearest integer, for each day the assignment it late, up to 10 days late. Assignments received after 10 days from the due date will receive 60% of the points possible for the assignment. See the Bb course shell for a detailed explanation and an example of the math.
Resubmitting Work: Work submitted on deadline may be resubmitted for an improved grade. Grades for resubmitted work replace grades already received for resubmitted work. Any late penalties will remain with the grade. The final deadline for resubmitted work is the last class session of the term.
Estimated Homework Hours: To learn the material, you will need to spend a considerable amount of time reviewing and working with the material—it is best learned by doing. Good web design, like other design fields, is an iterative process and takes time. Likewise, web coding is an iterative process of writing code, testing code, and debugging code. Writing code is relatively easy. Getting the code to work is much less so.
Lab Policies: No eating, or drinking at the computer. Avoid any other activity outlawed by the Technology department. Please limit surfing to the activity at hand.
Class Participation: When in class, you are expected to participate in class. That means participating in the activity at hand, be it working on a project, participating in a critique, following the lesson, etc. If no specific activity is currently in play, use the time to work on class assignments and projects or researching related topics. I urge you to make the most of the time and resources provided by this class and myself. Push yourself to the next level.
Class Conduct: Professional conduct is expected. Respect for classmates, the instructor, and the classroom environment is expected.
Class Communication: Primary communication is through scheduled class time. If necessary, students will be contacted through their student email account. Class assignments and other useful information will be posted on the Blackboard course shell.
I can be available for online chat. Email at firstname.lastname@example.org to set up a time and venue.
Handouts: All course resources or handouts posted to the Blackboard course shell. This includes assigned readings.
Saving Work: You are responsible for all of your work. Keep backups of your files. Keep your files organized. Losing your files due to a technology meltdown is not a valid or accepted excuse for not having your work. School computers are not suitable or safe places to keep your files. Be smart. Practice safe computing.
Faculty Tardiness/Absenteeism: In the event that I am late or absent and no other notification is provided, students should wait 30 minutes. Students must then circulate an attendance sheet and designate one of their members to scan or clearly photograph the attendance sheet and email the scan/photo to the instructor.
I created the course outline as a separate set of documents organized for distribution via the Blackboard course shell. The course is broken up into five units: the field of web design; designing for the web; mechanics and toolkits for the web; building web pages; presentation, styles, and layout; and usability and experience. Each unit highlights one aspect of web design and includes lesson topics, activities, and assignments.
I’ve summarized the units here. I have the entire course outline compiled with topics, lesson objectives, activities, and assignments available online at http://littleberrystudio.com/teaching-portfolio/avt217-course-outline.html.
The Field of Web Design
This course is an introduction to web design. To get our feet wet and our sights oriented, we start with learning about the web design world. The activities in this unit focus our attention to look at the web not just as users, but as designers and problem solvers.
We look at what the web is as a medium, the history of web design, web design trends, the anatomy of a web page, and why web sites exist. The activities try to stretch our creative muscles to look at the web from different angles and think about the web with different perspectives.
One of the activities focuses on web design trends. It is a collaborative exercise for groups of about three students each. Each group is assigned a period of roughly five years starting from the mid-1990s when the web became widely accessible to the general public. Two groups are assigned periods in the near future (looking ahead about two years) and a little farther out (about five to ten years). The groups each research and present to the class what was going on in web design during their assigned time periods. The groups assigned future periods need to look at the cutting edge trends and technology and make educated guesses where things would be in two to ten years. After the presentations, groups upload their research and presentations to a wiki on the Blackboard course shell.
Designing for the Web
A web page is, first and foremost, a solution to a problem. At it’s most basic, it is a document with information that someone, somewhere, wants to consume. Designing for the web means identifying the problem to solve, figuring out who needs that problem solved, and how to design a solution the problem.
The topics in this unit touch on the role content plays on the web, the design cycle, design tools useful for web design, design principles and typography for the web, design conventions and patterns, basic web page wireframing and prototyping, and web image formats.
Mechanics and Toolkits for the Web
The Web is a medium for publishing content. But how do we get that content to the web?
This unit’s topics are spread around and overlapped with topics from other units to help understand the topics in context. We start with reviewing how the web works and the conversation between client (browser) and server. When we get to the unit on building web pages with HTML, we look at setting up a web hosting account (we use the Mason-provided student hosting accounts). We also cover how to access web pages published to those accounts via the account’s URL. Students research hosting and domain costs and features. With hosting set up, we work on getting files uploaded and keeping them organized on our web servers.
Building Web Pages
We put keyboard to text document and learn to write HTML. We’re learning to communicate in a new language, so we need to learn its vocabulary and syntax. We also want to learn how to structure what say in this new language so we’re understood by the browser we are communicating to.
Topics for this unit cover the HTML syntax, how to structure an HTML document, how to write our HTML with semantic meaning and why we would want to, how to put the hypertext in HTML by adding anchors (links) to our pages to allow navigation to other pages. We also touch on some HTML structures like lists and tables.
Presentation, Styles, and Layout
HTML provides the skeleton structure that holds up our web page. CSS is the presentation layer or “skin” that hangs on that skeleton.
This unit focuses on using CSS to provide style and layout to our web pages. We learn about the language and syntax and how to select elements on our web page for styling. Additional topics covered include how the cascade works, the box model, and different CSS layout techniques.
Usability and Experience
This last unit touches on concepts related to user experience. We learn the basics of usability and how ‘quick and dirty’ usability testing can help us improve our designs. We also learn the basics of accessibility and what it means to be a responsible web designer.
For an intro-level class, I tend to lean more on ‘process’ over ‘product’. What I am interested to see at this level is if the student grasps the foundational concepts and can execute them correctly. With time and practice, skills improve and so does the finished product.
This course has three projects and a collection of smaller assignments and activities to practice and demonstrate skills learned in class. The first project is to create a series of mock-ups of a web page for a collection of different screen sizes. The second project is to create a ‘portal page’ on their web hosting account that links to their HTML/CSS-based assignments and projects. The third project is to create and publish a small web site about an artist.
I am highlighting the first project here. The project, titled “My Favorite Thing,” takes students through parts of the web design process towards designing a web page prototype. Their web page’s subject is something near and dear to their hearts. The project is broken up into separate assignments that focus on different parts or stages of a web design process. Each assignment produces a deliverable. The overall project grade is the culmination of grades from each assignment within the project. Iteration in design is expected and encouraged. Assignments, so long as they were initially turned in on deadline, may be resubmitted as often as the student deems necessary.
The project’s assignments are outlined and summarized below. The assignments in their entirety are available here: http://littleberrystudio.com/teaching-portfolio/my-favorite-thing.html.
“My Favorite Thing” Web Page Design Assignments
- Describe the concept for a web site.
- Identify, collect, and compose content for a web site.
- Create a series of design comps or mockups that communicate the visual design intent of a web site for a variety screen sizes.
- With this project, we dip our toes into the web design process. This project is comprised of a series of assignments geared towards highlighting parts of the design process. You will design a series of comps or mock ups for a web page about your favorite thing. On the way to designing your comps, you will identify and describe the design concept and collect and organize content for the web page.
- Site Concept Ideas
- Describe the design concept for a single page web site.
- This challenge kicks off a longer-series challenge: create a design for a single web page that describes your favorite thing. You will create a design for a web page that promotes this favorite thing to us to persuade us, the audience, to adopt this thing as our favorite thing, too. In other words, persuade us to care about this thing as much as you do.
- For this challenge, you will come up with (at least) three web page concepts. We will present, share, and refine concepts in class.
- Creative Brief
- Identify and describe a project’s reason for existence.
- Identify and list goals the project needs to meet.
- Identify and describe the users the project will reach.
- Identify and describe the project’s look and feel.
- Provide an overview and description of what the project is about, what the project needs to accomplish, the users the project is for, and how the project will reach those users.
- You will draft a creative brief for your project. The document will contain:
- A project statement
- A list of goals the project will meet
- A description of the target audience
- A description of the project’s look and feel
- Content Outline
- Identify, collect, and compose content for the web page project.
- Organize web page content into discreet chunks.
- Proofread and edit web page content for clarity and errors.
- Provide proper citation of sources for collected content.
- This Crafting challenge is about gathering and organizing your content for your web site into a content outline.
- A content outline document collects and organizes copy (text), images, and other media for inclusion on a web site. Like many other design documents, the content outline can vary in format and level of detail. Collecting the content into one location gives us the advantage of having everything accessible and findable in one place.
- Create a series of wireframes that show how a web page’s content is structured and organized.
- Wireframes, for our purposes, are blueprints that describe how content should be arranged on a web page.
- You will create a series of wireframes for your Favorite Thing web page showing how content is structured and displayed at different screen sizes and orientations.
- Design Comps
- Create a series of high-fidelity wireframes/design comps that communicate the visual design intent of a web page.
- For our purposes, high-fidelity wireframes are interchangeable with the concept of design comps. They are a series of deliverables that communicate the layout and design of a page or screen at a particular state.
- You will create a series of design comps based on your wireframes for your Favorite Thing web page.
In addition to the above assignments, students also presented their work at various points of the project for feedback.
Included here are two submissions for the “My Favorite Thing” web page design project. Below are pages from their design comps showing their design rendered for multiple screen and device sizes.
This student created her web page mock up to highlight a series of ‘light novels’ (YA novels in the US) called Library War. You can view the PDF with all of the screen designs here: http://littleberrystudio.com/teaching-portfolio/avt217-screendesigns-library-wars.pdf.
“Halls of Extinct Monsters: America’s Natural History Museums”
This student, by far, had the most extensive and thorough set of design comps for his web page mock up about natural history museums. You can view the designs as a PDF here: http://littleberrystudio.com/teaching-portfolio/avt217-screendesigns-museums.pdf.
Web Design and Usability, AVT 415-001, Fall 2016, Spring 2017
I’ve taught similar classes to this one at AiW. This class was the first one I taught at GMU as an adjunct. What challenged me while designing the course for the Fall 2016 semester was not having a good sense of where the students would be skill-wise or knowledge-wise with the course subject matter.
The AVT 415 syllabus is summarized below to just the catalog description, the course prerequisites, and course objectives. The class policies, supplies list, and other information is similar to the AVT 217 syllabus listed above. The complete AVT 415 Syllabus (Spring 2017) is provided here: http://littleberrystudio.com/teaching-portfolio/avt415_syllabus_sp17.pdf.
Catalog Description: Introduces students to web design, usability, and the use of popular applications for static, interactive, and motion-based web development.
Prerequisite(s): Admitted to AVT BFA Graphic Design concentration, AVT 217 and 311, AVT 313 or 414 or permission of instructor. Prerequisite enforced by registration system.
Course Objectives: Upon completion of this course students will be able to:
- Communicate the concept of a web site design.
- Develop a web site concept using a user-centered design process.
- Create and publish to the web a web site that responds and adapts to a user’s device and display.
- Conduct basic usability testing on a web site design and communicate results from testing.
As with the AVT 217 course describe above, I created the course outline as a separate set of documents. I split the course into four units: web standards, semantics and structure, responsible presentation, and usability and user-centered design. The units are summarized below. The entire course outline with topics, lesson objectives, and activities is available here: http://littleberrystudio.com/teaching-portfolio/avt415-course-outline.html.
We look at how what’s under the hood on a web page can affect the usability and user experience of a web page. Two ideas start us off: web standards and progressive enhancement. Both concepts offer guidance to how we can approach designing and building a web page.
Web standards are rules and guidelines set forth by the World Wide Web Consortium (W3C) to promote consistency in how we build our web sites. Progressive enhancement is about designing from least to greatest. The core of the experience is created in a way that is accessible to as many as feasible. Features are added and presentation layers enhanced as the user’s browser and connection allow.
Semantics and Structure
Next under the hood is how we write and structure our code. How we write our HTML and structure the content presented affects the user experience. It affects how the user finds our web page and how the user interacts with our web page. It also affects how devices and user agents (browsers) interact with our web page.
Designers are responsible to their users. We look at how the presentation layer affects the user experience: Typography and layouts that respond to a screen’s size and images that are right-sized to the user’s device.
Usability and User-Centered Design
We examine and explore what it means to design for users. We focus on figuring out who our users are and what they need. Then apply that information to developing appropriate content and activities for the user to experience in an interactive environment. We test our ideas with usability testing and learn to how apply the results to improving the experiences we design.
Between the two semesters of this class, I tried two approaches with projects. One was the way I typically handle projects: as a series of assignments. The other I adapted from the Lean UX process. This is the project I am highlighting here.
The project was completed in stages or steps, similar to other assignments listed in this document. One difference was not treating the design artifact created at each step as a design deliverable. Instead the design artifact became an iterative means to an end: a high fidelity prototype demonstrating their design solution. Each step had a review and a discussion, both in class and online. We utilized the discussion board feature on Blackboard to post artifacts. Students could view and comment on their classmate’s work.
The assignment discussion prompts are available here: http://littleberrystudio.com/teaching-portolio/teaching-portfolio/avt415-the-big-idea-website.html. Students were asked “what was their big idea?”. They were to come up with a problem they could solve with a web site. The students studied their audience, determined what their audience needed, and build a series of prototypes in increasing fidelity to work through design solutions. Along the way, they tested their prototypes to make sure they were on the right track. The final prototype demonstrated canned functionality with HTML and CSS (many designs assumed server-side scripting and databases).
Included here are three submissions for the “Big Idea” Project. These are interactive prototypes created using Adobe Acrobat. The designs are for mobile or tablet display. I’ve also provided links to the interactive PDFs with the projects.
Blackboard allows exporting discussion forums for printing and reading. The transcript of the discussion forum that was part of this project is available here: http://littleberrystudio.com/teaching-portfolio/avt415-big-idea-website-discussion.pdf. The discussion transcript contains links to the HTML and CSS prototypes, where available. The students’ host their projects on their own accounts and the projects may or may not be available. At least one project account was removed as of the creation of this document.
This student designed and prototyped an app for purchasing chairs. The app leads the user through the selection and purchasing processes. The prototype PDF is available here: http://littleberrystudio.com/teaching-portfolio/avt415-screendesigns-chairs.pdf.
This student designed an app he described as “like Uber for tech support”. A user could hire a tech support provider who would make house or office calls. The prototype PDF is available here: http://littleberrystudio.com/teaching-portfolio/avt415-screendesigns-techie.pdf.
This student designed an app for purchasing custom tea blends. Users could select the components of the blend and the quantity, then complete the purchase and delivery processes. The prototype PDF is available here: http://littleberrystudio.com/teaching-portfolio/avt415-screendesigns-synteasis.pdf.
Programming Fundamentals, GWDB 123, Spring 2017
The GWDB 123 syllabus is summarized below. The complete syllabus is available here: http://littleberrystudio.com/teaching-portfolio/gwdb123-syllabus-sp17.pdf.
Course Description: Fundamentals of programming logic. Introductory concepts, structure, decision-making, looping, array manipulation, calling methods, and an introduction to object-oriented programming. Students combine experience design concepts with advanced programming solutions. Emphasis placed on learning object-oriented approaches to developing dynamic/reusable rich media modules combined with data applications.
Core Course Competencies: Upon successful completion of the course, the student should be able to:
- Implement programmatically controlled animation effects
- Write standards-compliant script
- Style with CSS
- Create compelling communication vehicles for advertisement, entertainment and business solutions
- Identify the components of programming logic
- Demonstrate fundamental competency with planning logic, pseudo statements, variables, and data types
- Explain structure, sequences, selection and loops
- Explain client-server application concepts
- Identify components of client-server applications
- Distinguish between client-side and server-side
- Research methods for solving technical problems
- Employ AND logic and OR logic through decisions decision making
- Construct a simple program using an object oriented programming language with conditional statements
- Utilize looping and counters in a program
- Use arrays and methods
Graphic and Web Design students take two classes that are specifically about programming. The units present a steady progression of computer programming topics. The units are summarized here. The entire course outline compiled with topics, lesson objectives, and activities is available here: http://littleberrystudio.com/teaching-portfolio/gwdb123-course-outline.html.
Introduction to Computers and Programming
Input, Processing, and Output
Programming is problem solving. We look at how to solve problems with and for programming and the programming process. We move on to the concept that a program is a sequence of tasks that collect input data, process the data, and output a result. We look at how data is stored, referenced, and manipulated during such a sequence. Along the way, we also learn about types of data the computer processes.
Modules and Functions
Decision Structures and Logic
We look at concepts of decision making and logic–key concepts in the world of programming. We examine different decision-making structures and how to give the computer the ability to decide on a sequence based on conditions. We also look at operators for comparison and boolean logic.
We look at the concept of loops and repeating tasks in code–something the computer is very good at. We look at ways to create and control loops, including nesting loops.
Input Validation and Text Processing
Our programs are only as good as the data we receive. We look at ways check data validity in terms of need to the purpose and user error. We also look at strategies to guard against errors. Since text or string manipulation is useful for input validation, we will spend some time looking at ways we can work with strings to format or find what we need.
Working With Arrays
Sometimes the data you need to hold on to is a collection or a list. We look at the array structure and how to use it to hold a list (or lists of lists) of data. We also look at how to access and manipulate the data in a list, including how to search and sort the array.
Menu-Driven and Event-Driven Programs
In this class, I focus on how to program and how to work through the problem-solving needed for programming. Assignments are geared specifically towards solving programming problems.
The assignments, called Kata, are a series of exercises. They’re designed for the student to practice the skills covered in class. Each Kata contains four levels of complexity or difficulty. Students can return to the Kata as their understanding increases, attempting a more challenging level of the assignment each time. Having different levels for an assignment offer an approachable entry for the novice and a suitable level of challenge for the more advanced student.
Yahtzee is a classic dice game. The object is to score the most points in a game. To score, a player rolls 5 6-sided dice. The player can choose to re-roll all or some of their dice up to three times. The player decides on a scoring category for their roll. Points for that award are based on the compatibility of the roll results. When all the categories are scored, the game is over. The player with the most points wins.
Yahtzee rules, according to Wikipedia: https://en.wikipedia.org/wiki/Yahtzee
N00b: Write an algorithm, in pseudocode and as a flowchart, that outlines how a Yahtzee game would be programmed. The flowchart may need to be broken up in to multiple sections for clarity. XP: 50 points
King Code: Complete the Noob and Code Monkey levels. Add to the Code Monkey level a multiplayer option where each player takes a turn. The user can select the number of players and players’ names at the start of the game. The game needs to keep track of and display each players’ score for the round and total score. It also needs to keep track of which player is currently playing. The winning player is indicated at the end of the game. XP: 150 points
Unicorn: Complete the King Code level. Add to that some decision-making capability to the game. The game displays the possible score for each category, based on the current roll and highlights the highest-scoring category. Already scored categories should be excluded. Additionally, the game (computer) can play as one of the players. XP: 200 points
This is one student’s Yahtzee attempt. This student successfully completed the King Code level of the Yahtzee Kata. You can play the game at http://littleberrystudio.com/teaching-portfolio/yahtzee/yahtzee.html.
Timeline Animation and Interaction, GWDB 213, Winter 2017
Over the past couple of years, I focused on the concept of using animation as a design element to enhance the user experience. Animation as a design element was already used in smart phone operating system and app interfaces. The idea eventually carried over to the web as web browsers increased support for CSS-based animation.
The courses, course descriptions, and course competencies are developed by curriculum committees at the corporate level. I am not sure why the wording for the description and competencies are phrased the way they are here (I believe it is a relic from a previous course conversion). We are not allowed to change the competencies as given. The GWDB 213 syllabus is provided in its entirety here: http://littleberrystudio.com/teaching-portfolio/gwdb213-syllabus-wi17.pdf.
Course Description: Use timeline animation in the development of interactive interfaces and experiences. Concept development and storyboarding.
Core Course Competencies: Upon successful completion of the course, the student should be able to:
- Apply visual and timeline-based design principles
- Incorporate image file formats into interactive projects
- Define the concept of timing
- Explore imagery, audio, motion, and interactivity
- Programming concepts for time-based projects
- Demonstrate the ability to plan, design, and create interactive projects
- Storyboarding. Flowcharting
This course is one of two classes Graphic and Web Design students take that involve motion (the other is Motion Design). I broke this course up into five units, each focused on an aspect of animation in the context of user experience and web design. The units are summarized here. The entire course outline compiled with topics, lesson objectives, and activities is available here: http://littleberrystudio.com/teaching-portfolio/gwdb213-course-outline.html.
Animation in UX Design
Designers take special care with finding the right color, the right layout, the right typeface, the right typographic treatments to come up with just the right experience for their users. With the rise of animation support in browsers we can now add animation to that list of design elements this unit focuses on animation as a design element not just in the sense of motion graphics but also how we can use animation to solve UX design problems.
We learn about how animation works and focus on timing and easing and how they affect the animation’ plays’s design. We use different technologies available to us for creating animation for the web including CSS and SVG-based animation.
Principles of Interactive Animation
Now that we know how to create animations for a web page, we spend some time looking at how we can improve our animations. We examine the principles of animation and how we can apply them to creating animations in a UX context. We also apply UX principles to creating animation so that our animations enhance the user experience and not get in their way.
Designing and Prototyping Animation
Designing animation for interaction borrows planning techniques from traditional animation, user experience design, and graphic design. We look at why and how we add animation to a design (what’s its purpose?). We learn about storyboarding and prototyping animation effects. Finally, we document animation using a style guide, so that it can be used throughout an interface consistently.
Animation can do a great job to enhance the user’s experience with a webpage. It can help guide attention across features or through tasks. With great power comes great responsibility and designers have a responsibility to create animations that do not get in the way of the users. This includes avoiding animations that trigger motion sensitivities or creating animations that frustrate and annoy. We also look at optimizing animation with progressive enhancement and by streamlining the code so animations run smoothly for the user.
Animated Infographic Project
- Project Overview and Creative Brief
- Design and construct a web page that presents data and information to the user in a graphical and animated format.
- Write a proposal describing the topic, justification, data, and target audience for the infographic.
- The first step of this project is to decide and declare what your infographic will be about. In class, we discussed project ideas. Use these as the starting point for your creative brief.
- Your creative brief should be one page and include the following:
- Name, course name, course code, and quarter
- Project statement
- Target audience
- Data and Narrative
- Identify and record data relevant to infographic.
- Outline (or script) narrative for presenting the data/information in the infographic.
- This assignment is about gathering and organizing your content for your infographic. The deliverable is two parts. The first part is an outline or ‘script’ of the narrative your infographic will tell. The second part is an outline or list of the actual data and/or information you are presenting and basing your infographic on.
- Visual Design and Storyboards
- Communicate the design concept of an animated infographic web page.
- This assignment is about communicating the visual design of your infographic. This includes typography, images and graphics, colors, and layout.
- Completed Animated Infographic
- Build and launch a web page that presents data and information to the user in a graphical and animated format.
- Demonstrate appropriate page structure semantics.
- Demonstrate CSS-based animation techniques.
- Demonstrate use of SVG graphics and animation.
- For this assignment, you will create the animated version of your infographic design using HTML, CSS and CSS animation, SVG and SVG animation. Some animations should be triggered by the user scrolling to a particular section.
Most of the students in this particular class were graphic design students. This was their first animation class. A number of them had also only the intro web design class by this point. I created the animated infographic project because I felt it was something a majority of the students would relate to since they had created traditional infographics in other classes. In retrospect, the two problems with this particular assignment were: 1) that there wasn’t enough time to familiarize the students with the technology and animation concepts to a level they could adequately incorporate into their work and 2) that this particular project didn’t fit the theme of animation as a design element for interaction design. When learning new skills, sometimes it takes a while to wrap one’s brain around how these new skills can integrate with the existing skill set (like learning to converse in a new language). I think that was a factor at play with this class and something I need to address more thoroughly in future iterations.
Here are two works completed for this project. The first is “The Effects of Coffee on the Human Body.” The student who built the coffee design focused on using animation as an added design element, along side traditional design elements. You can view the animated piece here: http://littleberrystudio.com/teaching-portfolio/gwdb213-animated-infographic-caffeine/index.html.
The second is “5 Myths of Autism.” The student who created this design focused on animation for the interactivity. Here she used animation to guide the user’s eyes and attention. The animation effects help the user navigate the transition from one state to another. You can view the animated piece here: http://littleberrystudio.com/teaching-portfolio/gwdb213-animated-infographic-autism/index.html.