Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Content and Copy ›› Bringing Relevant Content into your Designs

Bringing Relevant Content into your Designs

by Juan Sanchez
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

tack-mobile-relevant-content-hero

How to improve your end user experience by bringing real data and relevant content into your static designs and prototypes.

Many important considerations impact software design. Business goals, user goals, user context, cultural considerations, platform paradigms, branding requirements, devices … the list goes on and on. While a primary focus for any software design effort should be the data or other content that’s being displayed, this keystone element is often given short shrift. This is unfortunate and shortsighted. Given the focus it your content will receive, it should be a primary consideration during the design process.

It is a common practice to represent data and content as “Lorem ipsum,” repeating data, or simply using “best case scenario” data. In reality, this isn’t what will be experienced in the final product. The data you have to work with can drastically affect the final design, and the design will influence the type, format, and presentation of data.

Infusing Real Content into Your Designs

Whether you’re using Sketch, Photoshop, or another design tool, it’s worth your time to explore ways of bringing real data or content into your static designs. On one side of the spectrum, this may simply mean having an understanding of what that data might be and putting together sample content that maps to it. On the other end, your tool of choice may support different plugins or have features baked in that allow you to infuse sample or live data into your designs.

Sketch

At Tack Mobile, we use a variety of tools for creating static designs and we’re always on the lookout for new methods that may benefit our process. As far as working with data and content, Sketch has some good options:

Short of using a tool, it’s always possible to manually input content that you and your team have decided best represents what might be expected in a production environment.

The data you have to work with can drastically affect the final design

While these plugins are useful, it’s easy to imagine how they might be taken further. Often we find ourselves creating multiple variations of the same screen and changing out content to see how the design holds up. Or, we may be designing for multiple languages and use a similar process. It’d be great to automate those types of explorations.

Working with static screens can help a lot to work through ideas. The next step for filling in some of the gaps is prototyping. There are a lot of methods and tools for assembling prototypes that meet different goals. Some make it really easy to work with data sources.

Prototyping Means Data, Too

As you move into the prototyping phase, there may be more options for working with live or sample data and content, especially while working in code. The data can also drive the creation of elements in your prototype, which can save a lot of time from redundantly creating each element individually. We often use Framer.js for prototyping, but these sources can apply to other approaches as well.

Framer.js

Local Data

One way to work with data is to refer to it locally. This can be a separate file constructed by hand, an exported set from another source, or embedded directly into your working files. Working with local data, it’s easy to go through quick cycles of modification and see how it affects the design.

Existing Data Services

If you have a specific set of data in mind that you want to work with, you want to explore some data services that are already available. For example, Dribbble, Random User, Instagram and many other products offer ways to access their data. You may even want to browse ProgrammableWeb API Repository to see if there’s something there you can use.

Google Sheets

Working with spreadsheets is something a lot of people are familiar with. With Google Sheets, you can share a table of data that you’re working on with others. As others make changes, you’ll be able to see those changes affect your design. You can also access and work with separate sheets within a Google Sheet. Check out this article to learn how you can use Google Sheets for prototyping.

Google Sheets for prototyping

Kimono

Why create a model for your data when one may already exist? Kimono makes it easy to create an API out of a web page. For example, if you want to represent a series of articles in your design, you can find another site that has a representation of that type of data and bring that into Kimono.

You can also use Kimono to grab data from your own services that already exist without having to deal with the overhead of connecting directly.

Parse

Take your prototypes to another level by enabling the ability to read and write data. Parse is a mobile platform that, among other things, supports the ability to create a data store. You can have a prototype that brings in a list of data records but also add the ability to create new ones as well.

There are already some great articles out there that walk through how to use Parse. Check out Using Parse to power up your Framer prototypes and Give your Framer prototypes a better memory for step-by-step walkthroughs.

Firebase

Recently acquired by Google, Firebase is basically a very powerful real-time data syncing solution. It uses a NoSQL-style schema-less strategy, which can give prototypers exactly what they need to prove out an idea.

Keep Firebase in mind when you’re prototyping project reaches the phase where multiple users may be involved at a time, or when you’re thinking about a data structure but haven’t landed yet. Not only that, but with Google scale behind it, Firebase can grow with your product well beyond the prototyping phase.

If you’re interested, you may want to check out this example posted to the Framer.js Facebook Group that uses Firebase, or this great video tutorial.

Production Services

You may want to try working directly with production services used by your project. It can also help ensure teams are working with the same data, so there are no surprises. Depending on the goals, this can be useful for design or hinder any exploration of new ideas.

Keep Content in Mind

In the future, as you’re designing your next great interface, think about how data and content plays a role. Do you have enough room to display what you want? What takes priority? How will you deal with a slow data connection? What does the interface look like before the data is loaded? Many of these questions can be answered the more you make an effort to bring data into your designs.

Image of paper bird courtesy Shutterstock.

post authorJuan Sanchez

Juan Sanchez, This user does not have bio yet.

Tweet
Share
Post
Share
Email
Print

Related Articles

In this article, I’ll share seven incredibly useful design resources that can elevate your skills as a UX designer in 2024 and make you a well-rounded designer overall. These resources not only help you work more efficiently but also automate repetitive tasks and enable you to create outstanding user experiences. So, let’s dive into this without further delay.

Article by Abhi Chatterjee
7 Must-Have Resources for UX Designers in 2024
  • The article explores seven indispensable resources for UX designers in 2024, offering insights into design methodologies, case studies, UX laws, and practical challenges to elevate designers’ skills and efficiency.
Share:7 Must-Have Resources for UX Designers in 2024
3 min read

As consumers’ privacy concerns continue to grow, so should our attention to addressing privacy issues as user experience designers.

Article by Robert Stribley
Designing for Privacy in an Increasingly Public World
  • The article delves into the rising importance of addressing privacy concerns in user experience design, offering insights and best practices for designers and emphasizing the role of client cooperation in safeguarding user privacy.
Share:Designing for Privacy in an Increasingly Public World
9 min read

Knowing your audience, business values, voice tonality, voice refinement, and team trust.

Article by Eva Schicker
5 UX Development Phases to Create Your Brand’s Voice
  • The article offers a concise guide to crafting a brand’s voice in five key UX development phases.
  • The author emphasizes practical strategies and tools for creating a unified brand identity that connects with customers and builds trust.

Share:5 UX Development Phases to Create Your Brand’s Voice
5 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and