First building frames, then wireless frames
- Transfer
- Recovery mode
Just the other day, I was telling the user experience designer from our team about a simple technique that I have been using for many years and which I never perceived precisely as a “technique” - rather, just as an intuitive approach of a person who designed so many web pages that he had long been counted lost.
At some point, I decided that I would start the design process not with wireframes (and wasting time dragging gray squares and text blocks around the screen) and not even with paper sketches with the degree of detail that I consider acceptable, but from that , which he later called story frames - a document that is something in between a script / text and a wireframe.
What programs do I use for this?
Text editor.
Google Doc Or Microsoft Word. Or Apple TextEdit. Anyone will do.
This technique works especially well for landings, homepages, or long-scrolling websites that aim to tell a coherent, holistic story. And to be honest, it is these pages that are gaining popularity recently.
The main question I ask myself before opening a text editor and “writing” a page is “How would I explain to a friend in a letter or personal conversation what this idea / topic / product / story that I am trying to convey is?” .
Remember the best products and services on the market and the stories that their websites are trying to tell us. Someone took the time to fill out, design and layout these pages so that you, as a visitor, could easily and fluently read the message expressed in human language.
Almost any web page on the web is trying to tell us some kind of story.
For such stories, the text format is well suited. Getting rid of visual tinsel, you can better focus on the essence of the message that you want to express. And text editors are an excellent tool for this purpose: simple, neat and adapted to the large devices that designers are constantly using - from computers and tablets to mobile phones.
If you make a jump from the brief directly into the design program that you prefer (Sketch, Photoshop, InDesign, Axure, Principle, it doesn't matter), most likely you will spend a lot of effort on polishing the form, even though the story is not yet ready.
Even if you got your hand in working with this program and make unreliable wireframes, anyway it will take some amount of intellectual traffic (and extra time) to determine the form, which would be worth spending in general to determine what you want to say. When working in graphic editors or simply drawing with a pen on paper, you are considering design decisions (two or three columns?), Although you still don’t even know for sure whether this part of the story is needed on the page.
Each interface is a story, and each designer is a storyteller, no matter what he designs: landing design, product concept, registration window or chatbot dialog.
Of course, history cannot replace the form, but it definitely affects it and often precedes it. Some designers might argue that working on a design can help build a story, and that these two aspects should form a symbiosis that feeds each other. And there is. But this article is about where to start, and the proposed technique, in my experience in recent years, works well. I have no doubt that other designers have their own tricks.
A story frame looks like a block of text that focuses on the hierarchy and structure of the page; This is not a layout or final version of the text content. As a small example: here's what the Dropbox homepage looks like in a frame format:
Here are a few best practices that you can apply when creating a story for your page:
1. First, write down everything.
Seriously, the first step is to put all your ideas and thoughts onto a blank sheet of text editor. Consider each paragraph as a separate module, and each sentence as an element of your future design. This exercise - a record of everything that can be said about the product - will help you collect your thoughts before you begin to decide which points to give priority to.
I always return to the original question that cited above: “How would I explain to a friend in a letter or personal conversation what this idea / topic / product / story that I am trying to convey is?”
Usually this exercise takes about 15 minutes and half a cup of coffee.
2. Be concise.
Now that you’ve put everything together in one text document, it's time to cut the length of your story. Since you are part of the team that developed the product, most likely you know too much about how it works, and do not resist the temptation to delve into in particular.
Distract yourself a bit, take a deep breath and only after that return to the text to highlight exactly what users need to know about the product. Think about the context: how do they get to your page? What do they already know about the product at this stage and what else do they need to know in order to take the next step?
3. Try different stories.
As soon as your first draft is ready, make several copies of the document and start playing with the structure: how can I rearrange the elements to get other stories, which of the options sound more natural and pleasant for the human ear? In this exercise, you can also rearrange paragraphs or re-enter the text fragments that were discarded in the previous step.
4. Show others.
The beauty (and, in general, the whole point) of prescribing a story before work on wireframes begins is that it allows you to easily show it to other teams, receive feedback from them and collect offers. Just make sure they understand: this is not the final text, but a synthesized version of the page structure.
And only after that you can move on to wireframes and visual mockups.
Ultimately, in whatever form you and your team decide to implement each of the modules, the history of the site as a whole remains unchanged - after all, you set the location of the basic information blocks from the very beginning.
What they like about story frames (they are also “page structures”, they are also “site scripts”) - they ultimately save me a lot of time. You can make fairly fundamental decisions regarding strategy, task flows, narrative, without wasting time on unnecessary details.
When the story is planned and you have sufficiently determined the general layout to go to the next stage, you can ask more specific questions regarding the design of the page:
At some point, I decided that I would start the design process not with wireframes (and wasting time dragging gray squares and text blocks around the screen) and not even with paper sketches with the degree of detail that I consider acceptable, but from that , which he later called story frames - a document that is something in between a script / text and a wireframe.
What programs do I use for this?
Text editor.
Google Doc Or Microsoft Word. Or Apple TextEdit. Anyone will do.
This technique works especially well for landings, homepages, or long-scrolling websites that aim to tell a coherent, holistic story. And to be honest, it is these pages that are gaining popularity recently.
The main question I ask myself before opening a text editor and “writing” a page is “How would I explain to a friend in a letter or personal conversation what this idea / topic / product / story that I am trying to convey is?” .
Interface is history
Remember the best products and services on the market and the stories that their websites are trying to tell us. Someone took the time to fill out, design and layout these pages so that you, as a visitor, could easily and fluently read the message expressed in human language.
Almost any web page on the web is trying to tell us some kind of story.
- The Dropbox homepage tells you that this is a service, how it came about, and what place it might take in your life.
- The NY Times homepage tells what’s going on in the world from the editorial perspective.
- The AirBNB homepage talks about the company and provides examples of the services it offers.
For such stories, the text format is well suited. Getting rid of visual tinsel, you can better focus on the essence of the message that you want to express. And text editors are an excellent tool for this purpose: simple, neat and adapted to the large devices that designers are constantly using - from computers and tablets to mobile phones.
If you make a jump from the brief directly into the design program that you prefer (Sketch, Photoshop, InDesign, Axure, Principle, it doesn't matter), most likely you will spend a lot of effort on polishing the form, even though the story is not yet ready.
Even if you got your hand in working with this program and make unreliable wireframes, anyway it will take some amount of intellectual traffic (and extra time) to determine the form, which would be worth spending in general to determine what you want to say. When working in graphic editors or simply drawing with a pen on paper, you are considering design decisions (two or three columns?), Although you still don’t even know for sure whether this part of the story is needed on the page.
Each interface is a story, and each designer is a storyteller, no matter what he designs: landing design, product concept, registration window or chatbot dialog.
Of course, history cannot replace the form, but it definitely affects it and often precedes it. Some designers might argue that working on a design can help build a story, and that these two aspects should form a symbiosis that feeds each other. And there is. But this article is about where to start, and the proposed technique, in my experience in recent years, works well. I have no doubt that other designers have their own tricks.
Story frame example
A story frame looks like a block of text that focuses on the hierarchy and structure of the page; This is not a layout or final version of the text content. As a small example: here's what the Dropbox homepage looks like in a frame format:
Here are a few best practices that you can apply when creating a story for your page:
1. First, write down everything.
Seriously, the first step is to put all your ideas and thoughts onto a blank sheet of text editor. Consider each paragraph as a separate module, and each sentence as an element of your future design. This exercise - a record of everything that can be said about the product - will help you collect your thoughts before you begin to decide which points to give priority to.
I always return to the original question that cited above: “How would I explain to a friend in a letter or personal conversation what this idea / topic / product / story that I am trying to convey is?”
Usually this exercise takes about 15 minutes and half a cup of coffee.
2. Be concise.
Now that you’ve put everything together in one text document, it's time to cut the length of your story. Since you are part of the team that developed the product, most likely you know too much about how it works, and do not resist the temptation to delve into in particular.
"I would write in short, but I did not have time." - Mark Twain
Distract yourself a bit, take a deep breath and only after that return to the text to highlight exactly what users need to know about the product. Think about the context: how do they get to your page? What do they already know about the product at this stage and what else do they need to know in order to take the next step?
3. Try different stories.
As soon as your first draft is ready, make several copies of the document and start playing with the structure: how can I rearrange the elements to get other stories, which of the options sound more natural and pleasant for the human ear? In this exercise, you can also rearrange paragraphs or re-enter the text fragments that were discarded in the previous step.
4. Show others.
The beauty (and, in general, the whole point) of prescribing a story before work on wireframes begins is that it allows you to easily show it to other teams, receive feedback from them and collect offers. Just make sure they understand: this is not the final text, but a synthesized version of the page structure.
And only after that you can move on to wireframes and visual mockups.
Ultimately, in whatever form you and your team decide to implement each of the modules, the history of the site as a whole remains unchanged - after all, you set the location of the basic information blocks from the very beginning.
Story frames: extremely low confidence
What they like about story frames (they are also “page structures”, they are also “site scripts”) - they ultimately save me a lot of time. You can make fairly fundamental decisions regarding strategy, task flows, narrative, without wasting time on unnecessary details.
When the story is planned and you have sufficiently determined the general layout to go to the next stage, you can ask more specific questions regarding the design of the page:
- What is the best way to display this information?
- What parts of the text can be combined into one module?
- In what parts of the story can text be replaced with an image, video, or short animation?
- For what parts should the text be supplemented with the above materials?
- What specific facts do you give as evidence of certain statements?
- What actions do you expect from visitors after they familiarize themselves with the story that your website tells?