large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxplanet.org/narrative-wireframes-83cdef316b76">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*FY5B0KvWChZpptVw0ak03g.jpeg" alt="1*FY5B0KvWChZpptVw0ak03g.jpeg"></div>
</div>
<p>Image credit: <a href="https://unsplash.com/photos/1zA_mC846yU">Ben White</a></div>
<div>
<p>Where does new design start? Is it a visual principle we are fond of? Is it a trend that has to be tried out? As part of a <a href="https://dribbble.com/shakuro">daily UI</a> routine, these are probably the relevant ideas to start off with, but if we are talking about a specific project with its unique nature, business goals, limitations, and pitfalls, chances are, there will be not much room for experiments to fiddle with.</p>
<p>It all starts with an idea. The first test of this idea will be formulating it in one tweet. If it passes, congrats, you have a statement that the future project synopsis starts to build up on. This is where most of the designers make their first mistake:</p>
<blockquote><p><em>They start designing the interfaces using the tip-of-the-iceberg data they get right away.</em></p></blockquote>
<p>You can’t blame them. Designers do what they do best — create visuals. However, their honest labor often gets jeopardized by the nature of a startup project — its evolution and the gradual development of the idea. This process alone is the story with an inception, progress, and a climax. So why not try to approach the initial digital product design stage as a story?</p>
<p>After a decade of running <a href="https://shakuro.com/">our business</a> on autopilot, trying out different methodologies, and adopting what we believed was “the shit”, after learning the hard way and innovating, we started incorporating the narrative approach to wireframing as one of the most significant early design tasks.</p>
<h3>The Power Of Stories</h3>
<p>As a kid, being around grown-ups is exciting for many reasons. For me, the strongest one had been the stories they tell. My uncle was a sea captain. Every once in a while he would come over to our town with his cargo vessel loaded with corn, wood, or as I loved to imagine, King Kong under decks. For me and my sister, his visits were bigger than Christmas not only because of the weird stuff he would bring from all over the world but mostly because of the stories he would tell. Storms at Cape Horn, roadsteads in Mexico, weaving through rivers in Russia, there was no place in the house I’d rather be and no TV show I’d rather watch when my uncle would tell his stories.</p>
<p>The stories from his cruises all intertwined with each other creating a unique tale that, combined with a child’s imagination, shaped my addiction to adventure stories. Needless to say, for the longest time, I dreamt of becoming a seaman.</p>
<blockquote><p>Stories are the eldest and the most pristine way to share human experience. And this is where natural disposition to the captivating experiences meets the availability the technology has given us.</p></blockquote>
<p>What’s cool about the narrative approach, you don’t need anything but your conscious and a text editor. Like I said, it all starts with an idea and it’s up to you to expand and turn it into a story. Anything can be a story. A landing page or a home page is perfect for that.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*iRU_rByIr8G9PrRs." alt="0*iRU_rByIr8G9PrRs."></div>
</div>
<p><em>Image credit: </em><a href="https://www.pinterest.com/pin/58546863879993458/"><em>Pinterest</em></a></p>
<p>You don’t want to state the fact that your product is present. Instead, you want to appeal to the customers by giving them a material or emotional value. There are websites I never bought anything from, never subscribed, and never thought I’d use, but I remember them like I do my uncle’s stories. All due to the fact that they are structured similarly. And here’s how you do it:</p>
<h3>The Tale Of The Interface</h3>
<p>As a design agency, we’ve often thrown our designers under the bus by letting the client control the creative process. There is nothing wrong with that if a client knows what they are doing. But 9 times out of 10, they are just trying to either beat the competition in a specific design aspect or match a design staple set by someone they want to be like.</p>
<p>For users, the UI is the product. You won’t get past the first contact unless you engage them in the story you are trying to tell or be crystal clear about what you are trying to pitch.</p>
<p>As technology kept progressing and giving us more complex and means to express ourselves, at some point we’ve lost the heartiness and left it all at the mercy of visual appeal. Despite the urge to never judge a book by its cover, all we do is judge covers</p>
<blockquote><p>In the empire of anonymity that is the Internet, a good ol’ talk is a rare thing.</p></blockquote>
<p>That’s why with the right approach to telling a brand’s story, you can develop meaningful strength and gain a competitive edge. But how do you design stories? Do you create a layout with placeholders and frames to put text into? Do you Lorem ipsum the shit out of and then replace it with the client’s writing?</p>
<p>If you adopt a narrative approach to UI design, all you need to start is a text editor. Some time ago, I’ve published my thoughts on <a href="https://shakuro.com/blog/ux-ghost-writing/">UX writing</a> as fairly new and uncharted part of UI/UX design. Even though the practice of user-oriented texts in interfaces has always been there, it had never been addressed as a standalone discipline. We sometimes call it “word design” and it’s either a skillset a versatile designer has to acquire or a job for a writer who’s into the design.</p>
<p>The whiteness of a clean slate is quite intimidating. Like a UI designer creating a moodboard to get ideas, a UX writer collects as much information about a product as possible. The things that will make a product stand out are often missed.</p>
<blockquote><p>All the smallest details, all the spice and the flavor that can be keenly felt from the people who stood at the origins of a startup/product are pure gold for the future narrative.</p></blockquote>
<p>To make a UI tell a story, a UX writer has to arrange it like one. There has to be a protagonist, a King Arthur (usually a user), a venture (the user’s task), and a Merlin-like figure to guide a user through a venture, enlighten them, and be a proverbial beacon in the dark. The Merlin here is obviously a company.</p>
<p>Notice how you don’t even need a picture here to illustrate the analogy. This is what a narrative has in store for you — the opportunity to appeal to the imagination. More so, you can manipulate their imagination by focusing on specific leverage points of your message and providing certain emotional undertones.</p>
<blockquote><p>When your eyes consume visuals, you feel aesthetic enjoyment, while your imagination sleeps captivated by someone else’s perspective.</p></blockquote>
<p>I personally had a hard time creating textual content for interface wireframes with 100 x 200 px blocks or so left for me to put a description in. I’d much rather contract my copy by 90% then try to fit into a placeholder.</p>
<p>We’ve had a chance to check what narrative wireframes can do with some of our projects and this is what we’ve learned:</p>
<ul>
<li><strong>Consistency</strong>. If you approach UI design in a story mode, it helps create a signature style for all the pages.</li>
<li><strong>Understanding</strong>. This goes through all levels and teams. If a project has a story that everyone can tune into, it makes the communication so much better.</li>
<li><strong>Dedication</strong>. At <a href="https://shakuro.com/">Shakuro</a>, we truly believe that design and development industry is not an assembly line, you don’t just do your part and hand it over. The emotional attachment to a digital product at all stages of its creation is what makes the product great.</li>
</ul>
<h3>The Design Of The Narrative</h3>
<p>I know what you are thinking: years of design software expertise, sketching capabilities, extensive skillset, a killer portfolio, and to swap all that for a blank Google Doc? What I’m trying to say here is it doesn’t have to be either-or. Think of the amount of effort you spend designing in the state of lacking information, and the amount of time you spend changing everything.</p>
<p>That can be avoided partially by using a narrative. We started doing that for some of our website pages and with a perspective to do that with the entire website. Here’s an example of a narrative wireframe for our UI/UX Design page:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*Y26w-956W0Zi68Vf." alt="0*Y26w-956W0Zi68Vf."></div>
</div>
<h3>Collect Meaningful Data</h3>
<p>I started with a day of bugging our art director about the values, aspirations, principles of work the team intuitively sticks to, everything I could imagine would help me paint the character of our design process.</p>
<p>After that, I came up with a detailed process description in form of a script, nothing like the final copy or the designed page layout, but something to fixate the most important thoughts.</p>
<p>Usually clients are so passionate about their idea/startup/product, they can talk about it for hours. It’s important to keep the story off the technical intricacies and only cover the product on a larger scale. A good practice for that is imagining you are going international with that product and it has to be explained cross-culturally. Once you settle it down, the design options will pop up in a designer’s mind like mushrooms after the rain.</p>
<h3>Create [Some] Structure</h3>
<p>It’s not easy sometimes to identify what the most important aspects of a project are. However, it’s vital that teams would understand the storyline and remain on the same page. It’s up to a narrative wireframe to provide a hierarchy for the entire project.</p>
<p>At times, the product owner might not even decide which features form the core of the product. Help them out, let them contribute to the narrative. Later on, this will save a lot of trouble, as you will have a valid statement from the client.</p>
<h3>Trim It Down</h3>
<p>Like I said, shortening the copy is way easier than fitting it into the 3-line or 10-word space that a previously designed layout wants to squeeze you into. Sometimes the entire chunks get omitted in favor of the estate economy.</p>
<p>If you address the narrative from the standpoint of a new user, you’ll be able to see if it engages you, helps you see if the product might be useful, or just entices you to see what’s out there at the end of the scroll. Don’t forget, the visual design will animate the UI and make the narrative stand out more.</p>
<h3>The Examples Of Narrative Design</h3>
<p>Take a look at what I believe is a great example of a designed narrative, <a href="https://dribbble.com/shots/2803183-Aerolab-Brand-Guide/attachments/574090">Aerolab’s</a> story of their logo:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*IyMRaD44Sp1yLB7jtpIH0Q.png" alt="1*IyMRaD44Sp1yLB7jtpIH0Q.png"></div>
</div>
<p>Image credit: <a href="https://dribbble.com/shots/2803183-Aerolab-Brand-Guide/attachments/574090">Dribbble</a></p>
<p>Another great example of narrative interface and experience design is <a href="https://www.ginlane.com/#capabilities">Gin Lane</a>:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*v5BZmDgsm48MilgBCU7i8w.jpeg" alt="1*v5BZmDgsm48MilgBCU7i8w.jpeg"></div>
</div>
<h3>What The Future Holds For Narrative Design</h3>
<p>We are accustomed to perceiving design and especially wireframes as purely visual/aesthetic entity. The desired impact of design though is way bigger than just that. The design has to provoke action and help the product live up to its full potential. This signifies the meaningful aspect of interface and experience design that might lead us to the point where a meaningful aspect becomes the priority.</p>
<p>We are already experiencing it with AI and conversational design. The UI design in its old form shrinks to the size of a layout so that it does not mess with the conversation. All the cute stuff is limited down to micro-interactions, action animations, and colors.</p>
<p>The value conversational and interaction-based designs present is based entirely on the quality of communication they produce. The well-thought, witty, relevant conversation patterns and narrations are the keys to a successful AI experience.</p>
</div>
<div><a href="https://uxplanet.org/narrative-wireframes-83cdef316b76">https://uxplanet.org/narrative-wireframes-83cdef316b76</a></div>


Narrative Wireframes The story-telling approach to UX design

Narrative Wireframes The story-telling approach to UX design

Top Stories