Designing with folders in mind February 18th, 2008
- posted in: Tips and Tricks
In order to be 100% confident that your design will be made exactly to your specifications, its helpful for the divlets if your files are structured in a logical and methodical way. The easiest way to achieve this is by using clearly labeled folders within your psd / png or eps file.
Within the three premier design suites, (photoshop, fireworks and illustrator), folders can help keep you structured and save you valuable time.
By creating your master page layers, (see the “help” section to learn the difference between master and sub pages), within one folder and then duplicating the folder once you are finished with the design will give you a ready to go template to work your sub pages into. This in turn will save you time and make sure all your sub pages start with the same layout.
Below is a simple folder hierarchy for a site YoDiv has recently built. It is labeled perfectly and was very quick and simple for the divlets to create the subsequent site. There were 3 pages in this site, 1 master and 2 subpages. The site contain a home page, about page and a contact page. Within the homepage the designer had added other smaller folders that contained various complex elements such as picture buttons and “sign up” boxes.
In this image you can also see how the designer added header and footer folders. These could be anything, but if you have content that you’d like on every page, side navigation for example, it helps if it’s in its own folder.
When composing your creation, web design also allows the designer to think of additional elements unique to interactive design, “change states”. These are simply the effects the user experiences when they place their mouse over something, or visit a page.
These changes are usually unique to navigation elements, research has shown that if the user experiences one of these “change states”, it becomes naturally intuitive to think of these as links.
The various “change states” are written into your pages in 3 various stages. Its resting state, the state at which a mouse arrow hovers above it and how it looks when you press down to activate it. Its a useful tool to have at your disposal, and to keep the divlets on the same page as you (no pun intended) please create a seperate folder and keep all your “change states” within this folder. (It might be helpful to categorize your pages in sub folders within the main “change state” folder).
In the example below we’ve shown just a few of the great ways other designers engage their audiences with “change states”.
