Attention To Detail

Photoshop allows you to build interface designs in a layered workflow. This allows you to build realistic designs, that look and feel like they do in real life. Whilst a button may seem like a simple thing to build, it takes time and energy to do it well, along with some attention to detail to make things look realistic.

Planning is the key to any success, just like in the real world you wouldn't build a house without a set of plans. The same set of rules apply to building interface designs. It ain't no five minute fix...

Look'n'Feel Volume I

Designing for Multimedia uses the same processes as Graphic or Print design - you need a plan. Inspiration for design comes from a variety of places. It is a reflection of what is currently happening in your life. Books, Films, Magazines and Music all influence what you are currently working on. Designers don't work in a vacuum...

Fonts, Images or Textures can be good starting points for creating the look'n'feel of a design, but don't forget to allow for the client brief, that's if you want to get paid...

Look'n'Feel Volume II

Sometimes you will see a trend that is currently under way that you like. Web 2.0 styles have been around for several years now and have some great potential for incorporating these elements into your designs. 

Design is not about copying, it is about taking several styles or influences and sticking it in your "design blender" to mix up your version or take on what is happening.

Look'n'Feel Volume III

Any design can have many variations, the trick is to make a decision on each part then move on. Basically it's a process of elimination and refining till you get to the finished design. No one said it was easy...

Typography

Anatomy of type

upper case - capital letters, also known as "caps".

lower case - the small letters of the alphabet.

baseline - refers to an invisible line that the characters are standing on.

meanline - an invisible line that runs along the top of lowercase characters.

x-height - height of the text bodybetween the meanline & baseline.

ascender - strokes on the letters [ b, d, h ] that rise above the meanline.

descender - strokes on the letters [ p, y, g ] that go below the baseline.

counter - space that totally or partially closes inside the letters [ b, d, p ].

serif - finishing strokes that project from the main stroke of a letter.

ligatures - where two or more characters are joined as a single unit [ fi, ff, fl ].

Type is an essential part of any design, as text to read, or as a visual element. Selection of a typeface can create a mood for your design. Type can be curved or straight and there are thousands of variations. 

It has four basic categories :

serif - lines extend from characters, traditional style

sans-serif - without serif, a modern, simple, clean style

display - decorative, headline advertising style

script - based on calligraphy and handwriting style

type do's :

create a visual hierarchy using different sizes

contrast elements using different font styles

use colour to create emphasis

type don'ts :

have two script fonts on the same page

use script and italic fonts together

mix several different decorative fonts

create an interesting but unreadable page

Grid Systems

A grid can be used to organise the contents of a design into a framework. These frames are mostly hidden in the final layout, but can be visible, depending on the look & feel you are trying to create. 

Grids provide consistent placement for all the elements, forming a sense of style. In the process it aligns everything to form a sense of order. Grids are based on the smallest sized area to be used. Grid systems can be from 1-8 columns or more, depending on the design.

Grids using guides

The best way to create a grid system for your design, is to use the ruler and guides provided in programs such as Adobe Illustrator or Photoshop. They can be set to create the desired grid and locked into position. Because guides are hidden they can be edited or added to, without being seen on the final design.

Alignment

There are several ways to align the elements of a design. These alignments are based on either a horizontal or vertical axis and operate in conjunction with any grid that may be in place. 

The process of aligning elements can create other shapes due to their close proximity, in the same way that a mosaic is formed. Alignment is a feature that comes in most computer software. It usually becomes available when you select multiple objects.

Kuler Web 2.0 Online App

Adobe Kuler is an online Web 2.0 application that can be used to create colour schemes. These can be based on the rules of colour theory to create Analogous, Monochromatic, Triad, Complementary, Compound, Shade or Custom colour sets using up to 5 colours. Very cool stuff. There are also some nice web links on Kolor Theory. 

Adobe has also built Kuler into it's CS4 range of programs, making it easier than ever to design the perfect set of colours. To use this Online Web Application your Web Browser requires the Flash Player plug-in. If you don't have it, you will be asked to download it.

Adobe Icon Colours

Ever wonder where the Adobe Creative Suite icon colours come from ? 

A colour wheel of course ! Speaking of colour Adobe Kuler lets you design a colour scheme online. Very cool stuff. There's also some nice links on Kolor Theory. *Requires the Flash Player plug-in for your Web Browser.

Kuler is also built into the Adobe CS4 range of programs. Access to this new panel/palette is by the Window Menu > Extensions > Kuler. 

Colour Theory

Just like design, the use of colour has rules and methods for the way in which colours can be used in combination with each other.

Primary colours

These are the three basic colours that are mixed together to form all others, and can't be made from any other colours.

Secondary colours

These are made by mixing two of the primary colours together.

Tertiary colours

These are made by mixing a primary and secondary colours together.

Psychology of Colour

Of all the methods of communication, colour is the most instantaneous. Everyone reacts to colour in a different way. The choice of a favorite colour is a reflection of the individual and their psyche.

Red

Is a warning signal used to indicate danger, it is an aggressive colour that commands and gets attention, also used to display energy and excitement. Descriptions : exciting, energizing, sexy, hot, dynamic, stimulating, aggressive, powerful.

Yellow 

Relates to the sunshine, it's rays and a sense of warmth and good feeling. It is used to grab attention or warn of hazards and danger, when used with black. Descriptions : cheerful, happy, warm, sweet, sunshine, luminous, hot, enlightning, energy.

Blue

Is associated with the sky and water and a sense of the serene, with a reliable and consistent quality to it. Descriptions : calm, quiet, peaceful, restful, heavenly, cool, clean, water, classic, traditional.

Orange 

Is used to provide a sense of fun, the warmth of yellow and excitement of red, it will often appear on toys or games for children and in festive events. Descriptions : fun, whimsical, happy, glowing, vital, sunset, juicy, tangy, friendly, loud.

Green

Is seen as part of nature and all things organic, fresh and healthy. A sign of the new season, spring and it's associated re-growth. Descriptions : nature, forest, spring, quiet, soothing, refreshing, lively, money, military.

Violet

Was rare and expensive in europe, only used by royalty and the church. Now it is thought of, as a complex and creative colour. Descriptions : mystical, spiritual, meditative, creative, expensive, regal, powerful, elegant.

White

Is used to show clean, crisp and pure things, the indicator of all things good, it can also provide a sense of space and depth, to provide style and class. Descriptions : pure, clean, sterile, innocent, silent, lightweight, airy, bright, glistening.

Black

Is associated with death and grief, but is also now used to display the ideas of power, elegance, sophistication and style. Basic black is now a fashion statement. Descriptions : powerful, elegant, mysterious,heavy, bold, classic, strong, expensive, night.

Screen Design Objectives

A good presentation should be clean, simple and easy to use, with information being concise and freely accessible. The level of technology should enhance the process of getting the message across, rather than being used for it's own sake. It's better to use things well, than implement them badly.

Communicate with clarity :

Make your message clear and easily seen.

Build quality, appear to be useful and well crafted.

Ease of use, have a clean navigation system.

Provide interesting content that's easy to get to.

Keep a visual consistency :

Organise the content using a grid or table.

Location and placement of objects on the screen.

Similar labeling of buttons for the navigation.

Repeated use of rollover states & sounds.

Use of contrast :

Create a hierarchy using different type sizes.

Use colour to provide focus on important areas.

Contrast different media technologies.

Keep things tidy and uncluttered :

Compact the navigation system.

Layer the information for display when needed.

Provide contrast and interest with negative space.

Principles of storytelling :

Beginning - catch the interest of the vistor.

Middle - deliver the message.

End - the pay off.

Kiss Principle :

Keep things clean, simple and easy to use.

Information should be concise and freely accessible.

Don't use technology for it's own sake.

Design Interaction

The process of designing is to arrange the parts into a coherent order. These parts can be text, images, animation, video and sound. Which are organised using fundamental rules of graphic design. These elements and principles are the basic building blocks of any design and are used to interact with each other to assist in delivering or relating to the message.

elements

line, type, shape, texture or images.

principles/structure

balance, contrast, unity, value, colour.

format

In order to design something, we must first determine the space in which it will exist. In the case of multimedia we are using a screen based format, with pixels as the unit of measurement.

800 X 600 pixels for a 15” screen & 1024 X 768 pixels for a 17” screen. All have an aspect ratio of 4:3 which is also the format for standard definition television or video. Full HD Digital television uses a 16:9 aspect ratio format with 1920 X 1080 pixels.

It uses additive colour, mixing three primary colours : red, green, blue. Known as rgb, this is how monitors create the full range of colours. This means that when all three are mixed together they form the colour white.

Screens also have a resolution of 72 pixels per inch known as ppi. Referred to as display or monitor resolution. So that every pixel in an image is represented by a pixel on the screen. Which is the format we deal with in multimedia.

Design Process

All projects are dealt with using a methodical approach to problem solving, starting with a brief, followed by background research, idea generation and concept development through to the final implementation.

project brief (stage 1)

Specifications of the project are clearly defined in great detail.

research (stage 2)

Information gathering to gain an understanding of what you are working on. 

information architecture (stage 2)

Determining how much content is needed to communicate your message.

Organising that information into packets ready for delivery.

concept development (stage 3)

Putting thoughts onto paper to define the problem using a series of lists. 

Brainstorming - writing down any ideas you may happen to think of. 

Notes on observations you made during your research.

thumbnail sketches (stage 3)

Sketches help to develop an idea on paper before going on a computer. 

Seeing how things fit together in the chosen format. Are changes needed? 

Does it work? Developing ideas further, until it evolves into a final solution.

storyboarding (stage 3)

Used to layout the screens or pages of the project into the different sections.

Mapping out levels of interactivity for different sections of the presentation. 

It is also used to describe "keyframes" in animations or movie development.

implementation (stage 4)

Transferring ideas from paper into working "mock-ups" or "prototypes".

Proof of concept stage - changes are made due to technical restrictions. 

Mostly it's about ironing out the "bugs" for the final assembly.

Production (stage 5) + Final Design (stage 6)

Once the design is finalized it is subjected to usability testing, to determine if there are any issues to deal with. This process of refining will continue until all issues are resolved, then proceed to the final client presentation, approvals and distribution of the product. Part of this process is the "rationale" where the reasons for the selection of fonts, colours, design elements and the use of any particular technology are explained and justified

Designer's Role

The designers of today’s interactive interfaces are the latest in a long line of artists and craftspeople who take the philosophical, conceptual, and physical then transform them into packets of communication that inspire, teach, or sell to an audience. Interface designers package thoughts and information so that they can be transported, shared, considered, debated, and acted upon.

When putting together web sites, designers don’t work in a vacuum. They will usually have a lot of help from people who are expert at developing the content and implementing the relevant technologies.

Powerful design is about shaping information and sharing experiences in such a way that the user is drawn into the interactive conversation as an active participant, rather than left as a passive recipient at the end of a wire.

What is Design ?

All design starts with an idea in mind and an objective that is to be achieved. The idea may be the product of brainstorming or another idea generation method or a perceived need that you have identified in a potential market.

design

1. work out the structure or form of (something), making sketchs or plans.

2. plan and make artistically.

3. intend for a specific purpose.

4. preliminary drawing.

5. arrangement or features of an artistic or decorative work.

6. art of designing.

7. intention. eg. by design.

The process of designing is to arrange the parts into a coherent order. These parts can be text, images, animation, video and sound. Which are organized using fundamental rules of graphic design. These elements and principles are the basic building blocks of any design.