Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips Design Mock-Ups Need Dynamic Content: Tools And Plugins

Nothing is perfect on the web. We can’t make sure that our websites always work as intended, but we can try our best to design resilient and flexible websites that aren’t that easy to break — both in terms of interface design1 and security2. Yet still neither resilience nor flexibility are usually reflected in deliverables and mock-ups.

Designing Using Data3

Designing Using Data4, in which Sarah Parmenter discusses how to design with content structure alone.

In practice, mock-ups usually represent a perfect experience in a perfect context with perfect data which doesn’t really exist. A good example for it are “optimal” usernames which are perfectly short, fit on a single line on mobile and wrap nicely, or perfect photography that allows for perfectly legible text overlays. It’s not realistic. We need to work with dynamic content5 in our prototypes, with both average and extremes being represented.

Further Reading on SmashingMag:

Now, of course usually we don’t have the content when we’re designing, but it’s enough to have the content structure10 (video) to design an experience around it. It’s extremely helpful to know whether you should be expecting regular text paragraphs or many tabbed widgets or quite a few complex tables or a complex magazine layout with pullquotes and indented ads. This knowledge alone helps guide design decisions.

In all of those cases, a good strategy would be to use Forcefeed.js11 to populate our content areas with random content — sometimes too lengthy, sometimes too short, often with accent characters and perhaps even emojis.


Gremlins.js1413 helps you check the robustness of websites by “unleashing a horde of undisciplined gremlins”.

Another tool is Gremlins.js1413, a monkey testing library that helps you check the robustness of web applications by “unleashing a horde of undisciplined gremlins”, i.e. it generates random data strings and types them in all over the place to test how a website responds. If you want to have a more controlled testing, you can also use the Prefill Forms Bookmarklet1715 which allows you to predefine a set of templates to be submitted into forms to test its resilience.


Prefill Forms Bookmarklet1715 lets you plug in pre-defined content snippets to check your web forms.

We need to craft future-proof experiences, too. What if your interface design would need to be translated into other languages? While Chinese might be perfectly short and concise, German might turn out to create awkwardly long interface components, ranging from buttons to navigation. In this case, something as simple as jQuery Globalize plugin18, or Sketch i18n plugin19 could be helpful.

You can define dynamic variables for your content and “plug them in” quickly, to verify that the layout doesn’t break when the language changes. For Sketch, you can also use Content Generation Plugins20, ranging from importing financial data to random user profile images. And if you use Photoshop, there are ways to insert content into Photoshop from a text file21, too. Also, Craft22 is a free plugin suite for Sketch and Photoshop that lets you design with real data, too.

We use these little helpers all the time, and they prove to be great tools to build websites that are prepared for everything that comes their way. They also reflect reality much better than perfect mock-ups with perfect heights and perfect names and email addresses ever would. Stay resilient — that’s the true power of the web.

(vf, cm)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    I read this blog information and this blog is information about design mock dynamic content , which plugins you can use for content creations.

  2. 2

    I think this plugins are not much helpful to the dynamic website to maintain the content and design mock-ups in the websites.

  3. 3

    Check out this great plugin for sketch: data populator
    and a fun little plugin for making iphone mockups: mockmock


↑ Back to top