{"id":10458,"date":"2024-06-08T13:46:36","date_gmt":"2024-06-08T13:46:36","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=10458"},"modified":"2024-06-10T13:49:27","modified_gmt":"2024-06-10T13:49:27","slug":"content-design-examples","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/content-design-examples\/","title":{"rendered":"10 content design examples to take inspiration from"},"content":{"rendered":"

As more businesses go online, content design or UX writing is increasingly becoming a critical field. Content design, also known as UX writing can take content\u2014in this case, words\u2014from ho-hum to extraordinary. Content designers ensure that the text featured throughout a digital product is as compelling and well thought-out as the design of the product itself.\u00a0<\/span><\/p>\n

In this article, we showcase ten great content design examples you can take inspiration from. First, though, a quick refresher on what content design is.\u00a0<\/span><\/p>\n\n

What is content design?<\/strong><\/h2>\n

Words are the other half of the UX\/UI design equation. <\/span>Content designers<\/span><\/a> are the people who craft the copy (i.e. the words) a user encounters whenever they use a product, like a website or an app. Content designers essentially design with language instead of pixels. So while content can mean a lot of different things to different people, in UX\/UI, content refers to written product copy.\u00a0<\/span><\/p>\n

Content designers, also known as UX writers, create copy that guides and informs users as they navigate websites, apps, and other types of digital interfaces. Their work appears in everything from the menu and headers to body text and buttons.<\/span><\/p>\n

Now we know what content design is, let\u2019s explore some examples of excellent content design in action.\u00a0<\/span><\/p>\n

10 awesome content design examples to take inspiration from<\/strong><\/h2>\n

1. Task Rabbit<\/strong><\/span><\/h3>\n

The home page for Task Rabbit is an uncluttered space of simplicity. The first thing you see is a box with a search window where you can find people who can help you with whatever home-related task you need.\u00a0<\/span><\/p>\n

But the bar doesn\u2019t say \u201cSearch,\u201d it says \u201cI need help with\u2026\u201d and then there are examples underneath that can help the user decide how to state their request. The box is then followed by a button that says \u201cGet help today.\u201d It couldn\u2019t be done in a more straightforward way and it\u2019s all finely tuned to the people who have come to the website for help.<\/span><\/p>\n

\"Screenshot<\/p>\n

If that weren\u2019t enough, at the top of the box is the statement \u201cGet help. Gain happiness.\u201d and then on the line underneath in smaller copy, \u201cJust task.\u201d It\u2019s brief copy but it\u2019s also reassuring, easing the user into the experience and convincing them to use the search box.<\/span><\/p>\n

Key takeaway: <\/b>Making the copy in and around the search box specific to the task and reassuring to the user will convince more people to search\u2014and find\u2014what they need.\u00a0<\/span><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN CONTENT DESIGN]<\/p>\n Take our Professional Certificate in Content Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

2. Truly Pizza<\/strong><\/h3>\n

Truly Pizza has a website with little fluff but their homepage has copy that really knocks it out of the park. While the first thing you see when you land on the page is a rotating series of pictures, underneath is what truly matters. \u201cWelcome to Truly Pizza\u201d and a brief sentence that spells out Truly Pizza\u2019s unique proposition explains where you are and why you\u2019ve come there.\u00a0<\/span><\/p>\n

This is quickly followed by \u201cOur Food\u201d that again features copy that explains what makes Truly Pizza unique next to a photo of a delectable-looking pizza. It\u2019s these things and their buttons, \u201cLearn more\u201d and \u201cView Menu,\u201d that really encourage the user to click and go deeper.<\/span><\/p>\n

\"Screenshot<\/p>\n

Key takeaway: <\/b>Use brief messages and welcoming headings to bring the user into the experience and encourage them to click on links that will take them deeper into the website.<\/span><\/p>\n

3. The Grooming Shed\u00a0<\/strong><\/h3>\n

The Grooming Shed has an inspired home page. The biggest thing on there isn\u2019t the business\u2019s name or the name of the pet groomer, but a line of cute dogs and the words \u201cPampered Pets Are Happy Pets.\u201d These two things work together to make the user think about dog grooming, and what the Grooming Shed can do for your pet.\u00a0<\/span><\/p>\n

There\u2019s also more copy underneath the quote to reassure those particularly nervous pet parents about dropping their dogs off at the Grooming Shed for pet grooming. Those words are fairly brief but well thought out, and help further the case for this business.<\/span><\/p>\n

\"Screenshot<\/p>\n

Key takeaway: <\/b>Never underestimate the power of the perfect picture combined with the perfect, but brief, phrase. They can do more to draw people in than a lot of pictures and copy ever can.<\/span><\/p>\n

4. Monzo<\/strong><\/h3>\n

Monzo is one of a new breed of banking sites that prioritises users\u2019 understanding of banks and money above all else. As a result, their whole site is streamlined to simply and easily explain what they can do for you and what they have to offer.<\/span><\/p>\n

For example, on the homepage, they explain the ease of using Monzo with \u201cSee,\u201d \u201cSave,\u201d and \u201cSpend\u201d in red so if you notice nothing else, you\u2019ll notice those three words and understand what Monzo can do.\u00a0<\/span><\/p>\n

\"Screenshot<\/p>\n

Similarly, on the personal accounts page, they reiterate the see, spend, and save proposition within simple text and they ask that the user \u201cOpen a personal account\u201d instead of \u201capplying\u201d for a personal account, making it all seem like a more personal\u2014and much more straightforward\u2014experience. And it\u2019s also backed up with a simple, friendly sans-serif font.<\/span><\/p>\n

\"Screenshot<\/p>\n

Key takeaway: <\/b>Explain complex concepts in simple, straightforward language and with friendly, less corporate button copy that people will feel comfortable with.<\/span><\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

5. The Academy Museum<\/strong><\/h3>\n

The Academy Museum is a fairly new museum in Los Angeles and it\u2019s all about the art of moviemaking. The site\u2019s exhibitions page does a nice job of explaining the various exhibitions the museum has with brief explanations and full page photos of each exhibit. <\/span><\/p>\n

\"Screenshot<\/p>\n

Click into the specifics of each exhibit and the page remains the same but is no longer greyed out, a subtle change that makes a big difference. If you scroll down from there, you\u2019ll notice a big block of text about the exhibit that includes interesting and practical information about the specific exhibit, followed by a beautiful gallery or feature about the exhibit that shows part of the experience. <\/span><\/p>\n

\"Screenshot<\/p>\n

Through it all, the main menu is there with other places you can go if the exhibition page turns out not to be the page you\u2019re looking for. It\u2019s nicely put together and perfectly reflects the museum\u2019s interest in and commitment to filmmaking.<\/span><\/p>\n

\"Screenshot<\/p>\n

Key takeaway:<\/b> Use a website\u2019s <\/span>information architecture<\/span><\/a> and copy to convey the overall breadth of the site in the main menu, even as the pages dig into the specifics.<\/span><\/p>\n

6. Rolls-Royce<\/strong><\/h3>\n

Rolls-Royce isn\u2019t your average car company and the Rolls-Royce website knows it. It has a simple RR logo at the top of the homepage, as if they\u2019re saying, \u201cif you need to ask, you can\u2019t afford it.\u201d\u00a0<\/span><\/p>\n

\"Screenshot<\/p>\n

This is followed by several of their cars, which you can click into and see video footage of the car in action followed by brief text. This visual\/text format is seen several times as you scroll, with the text telling you what you need to know without going into concrete specifics.\u00a0<\/span><\/p>\n

\"Screenshot<\/p>\n

This is all backed up with a \u201cFind a Dealer\u201d link at the top of the page. The most important thing to this particular business is to get people to go see dealers about their cars, so that is the one thing that never leaves the page.\u00a0<\/span><\/p>\n

\"Screenshot<\/p>\n

Key takeaway:<\/b> If you have a recognisable product, you can use less text to describe its value proposition. But always have the most important call to action visible on the page.<\/span><\/p>\n

7. Cultivated Wit<\/strong><\/h3>\n

Cultivated Wit is a comedy company, and this is very evident in their approach to content design. Take their homepage. It starts with just a logo, but expands into much more, from the copy they use to getting people to join their email club (\u201cComedy can exist in new forms. Technology can be more fun. Homepage copy can be annoyingly vague.\u201d) to the three panels about what they do.<\/span><\/p>\n

\"Screenshot<\/p>\n

It\u2019s all amusing and charming and makes you want to read the words of the whole website. But perhaps the cleverest part of the website is at the bottom. This is where social account information and email addresses appear, just like it does for every website, but Cultivated Wit spices things up with its own brand of wit. It\u2019s a small but noticeable difference to the overall website.<\/span><\/p>\n

\"Screenshot<\/p>\n

Key takeaway:<\/b> Whatever your brand personality, let it shine through your website, including your social account information.<\/span><\/p>\n

8. ModCloth<\/strong><\/h3>\n

ModCloth is a clothing website which, at first glance, might seem pretty similar to many other clothing websites. But if you look deeper you\u2019ll find some differences. First, the filters on the site are a fairly comprehensive bunch, with the option to find embellishments just as easy as finding colour and size.\u00a0<\/span><\/p>\n

Second, the name for each item of clothing is a pun, a play on words, or a clever label that\u2019s a unique way to name things. This sets this clothing store apart.<\/span><\/p>\n

\"Screenshot<\/p>\n

 <\/p>\n

Third, when you click on an item, the description for each piece of clothing, which is to the side of the big photo of it, has a nice way of describing it, especially in the first line, which often incorporates the name of the item into the copy. It all comes together to make you feel good about shopping at this store.<\/span><\/p>\n

\"Screenshot<\/p>\n

Key takeaway:<\/b> Use copy to charm and disarm customers and draw them into your site\u2014and if you have an online store that could use filters, make sure they\u2019re comprehensive and assigned meaningful labels.<\/span><\/p>\n

9. Gov.uk<\/strong><\/h3>\n

The UK government, like many government websites, has a page for bank holidays. These are the days that many people will have time off work, so it\u2019s often worth knowing what holidays are coming up. The UK has figured out a novel solution to this problem. The next coming holiday is always shown in the big green box at the top of the page. It\u2019s the biggest, most colourful thing on the page and therefore gets the most attention.<\/span><\/p>\n

\"Screenshot<\/p>\n

 <\/p>\n

If you want information about all the upcoming holidays, you can get that information as well. The upcoming holidays are listed underneath the green box and Scotland and Northern Ireland are listed to the right of England and Wales.\u00a0<\/span><\/p>\n

If you scroll down far enough, beyond the future holidays, you\u2019ll even get a list of past holidays. This page does everything you could wish, while prioritising the next holiday that\u2019s coming up.<\/span><\/p>\n

Key takeaway:<\/b> Prioritise the most important information through your information architecture, placement of type, and other elements, but don\u2019t forget about other useful information that should appear on the page as well.<\/span><\/p>\n

10. A List Apart\u00a0<\/strong><\/h3>\n

A List Apart is a website for those who work in the UX, UI, and tech industries. As a result, it\u2019s got a winning design, but the most original example may be on its Contact page. This page gives a thorough understanding of what you can email them for\u2014and what you don\u2019t need to email them about. Only after they tell you all this do they provide a link to email them.<\/span><\/p>\n

\"Screenshot<\/p>\n

 <\/p>\n

It\u2019s a clever way to tell people what\u2019s worth emailing them about and perhaps even more so, sets up what they don\u2019t like to get emails about, and it makes it obvious they want you to read it by the placement of the link at the bottom. Plus, it\u2019s organised and written in a way that\u2019s friendly, engaging, and most importantly, won\u2019t make people mad.\u00a0<\/span><\/p>\n

Key takeaway:<\/b> Be thorough, in as few words as possible, but friendly when giving people information.<\/span><\/p>\n

Learn more about content design<\/strong><\/h2>\n

If you\u2019d like to learn more about content design, check out our articles on <\/span>The Future of UX Writing and Content Design<\/span><\/a>, <\/span>Content Design Principles<\/span><\/a>, and <\/span>A Complete Guide to Emotional Content Design<\/span><\/a>.<\/span>
\n<\/span><\/p>\n

You might also like:<\/p>\n