Digital and Emerging Media Design Two




A picture of a computer
A picture of a clock
A picture of a phone

GDES-315 Digital & Emerging Media Design II

Spring 2013 Tuesdays & Fridays, 10:20am–12:50pm, Katzen 204 Instructor: Yana Sakellion

Phone 202.885.1676 E-mail Office Katzen 220

"Design is not the narrow application of formal skills, it is a way of thinking." Chris Pullman



This course prepares students for the role of a professional web designer. It focuses on both essential Design and Technical skills necessary to complete a successful web site.

A picture of stairs going right

Students are expected to muster the foundations of Interface Design, Usability principles, Web Typography and Information Architecture, as well as become technically proficient with writing clean and functional XHTML, CSS and jQuery code.

A picture of stairs going left

Through hands-on projects, exercises and lectures students learn how to follow the typical web design process from the initial research, to design, development, troubleshooting and final implementation.

A picture of stairs going right

Additionally, this course examines the place of technology and design within the context of contemporary cultural, social and media landscape. For this purpose the course hosts a guest speaker from a non-web design filed, and embarks on a filed trip to the local design agency (TBA).


  • Complete 3 portfolio-ready (and ideally competition-ready) web sites showing variety in approach and execution
  • Learn the standard process of standard and mobile web site design and development from concept to completion
  • Gain proficiency with essential Adobe Creative Suite software and XHTML / CSS / jQuery coding
  • Be able to design and develop responsive web sites for a variety of stationary and mobile platforms
  • Become comfortable navigating available Design+Technology resources for further inquiry and self-learning
  • Establish your own identity as a web and interactive designer within the demands of a contemporary marketplace
  • Expand the definition of Design+Technology beyond applicable Web Design and into Interdisciplinary applications

Green teaching

This is a Certified Green Course. This means, for example, that I will not hand out any printed materials, but I will use Blackboard extensively to post handouts, collect assignments, and provide you with feedback on assignments. "AU's dream is Green"

A picture of recycle signs

To help make our class as green as possible, I encourage you to buy used books, minimize paper use by submitting assignments electronically as instructed, and read course readings online rather than printing copies.

A picture of recycle signs

If you choose to print, please print double-sided, and recycle the paper after the end of the semester. Learn more about Green Leaving at

A picture of bubbles

Required books

  • "Stylin' with CSS: A Designer's Guide" (3rd Edition) by Charles Wyke-Smith, ISBN:978-0321858474, available on Amazon (due week 2)
  • A picture the book stylin-with-css
  • "Don't Make Me Think: A Common Sense Approach to Web Usability (Second Edition)" by Krug, ISBN:978-0321344755, available on Amazon (due week 4)
  • A picture the book Don't Make Me Think
  • Other required reading assignments will be given over the course of the semester and will available on Blackboard. Should any other books or materials become necessary along the way one weeks' notice will be given to allow students time to acquire the materials.

Recommended books

  • "The Designer's Web Handbook: What You Need to Know to Create for the Web" by Patrick McNeil, ISBN: 978-1440314414, available on Amazon
  • "Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences" by Stephen P. Anderson, ISBN:978-0321725523, available on Amazon
  • "CSS for Print Designers" by J. D. Graffam, ISBN:978-0321765888, available on Amazon
  • "HTML and CSS: Design and Build Websites" by Jon Duckett, ISBN:978-1118008188, available on Amazon
  • "jQuery for Designers: Beginner's Guide" by Natalie MacLees, ISBN:978-1849516709, available on Amazon


Blackboard Resources, Readings and Tutorials section. Check back often, as the resources are constantly updated tutorials (log into my AU first) Linda Tutorials

Required supplies

  • Personal domain name and web hosting service package (I will suggest providers in class, plan on spending ± $20)
  • Reliable Flash drive (minimum 2GB). Please do not bring in external drives unless you have tested them in our labs before. They tend to have permission and other issues.
  • Backup drive and/or server space (design server, BB, external disks - the more the merrier)
  • Unlined sketchbook and a pencil/pen. You must make sketches before starting your digital designs.
  • CD-RW and/or CD-R. Make sure you always have at least two blank disks when coming to class.
  • Access to necessary programs and internet outside of class (Adobe suite)
A picture of a printer


No late work of any kind is accepted without a valid and documented excuse. If you miss or turn late any of the assignments, exercises, quizzes, work-in-progress updates or projects you automatically receive an "F" for that particular assignment. This course is structured so that all work can be completed during a normal academic session. The instructor will not issue an incomplete grade without a serious, documented excuse.

You can write me at Allow at least 24 hours for response, though I will often get back to you much sooner. I will not respond to technical questions sent vie e-mail the day before a project is due! Make good use of my office hours and address all issues early on.


Standards of academic conduct are set forth in the University's Academic Integrity Code. By registering, you have acknowledged your awareness of the Academic Integrity Code, and you are obliged to become familiar with your rights and responsibilities as defined by the Code. Violations of the Academic Integrity Code will not be treated lightly, and disciplinary actions will be taken should such violations occur. Please see me if your have any questions about the academic violations described in the Code in general or as they relate to particular requirements for this course.

A picture of an alarm clock
A picture of a floppy disk
A picture of a laptop

Classroom policy

Do not surf internet for personal purposes during the class. I occasionally ask you to put your machine to sleep during lectures or demos. The monitor MUST be off during that time. Turn off your cell phone in class. Do not browse the web on your phone. No Food. Food consumption is only allowed during the class breaks, and not in the classroom.


No late work of any kind is accepted without a valid and documented excuse. If you miss or turn late any of the assignments, exercises, quizzes, work-in-progress updates or projects you automatically receive an "F" for that particular assignment. This course is structured so that all work can be completed during a normal academic session. The instructor will not issue an incomplete grade without a serious, documented excuse.

Office hours

Open office hours are held in room 204 or office 220. The schedule will be posted as of the 2nd week of classes. Under special circumstances office hours are also available by appointment. In addition to holding meetings at the office, I may also be available vie e-mail or Skype. Do not leave any questions until right before deadlines.

A picture of an email
A picture of a no-cell-phone sign
A picture of an hourglass


Applied Projects are weighted heavily, and must show all the intermediate steps of the design/development process. Completion of all required projects is mandatory to pass the course. The instructor will lower the final project grade one full letter value for any intermediate deadline missed (comps, research, etc). Always come to class with projects looking better than they looked last time. A project is never finished and can always be improved. Any project not seen in progress will receive an "F" even if the final is delivered on time.

An infographic that looks like a soda bottle

Applied Projects (3 total): 60%

Technical and Design Exercises: 15%

Quizzes: 15%

Participation, attendance, personal progress: 10%

Grade explanation

  • A 100–90 "Wow!" Means project is ready for the AU Design Expo. Work represents a finished portfolio piece. "A" grade indicates work which is clearly superior. It does not mean "satisfactory" or "adequate." Projects and exercises must show clear conceptual thinking and successful use of design principles, craft (as it applies digitally) and technique.
  • B 89–80 "Good" The work is almost portfolio-ready. This grade implies work that is more than merely satisfactory. Such work will reflect an above average understanding (and communication) of the material. Projects and exercises will contain only minor errors in craft and technique.
  • C 79–70 "Just ok" Satisfies minimum requirements. This grade indicates work which is competent, adequate, and satisfactory in presentation. Such work reflects effective understanding of the majority of the material covered. Projects and exercises will not contain excessive errors in craft and technique.
  • D 69–60 "Bad" This grade is awarded to work which is unsatisfactory, not competent, or inadequate in terms of presentation or in terms of fulfilling the assignment. Projects and exercises which contain many serious errors in craft and technique will normally be awarded this grade.
  • F below 60 This grade is assigned for failure to complete an assignment in both a timely and competent manner.


Students are allowed to re-submit PSD designs and HTML development for projects 1 and 2 at the end of the semester. To be considered the work must show significant improvements. No process files,wireframes, flowcharts or style guides may be resubmitted for a better grade. Simple act of re-submission will not earn you a better grade, but better work will.

There will be 0% tolerance towards "lost files". Set up a reliable workflow for backing up your work. BACKUP YOUR WORK!

An icon of a folder An icon of a keyboard An icon of a computer mouse

Project list:

  • Informative Website (single-page) Client: AU Design Program Project: GDES-315 Course Syllabus page Goals: Present text-heavy content in easy-to-digest and visually exciting way that can attract AU design students.
  • Website with a Cause (non-profit event) Client: Local non-profit organization Project: Upcoming Event micro-site Goals: Increase the attendance and related fund-raising by promoting this event and a parent organization.
  • Responsive Sweepstakes Website Client: Converse Project: Chuck Taylor DC Comics Sneaker sweepstakes site Goals: Create an immersive experience that draws the customer to learn about Converse and can be engaged with on any stationary and mobile platform.

Semester plan:

  • Revisiting the evolution of Web Design 1990's to present
  • Refresher of basic XHTML/CSS skills and usability principles/li>
  • Intermediate HTML5/CSS3 layout and formatting techniques
  • Intermediate management of Information Architecture, Hierarchy and flowcharts
  • Google fonts and CSS3 text effects for better Web typography
  • From visual design to dynamic user experience. Storytelling for web designers
  • Rich media implementation with HTML5


  • Mastering jQuery plug-ins for dynamic websites
  • Writing your own jQuery for enhanced user experience
  • Intermediate Code troubleshooting techniques
  • Introduction to Experience Design research
  • Current trends in Web Design and Technology
  • Designing fluid layouts for Web and Mobile Devices
  • Web presence: online student portfolio strategy, techniques and marketing
  • Free lance work: sources, fees and contracts
  • Looking ahead: Experience Design beyond the screen
A picture of a computer
A picture of a clock
A picture of a clock

How to do well in this course:

Take responsibility

Like Morpheus (Matrix) said "I'm trying to free your mind, Neo. But I can only show you the door. You're the one that has to walk through it."You must put in the hard work, be proactive and follow up with your research and ask questions. Do not wait for me to take full direction of your project. You are the one who has to do that. It is my responsibility to give you the skills and direction, it's yours to figure out your design and make it better.

Leave complaints and negative attitude at the door

We all get frustrated at times, but dwelling won't help you improve. I'll be happy to answer as many questions as it takes to get you in a better situation, but I will not welcome excuses. Being positive and having a professional demeanor will get you far in this class and in the "real world".

Don't get a great suggestion on your design and forget all about it. It is your responsibility to keep a track of all details related to your work progress. So write it down, take voice memos, do whatever you need and then make a checklist. Do not expect the instructor to always keep a checklist for you.

Be present and come ready

Come to every class, be here on time, and stay for the whole class. Bring your work ready to be shared. The worst waste of time is coming to the crit and showing something that you put together 5 minutes before.

Pay attention

When I ask you to execute an exercise, a project or an assignment I post detailed instructions on how I want it to be done, named and submitted. It is your responsibility to make sure you follow these precisely. Do not let your grade slip away just because you forgot to name files properly or forgot to submit it on Blackboard.

Don't be a weekend worrier

Allocate ample time to work on your projects throughout the week, not just the day before its due. No matter how able and talented you are, you need time to develop and progress. There is a huge difference between spending 12 hours on project from Monday to Friday, or the same amount of time from Saturday to Sunday.

Be excited about the work you are doing

In this class you have great flexibility with the topics on which to work. I can't stress enough the importance of focusing on a subject you really care or want to learn about. Be curious about the world outside of Design field as well as in.

Don't ignore feedback

Do not come to each class without implementing suggestions or resolving comments made in critiques. Getting the same exact comments/suggestions week after week is not doing you any good. Make evident attempts to resolve your design issues. Even if you don't succeed, don't pretend you don't know they exist.

Always try your very best

It may be hard to always give it your 100% effort, but if you do you will never regret a missed opportunity.

Go beyond project requirements

Simple as that - only projects that go beyond requirements and show outstanding results will get an "A".

A picture of the AU logo and credit to the designer - Julia Seaton