Grow your CSS skills. Land your dream job.

Creating a Web App from Scratch – Part 1 of 8: Basic Idea and Design

Published by Chris Coyier

Today we begin Part 1 of an 8-Part series on building a web application from absolute scratch to a complete product. I am going to kick things off by introducing the idea, and then I will be handling the design, UI, and general front-end stuff. We are going to be going back and forth from here over to my friend Jason Lengstorf's site Copter Labs. Jason will be handling the back-end stuff like application planning and database stuff. At the end of the week, we'll unleash the actual working application for you. Here is the plan:

It's Easy, Right?

What we're going to create is a "list app". The idea being focused on simplicity and usefulness. Sign up for an account, and get started making a list in just a few seconds. Sounds easy right? Even the PHP dabblers out there probably could throw something like this together fairly quickly, right? Well the fact is, no, it's not that easy.

First of all, it needs to work and it needs to work well. That means good back end code that does what it's supposed to do and well. That means a good UI that is intuitive, helpful, and pleasurable to use. It means keeping the app secure and users data private. None of these things is trivial.

Through this whole 8-part series, we are going to create an app that hopefully does all these things pretty well. We aren't out to tell you this is the greatest app ever made, but rather, we are going to use this app as a walk-through journey of the app creating process and hopefully do as many smart things as we can along the way.

The Big Idea

This "list app" is going to be called Colored Lists. Lists (in real life), can be for anything: a to-do list, a grocery list, things to bring camping list... As you finish things, you cross them off. Things on a list may be of different relative importance as well. This makes paper lists potentially messy and inefficient. With a list on a computer, we can make crossing off items just a click and we can make rearranging them a matter of drag and drop. For dealing with relative importance, we can use colorization, which could also be used for things like grouping. Computers, and the web, are a perfect place for lists.

Sketch It Out

No need to get fancy right away. Here is a very rudimentary sketch of what the app might look like:

Looks like a list to me. Each list item is a long rectangle, because the big idea here is to colorize each list item, so putting them inside a colored box makes sense. There are some interactive elements to the left and right of each list item. Those are going to be for accomplishing the basic things we intent people to be able to do with their colored list. Lets take a closer look.

Early UI Planning

We don't necessarily want to be talking about specific technologies at this point, but we should be thinking about how the UI will operate, so we can make choices about technology that can accommodate our UI desires.

  • Click-to-edit
  • Drag and drop
  • Two-click delete
  • Automatic saving (after any action)

All this stuff basically adds up to a whole bunch of AJAX. We don't want to load special screens to do relatively trivial tasks like deleting a list item. That stuff should happen seamlessly, smoothly and with proper feedback in response to mouse clicks without page refreshes. In a sense, we are creating a one-page app, where the majority of interaction with this app happens on a single page. This is certainly by design, and not trying to adhere to any particular fad. Lists are easy and quick, that's why are useful. If this app is complicated, it's usefulness is diminished and nobody will use it.

The Screens

Just doing some quick brainstorming of the idea so far, we can come up with quite a number of "screens", or states the application can be in.

  • Homepage
    • Logged out = Intro/Sales Page
    • Logged in = Your list
  • Log in page
  • Settings page
  • Lost password page
  • Account activation page
  • Emails

Yep, even emails should be considered a part of the "screens", as they are a vital part of the process and interaction with an app.

"Features"

People love "features". Things that your app has that other apps don't have, or that yours does better. This is just as much for marketing as it is for your actual product. All the fancy AJAX this app will have is certainly a feature, but that stuff these days is getting more and more expected rather than a feature. The one feature that we will focus on with this app is "public sharing". Each list will have a unique URL that can be publicly shared. A visitor visiting this URL can see the list in it's exact current state, but not interact with it as far as editing/adding/deleting.

Moving On

Now that we have the idea in place of what we want to build, in the next part we'll dive into looking at what this is going to take in terms of server-side technology.

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.

Comments

  1. Permalink to comment#

    cant wait for the next part. thanks a lot for this and your entire site. i learned a lot from you.

  2. Wow, great start of a series I’m sure will be great. Can’t wait for part two!

  3. Sonds really interesting!

  4. Dave
    Permalink to comment#

    I’ve been planning an app for a while now. Might let this series play out before I attempt it. looking forward to part three

  5. Permalink to comment#

    Sounds like fun. Definitely something different from usual content.

  6. Permalink to comment#

    This looks interesting. I am going to try to follow this.

  7. Permalink to comment#

    This will be an excellent week! :)

  8. Permalink to comment#

    YES. Looking forward to more!

  9. Barramger
    Permalink to comment#

    I do realize that it’s not quite the point, but shouldn’t you be able to “Check off” a list item?

  10. Permalink to comment#

    Nice. Can’t wait fo it.

  11. Alexei
    Permalink to comment#

    Thank you so much for.., Chris! Hi from russian medved :)

  12. David
    Permalink to comment#

    “If you wish to make a web app from scratch, you must first invent the universe.”
    paraphrased from Carl Sagan.

  13. hamrath
    Permalink to comment#

    Wow, thanks! Just what I need. I’m trying to build my own webapp, but wasn’t sure how to go through all steps. :-)

  14. Latavish
    Permalink to comment#

    Good Tutorial. looking forward to the rest of this series.

  15. arnold
    Permalink to comment#

    Hmm a web app, definitely will looking forward from it also. Because I Love PHP stuff also
    Ive Never heard of ennuidesign, nice site! btw.

  16. Chad
    Permalink to comment#

    Thank you for this. I am tired of seeing “Let’s build a web app” tutorials where all you do is build a freaking CMS. Looks like you are going to go over building something that actually is unique

    • We hope so! Friday we’ll put the app out there for you to actually play with and potentially use too, so it’ll all come together that way.

  17. Anthony
    Permalink to comment#

    Nice post! I’m looking forward to the next bits

  18. Permalink to comment#

    this looks like its gonna be a good series, thanks!

  19. Thank you for this! This site continues to amaze me.. this example cited.

  20. grimdeath
    Permalink to comment#

    Perfect timing! With the news of Google Chrome OS being based around web apps only I think it will be interesting to see what goes into the design process for this level of app.

    I have a lot of hope in fellow designers and developers like you and me will be building the next gen of OS applications :)

    Cannot wait for the next part in the series!

  21. Brussells
    Permalink to comment#

    Roll on Part 3! Waiting eagerly for the next installment.

    It’s refreshing to see the workflow, ideas and actions needed for app building…but then CSS-Tricks never fails in such matters. Always informative, idea-inducing, and thorough in explanation.

    Thanks to those who make such information available, namely Chris and Jason in this case :-)

  22. That will be great ……

  23. Permalink to comment#

    good tutorial… wait for next part… :)

  24. nadeem
    Permalink to comment#

    Many Thanks…..

  25. Permalink to comment#

    this is simply awesome post. thanks for sharing. eagerly waiting for your next part of this series.

  26. Permalink to comment#

    I need/want a to-do list that fits my needs and that I can run on my own site. This seems like the perfect solution. I’ll be keeping an eye on the series, following along and building right along with you.

  27. Matt
    Permalink to comment#

    Great article as I have been trying to figure out how to tackle a web app for some time now.

  28. Permalink to comment#

    cool, I was just looking for a project idea to sharpen my codeigniter skills, so I’ll try to follow along in CI.

  29. Permalink to comment#

    this is one great series of articles written from web developers to web developers!

    bravo! can’t wait to read part 7 & 8

  30. Permalink to comment#

    Good Tutorial!

  31. Permalink to comment#

    Look forward to reading the whole series. Just need to get down to some serious coding/design.

  32. Permalink to comment#

    I’ll be following along and making my own app too, hopefully! Nice work!

  33. Permalink to comment#

    Great Idea, looking forward for the rest of the serie.

  34. Wonderful idea perfected to realisation as usual. Keep rocking chris and pals :)

  35. Permalink to comment#

    Great idea, Chris! Looking forward to reading all parts.

  36. Brussells
    Permalink to comment#

    A wicked tutorial and workthrough….however my lists don’t save, nor does my public url appear to be correct. Have I been impatient (as in, it’s not ready yet) or is something not quite right?

  37. Jhon
    Permalink to comment#

    Nice one!

  38. “it’s usefulness is diminished” – “it’s” means it is. Try losing that apostrophe…

  39. Ditto for “can see the list in it’s exact current state”

  40. Subas Chandra Dhungana
    Permalink to comment#

    Nice To understand core programmer.

  41. Tholithemba
    Permalink to comment#

    Hey this is awesome…

    Can you please turn this into a video tutorial and sell it… we’ll support… you’ve got nothing to loose after doing it for free :)

    Ok maybe you’ve got time to loose :D

  42. Permalink to comment#

    Very nice and detailed series on how to plan a web app. It is a must to stay organized during developement of an app.

  43. Hello Chris. I have published a technical checklist for developing web applications, as a guide. You can use some of the items on my list too, I’ve reviewed your article before creating. Checklist. (note: i’m subscribing follow-ups to this post)

  44. Sheetal

    nice

  45. Astro
    Permalink to comment#

    Hi,

    how can i get the source code of this web application?
    I have some few errors after i followed the whole article.

    Thanks,
    Astro

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".