Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Often when I am designing for the web (be it mocks, or full spreads of websites) I have many repeating elements throughout my document. I am looking to follow the Don't Repeat Yourself (DRY) philosophy.

One case: I am designing a mockup to illustrate the path of the user through a website. I do this by starting at a tabula rasa page which includes the default state of the website. Then, I copy this page and tweak it to fit the next step of the user's interaction. Then, some small aspect of the page will change (the header color for example), and I'll be forced to make that change to every step in my mock.

So, is there software that allows me to make sections of my design once (header, footer, sidebar, a set of buttons, etc.), reuse them, and then make changes in only one place if needed?

This is something akin to partials from Rails or Microsoft MVC if you're familiar, but for design software.

share|improve this question
    
Have you excluded/considered Fairworks and Photoshop (using smart objects or layers comps)? –  Yisela Jul 12 '13 at 4:32
    
I'm not aware of any acronym or slogan in the design world that is equivalent to DRY, but the concept is familiar, under the general heading of improving productivity with templates, re-usable assets and recorded actions. You might find useful stuff searching on design productivity. It'll also be very familiar to any designers who do a lot of CSS coding... –  user568458 Jul 12 '13 at 11:33

4 Answers 4

up vote 7 down vote accepted

Most Adobe creative suite/CC software has tools for things like this. Here's some of the main ones:

  • All applications

    • Actions, which are like recordable macros - saving a set of actions then executing it with one button.
  • Photoshop:

    • Smart objects (bundles of layers and vector data that can be re-used)
    • Adjustment layers (layers where the purpose is to alter the layers below them while remaining independent of the layers below them - handy for re-use)
    • Basic paragraph and character styles for text
  • Illustrator:

    • Symbols (which can be saved as symbol libraries and loaded into documents)
    • Placing external documents (File > place, places a reference to an external document so multiple documents can share one element)
    • Graphic styles (allows elements of the appearance of an element to be saved, applied to many elements, and updated at once), and character and paragraph styles for text
  • InDesign:

    • Master pages (allows pages to inherit the same elements; master pages can inherit from other master pages)
    • Placing external documents (as Illustrator, but much more widely used)
    • Styles for most types of element: very sophisticated paragraph styles (including GREP rules that apply character styles automatically), character styles, object styles, table styles, table cell styles...

People sometimes use InDesign for website mockups - even though it's designed for print documents - because of the features above, which are helpful for templating and avoiding repetition. More info: What software is best for GUI design?

Adobe Fireworks also had/has some similar helpful features - but Adobe were never serious about Fireworks, it's buggy and they've recently announced that they're killing it off and replacing it with nothing at all but vague marketing fluff.

share|improve this answer

Interactive prototyping tools such as Axure are designed for this specifically.

If we're talking web design, prototyping in HTML is my preferred method, as it becomes very easy to reuse elements.

As other's have stated, a lot of Adobe products also offer this ability from within the design tool itself.

share|improve this answer
    
After mocking up with Photoshop, Illustrator, Balsamiq and plain HTML & CSS over the last two years, I to, have concluded that coding the prototype directly in browser or a code editor is the best course of action for a multitude of reasons. –  user Aug 13 at 19:29

There is software availible specifically for UI mockups. Visio has a set of graphics, Balsamiq Mockup, Microsoft Expression Blend (although that's a bit advanced), and a quick Bing/Google for UI Mockup Tools yeilds a ton of results - many of which are free.

share|improve this answer

You might be happy with layer comps in Photoshop, but it can be rather frustrating unless you meticulously organize your layers. Unless you have a very particular methodology, it can be confusing coming back to comps you've designed this way.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.