5

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.

2
  • Have you excluded/considered Fairworks and Photoshop (using smart objects or layers comps)?
    – Yisela
    Jul 12, 2013 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... Jul 12, 2013 at 11:33

5 Answers 5

8

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.

3

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.

0
1

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.

1

Looks like Sketch 3 has this feature. They call it Reusable Elements.

Demo: https://www.youtube.com/watch?v=DLQ1BAvJYNE


Also for Sketch, but version 2 i met plugin Symbols, which has similar functionality, but in fact has no GUI for that

Site: https://github.com/tisho/sketch-plugins/tree/master/Symbols

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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