{"id":7462,"date":"2022-09-29T11:03:45","date_gmt":"2022-09-29T11:03:45","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7462"},"modified":"2025-01-28T15:04:43","modified_gmt":"2025-01-28T15:04:43","slug":"what-is-content-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-content-design\/","title":{"rendered":"What is content design?"},"content":{"rendered":"<p>Content design can be a powerful component of user experience (UX) and user interface (UI) design but it often gets overlooked. Content is anywhere and everywhere in a user interface and it lends itself to enhancing user experience, conversions and brand awareness.<\/p>\n<p>Content in user interfaces is so vital that Apple <a href=\"https:\/\/jobs.uxcontent.com\/jobs\/apple-ux-writer-business-education\" target=\"_blank\" rel=\"noopener\">refers<\/a> to its content designers as \u201cthe writing arm of the design team\u201d. The words in an app are just as important as any other user interface element. So what are you, a UX or UI designer, supposed to do with this all-important concept?<\/p>\n<p>In this comprehensive guide to content design, we answer these questions:<\/p>\n<ul>\n<li><a href=\"#What-is -content-design-in-UX\/UI?\"> What is content design in UX\/UI?<\/a><\/li>\n<li><a href=\"#How-is-content-design-different-from-UX-writing?\">How is content design different from UX writing?<\/a><\/li>\n<li><a href=\"#What-do-content-designers-or-UX-writers-do?\">What do content designers or UX writers do?<\/a><\/li>\n<li><a href=\"#Why-is-content-design-important-in-UX\/UI?\">Why is content design important in UX\/UI? <\/a><\/li>\n<li><a href=\"#What-are-the-hallmarks-of-good-UX\/UI-content?\">What are the hallmarks of good UX\/UI content?<\/a><\/li>\n<li><a href=\"#5-stellar-UX\/UI-content-examples\">5 stellar UX\/UI content examples<\/a><\/li>\n<\/ul>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-content-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/content-design?utm_source=blog&amp;utm_medium=blog_panel_text&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN CONTENT DESIGN]<\/p>\n                    <span>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<h2 id=\"What-is -content-design-in-UX\/UI?\">What is content in UX\/UI?<\/h2>\n<div class=\"embed-yt ratio ratio-16x9\"><iframe loading=\"lazy\" title=\"What is Content Design?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/PsL5zHLiwWQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<p>Content in UX\/UI design is the language that appears in a user interface. Content design, sometimes called <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ux-writing\/\">UX writing<\/a>, is essentially designing with words.<\/p>\n<p>The word \u201ccontent\u201d typically refers to information, images, videos, text, etc., that are included as a part of something, such as a website. In user experience and user interface design, \u201ccontent\u201d primarily refers to written content that informs or persuades an audience, sometimes called copy.<\/p>\n<p>You can see content design and UX writing in these aspects of a <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ui-glossary\/\">user interface (UI)<\/a>:<\/p>\n<ul>\n<li>Menu copy<\/li>\n<li>Button copy<\/li>\n<li>Body text<\/li>\n<li>Headers<\/li>\n<li>Microcopy<\/li>\n<li>Instructions<\/li>\n<\/ul>\n<h2 id=\"How-is-content-design-different-from-UX-writing?\">How is content design different from UX writing?<\/h2>\n<p>UX writing and content design are essentially the same. Both content designers and writers are a part of the design process, follow style and brand guidelines, make decisions based on user research and testing and write the copy that will be included in the user interface.<\/p>\n<p>In comparing <a href=\"https:\/\/uxwritinghub.com\/ux-writing-vs-content-design\/#:~:text=This%20puts%20to%20rest%20the,of%20the%20product%20creation%20process\" target=\"_blank\" rel=\"noopener\">hundreds of job openings<\/a> for UX writing and content design, 90% of the responsibilities listed in the posts were exactly the same. But content designer as a job title has evolved over the past two decades and about <a href=\"https:\/\/uxwritinghub.com\/ux-writing-vs-content-design\/#:~:text=This%20puts%20to%20rest%20the,of%20the%20product%20creation%20process.\" target=\"_blank\" rel=\"noopener\">10% of the time<\/a> gets confused with visual design.<\/p>\n<p><strong>How did content design as a profession evolve?<\/strong><\/p>\n<p>Content design came about in the late 1990s. Initially, content designers were expected to use CSS and HTML to create stellar user experiences, visual and written content. They basically handled typesetting, page layout and writing on webpages and emerging personal computer devices.<\/p>\n<p>Throughout the early 2000s, content design took on scripting, graphics, animation, audio, compelling text and interactivity responsibilities. Essentially, content designers were like front end developers who could design.<\/p>\n<h2 id=\"What-do-content-designers-or-UX-writers-do?\">What do content designers or UX writers do?<\/h2>\n<p>Content designers and UX writers work within the product design team to craft clear, concise and compelling language within the user interface. They consider the user, the company\u2019s brand voice, and the needs of the product.<\/p>\n<p>Here are some responsibilities of UX writers and content designers:<\/p>\n<ul>\n<li>Collaborate with product design team members to solve design challenges<\/li>\n<li>Create user-centric products and experiences with the product design team<\/li>\n<li>Writing concise and compelling UX copy<\/li>\n<li>Simplify complex concepts or language for users<\/li>\n<li>Construct or follow design systems\/style guides<\/li>\n<li>Advocate for UX writing best practices<\/li>\n<li>Conduct <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-user-research\/\">user research<\/a> and testing<\/li>\n<li>Make data-informed decisions<\/li>\n<\/ul>\n<h2 id=\"Why-is-content-design-important-in-UX\/UI?\">Why is content important in UX\/UI?<\/h2>\n<p>Content in UX and UI is important because it provides clarity, appeals to users\u2019 emotions and builds on a brand. A human-centred approach to writing even the most minor bits of copy within a user interface can immensely change the user experience.<\/p>\n<p>The copy within an interface can show users a brand\u2019s purpose, make the user feel understood and intuitively show users how to interact with it. Even in just a few words, content designers are telling a compelling, all-inclusive story. Storytelling is an important approach to UX design, which we cover <a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/storytelling-in-ux-design\/\">here<\/a> in more detail.<\/p>\n<p>Content design clarifies navigation and bridges the gaps between context and visual design. For example, if someone gave you a road sign with no words, could you tell them what it meant? More than 11% of people can\u2019t. That\u2019s where good content comes in. A stop sign with the word \u201cSTOP\u201d on it is much more effective than a red octagon alone.<\/p>\n<p>Content provides direction or persuades a user to perform a specific action. While the visual design might lure someone in, product teams can use content design to persuade a user. Calls to action can convince a user to perform a specific action, like buying a product or service. Content conveys value and makes the big picture clear.<\/p>\n<p>Content can also be used as another layer of design. Aligning their copy with a brand\u2019s identity helps content designers add personality, show a brand\u2019s value and strengthen a brand\u2019s authenticity. All of these factors are what make a brand stand out from the crowd.<\/p>\n<p>Content designers are tasked with transforming a brand and style guide into a lexicon that conveys an entire brand. By using specific words and writing styles consistently, UX writers enhance brand trust and compel users in the most subtle ways.<\/p>\n<h2 id=\"What-are-the-hallmarks-of-good-UX\/UI-content?\">What are the hallmarks of good UX\/UI content?<\/h2>\n<p><strong>Seamless<\/strong><br \/>\nGood content will work with the design. Users only notice copy within user interfaces when it\u2019s clever or enhances a brand\u2019s personality. Content designers want their work to feel like it\u2019s a part of the visual design, not as though it stands out.<\/p>\n<p><strong>Clear and valuable<\/strong><br \/>\nEvery word included in a user interface should provide value. Value and clarity might look like persuading a user to take action, clarifying navigation options, increasing brand awareness and providing instructions. Well-crafted copy will make user interfaces more accessible while building trust with the brand.<\/p>\n<p><strong>On brand<\/strong><br \/>\nGood content designers will use their words to boost their brand\u2019s voice. They\u2019ll either rely on the style guide their company created or create one to shape the voice they want to use within the interface they\u2019re designing. In the process, they will develop a consistently visible lexicon to form the look and feel of a strong brand. This builds trust and comes across as authentic. To <a href=\"https:\/\/wepik.com\/\" target=\"_blank\" rel=\"noopener\">edit their design<\/a>\u00a0and images so that they can create consistent copy, they can use Wepik. This way, they can create an experience that feels seamless\u2014something that builds trust in a brand&#8217;s user-facing products.<\/p>\n<p><strong>Persuasive<\/strong><br \/>\nImpactful calls to action (CTAs) will persuade users to do what the interface designers want them to do. A user\u2019s journey is more than just where a button is placed or the sequence of events. It\u2019s also the copy that lead them to click the button. Good content will tell a story and users won\u2019t even realise it. It will speak to their emotions and lead them to take action in some way.<\/p>\n<p><strong>Brevity<\/strong><br \/>\nWhen it comes to user interface copy, less is more. The majority of UX\/UI content is referred to as \u201cmicrocopy\u201d. Content designers use limited words to guide users intuitively so they hardly even notice it\u2019s there.<\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>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<h2 id=\"5-stellar-UX\/UI-content-examples\">5 stellar UX\/UI content examples<\/h2>\n<p><strong>Apple<\/strong><br \/>\nOf course we\u2019re going to talk about Apple, the company that seamlessly integrates content designers into its product team. For 30 days, <a href=\"https:\/\/janoleroux.com\/\" target=\"_blank\" rel=\"noopener\">Jano le Roux<\/a> spent hours examining Apple\u2019s <a href=\"https:\/\/xd.adobe.com\/ideas\/process\/information-architecture\/four-cornerstones-writing-ux-microcopy\/#:~:text=The%20term%20%E2%80%9Cmicrocopy%E2%80%9D%20refers%20to,the%20way%20you%20do%20business.\" target=\"_blank\" rel=\"noopener\">microcopy<\/a>.<\/p>\n<p>What he found was a brand that took a user-centred approach with an impeccable style guide. Apple subtly showed personality and persuasion. Check out <a href=\"https:\/\/medium.com\/swlh\/i-spent-30-days-analyzing-apples-effortless-microcopy-here-s-what-i-learned-f734b6e7e2f\" target=\"_blank\" rel=\"noopener\">his 30-day analysis of Apple\u2019s microcopy<\/a>, you won\u2019t be disappointed. Take note of heir precise use of rhymes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7464\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/FUN-AT-THE-SPEED-OF-M1.jpeg\" alt=\"Apple - Content Design\" width=\"1400\" height=\"933\" title=\"\"><\/p>\n<p><strong>AirBnB<\/strong><br \/>\nAirBnB\u2019s team are masters of brevity and personality in microcopy. Instead of simply putting \u201csearch\u201d in their search field, they show users concrete examples of what they could put by saying \u201cTry Berlin\u201d. They even make their website and app cycle through different options like \u201crestaurants in Denver\u201d and \u201ccabins in Switzerland\u201d to show users what\u2019s possible.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/airbnb.png.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7465\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/airbnb.png.webp\" alt=\"AirBnB content design\" width=\"1429\" height=\"679\" title=\"\"><\/a><\/p>\n<p><strong>Grammarly<\/strong><br \/>\nThe call to action on Grammarly\u2019s home page is brief but powerful. It combats users\u2019 objections by letting them know it\u2019s free immediately. That builds trust with users instantly. What\u2019s more, they continue to be clear and concise by letting users know what they\u2019re getting, why they might want it and how they can get it \u2014 all in less than 3 sentences.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7466\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.49.48.png\" alt=\"Grammarly content design\" width=\"2850\" height=\"1256\" title=\"\"><\/p>\n<p><strong>You Need A Budget<\/strong><br \/>\nYou Need a Budget, fondly referred to as YNAB by users, has some fantastic copy examples. They show personality, persuade the user, and provide context in this subscription error page on their website. Their mobile app uses content to provide context and reassure users in an authentic way.<\/p>\n<p><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/YNAB.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7467\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/YNAB.webp\" alt=\"YNAB Content Design\" width=\"970\" height=\"337\" title=\"\"><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7468 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.53.19-e1664448843930.png\" alt=\"YNAB mobile content design\" width=\"1552\" height=\"1239\" title=\"\" srcset=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.53.19-e1664448843930.png 1552w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.53.19-e1664448843930-300x239.png 300w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.53.19-e1664448843930-768x613.png 768w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.53.19-e1664448843930-1024x817.png 1024w\" sizes=\"auto, (max-width: 1552px) 100vw, 1552px\" \/><\/p>\n<p><strong>Slack<\/strong><br \/>\nDespite its plethora of features, Slack is easy to navigate, authentic and user-focused. This is because they do a great job with content. Their best feature? Slackbot. The content written for Slackbot has personality, encourages trust and makes things more clear. It\u2019s helpful, intuitive and on brand.<\/p>\n<p>Users first meet Slackbot during onboarding to set up their accounts. After that, Slackbot lives in their active direct messages to send them reminders, use as a notepad and provide support. There are so many ways <a href=\"https:\/\/www.process.st\/slack-bots\/\" target=\"_blank\" rel=\"noopener\">users can rely on Slackbot<\/a>, but overall, this feature works seamlessly and intuitively with the rest of the user interface.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7469 size-full\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.56.43-e1664449039227.png\" alt=\"Slackbot Content Design\" width=\"1593\" height=\"1258\" title=\"\" srcset=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.56.43-e1664449039227.png 1593w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.56.43-e1664449039227-300x237.png 300w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.56.43-e1664449039227-768x606.png 768w, https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-29-at-11.56.43-e1664449039227-1024x809.png 1024w\" sizes=\"auto, (max-width: 1593px) 100vw, 1593px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Content design is everywhere and it\u2019s important<\/h2>\n<p>While it\u2019s easy to overlook content in a user interface, you may want to start paying more attention. Start taking screenshots of great examples of copy within user interfaces you use. You may start to notice how important it really is.<\/p>\n<p>Great content design is more than just words. It\u2019s a way to turn user experiences into immersive brand interactions. It\u2019s a way to infuse personality into a user interface. Content design makes interfaces more accessible and more fun to use.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Content design can be a powerful component of user experience (UX) and user interface (UI) design but it often gets overlooked. In this comprehensive guide to content design, we explain what content design in UX\/UI is and how it differs from UX writing. <\/p>\n","protected":false},"author":24,"featured_media":9554,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-7462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7462"}],"version-history":[{"count":11,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7462\/revisions"}],"predecessor-version":[{"id":11625,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7462\/revisions\/11625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/9554"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}