There are many \u201cright\u201d ways to design an application, so I want to be clear that this is my workflow (and the one I recommend), but it\u2019s not mandatory. I know other designers who just jump right into Photoshop (or code) and produce great work. But if you find yourself having trouble visualizing a design or workflow in your head, give this wireframing method a try.<\/p>\n
The hardest part of designing any application is picturing the entire thing in your head. When you are in the dreaming stage you can plan through an interaction a bunch of different ways, think through all the possible screens, and have fun doing it\u2026 except that if you\u2019re like me, you forget things. Often I find myself unable to think through additional interactions since I can\u2019t think that far ahead. For me it\u2019s like trying to think through chess moves three or four moves out. It just makes my head hurt.<\/p>\n
My solution is to get it out of my head and onto paper.<\/p>\n
I use either blank sheets of standard printer paper or, lately, the DotGrid book from Behance. Start with regular paper. I don\u2019t want the wait for the perfect tool to arrive to keep you from getting started today.<\/p>\n
On the right side of the paper I usually make two lists:<\/p>\n
The first is a feature list of sorts. For ConvertKit it included Landing Pages, Courses, Settings, etc. The list doesn\u2019t need to be exact, but instead it\u2019s a quick list of what I am thinking of including.<\/p>\n
The second is a list of questions to save for later. As you plan out the features and workflow, all kinds of questions will come up. These are important, but also a distraction for the stage of the process you are at. If you stopped to research each one every time, you wouldn\u2019t get anywhere. I write them down so that I can forget them (at least for now). Here are a few of the questions I wrote down for ConvertKit:<\/p>\n
At the time I had some ideas about each of these, but certainly didn\u2019t have the answer. To avoid distraction, I saved them for later.<\/p>\n
Next I use the rest of the page, starting in the top left, to draw small postage- stamp-size wireframes. At this point I am just interested in the user flow and main elements.<\/p>\n
<\/div>