Five Days to a Django Web App: Day Two, Mockups

Welcome back.

Ready for Day Two? Did you get your "hello world" app running on your host?

Where We Stand

Yesterday we nailed down our concept, bought a domain name and hosting, set up our toolkit, and deployed a practice app on the host.

Here's what I'm going to build: a web app to keep track of job applications, cover letters, and resumes. The working name for the project is "resuman". Unfortunately, that obvious domain name was already registered and I'm not up for buying from the current owner. So after trying a bunch of more-or-less obvious combinations, I grabbed "yresu.me", and I'll deploy the app at "trackm.yresu.me".

Notes on Domain Registration

It's worth making a couple of notes here on the domain registration process. I use GoDaddy for my registrations. In the past I've done registration with my preferred host, but if you end up switching hosts it's a hassle to move the domain registrations. Another complication: hosting services like DreamHost only support registrations on the major TLDs (.com, .org, .net, .info), while a full-service registrar like GoDaddy supports alternatives like .me.

Lastly, I like the bulk domain search service from Dotster. You can search for up to 50 names at a time. So if your first choice is unavailable, use Dotster's bulk search tool to enter a whole mess of variations and see what's available. This is the process I used to find yresu.me — the search included resu.me, esu.me, su.me, and myresu.me, all of which were taken.

Make Some Mockups

Before we commit any design ideas to HTML, let's take some great advice from 37signals: sketch a bunch of drafts on paper first. To back up this idea, check out this story posted by Jeff Atwood about quantity vs. quality:

The ceramics teacher announced on opening day that he was dividing the class into two groups. All those on the left side of the studio, he said, would be graded solely on the quantity of work they produced, all those on the right solely on its quality. His procedure was simple: on the final day of class he would bring in his bathroom scales and weigh the work of the "quantity" group: fifty pound of pots rated an "A", forty pounds a "B", and so on. Those being graded on "quality", however, needed to produce only one pot - albeit a perfect one - to get an "A".

Well, came grading time and a curious fact emerged: the works of highest quality were all produced by the group being graded for quantity. It seems that while the "quantity" group was busily churning out piles of work - and learning from their mistakes - the "quality" group had sat theorizing about perfection, and in the end had little more to show for their efforts than grandiose theories and a pile of dead clay.

So my advice to you is to produce no fewer than five different designs on paper. It only takes a few minutes to sketch something out and see what it looks like. I did a handful of drawings on paper with my kids' crayons, and then some refinements on my whiteboard once I had chosen the general design. So use whatever media you have handy, and don't worry about getting it perfect. Run your sketches by a couple of innocent bystanders for some feedback.

Mockups on my whiteboard.

Once you've got a good design on paper, make mockups in HTML and CSS. Steve Dennis at subcide.com has a great walkthrough on creating a CSS layout from scratch. If you don't have an established process for building up a design, follow his tutorial. Putting together the HTML+CSS takes a little more time than sketches on paper, but it's still worth doing a couple of different designs to see what grabs you. I worked up two different CSS layouts on top of the same HTML. Run these designs by some people — now that you've got some code, you can upload it to your site and email a link to some friends. Pick the better of the two (or three).

Better yet, upload the mockups to your host and leave a comment here with a link to them. Traffic here is low enough that I should be able to reply with feedback. (Although feel free to circulate a link to this series to a hundred of your friends, or post it to digg. I'll at least reply to the first 50 comments...)

Tomorrow we'll start writing some code.

Posted on 2009-02-10 by brian in django .

Comments

Wow this is a great tutorial! Have you thought of writing for nettuts.com? Anyways I just wanted to say thanks! I am a very new internet developer but I have this going on:

dev.complimedia.com/wordpress-mu/

Any ideas or suggestions? Is this the type of thing that could be accomplished using django?

Its wordpress and buddypress.

montana flynn
2009-02-19 02:58:15

So, where's day three? it's been 13 days since day two!!!

:)

AJ
2009-02-23 20:34:01

Montana -

Thanks for the kind words. Your site is something that could be built with Django. But if wordpress/buddypress meet your needs and they are quick to set up, you might as well use them. (Unless you're just looking to hack on something with Django, in which case go for it.)

-Brian

Brian St. Pierre
2009-02-24 13:10:22

Woaooo! Great tutorial! thanks for your work.

Can you do a tutorial with a integration between django and jquery?

widex
2009-02-25 16:15:41

widex -

Thanks! Django and jquery sounds like a good topic. I'll add it to my queue. My schedule has been completely booked lately, so while Day Four of this series is in progress, I haven't yet had a chance to finish it. Once I'm done with it, I have a few other ideas brewing -- now including your jquery suggestion.

-Brian

Brian St. Pierre
2009-02-25 16:38:01

So here we are three years later. Still haven't seen day 3.

Chase
2012-08-21 17:22:07

@Chase: try clicking on the django tag or the django category, and you will see day 3 and day 4. Day 5 -- testing -- is left as an exercise for the reader.

But this tutorial is three years out of date. Django has changed. The deployment story has changed. I'm unlikely to update this tutorial any time soon. You're likely to be better off finding a more recent tutorial, unless someone is forcing you to use a three year old version of Django.

Brian St. Pierre
2012-08-21 17:41:01
Comments on this post are closed. If you have something to share, please send me email.