Design for the Digital Realm
Fall 2014 – 2015
Rutgers, Mason Gross School of the Arts
Please check out the course blog on daily basis for announcements, assignments, deadlines and resources.
As the digital artifacts pervade, design decisions that shape them affect life. Designers’ role in the society today, is not only enclosing content but it is also shaping things, writing user interaction scenarios, engineering systems and inventing. This course is aiming at training students to research, analyze, prototype, and develop design concepts for digital media for three distinct social, and cultural contexts.
“UI/UX Designer” has been one of the mostly encountered and popular job posts of the recent years. This good looking abbreviation stands for “user interface and user experience designer”. Interaction and experience are aligned with screen ergonomics and usability. Although usability and screen ergonomics are mature subjects which were being studied way before the digital communication pervasion but they were more in the realm of engineering and industrial design. Today, these are two important matters in the ever-changing activity list of today’s designers.
User Experience Design is a broad term used to explain all aspects of a person’s experience with a service or product including its interface, graphics, industrial design, physical interaction, and the manual. As one of the most important elements of user experience, user interaction and its design, in the last few years, shifted from being just about specifying UI components and communicating them to the engineers. Interaction designers have more freedom to design contextual interfaces.
From one point of view user experience is a tautology as the design of any service or product inevitably creates the interaction scenario between the human and the artifact. From another point of view the effort for designing the user experience will end up with taking the full control of the user perception over a service or product which is impossible because of very simple fact: each person is another person. Projects in this course will try to evoke some ideas to find a comfortable and productive place for a designer in between these two artificial approaches.
Throughout our research we will need to discover and learn more about some related concepts. Basic principles of semiology will be our main guide as we embark on discussing relatively complex concepts such as Skeuomorph.
So, in the context of this course, we argue that to master UI/UX design, practice is a must. This course will consist of three design projects all of which require fine experience design and its presentation.
Design processes will require some exercise on some tough and complex technical challenges such as information architecture, interaction design, and digital typography. Throughout the course, apart from the lectures students should read more to learn about new business processes and new technologies. The course blog will provide some good links to interesting reading. Additionally, design processes will employ the study of user behaviours, usability tests and interviews, prototype testings. In the course of lectures some useful methodologies will be introduced and suggested but more interesting results are expected from the students. For each project there is a particular proportion for the working prototype over a mock up.
Earlier two projects are more subject specific than the final one. Students will be asked to choose one among alternatives and develop the design concept for that specific subject matter. The subject and the scope of the final project is considered as a part of the design process and will be decided by the student. All three projects will follow the same UI/UX design processes. Strategy, scope, structure, skeleton and surface design. Concept development phases of the projects will also be different due to the different subject matters and also unique project description scenarios.
A typical digital artifact design process for each project will employ following steps:
Surface a.k.a Visual Design
Typography and UI elements
Feedback and Analysis
In addition to these projects, depending on the schedule we will do two in class exercises like sketch problems. The subjects will be announced on the day and graded as quiz.
In-class workshops will be organized when necessary. One of the important workshops will be about content management systems and self publishing in general and specifically you will learn how to use and manage websites with templates. WordPress and Kirby are two major examples to work on as we cover the information architecture of various CMS.
Coding and development skills gained over the earlier semesters of the design program at Mason Gross will play a key role at almost all stages of the project development. Processing, 2D motion and animation design, physical interaction design and prototyping will help you not only producing content for the project or prototyping it but also will be inspirational for the concept development stages of your projects with the particular subcultural communities that they are peculiar to these activities. However, among all, HTML and CSS languages will be the staple to publish all projects. There will not be major advisory on the basics of these programming languages, it is expected that students follow up with open source resources online like w3schools and learn the basics. The aim of this course is to lead the content development and helping students to follow an appropriate path to publish ideas and content as well as discussing the aesthetic matters in class collectively for each project.
The Elements of User Experience by Jesse James Garrett
Inventing the Medium by Janet H. Murray
Post-digital Print – The Mutation Of Publishing Since 1894 by Alessandro Ludovico
These two books are suggested to buy but apart from these two all the related articles and readings will be provided on course blog.
These reviews are delivered upon your presentation of the assignment on each submission date. All students in class are encouraged to participate to these reviews and discussions.
There are reading sets to be assigned after each lecture session and you will be responsible to write an annotation about them. During the semester you will be asked to explore similar works to the ones presented in lecture hours and post them on your blog. These writings and collections will help you a lot to put your ideas and knowledge together to write your thesis proposal.
The course blog: http://teaching.paganstudio.com/fall2014/
Most of the hardware and the software which are going to be used in class will be provided and be ready in the classroom in our class hours. On the other hand we strongly recommend that you have your own computer at home equipped with relevant software for practice and execution of the assignments. Here is a list of software which we are planning to use during the semester:
Adobe After Effects
Sublime Text 2
Adobe Digital Editions
Some of the assignments will require higher processing speed and larger memories than your own computer has so please prepare yourself to work in the lab at school throughout the semester. If you would like to attend the class with your notebook computer, of course you can but you will be responsible for your own workflow and troubleshooting.
Lateness and Absences
Three arrivals of more than 10 minutes late will count as one absence. After three unexcused absences, your fourth absence will lower your final course grade one level. If you miss class, it is your responsibility to catch up on the work by checking the blog and contacting the instructor by e-mail.
Tuesday / Thursday 4:00 to 5:00 pm, and by appointment (Room #234 or #224)
Apart from the office hours please own a separate blog for this course and share your steps and send me a link to email@example.com whenever you need an extra eye or when you have anything to ask regarding the assignments. You can also add on Skype. My screename is atifakin.
We expect students to engage in research, sketch ideas and their offshoots, pursue multiple solutions to a given problem, and experiment widely with concept, imagery, type, materials and composition.
By the end of the term students will be asked to publish a video documentary of the work throughout the semester. This video will include screencasts, live action footage and talking heads.
Project presentations will be made on the due date of the assignment ın the classroom. Students’ contribution to these open panel/critique sessions is important.
A successful student of this course should be able to:
design and develop for mobile media and gadgets.
think creatively and strategically for a given purpose to design and develop for web and create content management systems as well as a front end.
initiate and present a project for any digital medium.
Students who attends the class and fulfill the requirements of the assignments will be able to:
observe the latest technological advancements and start and lead a digital publication project from scratch.
establish appropriate digital publication workflows for specific purposes.
gain the vision to improve their digital image publishing techniques and keep up with upcoming design technologies.
Your course grade will be calculated as follows.
15% : Coursework, attendance and blog updates
30% : Project 1: Template
25% : Project 2: Publication
30% : Project 3: Service
Grading of each project will be made in critique sessions with the participation of the students. Coursework, attendance and blog updates will be tracked and evaluated by the instructor.
For project critiques, work must be presented on the announced date, at the beginning of the scheduled review. No late work will be accepted.
You will have two make up chances during the semester. These two weeks, you may follow from the schedule, you will be given the chance to enhance two previous assignments. Please keep in mind that the make-up’s are only for solving for technical problems or optimizing your work. To get an upgrade you should keep working on your project even after the deadline and presentation.
The grading system is:
A = Outstanding performance throughout the course, work excels consistently in
all the areas described above
B = Exceeding basic expectations for all projects
C = Satisfactory performance, that is, the completion of all assignments
on time and at an acceptable level
D = Poor work
F = Failure
Please note that a C grade means you have attended all classes and met satisfactorily the requirements of the course. To earn a higher grade, you must show not only more effort but also a higher level of achievement in your work.
There is no guarantee that extra effort will yield outstanding work; and yet it is extremely unlikely that without extra effort you will create interesting work or develop as a designer.
Project I: Portfolio
(ongoing throughout the semester)
Although this is the first of the three projects of this course in term of the timeframe this is not a project to be completed and graded before the second and the third project but rather it will be an ongoing project throughout the whole semesters. First couple of weeks the concept of an online portfolio will be scrutinised and in class development workshops will be carried out but the portfolio is expected to be up and running by the end of the semester.
With this project you are asked to think of the question who the user of a website is? Is the subject the owner of the site or the viewer of the site? Considering the vast amount of websites designed for specific occupational profiles, which are run by the business owners we can argue that a website either personal or more business oriented is an interface between the professional and the consumer or follower.
Template idea is about designing the whole web site as an interactive communication system for the use and view of the web site.
How to Be a Graphic Designer without Losing Your Soul by Adrian Shaughnessy
PDF on (http://dkwgraphicscourses.files.wordpress.com/2012/02/how-to-be-a-graphic-designer-without-losing-your-soul.pdf)
You are asked to design and constantly maintain a portfolio website which introduces your identity as a designer and display an array of select work from your portfolio.
Project II: Publication
It is a reading renaissance. Over the last couple of years, Amazon sold more ebooks than paper books. If it was not Amazon, it would be someone else. We call it a renaissance because it is given that people who buy ebooks also bought more paper books than before. The ebook, as a technology, the biggest new invention in reading since Gutenberg cranked out a Bible with movable type which changed the world.
Leaving all social and economic aspects of this revolution to related parties, we will take this transformation as a given and try to comment on the design aspects of this phenomenon and practice this new medium. This medium is not only the digital version of the content. Various types and sizes of gadgets with different interaction capabilities enclose this content. Interaction designers, unlike the book designers of the past, tend to take the medium as a given. This approach is acceptable as we consider the highly technical challenges of designing these gadgets.
Canadian philosopher Marshall McLuhan is remembered by his famous saying ‘medium is the message’. By saying this he was referring to the semantic reference of a message to the medium that it was conveyed. A second different sense of this maxim can be read as: tools shape the experience or let’s say the content. Taking the act of reading a book as an experience, designers role shift from designing the interaction between the book and its reader, the paper and ink stains on it to designing a tool for a pleasurable reading experience.
Building better reading interfaces requires that we closely observe and rethink the way we read. While we need to find ways to navigate long texts on tablets, typography will continue to play the main role in the performance of a reading interface. Two urgent matters to investigate before embarking on the project are:
a. The humane use of digital environments, gadgets
b. Paper vs. Screen reading experience
Here are some excerpts from the reading requirements of this assignment and some highlights. More to be found on the course blog:
Designing for iPad: Reality Check
WIRED on iPad: Just like a Paper Tiger…
Improving the Digital Reading Experience
iPad Scroll or Card
Horizontalism and Readability, Frank Chimero
From Metaphor to Maturity
The benefits of a linear, finite information architecture has been promoted again and again by old media publishers pitching their iPad apps. They posit (some would say hope) that the reader prefers the finite structure of a book, magazine or newspaper to the incomplete stream of information provided by the web.
One thing is sure: it is harder to focus on a screen than on paper. Why? Is that because of the screen’s digital DNA? Or is it because the software is badly designed? If the computer is a bicycle for our minds, why are we still hobbling? My guess is that bad software, not bad hardware, is to blame.
To be able to design a better reading experience at the most basic level, we have to understand how to bring digital reading into a form of continuity. And to get there we need to find out what makes and breaks continuity.
A digital text, on the other hand, has completely different strengths and weaknesses:
It’s easy to find a particular sentence
It can tell you how much time you spent with it, and how much time is left
It’s hard to remember text location, but easy to work with text, e.g. sharing text highlights and taking notes
It can adapt to your personal needs and taste
While the printed text has been refined over centuries, the digital text is still young.
This second task is to design and implement a periodical. The content creation is to be discussed in class. Please try to think in advance ways of which you can gather digital content to support the first two issues of this periodical.
Hopefully, this will also encourage you to think and be creative about the social implications and consequences of digital culture and network and how it effects content.
Project III: Service
Inventions of the industrial age were some kind of goods. Let’s say one of the most iconic one among these is the light bulb. It was valued as an industrial product with its use value to produce light out of electricity, not as a tool sell electricity or not as a symbol for social status. As the digital technology industries take the lead, digitalization of communication, production and consumption created a paradigm shift for what was called as invention. This paradigm shift can be analyzed from various perspectives but within the context of this project we will argue that the inventional products of the digital industry age are more in the forms of services rather than being in the form of physical products. Of course it may also be argued that these services are empowered by gadgets or the gizmos, technological physical products in various forms but apparently services have the larger share in the total value of these services.
Archimedes’ experience at the moment of the invention of his hydrostatic principles is a proof of that, new ideas can arise when the conscious mind turns away from the subject or problem, when the inventor’s focus is on something else, or while relaxing or sleeping. In fact this is partly valid for a designer, the valid part is the existence of a problem. Than the rest is up to your problem solving manners.
For this final, project you are asked to solve a self defined problem by designing a service inspired by all techniques and discussions covered over the last two semesters.