From the course: Prototyping a WordPress Project in Adobe XD

Use the content first design

From the course: Prototyping a WordPress Project in Adobe XD

Start my 1-month free trial

Use the content first design

- [Instructor] If the primary purpose of websites is to deliver valuable content to an audience we should be designing content first for the best possible UX. The content first design is an approach that involves the use of content to define the layout and elements in a design rather than the other way around. It's quite common to see placeholder text and images used throughout the prototype process and real content only introduced at the very end. The problem here is that the dummy content doesn't capture the context of what the design will be used for, causing issues when the product is used out in the wild. In contrast, designing content first helps us structure sites in a way that can better guide users, while helping them effectively achieve their goals. No matter what you call content first design though it's clear to see that words in your design are important, especially with the rise of controversial interfaces and voice controlled apps. Now let's look at the different approaches that you can take to design with content first. Here I have a mock-up of a page and obviously I'm using lorem ipsum text for everything on the page. The page aligns very neatly and it's really easy for me to actually create the mock-up when I'm controlling the actual length of all of the content. Because I'm not using real content though this can be problematic later on. Over here I have the same page, but on this page I've actually populated it with actual content. And you can see that the pages look similar, but there are some things that are happening in the real mock-up that weren't a consideration in the previous one. One of them being that the quotes that I'm using on the different community of users varies drastically. Some are one line and some are a multitude of lines. This is going to affect the layout, so that everything isn't lined on the grid in the same way. The same thing is happening down here under the Our Trips section. If you look you can see that the descriptions of the trips varies. And again, this is kind of throwing off the layout. This design is pretty simple, but I did want to show the difference of using actual content as opposed to using dummy content and how that can affect the layout. So the things that you want to think about are if you don't have content quite yet what do you do? A lot of times the content is one of the last things to come in when you're working on a project. When you're designing content first a good place to start is bringing together all possible content that might go into the end product, but it's not always clear where that content may come from, especially in the early stages of the design process. I have a couple of approaches that you can think about when you're trying to gather this content. The first one is using proto-content. Proto-content is using content that's similar to what you may expect in your end product. This isn't the exact content, but it's close to it. We refer to that as proto-content. Proto-content provides us with valuable information, as it helps us make better informed design decisions, more accurate user journeys, and improves functionality overall. If you're wondering where to start to gather proto-content here are a few simple approaches. You could reuse existing or draft content. You could borrow a competitor's content temporarily. Or you could produce your own sample content. Another option is to actually do a content audit. A content audit is the activity of checking all of the content on an existing website and compiling it into a big list. Once you have this you can assess its relative strengths and weaknesses in order to prioritize your future marketing activities. This can be done on your existing material or if you haven't created it yet, perform it on a competitor's website. Words are essential for helping users accomplish their tasks and by thinking about them while you sketch you'll uncover problems early and be able to move faster later on. In order to create the most usable interfaces content can't be an afterthought. Words alone can define the experience of an app or a website, so always consider content first.

Contents