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.