Storyframes before wireframes
Storyframes before wireframes
What if you started your designs in the text editor?
A well-crafted interface is like reading a great story. As designers, why are we not incorporating screenwriting techniques more often into our process?
As designers, our minds are wired to be creative and we have a distinct way of approaching our tasks. We are not bound by standard techniques and often have to find the sweet spot where our vision and final product meet. Often, experience shapes our ways in more way than one and heavily influences our way of work. One such method is to start your design process in the unlikeliest of all places, the text editor. Before delving into wireframing amidst gray boxes and blocks of text or finding yourself sketching on paper, how about we begin with a story frame?
Why should we “write” our designs?
A story frame is a hybrid document between a script and a wireframe and is like a written blueprint of what you visualize your design as. The seemingly humble beginning can be a way to gather your thoughts, ideas to form one underlying concept that helps you as you create visuals. The technique has proved viable for landing pages, homepages as well as other forms of creatives. Its success across mediums is largely due to its ability to create a cohesive story that becomes your guiding light as you move elements across the screens. Every design begins finds its origins in a message that needs to be communicated to the right audience. The fundamental principle for a design is to create a visual that tells a story while delivering the intended message. As you “write” an interface, it helps you build a conversation with its users that translates into designs that are interactive.
Interfaces are stories
A close look at the homepages of the biggest brands have one thing in common- they tell a story. It shows a thought process where the designer has deliberately created an interface that is easy to consume and captivates the audience. Think of it as a screenplay for your design and do an initial brain dump onto an empty text file. With all your ideas in front of you, it becomes easy to edit and re-edit to get the final list of ideas that make into your final product. This simple exercise of brainstorming and writing down everything related to the key messaging ensures that you do not omit anything important. Think of each paragraph as a module, and each sentence as an element you will eventually add to your design.
Writing helps context
Any designer will tell you that one of the greatest pitfalls of being a part of the designer team is to create a story while keeping a sharp eye on context. Chances are that you know too much about the product and may not approach the task with the objectivity that the design requires. Simply put, brevity is not a designer’s friend and a story frame helps you refine the document by keeping the user’s perspective in mind. What do they know about the product? Why are they here? How do I retain their attention? Your story frame should be able to answer these primary questions before you move it to the next stage.
Get your story straight
Suppose your first draft is ready but is it really the best way to proceed? Instead of creating visual mockups and then revising it to incorporate inputs, a story frame allows you to create multiple angles on your primary story. The beauty of writing the page story before jumping into wireframes is that it allows you to easily gather and incorporate feedback. Doing this allows you to maintain the sanctity of the original storyline while still including versions that are visually appealing to the user. In the end, no matter how you decide to design each module, the overall page story remains intact as you have ensured stakeholder alignment from the beginning. A story frame is a multi-purpose tool that saves you time as you make high-level decisions about the strategy, the flow, and the narrative, without spending time into the weeds of design tools. It enables designers to have absolute clarity before they proceed to create visuals. The story is also an ingenious way to address core communication concerns while playing with the actual trajectory of the final design.