Mobile app version of vmapp.org
Login or Join
Goswami567

: 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

@Goswami567

Posted in: #Tools #WebsiteDesign #Workflow

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.

10.05% popularity Vote Up Vote Down


Login to follow query

More posts by @Goswami567

5 Comments

Sorted by latest first Latest Oldest Best

 

@Turnbaugh909

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

Demo:




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

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

10% popularity Vote Up Vote Down


 

@Shelley591

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.

10% popularity Vote Up Vote Down


 

@Tiffany317

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.

10% popularity Vote Up Vote Down


 

@Jessie844

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.

10% popularity Vote Up Vote Down


 

@Pope1402555

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme