Creating an App from Scratch: Part 3

Creating a Web App from Scratch Part 3

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 Workflow Basic app workflow

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.

Home page logged in The home page as it appears when logged in

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.

Sales page When logged out, we’ll encourage the visitor to sign up

Small 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.

Tab sprite All the list item tabs
Favicon Favicon

Registration

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.

Registration form The registration form

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.

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 controls Account controls

Buttons

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 Site buttons, looking button-like

Moving 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.

About Jason Lengstorf

Jason Lengstorf lives in Portland, OR. He loves design, code, business, and marketing. He also writes and speaks about design, code, business, and marketing. View all posts by Jason Lengstorf →
  • Rafael

    Simple and nice; so far so good. Nice series guys, thanks.

  • http://kendelaney.com Ken

    This is awesome! I'm really looking forward to following along. Thanks guys.

  • http://www.joebarstow.com joe

    Great chapter, I look forward to reading the rest. User Interaction interests me the most… Prototype? User Testing? The concepts covered seem very expandable, nice!

    So Far, So Simple :)

  • Sprogz

    I'm loving this series, thanks guys!

    One question, the favicon appears to have been created in Photoshop. Will you just save a GIF or PNG (forget what format is best supported for favicons) or an ICO, in which case how do _you_ get it into an ICO from Photoshop?

  • bilguun

    thank you guys for your great tutorials. i would really appreciate if you post your image files used in this app. thank you

  • WebSurfer

    Again, very good work guys!!!

    Just a question: what kind of font have you used to draw the logo Colored Lists ?

    Thanks!!

    Regards,

    WebSurfer

  • http://sideradesign.com paul

    @sprogz there is a free plugin for Photoshop that lets you export as ICO format

    http://www.telegraphics.com.au/sw/

  • http://chriscoyier.net Chris Coyier

    Regarding the favicon, I just create 16×16 images in Photoshop, save out as a PNG, and then use the Dynamic Drive favicon creator to upload the PNG and get an ICO back.

    The font is called “Architect2″ on my computer, but I really can't remember where I got it and I couldn't find much info Googling because that's such a common name for a font.

  • WebSurfer

    Thanks Chris!

    Regards,

    WebSurfer

  • http://www.sedat.web.tr Sedat Kumcu

    Thanks for this great articles. Best regards.

  • http://www.clippingimages.com Shamima Sultana

    Nice article..thanks for the post

  • George Abiola

    Thanks guys. Opening up my brains on what to do about my JSP.

  • http://www.profimasking.de/retusche.html Retusche

    I appreciate your article,your unique view attracts me ,go on!

    Retusche

  • http://www.photoshopclippingpath.us [email protected]

    Wonderful tutorial. Thanks for shear this good post.

  • http://www.fxmemo.com/ memo

    Such a nice tutorial!

    Thanks for sharing.

  • http://php sateesh

    It's very nice

  • MAADMAXX

    I've read this all through, once. Now I'm reading it again. Like a rivetting thriller, so congrats again for this beautifully executed app tutorial.

    In meaning to show gratitude, the only contribution I have at the moment is a question. On the signup.php page, was the “Sign up” class=”button” left off intentionally as way of example of showing inconsistent ui or another reason?

    Tremendously large bucketloads of inspiration on these pages, thanks guys.

  • sam

    It's an interesting approach. I commonly see unexceptional views on the subject but yours it's written in a pretty unusual fashion. Surely, I will revisit your website for additional info.

    the diet solution

  • jubbi

    Yup I’m really impressed that threes so much about this subject that’s been uncovered and you did it so well, with so much class. Best Forex Robots

  • jasica

    I think type of site that is useful in sharing information and it is important to shar.Web proliferation of new developments in the field of design and entrepreneurial spirit.Jacksonville Divorce Attorney

  • Amanda

    I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post. driving schools in coventry

  • julia conner

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? cell phone spy programs

We’re Ready When You Are

Ready to build something awesome?

Start Here