Copter Labs Copter Labs

Smart Design.

For Smart People.

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.

Date. 11/24/2009

Comments. 22

Category. PHP, jQuery, and MySQL

Jason Lengstorf

Jason Lengstorf

Jason Lengstorf a turbogeek hailing from Portland, Oregon. He designs and develops websites using PHP, MySQL, JavaScript (jQuery), CSS, and HTML. He's written two books (PHP for Absolute Beginners [2009 Apress] and Pro PHP and jQuery [2010 Apress]), and he's written articles on development and design for Nettuts, CSS Tricks, and Smashing Magazine, among others.

Was This Post Helpful? Pass It On!

Share the Love

If this post taught you something, reminded you of something you had forgotten, or just made you feel good, there's really no better way to say "thank you" than passing it along to your friends.

Don't forget to like us on Facebook, join our newsletter, and/or subscribe to our RSS feed to make sure you hear about new posts first!

Join Our Gaggle of Geeks
* indicates required

Comments.

  1. Gravatar

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

    Rafael 12:41pm Nov 24, 2009 permalink | flag

  2. Gravatar

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

    Ken 12:59pm Nov 24, 2009 permalink | flag

  3. Gravatar

    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 :)

    joe 1:16pm Nov 24, 2009 permalink | flag

  4. Gravatar

    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?

    Sprogz 3:56am Nov 25, 2009 permalink | flag

  5. Gravatar

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

    bilguun 11:34pm Nov 26, 2009 permalink | flag

  6. Gravatar

    Again, very good work guys!!!

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

    Thanks!!

    Regards,

    WebSurfer

    WebSurfer 12:34pm Nov 27, 2009 permalink | flag

  7. Gravatar

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

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

    paul 9:56am Nov 28, 2009 permalink | flag

  8. Gravatar

    Regarding the favicon, I just create 16x16 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.

    Chris Coyier 1:07pm Nov 28, 2009 permalink | flag

  9. Gravatar

    Thanks Chris!

    Regards,

    WebSurfer

    WebSurfer 7:36am Nov 29, 2009 permalink | flag

  10. Gravatar

    Thanks for this great articles. Best regards.

    Sedat Kumcu 8:52pm Nov 30, 2009 permalink | flag

  11. Gravatar

    Nice article..thanks for the post

    Shamima Sultana 12:38am Dec 17, 2009 permalink | flag

  12. Gravatar

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

    George Abiola 4:22pm Mar 31, 2010 permalink | flag

  13. Gravatar

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

    Retusche

    Retusche 1:09am May 2, 2010 permalink | flag

  14. Gravatar

    Wonderful tutorial. Thanks for shear this good post.

    [email protected] 3:39am May 4, 2010 permalink | flag

  15. Gravatar

    Such a nice tutorial!

    Thanks for sharing.

    memo 4:59pm Jun 9, 2010 permalink | flag

  16. Gravatar

    It's very nice

    sateesh 9:59pm Jul 12, 2010 permalink | flag

  17. Gravatar

    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.

    MAADMAXX 7:19am Jul 28, 2010 permalink | flag

  18. Gravatar

    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

    sam 5:15pm Jan 25, 2011 permalink | flag

  19. Gravatar

    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

    jubbi 3:00am Feb 2, 2011 permalink | flag

  20. Gravatar

    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

    jasica 9:28pm Feb 3, 2011 permalink | flag

  21. Gravatar

    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

    Amanda 8:28pm Feb 12, 2011 permalink | flag

  22. Gravatar

    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

    julia conner 1:18am Feb 22, 2011 permalink | flag

Join In.

Have something to say? By all means, speak up!

But first, a few rules:

  • Don’t be a jerk.
  • Use your real name, not your business name - this is a discussion, not a billboard.
  • Only <strong>, <em>, and <code> are allowed tags.
  • Wrap code samples in <code> tags.

Happy commenting!

Add a Comment