First, Storiframes, Then Wireframes
Just the other day, I told the user experience designer of our team about a simple technique that I have been using for many years and which I never perceived as a “technique” - rather, simply as an intuitive approach of a person who designed so many web pages that for a long time lost
At some point, I decided that I would begin the process of creating a design not from wireframes (and wasting time dragging gray squares and text blocks on the screen) and not even from sketching on paper with the degree of detail that I consider acceptable. , which he later called “STORIFRAMS,” a document that represents 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 come down.
This technique works especially well for landing pages, home pages or long-scrolling websites that are designed to tell a coherent, holistic story. And if frankly, these are the pages that are gaining popularity lately.
The main question that 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 is this idea / topic / product / story that I am trying to convey?” .
Remember the best products and services on the market and those stories that are trying to tell us their websites. Someone took the time to fill, design and layout of these pages so that you, as a visitor, could easily and fluently count the message expressed in human language.
Almost any web page on the web is trying to tell us some kind of story.
A text format is well suited for such stories. By getting rid of visual tinsel, you can better focus on the essence of the message that you want to express. And text editors are a great tool for this purpose: simple, neat and adapted to a large device that designers constantly use - from computers and tablets to mobile phones.
If you make the jump from the brief straight into the design program you prefer (Sketch, Photoshop, InDesign, Axure, Principle, whatever), most likely you end up spending a lot of effort polishing the shape while the story is not is ready.
Even if you have gained a hand in working with this program and are making unreliable wireframes, it will still take some amount of intelligent traffic (and extra time) to determine the form, which would be worth your time to determine in general terms what you want to say. Working in graphic editors or simply drawing a pen on paper, you are thinking about design-related decisions (two or three columns?), Although you still don’t know exactly 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: a landing page, a product concept, a registration window or a chatbot dialogue.
Of course, history cannot replace form, but it is determined by it and often precedes it. Someone from the designers may argue that working on the design can help with building a story and that these two aspects should form a symbiosis, fueling 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.
Streamframe looks like a block of text, which focuses on the hierarchy and structure of the page; This is not a layout or the final version of the text content. As a small example: here’s what a Dropbox homepage looks like in a single frame format:
Here are some of the best practices you can apply when creating a story for your page:
1. To begin, write down everything.
Seriously, the first step is to throw out all your ideas and ideas on a clean sheet of a text editor. Treat each paragraph as a separate module, and each sentence as an element of your future design. This exercise — recording everything that can be said about a product — will help you collect your thoughts before you begin to determine which items to give priority to.
I always come back to the original question that I quoted above: “How would I explain to a friend in a letter or personal conversation, what is this idea / topic / product / story that I am trying to convey?”.
Usually this exercise takes about 15 minutes and half a cup of coffee.
2. Be concise.
Now that you have all compiled into 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 you will not resist the temptation to go deeper in particular.
Take a break, take a deep breath, and only then go back to the text to highlight exactly what users need to know about the product. Think about context: how do they get to your page? What do they already know about the product at this stage and what else do you need to know in order to take the next step?
3. Try different stories.
Once you have the first draft ready, make a few copies of the document and start playing with the structure: how can you rearrange the elements to get other stories, which of the options sound more natural and pleasant to the human ear? In this exercise, you can also rearrange paragraphs or re-enter the text that you dropped in the previous step.
4. Show to others.
The beauty (and, in general, the whole point) of prescribing history before working on wireframes begins is that it makes it easy to 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 go to the wireframes and visual mocaps.
Ultimately, in what form you and your team would decide to implement each of the modules, the history of the site as a whole remains unchanged - after all, you specified the location of the basic information blocks from the very beginning.
What they like in one-stop frames (they are also “page structures”, they are also “site scripts”) - they ultimately save me a lot of time. You can make quite fundamental decisions regarding strategy, task flows, narrative, without wasting time on unnecessary details.
When the story is scheduled and you have sufficiently defined the general layout to proceed to the next stage, you can ask more specific questions about the page design:
At some point, I decided that I would begin the process of creating a design not from wireframes (and wasting time dragging gray squares and text blocks on the screen) and not even from sketching on paper with the degree of detail that I consider acceptable. , which he later called “STORIFRAMS,” a document that represents 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 come down.
This technique works especially well for landing pages, home pages or long-scrolling websites that are designed to tell a coherent, holistic story. And if frankly, these are the pages that are gaining popularity lately.
The main question that 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 is this idea / topic / product / story that I am trying to convey?” .
Interface is history
Remember the best products and services on the market and those stories that are trying to tell us their websites. Someone took the time to fill, design and layout of these pages so that you, as a visitor, could easily and fluently count the message expressed in human language.
Almost any web page on the web is trying to tell us some kind of story.
- The Dropbox home page tells you that this is a service, how it appeared and what place it can occupy in your life.
- The NY Times homepage tells what is happening in the world from an editorial point of view.
- The AirBNB home page tells about the company and gives examples of the services it offers.
A text format is well suited for such stories. By getting rid of visual tinsel, you can better focus on the essence of the message that you want to express. And text editors are a great tool for this purpose: simple, neat and adapted to a large device that designers constantly use - from computers and tablets to mobile phones.
If you make the jump from the brief straight into the design program you prefer (Sketch, Photoshop, InDesign, Axure, Principle, whatever), most likely you end up spending a lot of effort polishing the shape while the story is not is ready.
Even if you have gained a hand in working with this program and are making unreliable wireframes, it will still take some amount of intelligent traffic (and extra time) to determine the form, which would be worth your time to determine in general terms what you want to say. Working in graphic editors or simply drawing a pen on paper, you are thinking about design-related decisions (two or three columns?), Although you still don’t know exactly 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: a landing page, a product concept, a registration window or a chatbot dialogue.
Of course, history cannot replace form, but it is determined by it and often precedes it. Someone from the designers may argue that working on the design can help with building a story and that these two aspects should form a symbiosis, fueling 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.
Storyframe example
Streamframe looks like a block of text, which focuses on the hierarchy and structure of the page; This is not a layout or the final version of the text content. As a small example: here’s what a Dropbox homepage looks like in a single frame format:
Here are some of the best practices you can apply when creating a story for your page:
1. To begin, write down everything.
Seriously, the first step is to throw out all your ideas and ideas on a clean sheet of a text editor. Treat each paragraph as a separate module, and each sentence as an element of your future design. This exercise — recording everything that can be said about a product — will help you collect your thoughts before you begin to determine which items to give priority to.
I always come back to the original question that I quoted above: “How would I explain to a friend in a letter or personal conversation, what is this idea / topic / product / story that I am trying to convey?”.
Usually this exercise takes about 15 minutes and half a cup of coffee.
2. Be concise.
Now that you have all compiled into 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 you will not resist the temptation to go deeper in particular.
"I would write shorter, but I did not have time." - Mark Twain
Take a break, take a deep breath, and only then go back to the text to highlight exactly what users need to know about the product. Think about context: how do they get to your page? What do they already know about the product at this stage and what else do you need to know in order to take the next step?
3. Try different stories.
Once you have the first draft ready, make a few copies of the document and start playing with the structure: how can you rearrange the elements to get other stories, which of the options sound more natural and pleasant to the human ear? In this exercise, you can also rearrange paragraphs or re-enter the text that you dropped in the previous step.
4. Show to others.
The beauty (and, in general, the whole point) of prescribing history before working on wireframes begins is that it makes it easy to 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 go to the wireframes and visual mocaps.
Ultimately, in what form you and your team would decide to implement each of the modules, the history of the site as a whole remains unchanged - after all, you specified the location of the basic information blocks from the very beginning.
Streamframes: extremely low confidence
What they like in one-stop frames (they are also “page structures”, they are also “site scripts”) - they ultimately save me a lot of time. You can make quite fundamental decisions regarding strategy, task flows, narrative, without wasting time on unnecessary details.
When the story is scheduled and you have sufficiently defined the general layout to proceed to the next stage, you can ask more specific questions about the page design:
- In what form is it better to display this information?
- What parts of the text can be combined into one module?
- In which parts of the story text can be replaced by an image, video or short animation?
- For which parts of the text should be supplemented with the above materials?
- What specific facts will you give as evidence of certain statements?
- What actions do you expect from visitors after they become familiar with the story your website is telling?
Source: https://habr.com/ru/post/331058/
All Articles