Complex Site Maps

Information Architecture becomes relevent in large scale web development projects, such as e)commerce stores or large reference archives.

The goal of Information Architecture is to create a plan that provides structure, to assist in the development of a navigation system, that can access the content that has been mapped out. This process also helps to define the business needs and requirements of the site, providing a purpose and direction for the project.

The information that is mapped is more that just a simple Site Map showing pages and how they are linked together. In the case of an e)commerce store all the back end processes such as shopping carts, payment systems etc, are also included to produce a visualization of how the whole system fits together.

This shows the organisational structure of the content and how it interacts. It determines what content and functionality the site contains and specifies how users find the information using the navigation, labelling or searching systems that are to be integrated into the site. Finally, it is also used to show how to deal with future changes or expansions over time.

The final Site Map would be developed in Adobe Illustrator after several drafts on paper as thumbnail sketches.

Adobe Work Flows

Working with the Adobe Creative Suite gives you a large amount of flexibility when you are developing Interface Designs for the Web or Interactive Presentations.

Starting with Adobe Illustrator to develop your Site Map for your Navigation requirements, through to building a Wireframe or Plan. The illustrator file can then be exported across to Photoshop with Layers and editable text ready for finishing off the design with a variety of visual design image treatments, Filters or Layer Styles.

All of this is done using a Layered workflow. All of the Adobe programs feature Layers which can be used to separate the design elements and content allowing you to build things as simple or complex as you like... 

Guide to Good Design

concept

Have a concept, be clear about what the message or idea is.

Use universal or common language to deliver the message.

Be inspired by the past but don't repeat it, fades or fashions.

design

Be decisive. Make clear decisions about the design issues.

Support the design idea with things related to the message.

Be consistent with the use of colour, type, logos and imagery.

colour

Think about what colours you use and the effects they create.

Make use of light and darkness, evenly distributing them.

Allow for optical illusions, measure with your eyes, not by size.

type

Use no more than two or three different fonts for each design.

Take some time to choose type, to integrate it into the design.

Make type legible, readable and have a purpose, so it's friendly.

image

Create your own images, as good clipart turns up quite a lot.

Create focal points based on the delivery order of the message.

Use Photoshop to manipulate colour or combine images.

space

Asymmetrical designs create a sense of dimensional movement.

Use breathing space to create contrast, rhythm and separation.

Consider the negative space and incorporate it into the design.

Non-Linear Access

Non-linear access means you can look at the content in any order you choose, compared to a book where content is delivered in a specific order Page 1,2,3...

When you are designing a Navigation System decide on how to distribute the flow of information, then map it out using a series of flow charts or diagrams to represent this. 

An interface design is result of design, planning and development based on the specifications outlined in a brief and the project is dealt with using a methodical approach to problem solving. 

Navigation Systems

Navigation is the process of getting from point A to point B steering your way through or past a series of obstacles and alternate destinations. A part of this process is knowing about your current location. Where you are, here and now. This is also described as orientation.

Orientation

Relates to positioning on a map or landscape. Any journey has a starting point and a final destination. Melbourne - Sydney for example. As you travel on that journey, your location in relation to those two points constantly changes, until you arrive at the destination. A web site is no different. Most users want some sort of indication or feedback as to where they are, where they can go and where they started from.

Interface Buttons

Buttons are part of a graphic navigation system and can provide visual feedback as to what options are available. This can include the current location on the site and links to other sections. Buttons can be any shape or size and are determined by the visual theme chosen for the interface design. Buttons can have several "states" to provide feedback to the user. A series of buttons on a navigation system would typically have two or three different "states" depending on the structure of the web page.

Text Links

Although basic in nature, using text links is always a good idea, as it is part of the html page and will load straight away, acting as a back up navigation system should the image based navigation system fail to load. It can & does happen! Text can also be used as a way of indicating pathways, or the way in which the user got to the current page. 

[ Home ] [Products ] [ Imaging ] [ Photoshop ]

Site Maps in Adobe Illustrator

Site Maps are used in the development process to determine the requirements for the Navigation System as part of the Information Architecture and Information Design Stage of the Design Process. Adobe Illustrator is a vector graphics program that is well suited to developing Site Maps, these can then be exported as PDF documents and emailed to clients for approval.

The idea of a Site Map, is to show the user the entire "plan" of your site and the pages contained within it. So that rather than negotiate your navigation system they can go directly to what they are looking for. Generally Site Maps are only used on Web Sites as part of the final Interface Design, but many sites now use search functions instead of Site Maps to allow users to find things. 

A Site Map can be either text or graphic based, depending on whether or not it is going to be incorporated into the overall visual theme. Above all, it should accurately reflect the structure of the Web Site, so that it is fully functional.

Wireframes in Adobe Illustrator

A part of the development process of any screen design, is to build a “Mock-Up” before the design is finalized and made ready for it to be carved up into a series of slices, to be used in a Web Page or as part of a CDrom Interactive using Flash or Director. Usually this is done using Adobe Illustrator to create a Wireframe or Plan, then exported to Adobe Photoshop to bring the design to life with rollovers and final content.

Interface Wireframe

On completion of the development process, you create a basic interface design that will be used to create the “Mock-Up”. This is done using thumbnail sketches, then on the computer using Adobe Illustrator or Photoshop to create a basic idea of what the interface design will look like. It will show the navigation system, buttons and areas for displaying the content. 

This is a Wireframe of the Interface Design, essentially it is a set of plans of the Interface Design that can then be exported into Adobe Photoshop to turn it into a piece of Eye Candy.

Designs developed on paper as thumbnail sketches will always look better than designs developed by  jumping straight onto the computer...

Design Mock-Ups in Adobe Photoshop

When creating an Interface Design on the computer, use an Adobe Photoshop .psd native file, which saves layered information. Make use of the different Layers or Groups for different screens and content. 

Use the text tool to accurately render all of the text you want to use. With the exact font face, sizes, colours, etc. Also apply any digital imaging based on your theme or metaphor for each screen.

The design is divided up with guides, to create areas that will be selected using the marquee or slice tool. This will include Navigation Buttons, Interface Design components and Content Areas. Remember, each piece can only be a rectangular shape, so any rollover states for Navigation Systems must occur inside these areas. Button states are created by turning layers or layer styles on or off, to display any changes.

At the end you will have created a single Adobe Photoshop file that contains all the screens for your Web Site or Interactive Presentation.

Create a series of Screenshots using jpeg

To create a series of jpeg files of each of the screens/pages of the Interface Design, turn on the appropriate Layer/Group in the Adobe Photoshop file so that the desired screen/page is displayed, along with any changes to the Navigation System. Then go to the File Menu > Save As > Select JPEG as the format.

When saving your final design as a jpeg set the Image Options to the highest setting. This saves the file at the best possible quality, with a small file size. Also set the Format Options to Baseline ("Standard").

Create a PDF Presentation

Once you have created a series of jpeg files of each of the screens/pages of the Interface Design in a separate folder, you can use Adobe Photoshop to create a PDF presentation that can be used to show the client for final approvals.

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.