Home > Web Designer Wall > Storyframes before wireframes: starting designs in the text editor

Storyframes before wireframes: starting designs in the text editor

Browsing through a well-crafted interface is like reading a great story (or flipping through a great comic book). As designers, why are we not incorporating screenwriting techniques more often into our process?

Just the other day I was talking to an experience designer in my team about this simple technique that I have used for years and never really thought about as a proper “technique” — maybe just intuition of someone who has designed more pages than they can remember.

Before jumping into wireframing (and spending time moving gray boxes and blocks of text around on the screen), or even sketching things on paper with the level of polish I would like people to see in my work, at some point I have decided to start my design process with what I later named as storyframes: a hybrid document between a script/story and a wireframe.

The software I use for that?

A text editor.

Google Doc. Or Microsoft Word. Or Apple TextEdit. Anything, really.

The technique works especially well for landing pages, homepages, or long-scrolling pages that are trying to tell a unified, cohesive story. And let’s be honest: these types of pages are becoming more and more popular these days.

The big question I ask myself before jumping into the text editor software to “write” a page is:

How would I explain to a friend, in a conversation or in an email, this thing/topic/product/story I am trying to communicate?

Read Full Article

The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.

Leave a Reply

Your email address will not be published. Required fields are marked *