Prototyping, Web Communication, and You

Introduction

According to Association of Psychological Science fellow Joseph Ferrari, 20% of men and women in the nation are chronic procrastinators.¹ This means they wait and put off tasks in work, home, relationships, and all other aspects of their lives. I used to fall into this category, especially when it came to school work. I always waited until the last possible moment to complete any project or write any paper, and this kept me from doing a very important step in the creative process–planning and prototyping. You could just sit down and start writing a paper or designing a web page without any planning ahead of time, and it might accomplish what you are aiming for. However, if you incorporate planning and prototyping into your process, the content you produce on the web is more refined and creates a better experience all around for the intended audience. In this article, we delve into the topics of content planning and prototyping to create a better web experience for everyone.

¹Based off of a 2013 article by the Association of Psychological Sciences –https://www.psychologicalscience.org/observer/why-wait-the-science-behind-procrastination#:~:text=%E2%80%9CWhat%20I’ve%20found%20is,people%20may%20be%20chronic%20procrastinators.

Content Strategy and Content Planning

Before reaching the execution stage of a project you should first go through the strategy and planning steps. This will help ensure that all of the information you include is relevant and necessary to the content you produce. The terms strategy and planning sound very similar and are often used interchangeably, but we discuss the difference and importance of both of these steps when it applies to creating content on the web. During the strategy phase, the main goal is to identify why and how the content you plan to include relates to the topic you are discussing. In a broader sense, this step revolves around defining the ultimate goal of the information and content you put out on the web.

Strategy

Your strategy should include your research, the message you want to deliver, and your intended audience. Keeping these in mind during the remainder of the creative process will help keep you on track and prevent you from including any information that is either unnecessary or unrelated. Staying on track and not taking any detours will help keep your intended audience engaged and also increase your credibility with them. Tangents or detours in your writing may seem like you are trying to distract from your topic and can even seem like you do not know what you are talking about. The last thing you need to know in the strategy phase is what you think a successful end product looks like.

Planning

With all of these things in mind it is time to move to step two in the process–planning. Planning is where you decide what you will do and in what order. In the context of writing and creating content for the web it is where you decide the main topics you want to discuss, what subcategories should be involved, and in what order those appear in the document. Also, planning a timeline during this step could prove helpful so that you can create checkpoints leading up to the final deadline to help you better manage your time. After you have your initial plan laid out it can be helpful to take a second look at it with a few key questions in mind. Ask yourself,

Are all of my sections useful?

Do they relate to my primary theme and intended audience?

As long as the answer to these questions is yes, you are ready to move to the actual execution stage of your creative process.

Prototyping

Prototyping can take on many different forms depending on the type of content you are creating, but at its core it is just a fancy word for a rough draft. If you are creating a video, the prototyping step could include creating a script and story-boarding. For a website creation it usually includes wire-framing, which is just a visual guide of how the skeleton of the website will look and where content will be located on the page. If you are writing a blog post, prototyping might just be writing an outline or even writing a full rough draft of the post. 

For creating a script or outlining/drafting a blog post or article, probably the most useful tool is either Microsoft Word or Google Docs. Google Docs is particularly useful if you are working in a team because it allows for collaborative writing in a web based environment. The most difficult and involved of the examples I presented would be wire-framing and prototyping for the creation of a website, so I will focus on those. A lot of these tools could also be used for some level of story-boarding a video creation, but that is not going to the focus. The tool I am personally most familiar with is called Figma. 

Figma is a web based vector graphic and prototyping tool that also has built-in collaborative functions similar to Google Suite of tools. It has a free option but also has paid options that expand the functionality and the collaborative abilities. You can easily design the visuals of a web page and create the paths, using the different links the program takes you through on the page. For example, if you want to have a tab at the top labeled “About,” the program takes the viewer to an About You page. You can create the About You page and the About tab and connect them with a line to help visualize what every aspect of the page will look like and how it will function. There are several other tools that vary slightly in capabilities. I include a few of my favorites below, including the cost to run, a brief description, and a link to their website.

Figma	free	Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.	figma.com
Adobe XD	free	With Adobe XD, you can draw, reuse, and remix vectors and build artwork to create wireframes, screen layouts, and interactive prototypes.	adobe.com/in/ products/xd
Sketch	$99	Sketch is a tool for mac that is very similar to adobe photoshop and illustrator. It is used to edit vector images which you can use to create basic wireframes.	sketch.com
Webflow	$16/ month	Webflow is a tool for creating custom blog, portfolios, online stores, and much more.	webflow.com
balsamiq	$12/ month	Balsamiq is a great tool for “newbies” since it is very straightforward and easy to use. It is great for creating low-fidelity wireframes.	balsamiq.com

Conclusion

Having the content planning and prototyping tools in my professional tool belt greatly improved all of my projects. Honestly, previously my projects were all over the place. I often found myself getting extremely off topic, and following one tangent until I forget what the main idea was. Once I started giving myself the time to implement proper planning and prototyping steps my projects became more focused and ultimately more successful.

Sources

• Halvorson, Kristina. “The Discipline of Content Strategy.” A List Apart, 17 Dec. 2008. alistapart.com/article/thedisciplineofcontentstrategy/. Accessed 14 Oct. 2020.
• Lyons, Yvonne. “Why You Need a Content Strategy AND a Content Plan.” Right Source Marketing, 7 June 2018. www.rightsourcemarketing.com/content-creation/why-you-need-a-content-strategy-and-a-content-plan/#:~:text=on%20to%20planning.-. Accessed 14 Oct. 2020.
• Maruti Techlabs. “11 Best Prototyping Tools For UI/UX Designers — How To Choose The Right One?” Medium, theuxblog.com, 18 June 2018. medium.theuxblog.com/11-best-prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47.