Design software that allows reuse of common elements, like the DRY principal of programming

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.


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.

Source : Link , Question Author : codysehl , Answer Author : Community

Leave a Comment