Posted by Jason Lengstorf in Development
All Series Navigation
- Part 1 – Planning the App: Basic Idea and Design
- Part 2 – Planning the App: Database Architecture and Development Approach
- Part 3 - Designing the App: Workflow Map and Photoshop Design
- Part 4 - Designing the App: HTML and CSS
- Part 5 - Developing the App: User Interaction
- Part 6 - Developing the App: Adding AJAX Interactivity
- Part 7 - Developing the App: List Interaction
- Part 8 – Wrapping Up
- And finally... the application! Colored Lists
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:
It'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.
Homepage (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.
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.
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.
As 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.
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!
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.
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.
Published by: Jason Lengstorf in Development