Susan Buck

Teaching Portfolio

Courses

Web Site Design and Development

with HTML and CSS

This course is the foundation to building content on the web.

For some students, the curriculum is the comprehensive guide they need to publish their own websites for any endeavor (personal portfolios, businesses, etc.). Students will learn how to take the reigns on their own sites--no more waiting for a web developer to get around to making changes.

For other students who are interested in web development as a career focus, and who may already have some experience, this course is a spring board to the other topics they'll need to add to their tool set (dynamic interaction, database manipulation, etc.).

We start with the basics, bringing all the students onto the same page with the necessary software (code editors, FTP) as well as the practical ins and outs of servers and domains. By the end of Day 1, students have put their first webpage online.

Next, we dig into HTML - the syntax behind all websites. We learn how this tag-based language communicates with browsers, and how we can incorporate CSS to fully style and structure our websites. The final technology we cover is JavaScript, which allows us to add dynamic interaction to our work.

Each class session integrates hands-on exercises throughout the lecture so students have an opportunity to apply techniques while they are fresh and ask questions as they develop their skills.

In addition to technical know-how this course has a strong emphasis on usability, information architecture and design. Throughout the semester we critically examine the difference between effective and ineffective website design. Students complete this class with an acute awareness of design principles and the technical skills to implement them in the online environment.

Week 1

Introductions, syllabus, schedule, projects

Week 2

How do we start to publish online? Servers, domains, FTP, Software

Week 3

Project 1 Sketches and mock-ups

Week 4

HTML Hello World: Tags, tags and more tags

Week 5

HTML Digging Deeper: Paths, directories, and even more tags

Week 6

Project 1 Work day

Week 7

Project 1 Critique

Week 8

CSS Introduction: How and why do we apply styles

Week 9

Design Principles on the Web

Week 10

Project 2 Sketches and mock-ups

Week 11

Web Dev's Photoshop

Week 12

CSS Layouts and Positioning

Week 13

Project 2 Work day

Week 14

Project 2 Critique

Week 15

TBD based on student interest's

Week 16

Project 3 Sketches and mock-ups

Week 17

Project 3 Work Day

Week 18

Project 3 Critique

Dynamic Web Applications

with PHP and MySQL

This course is the next step for students who are proficient in HTML/CSS and are looking to take their skills--and web projects--to the next level.

Websites can be relatively static mediums. A simple portfolio, a site for a local coffee shop with hours, location and menu, and an elementary school's faculty listing are all examples of basic websites with hard-coded content. This format works well for presenting an unchanging amount of content that is the same for every person who uses the website.

Web applications, however, take websites to the next level. Think about your experience when you log-in to your bank, Facebook, Gmail or Twitter. These are all robust applications operating off of extensive databases and offering personalized experience to each individual user.

This course exposes students to the technologies they need to make their own dynamic, web-based applications. We work with the server side programming language PHP, in conjunction with MySQL, to add, retrieve, update and delete content in a database. Students also learn how to work with a set of technologies called Ajax which allows all that adding and updating to happen on the fly without refreshing the page.

Week 1

Introductions, syllabus, schedule, projects

Week 2

Software and server overview; PHP introduction

Week 3

Project 1 Sketches and mock-ups

Week 4

Programming foundations: variables, functions, conditional statements, loops

Week 5

Working with PHP and HTML

Week 6

Project 1 Work day

Week 7

Project 1 Critique

Week 8

MySQL connections and actions (create, read, update, delete)

Week 9

Implementing MVC structure

Week 10

Project 2 Sketches and mock-ups

Week 11

Ajax

Week 12

Integrating with external sites via APIs

Week 13

Project 2 Work day

Week 14

Project 2 Critique

Week 15

TBD based on student interest's

Week 16

Project 3 Sketches and mock-ups

Week 17

Project 3 Work Day

Week 18

Project 3 Critique

Dynamic Interaction

with JavaScript and jQuery

JavaScript is the ubiquitous technology behind every dynamic change you see when working within a web application. When you're filling out a form and a flag indicates you've made an error; when you hover over a movie at Netflix and a description pops-up; when you're on Facebook and a notification pops up that you have a new comment; when you see something animate, grow, shrink, fade in or fade out - it's all JavaScript at work. JavaScript is the key to making your website dynamic and responsive to the people who use it. Implementing JavaScript effectively will help you manage input and respond to your users.

In this course, we begin by learning the basic syntax of pure JavaScript and explore the "action and reaction" backbone of the language: we program the browser to "listen" for user some user action, like a mouse hover or a character being entered in an input. From that action, we trigger a reaction, such as displaying new content, hiding content, or changing the style of existing content.

After we have a firm grasp on how to work with JavaScript, we introduce the powerful and popular JS library jQuery, which will allow us to introduce even more dynamism using fewer lines of code.

While JavaScript is touched on in both Web Site Design and Development and Web Applications this course is devoted entirely to mastering its use.

Week 1

Introductions, syllabus, schedule, projects

Week 2

Software and server overview; JavaScript introduction

Week 3

Project 1 Sketches and mock-ups

Week 4

Programming foundations: variables, functions, conditional statements, loops

Week 5

Working with JavaScript and HTML

Week 6

Exercises

Week 7

Project 1 Work day

Week 8

Project 1 Critique

Week 9

jQuery

Week 10

Project 2 Sketches and mock-ups

Week 11

Scripted Animation

Week 12

Exercises

Week 13

Project 2 Work day

Week 14

Project 2 Critique

Week 15

TBD based on current topics

Week 16

Project 3 Sketches and mock-ups

Week 17

Project 3 Work Day

Week 18

Project 3 Critique

Interactive Design

Functional Problem Solving

"Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work.

Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time.

Effective applications and services perform a maximum of work, while requiring a minimum of information from users."

- Bruce Tognazzini "First Principles of Interaction Design"

Interactive design is ubiquitous to our everyday actions. Shutting off alarm clocks, turning on coffee pots, purchasing subway tickets, checking emails, making online purchases - we interact with hundreds of interfaces - both analog and digital - in a single day.

Many of these interactions go unnoticed if they're working well, but we've all experienced moments of complete frustration when a design fails and our intentions are delayed or completely thwarted. In this course, we'll explore all the components that make up the difference between such successes and failures when designing for user-based interaction.

We'll start with a history of interactive design to understand what it is and how it has evolved with devices and technology. We'll also begin a series of observations to better understand how users cognitively react and interact with designed objects. Students will spend time studying specific objects and documenting their observations. At this point, we are more focused on the user's behavior than we are with the interfaces or objects.

After studying human interaction, we'll dissect how information and instruction are conveyed. In one exercise, students will be given a simple line drawing of a dog and tasked to create a set of written instructions for how that drawing could be re-created by someone who had never seen the picture, and who was given no indication that the image was of a dog. Students will then use their scripts on three of their friends to have them complete the picture. In class, we will compare and contrast the different results, the language used, and students' takeaway observations.

With the observation period behind us, we'll begin to categorize "successful" and "failed" designs we encounter in the physical world (nothing software based). For each category we'll examine key components including usability, responsiveness, learning / adaptation time and clarity of information.

For their first major project, each student will be tasked with choosing one of the failed designs and reworking it. This process will include extensive sketching and brainstorming, rapid prototyping, and user testing, followed by a final presentation of their product.

At this point in the semester, we'll shift gears to screen-based interaction design and examine design for software and the Internet. Students will undergo the same observation and execution exercises as they did for physical objects. For the final two projects, students will create their own digital interfaces (using the tools of their choice) that attempt to solve some need, goal, or problem for a specific audience.

Week 1

Introductions, syllabus, schedule, projects

Week 2

Defining interaction design / history

Week 3

Understanding user behavior

Week 4

Defining the goal and audience of interactions

Week 5

Conveying Instructions and Information

Week 6

Project 1 Work day

Week 7

Project 1 Critique

Week 8

Rapid prototyping

Week 9

User testing

Week 10

Ubiquitous systems

Week 11

Project 2 Work day

Week 12

Project 2 Critique

Week 13

Tangible interfaces / wearables

Week 14

Introducing screen based interactions

Week 15

Web design

Week 16

Commerce

Week 17

Designing for for the differently abled

Week 18

Project 3 Work Day

Week 19

Project 3 Critique

Graphic Design

Creating meaningful visuals

Learning to be a graphic designer is about understanding how to organize information and convey meaning with visuals. We see graphic design at work everywhere in our lives: from grocery stores to presidential campaigns to online sites to signs at our local DMV to fine art.

This course will breakdown this pervasive field in order to understand, appreciate and work towards mastering its fundamental yet complex levels. In order to do this we will study Graphic Design's historical context, define, explore and experiment with basic design principles, all while improving the necessary technical skills. In addition, students will also gain insight into the professional field of Graphic Design.

Texts:

• History of Graphic Design by Phillip B. Meggs
• Thinking with Type by Ellen Lupton

Projects:

• Logo Design
• Concept Design: "What is Graphic Design?"
• Package Design / Advertisement
• Web Design (visual concept only; not executed)

Week 1

Basic design principles: Balance, Rhythm, Proportion, Dominance, Unity

Week 2

Signs and Symbols

Week 3

Technical Skills: Photoshop

Week 4

History

Week 5

The design process: thumbnails, sketches, iterations, final presentations

Week 6

Technical Skills: Illustrator

Week 7

Typography

Week 8

Color Theory

Week 9

Texture

Week 10

Composition

Week 11

Layouts and Grids

Week 12

Image Selection

Week 13

Logo Design

Week 14

Technical Skills: In Design

Week 15

Advertising

Week 16

Infographics

Week 17

Design briefs / working with clients

Week 18

Portfolio development

Online Identity

for Career and Business Development

Artist, entrepreneur, academic, business owner - no matter what your career focus, having an online presence is a necessity for staying relevant and competitive in your field.

At the start of this course we work together to examine each student's goal for the semester - whether it be to obtain a certain job, cultivate clients or build a customer base. With audience in mind, we begin the critical process of logo and brand identity. We look critically at other online identities, exploring what works and does not. Students use their classmates as an audience for feedback and critique on their developed designs.

Next, we dig into technical aspects, walking each student through the process of obtaining her/his own custom domain name and tools for publishing web sites on that domain. Students also learn how to create an email address at their own domain name, so that instead of promoting services like @gmail.com or @yahoo.com, they promote their own presence every time they share their e-mail address.

Once students have built their (or their business's) home on the web, we look at strategies to generate traffic. We learn about search engine optimization--components of your site that will boost its ranking in Google, so that people who search for you or your business can find you more easily. Throughout, we focus on building solid content that will keep visitors engaged.

In conjunction with all of the technical applications, we look at relevant examples and case studies of how other individuals and businesses have successfully created their own online footprint.

Week 1

Introductions, syllabus, schedule, projects

Week 2

Students present their topic and goals for the semester

Week 3

Examine competition and inspiration

Week 4

Logo and identity design

Week 5

Logo workshop

Week 6

Logo and identity design critique

Week 7

Domains, servers and publishing online

Week 8

Site sketches and mock-ups

Week 9

Crash course in HTML/CSS I

Week 10

Crash course in HTML/CSS II

Week 11

Site workshop I

Week 12

Site workshop II

Week 13

User testing

Week 14

Online resumes and demo reels

Week 15

Understanding audience and traffic via Google Analytics

Week 16

Content building and social networks

Week 17

Print strategies - carrying your brand offline

Week 18

Final critiques

Data Visualization and Information Graphics

A Pixel is Worth a Thousand Words

In our increasingly hyper-connected world, information is thrown at us from more sources, and on more different devices, than anyone could possibly absorb in raw form. Because of this, it's becoming increasingly important to be able to distill the flood of information, data and knowledge into comprehensible formats.

By introducing graphic storytelling, which merges visuals with text, we present information in a way that can be absorbed more quickly, and with a higher retention rate, than using text alone.

Previously the exclusive domain of mathematicians and statisticians, data visualization is a technique that is now being used by designers, news makers and content creators across the world and the web.

In this course, we begin with the history of information graphics from hieroglyphics to pictograms to early map-making. We develop a sense for how ubiquitous graphic information is and begin to notice it in our everyday lives: in public spaces, traffic signs or subway maps. We examine the balance of image and text, and how to create clear and attractive communication design.

As we move through the semester examining the theory of data and information visualization, we also apply our knowledge across three different projects:

Project 1 tasks students to create a 2d, still information graphic on the topic of their choice. Students are welcome to use Photoshop, Illustrator or other image software.

Project 2 introduces dynamic data; students will be given the tools they need to parse live data into a visual representation of information. Example data sources might include news, weather or a social network feed.

Project 3 approaches information graphics from a linear storytelling perspective. Using animation or video, students create a 1 to 2 minute piece explaining a concept, idea or set of data of their choice. Example: Eat Real Campaign: Food-Driven Infographic Movie

The work created in this class is highly experimental and focuses on the execution of ideas over final polish. The tools used in the course may be unfamiliar to some students, so we spend time with each project having a crash course in the necessary software and technologies. Students are also encouraged to work together, pooling their experience and skills.

Week 1

Introductions, syllabus, schedule, projects

Week 2

Observational studies of infographics in our daily lives

Week 3

Project 1 Sketches and Mockups

Week 4

Intro to infographics - history, visual communication / thinking

Week 5

Design techniques

Week 6

Project 1 Workshop

Week 7

Project 2 Critique

Week 8

Journalism and infographics - ethics, context, clarity, real data

Week 9

Project 2 Sketches and Mockups

Week 10

Copy and technical writing

Week 11

Project 2 Workshop

Week 12

Project 2 Critique

Week 13

Diagrams, Maps and Charts

Week 14

Interactive graphics, online vs. print

Week 15

Project 3 Sketches and Mockups

Week 16

TBD based on student interest's

Week 17

Project 3 Workday

Week 18

Project 3 Critique

Other course topics of interest

Teaching Philosophy

For me, the classroom is a playground; an environment for engaging with the material and skill-set I've been cultivating for the past fifteen years. I developed a passion for creating digital content long before it became my focus of study or eventually my career. My early experiences involved a lot trial and error, imagining projects that I wanted to code into reality and then figuring out the techniques needed to do so. Now as a teacher, I design courses with the dual backbone of utility and exploration that I feel has shaped my own learning process.

On the utility side, I give the students the technical know-how they need to execute their ideas with whatever programming language or software tool we're using. In this process, I spend a lot of time developing my methods and reflecting on my own learning process for the material. I'm constantly refining, building on what works and throwing away what doesn't. I make sure the information is accessible to every student, no matter her/his level or background, and I build in ample time for hands-on practice in class where students can work together with each other and with me to solve problems. In short, I aim to give the students a valuable experience they can't get in technical books or tutorials.

On the exploration side, all my classes are built around a series of (2-4) projects that students complete throughout the semester. Though the technical medium and structure of each project are constrained, the topic is typically wide open. This gives students an opportunity to explore whatever their interests may be and walk away with real products that hold value to them. The projects thread together the technical skills the students learn throughout the semester, but they also challenge them on a design and content level. Beyond just training students to be digital engineers, I train them to recognize and create meaningful content.

I work in educational environments because I thrive on the symbiotic give and take of energy in my classes. It's so rewarding to watch a student with seemingly hopeless aesthetic skills expand her design vocabulary throughout the semester and begin to "get it." I take immense pride when a student asks for feedback on revisions he's made to a project that was turned in and graded a month earlier. I welcome middle-of-the-night emails from a student who keeps hitting a wall with a bug she can't figure out - because sometimes I am also up, stubbornly pursuing a challenge in my own work.

As a freelance web and digital developer, I participate in academics because it allows me to do what I love while working with people who are just as excited about the process of creating digital content as I am.