Content First Before Design

Content first Before Design for the design staff at TOGI Creative Design Agency: Recommendation Report

Table of contents          Page

Letter of Transmittal………………………………………………………………………iii

Figures and Tables………………………………………………………………………. iv

Figure 1……………………………………………………………………………. iv

Figure 2……………………………………………………………………………. iv

Abstract………………………………………………………………………………………v

Introduction…………………………………………………………………………………1

Proto-Content…………………………………………………………………………………2,3

Content Audit……………………………………………………………………………4,5

Replacing “Lorum Ipsum”………………………………………………………………6

Conclusions………………………………………………………………………………5

Summary………………………………………………………………………….6

Suggestions………………………………………………………………………6

References……………………………………………………………………………

Tables and Figures

Figure 1. The illustration on the left shows a website with filler text like “Lorum ipsum”. The prototype

Portrays the layout of the website elements and the suitable positions where texts and images should appear..

On the right side, the prototype filler text has been replaced with the actual content, however the featured

elements appear to be misplaced without a clear blend with the overall website appearance..

Figure 2. This is a Content audit. It is meant to help designers generate proto –content. Moreover, it assists in the

Identification of information, categories, and title pages for the website. It’s helpful to use software like excel

to create spreadsheet with all your information by using exiting competitors content. (Prototypr.io, 2018)

Introduction

“Content precedes design. A layout with an absence of material is not design, it is a decoration.” – Jeffery Zeldman. For instance, assume that you are a designer asked to make a website for vegan restaurant in New York City. The manager then asks you prepare layouts and wireframes for the website to present to the client in the next meeting.  According to the design brief, you lack enough information about website content and what should be the desirable appearance for the website which the client intends to have. Many designers usually find themselves in similar circumstances. Their main dilemma is that should they design first or wait for the content or ask for the content first then design?

Get Help With Your Essay

If you need assistance with writing your essay, our professional essay writing service is here to help!
Find out more about our Essay Writing Service

Choose content – This step explains why and how to use required materials. The first step requires a designer’s decision to create a good website even if the client doesn’t provide content. What is 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” (Prototypr.io, 2018). To implement content- first, you can use different approaches to design content with Proto content, Content audit and Replacing Lorem Ipsum.

Proto content

To design content, we need to first create or find materials to use for the website. The one way to accomplish the task is by using the proto-content approach. It involves a designer’s determination of the resources applicable to the website design. On the other hand, the creator may decide to utilize ideas from the business competitors for the purpose of elucidating the design concept to make the contents appear more realistic. This alternative proto content assists in putting the materials into full frontal of the design process and allows the user to have a better experience while using the service. Although, having a final revised content is not always feasible in a project, designers should avoid the use of placeholder text to substitute missing resource. Proto content creates a pathway for the content and design to collaborate together in communicating to the audience through the use of realistic content that relates to the product. “content is design and design is content”.  Start using proto content approach with the current resources from your website or competitor’s content. Writing your own content can help you meet your goals of communication with the users of the service. Proto content gives the website a baseline to figure out the placements of the elements within it and page layout. In figure 1, the photo shows a landing page for a website. In the left page title “Lorem ipsum” the layout has place holder text as well as images to indicate where the content could be placed. The problem with the left side page layout is that the placeholder text doesn’t give you any context of what the website is trying to communicate. Instead, it shows information that doesn’t communicate any ideas on the goals of the website. On the right side, the designer appears to have replaced the placeholder text for proto content which gives more context of what the message is trying to convey. Nonetheless, it is easy to notice that the design of the text boxes where the content should be placed does not accommodate the proto content. The occurrence usually comes up whenever a design is created before the placement of the content. It is an issue that is bound to happen since the designer has to change and accommodate the materials to the design in place instead of the other way around.  By using content first approach and proto content, it is easy to manage this kind of situations since it makes the designing content process easier. Therefore, design cannot live without content, because it just decoration.

Content Audit

Content audit is like a list of ingredients to bake a cake. According to the procedure, you need to know all the ingredients, the tools you may need as well as exact measurements of ingredients this is the only way to ensure a we can successfully bake a cake. The process is similar to the creation of a content audit we want to know all of our “ingredients” before making our website. The purpose of a content audit is to act as a tool guide that a designer uses to make an inventory analysis of the websites content. A content audit is very beneficial to the designer and client, this process helps to identify gaps in the content and get a better understanding of the information which the content is trying to communicate to the site’s visitors.

 In order to perform a content audit a designer needs to comply to an inventory of the resources which the website has or that you plan to create. There are three main types of content inventory that you can create (Spencer, 2014).

Full content inventory- This type of inventory gathers the entire website’s content from which includes links, images, videos, and page. Full content inventory has every single items of content that the websites has listed.

Partial content- This is a list of the main subsets of the sites content. For example, this can include the titles of articles and all the sections of the website.

Content sample- This is a less detail inventory of the content, sort of like a rough draft list of the main points of the website.

The first step towards creating a content audit starts with listing the main pages and sections in your spreadsheet using a software like Excel. Then processed to add the titles of the pages and URL of each page link. Depending on what typed of content audit you are performing either Full content, partial content or content sample, it will have required different information. A basic content audit includes this:

-Pages of your sites navigation.

-Page titles

-The URL of the site’s page

-Comments and things to want to add to remember.

-Content hierarchy (showing which content elements come first or requires more action in the page structure). (Spencer,2014)

Content audits can be done in any form, there so right or wrong way to conduct an audit, but this are the basic elements you always want to include in your content audits. In figure 2. This is graphic shows an example of a content audit with the title page and articles content. Making a content audit is a tool that helps the designer as well as the client through the process of creating a website and keep in track the goals of the website. Each content audit will be different depending on the project, the size of the website and the client. Benefits of conduction a content audit is the ability to improve SEO results, increase audience engagements with the content, and improve conversion rate. (Petrova, 2017)

Say no to Lorem Ipsum

 “The very second you make the decision to place lorem ipsum into your mockups, you have done a great disservice to your design, content, website and users.” (Fielder, 2010) Lorem ipsum, is Latin “dummy text” placeholder that many designers use while waiting for the content to be written. This placeholder text helps designer visually show their client the relationship between the content and the design. Unfortunately, this relationship connection is often difficult to understand.

A design made using lorem ipsum text holders dismisses the significance for the value of the content, “content is king”. (Fielder, 2010) A website’s content is the main subject of interest for the visitors. They rarely care about the visual elements of you page and the changing colors that maybe present. The main goals for visiting an online site are to be entertained, informed and to learn. When a designer uses lorem ipsum they tend to disrespect the sole purpose of the content’s communication. The addition of lorem ipsum creates another visual element to the page. It lacks the context of the main information which site is trying to communicate. This circumstance can serve as a distraction to the design since it is not enhancing the content. Instead, it seems to only distort the overall look.

A challenge rises whenever a writer has to replace the lorem ipsum. The usual constraints are based on how to implement the content to a rigid design. In most cases, the content may not fit well within the text boxes therefore causing the text to enlarge or stack against the other visual elements. A designer is therefore expected to ask the client for the content even if it would be a rough draft to use with the page layout. Instead of lorem ipsum designer should use the proto- content approach and gather content from other similar competitors or write their own content.

Conclusion

Content should always come first before starting a design project. Designers would benefit from using the strategies listed earlier like proto content, content audit and replacing lorum ipsum from their wireframes. Content first approach does not only benefit a designer, but also project managers, writer and their clients since they see a significant rewards of faster access to relevant information. Nevertheless, the content first approach can be time consuming and expensive since the website owner has to hire content strategies and writer. However, its outcome becomes more beneficial since it limits the possibilities of back tracking project deadline, especially when you have to fix miscommunication mistakes and missed goals of the website.

References:

• Cardello, Jeff. (2017, September). The modern web design process: putting content first. Retrieved from https://webflow.com/blog/the-modern-web-design-process-putting-content-first
• Fielder, Kyle. (2010, January). Lorem Ipsum is killing your designs. Retrieved from https://www.smashingmagazine.com/2010/01/lorem-ipsum-killing-designs/
• K, Karol. (2016, July). Content first web design: what it is about and how to get started. Retrieved from https://blogs.adobe.com/creativecloud/content-first-web-design-what-its-about-and-how-to-get-started/
• King, Liam. (n.d). Content strategy. Designing content first for a better ux. Retrieved from https://gathercontent.com/blog/designing-content-first-for-a-better-ux
• Mills, rob. (2016, January). Using proto-content for a better user experience.
• Retrieved from https://www.uxbooth.com/articles/using-proto-content-for-a-better-user-experience/
• Prototypr.io. (2018, September). Content first, design second: prototyping with words and adobe xd. Retrieved from https://blog.prototypr.io/content-first-design-second-prototyping-with-words-and-adobe-xd-c4c07cac21ef
• Spencer, Donna. (2014, October). How to conduct a content audit. Retrieved from https://uxmastery.com/how-to-conduct-a-content-audit/
• Williams Moore, John. (2015, January). Why content comes first. Retrieved from
• https://www.invisionapp.com/inside-design/why-content-comes-first/