2. DESIGNING FOR NEW MEDIA

A. STARTING TIPS

INTERACTIVITY

• One of the main differences from old media
• We, as readers, can do things and take decissions
• Interacting with information makes it atractive for readers
• It changes the traditional scheme of communication

Untitled Slide

Untitled Slide

HIPERTEXT

• Sets a connection between to points
• Allows reader to create his own reading
• Helps deepening information
• It's a way of navigation

Untitled Slide

MULTIMEDIA

• New media bring together video, audio, text...
• The goal is to choose the best format for us
• All features, but also all competitors

UPGRADING

• Don't let your work get old: 24/7 is possible
• It changes rythm, but also conditions content
• Adding new information as it happens make your work eternal

Untitled Slide

USABILITY

• Too much information makes things unreadable
• It measures how easily a reader understands and uses it
• Affects from smartphone to OS, or a washing machine
• Readers can't be wondering what will happen if...
• Simple is better

Untitled Slide

JAKON NIELSEN

DONALD NORMAN

ACCESSIBILITY

• We may think about disabled people
• Wrong: basing everything in colours or sonuds
• Right: adding text codes for every element

Untitled Slide

B. TECHNIQUES

BEFORE STARTING...

• Design works begin with a client asking for something
• He will set main goals and elements to work with
• Format also will condition designing work
• Printed: Posters, furniture, environment, icons, books...
• Online: OS, aplications, ebooks, webs, digital environments...

NAVIGATION

• A site's structure is set as a tree-scheme
• It shows where each element is placed
• It also shows what elements link other elements
• The goal is to make that structure clear and consistent

NAVIGATION

• That scheme is like an index or a content-list
• Exemple: title list in a DVD's menu or breadcumbs
• A part of design is about information design
• Elements: color scheme codes, symbols, distribution...
• The goal: make information easily understandable

Untitled Slide

Untitled Slide

SCROLLBAR, MENU, NAVIGATION MAP

NAVIGATION

• Other designing discipline is information architecture
• Building homepages, displaying information to be read
• Notice that digital environments do not have physical information
• In analogycal word physical references help us understand thinks
• Exemple: size, position in pages, odd or even, how many pages read...

Untitled Slide

Untitled Slide

SEQUENCE

• It refers to how time is represented
• Exemple of order: flow of articles in a magazine
• Exemple of time: vignettes in a comic
• Exemple: an incomplete horror scene...
• Exemple: a storyboard

Untitled Slide

Untitled Slide

SEQUENCE

• Time is represented as a spacial succesion
• The order of elements can change message

CONTINUITY

• A mechanical guide (melody, cadence, rhytm, design...)
• Elements must be constant, but no repetitive
• Exemple: with same columns, design change in magazine pages
• Exemples: lighting, color, icon, design, structure...

Untitled Slide

SOUND

• Environment designers use sound to strengthen actions
• Exemple: the dustbind sound, the sond when sending an email...
• They help making interaction more attractive
• Beware: sounds are intrusive inside certain environments, use them with caution

MOVEMENT

• As sound, can be used to give structure, dramatism, evoke feelings...
• Exemple: mouse pointer, rollover from icons, transitions, zooms...
• They are subtle movements that help navigation process
• They help creating continuity between scenes
• Interactive screens need to make people 'enter' somewhere or move

NARRATIVE

• The content (story) and its explanation (expresion) are narrative
• Involves the development of an argument and structure the events
• In traditional media it was focused on sequential reading and a fixed structure
• New media offer more options: videogames have one end, but lots of paths
• In fact, online massive videogames do not end, just happen between players

C. DESIGNING PROCESS

INSTRUCTIONS

• Designing starts with the instructions of your client
• That instructions include goals, schedule, budget, product, public...
• Sometimes designers don't have that instructions, and they must do a research

ASOCIATION AND INTERPRETATION

• First, having an idea
• Relating something immaterial to an idea
• Link that idea to something from real life
• Translate both idea and frame of real life to design

CREATIvE PROCESS

• How does inspiration come?
• Flow diagrams, mental maps
• Lists of sounds, pictures...
• Then, somehow, ideas

CREATIVE PROCESS

• Designers use to make a presentation with some ideas
• Clients may choose one idea, or sometimes its a deal between both
• The goal: have a main idea that will be the basis of the design

VIDEO INTEGRACION

PROTOTYPE

• First version of a design must be tested
• Its part of an iterative process: design, test, correction...
• Before producing, back-end tests

STYLE GUIDE

• When the design is done, it's time to make it a standard
• A document setting rules that will apply in every element
• It creates a kind of visual logic, a coherence
• It will set also a hierarchy within the product
• Exemples: colors, sizes, fonts, angles of vision, light...

D. TERMS

TERMS IN NEW MEDIA

TERMS INNEW MEDIA