Monday, December 1, 2008

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...