Developing a Workflow
We have a great start going on our list application at this point. The “big idea” is in place, we know how we want the lists to be displayed and interacted with, and we have some back-end structure in place to deal with users and all the data that goes along with these lists.
It was a good idea to start with the “meat” of the app, but there is a little bit more that goes into a full application. Because we have users, that means we need a sign up form and a log in area for returning users. Because users can be forgetful, we need a ‘Lost Password’ feature. Because users should be just as concerned about security as we are, users need to be able to change their passwords, change their login, and delete their accounts. Our one-page app has just turned into a four or five page app, so we’re going to need to think about some workflow.
There will be two different states for the homepage: logged in and logged out. While logged out, people need a way to sign in and to register, and this will be essentially the “sales” page too, explaining the app. Logged in, the homepage will be the user’s list itself. Logged in users will also need to do some ancillary stuff related to their account, like change their email, change their password, and delete their account, as well as a way to log out. These ancillary options are probably best served on an account page. So now we are looking at at least two new pages: Account Settings and Registration. Here is some flow:
Basic app workflowIt’s not pretty folks, but that’s what sketching is. It’s fast and it’s just to help you think and plan for the things you need.
Bringing It to Life Photoshop
Our developer is already ahead of us, thinking about the data they need and how this app is going to actually work. So we’d better get started actually designing here.
Homepage (Logged In)
This is the meat of our application so let’s start here. The list is obviously the most important thing, so let’s keep the header small and keep the list front and center. List items are big colored blocks with buttons for their associated actions nearby. Below the list a box for entering new list items.
The home page as it appears when logged inHomepage (Logged Out)
When logged out, the homepage is going to act more like a “sales” page. Not that we plan to charge for it, but just to explain and get people interested in using it. There isn’t much to say about a list app, so we’ll keep it simple.
When logged out, we’ll encourage the visitor to sign upSmall Bits
We’ve been designing long enough to know we might as well make the little buttons into a separate file and keep them together as a sprite (a sprite is multiple images combined into one to save HTTP requests, in our case, also the rollover states). So we’ll do that and throw together a favicon while we’re at it.
All the list item tabs FaviconRegistration
Our intention with registration is going to be extremely simple. We’re going to ask for a user’s email and that’s it. They will be sent an email with a link in it to complete registration. The link in that email will “activate” their account and they can choose the password at that time. So, our registration page can be pretty darn simple.
The registration formAs small as this is, this registration page sets the stage for other forms. We have a label/input pair here that can be used for any input/pair in any of our site’s forms.
Account
We’ll use the same form design as the registration page here. It’s not cheating or being lazy, it’s good design through consistency!
Account controlsButtons
Notice the change in buttons. They are now big, orange and rounded. Much more button-like don’t you think? Again for consistency, let’s make this the default for all buttons across the site.
Site buttons, looking button-likeMoving on
The developer now has plenty to go on to start fleshing out the user interactions for the site. And we have plenty to go on to start getting the HTML and CSS for all this ready, and ultimately to AJAX this puppy up and get it working.
Series Authors
Jason Lengstorf is a software developer based in Missoula, MT. He is the author of PHP for Absolute Beginners and regularly blogs about programming. When not glued to his keyboard, he’s likely standing in line for coffee, brewing his own beer, or daydreaming about being a Mythbuster.Chris Coyier is a designer currently living in Chicago, IL. He is the co-author of Digging Into WordPress, as well as blogger and speaker on all things design. Away from the computer, he is likely to be found yelling at Football coaches on TV or picking a banjo.