<p>Published on <a href="https://blog.prototypr.io/words-before-rectangles-how-writing-fits-into-my-design-process-b9cc720cf5c1?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Adam Amran </p>
<p>It&#8217;s becoming increasingly clear that writing is a vital part of UX designer&#8217;s skillset. At the same time, I would argue it&#8217;s a very underrated skill. I&#8217;ve seen designers struggle when they don&#8217;t give enough priority to writing in their process.</p>
<p>I&#8217;m no exception and over time, I learned to give words the treatment they deserve in my design process and I&#8217;d like to share it with you. But first let&#8217;s talk briefly about why is writing so important.</p>
<h3>Words make a huge difference in design</h3>
<p>It’s a difference between people being able to navigate your product and getting lost. Difference between people finding the piece of information they were looking for and leaving your website to look elsewhere. Difference between people understanding what you’re trying to say and closing your app frustrated.</p>
<p>Put simply: words are an essential part of UI. Words, in my opinion, are more than any rectangle, gradient or shadow. Design makes much less sense if the words in it don’t.</p>
<h3>What do you start with? Words or rectangles?</h3>
<p>If you’re like me, you work on the information architecture before laying out the elements on paper or Sketch or whatever tool you use. But that hasn’t always been the case for me. It is very tempting to just jump to sketching how the app or website you’re working on is going to look like, and that’s actually how I used to do it years ago because I just didn’t know any better then.</p>
<p>The issue I was running into again and again was that I got stuck many times, because at some point I didn’t know what should go into a screen or page. I wasn’t sure how to call this menu item. I had no idea what that box should contain. I wasn’t even sure if that box should’ve been there in the first place.</p>
<p>I wasn’t paying enough attention to content and words. I was skipping an important part of a design process. But over time I learned the importance of working on content first and today I can resist the temptation of drawing before writing.</p>
<p>Having a very clear idea what will be on a screen makes designing its layout much much easier. It’s also much quicker to make big changes to plain text than to a wireframe or prototype (let alone polished design).</p>
<h3>Purpose &gt; Content &gt; Form</h3>
<p>Here a simple framework I’ve been using when working on a structure of an app or website. Use insights from user research (you&#8217;ve done it, right?) to inform your decisions about what goes in (what is important to people, what they’re looking for) and how you formulate it (making sure they’ll understand it).</p>
<p>I&#8217;ve been using Axure RP for working on information architecture as I find it the best fit for the task, but obviously feel free to use your favourite tool.</p>
<h4>Purpose</h4>
<blockquote><p>What is the screen’s purpose? <br />Why does it exist? <br />What do people want to accomplish here? <br />What are the most important actions?</p></blockquote>
<p>Being clear about each screen’s purpose helps with deciding what should go in there and what shouldn’t. You will be coming back to these answers when thinking about specific elements.</p>
<h4>Content</h4>
<blockquote><p>How do we best support the purpose? <br />What elements or patterns can we use to satisfy the user need here? <br />What is the content of this screen supposed to be? <br />What will be written here? <br />How I can I make it more clear and concise?</p></blockquote>
<p>Answering these questions will help you to put together content for each screen and also to write copy for all the elements.</p>
<h4>Form</h4>
<blockquote><p>Should this be a link or a button?<br />Should that be a dropdown or tabs? <br />What has priority and what doesn’t?</p></blockquote>
<p>You now have a good idea about content and structure of each screen and can move on to making decisions about what form your content and individual elements should take.</p>
<h4>Next level: Put it all in context</h4>
<p>Screens don&#8217;t live in a vacuum and seeing them in context helps to understand where the user comes from where she might go next. That&#8217;s why I&#8217;m connecting all screens into a flow right away as I&#8217;m working on them.</p>
<p>Here&#8217;s what it looks like in practice (it&#8217;s my own template for working on content and flow):</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bmniOnZSTFVx8eb5ndriBg.png"></p>
<p>I&#8217;m making the template (.RP file) free to <a href="https://cl.ly/qPag"><strong>download here</strong></a> so you can use it in your own projects.</p>
<h3>Takeaway: Words come first</h3>
<p>To sum up, I believe it’s important to work with words and content before you think about layout, colors etc. I&#8217;ve laid out a simple framework that helps me with this:</p>
<ol>
<li><strong>Purpose</strong>: What&#8217;s the screen for?</li>
<li><strong>Content</strong>: How do we best support the purpose? <br />What elements or patterns can we use to satisfy the user need here?</li>
<li><strong>Form</strong>: What form should the content take?</li>
</ol>
<p>Having a clear idea of what will be written on any given screen makes designing that much easier.</p>
<h4>Further reading</h4>
<p>If you&#8217;re looking for more on this topic, I recommend <a href="https://uxplanet.org/ux-writing-how-to-do-it-like-google-with-this-powerful-checklist-e263cc37f5f1">this article about UX writing</a>.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b9cc720cf5c1" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/words-before-rectangles-how-writing-fits-into-my-design-process-b9cc720cf5c1">Words before rectangles: How writing fits into my design process</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Words before rectangles: How writing fits into my design process

Top Stories