DDM - Design for Digital Media
Class 10 - UX & more PhotoShop skills
Class: discussion & activity - UX – user experience – current theory and application – interactivity and usability, emotional design
Discuss UX (user experience) - what is it? how is it manifested in design, particularly web design - usability, user experience, emotional design, three types of visual design (Norman).
How does this manifest in certain products & websites? eg: Apple & its products; Movies, Cars, Music (videos) etc...
User Experience or UX as it is often referred to, is more than just the usability of a website or interactive medium. It involves the entire experience a user will have before, during and after engagement or interaction with an interactive digital medium, or in fact, any product. The topic of UX is very popular in the design world at the moment. There are a range of theories, and many, many processes and practices recommended.
One very good reference is a book by Don Norman titled "Emotional Design", which examines the way we act towards objects, products, websites etc. Norman has determined 3 levels of visual design that all need to be considered in order for a design to be both usable and attractive - attractiveness being an important part of the user experience:
These levels of visual design are best delivered to the user through emotion and storytelling. This doesn't necessary mean a story as we know it - like fairytales for example, but more of a sense of narrative that initially draws us in, imparts some message or information, builds to a climax, and then has some kind of conclusion. There are many examples of design "storytelling" that might be found online in some of the best websites. Some of the example references below contain lists of products and websites that create UX through some kind of story arc. The article by Curt Cloninger is a good example. He is a very interesting artist and theorist recognised in the "new media" arts community.
One example of how these three levels of visual design might work is by looking at a classic example designers love to use: The Apple iPhone. If any of you own an iPhone, you will know how when you first get your iPhone, everything from the packaging to the accessories contributes to the "message" or experience that Apple is trying to convey. Opening the packaging is exciting, interacting with the product is easy, intuitive, the whole experience (hopefully) is a pleasurable or good one. Apple are very good at attracting people by drawing them in with good UX design. Can you think of other examples?
What is Skeuomorphism?
There is also a lot of talk about skeuomorphic products or interactive interfaces, so what is it?
Again, there are so many examples of this on the web. Many of you have chosen themes for your Wordpress blogs that have some kind of skeuomorphic elements like lined note-paper background, book-type interfaces, etc.
This is not a new idea though, if you look up Skeuomorphism in Wikipedia (http://en.wikipedia.org/wiki/Skeuomorph), you will see many references from ancient Greek temples, to elements of fashion design that employ this trait.
In digital media, think of all the software apps that are skeuomorphic: Kindle & other e-book readers, music apps that have simulated keyboards, even Photoshop with it's tools that emulate physical art materials - brush, pencil, eraser, clone stamp, etc. Product designers do this for a reason - if skeuomorphism makes a product more familiar, more intuitive, and easier to use, the user will have a better experience of the product overall.
Having said that, there are times it can be overdone, and some designers are very critical of skeuomorphic interfaces that perhaps prevent more innovative interaction because they keep people in a simulated analogue environment when more experimental interfaces could be developed. As with most things, finding a balance that best suits your audience is the key.
So how can you use UX visual design and attributes like Skeuomorphism to create a better experience for your audience/users? Discuss...
Smashing Magazine Articles
Discuss Everything is a Remix video series. what did you find engaging in this series?
Is everything a Remix? how do you feel about the various IP issues discussed in the videos? Any comments or criticisms?
Eduardo Navas, key theorist for Remix Culture, has one main criticism of this video series (http://remixtheory.net/?p=480) which is that not everything is a "Remix", rather "everything is Intertextual" - so what does this mean? Discuss...
Other things to consider: Postmodernism and "quotation" or appropriation in art - See Quentin Tarantino films like Kill Bill 1 & 2. Furthermore, what about inappropriate use of cultural iconography? For example, indiginous cultural art and artefacts:
Assessment Tasks to review:
Lab: Photoshop Masks, Clipping Paths, Work on Storyboards
Photoshop - Layer Masks & Clipping Paths - create 2 images that use these types of masks with complex objects
These masks are 2 more examples of "non-destructive" image manipulation in Photoshop. A Layer Mask is attached to one layer only, and stays with that layer. A Clipping Mask is a separate layer that affects all layers linked to it. It will depend on your image and the effects you want, whether you use one or the other. Both are very handy to know, but may be a little confusing to use at first.
To create a Layer Mask:
A clipping mask is a separate layer that can be attached or removed from other layers, so in some ways it is more flexible. It also works with Opaque pixels and Transparency instead of White and Black - the opaque pixels are the visible area and the transparent part of the Clipping Mask Layer is the hidden part of the linked layers.
To create a Clipping Mask Layer:
Outcomes by the end of class:
Create an image with each type of mask we have looked at today. Show the images to me before the end of class. Perhaps you can combine this exercise with your storyboard assessment task to make less work for yourself?
There are other masks in Photoshop that use vectors and paths which can be useful if you want to import content to Illustrator or other vector applications. You can find many tutorials online for all kinds of Photoshop Mask techniques. Some of these video tutorials are quite good.
With remaining time, work on Storyboard images for Assessment Task 2
Grab these images to use for your exercises (right-click and Save As), or find your own images online:
Reading/viewing for next week:
Other Things to Remember
You should be continuing to work on the following Assessment Tasks:
Please see me in class if you are having any issues with assessment tasks. There will be time to work on these in class - think of the Lab session from 4-7pm as time to work on assessment tasks as well as class exercises, then you can ask me for help.