Don’t start with the home page
~ 27 November 2006 ~
…if you’re building a web app.
Too often it’s the accepted modus operandi to begin image comping, rapid prototyping, or iterative design by designing the home page first. While this practice works well for “brochureware” sites and other forms of brand-heavy design, it’s often a myopic approach for applications that are more utilitarian in nature.
If you’re comping the UI of a web app, forget the home page for now, as you’ll find the design of such will fall into place once you’ve mastered the UI for the more critical components. For nearly all web-based apps, the pre-login home page is merely marketing speak; a means of converting visitors into users. The post-login home page is almost always a dashboard; a summary of changes to important data since last login, and a springboard for new actions. Occasionally the home page is the primary raison d’être, e.g. Mint, in which the dashboard is the primary destination. But this is typically the exception rather than the norm.
Instead, begin with the core action(s) of the application and its interface. If your app facilitates recipe storage and retrieval, start with the Add Recipe and View Recipe screens. If your app offers invoice creation and management, start with the Create Invoice or Send Invoice screens. These screens and their siblings will inevitably dictate what should and shouldn’t appear on the dashboard or home page.
22 Comments
Veer: Visual Elements for Creatives.Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
I’m using this method in designing my new personal site (not a web app). So far, I’ve found that not only does the final design end up being better but this method forces you to think about execution much more than you would just designing a general home page.
Amen. Like Jeff, I also suggest the same thing for content-driven sites too. The homepage is always a different animal and should be treated as such.
I am in agreement with you on this one. In previous sites I have built, focusing on the actual functional pieces helped everything fall together on the home page. If i were to build it in reverse order, it may have been tougher.
Like Jeff said, it doesn’t even have to be for an app - but for sites that are content rich or are constantly updated, I think this is the best option as well.
Thus, the importance of task analyis and synthesing to understand the big picture and lead to a most optmised homepage or any landing page for that matter.
Goal directed design is the key. Find out what people are trying to achieve, the homepage almost builds itself.
I have used this method for most of my designs, from small to big apps, web and desktops. Always works.
And totally agree with Jeff that people dont come to your websites to stop and stare at your homepage. Give them most obvious ways to do stuff they came to do. The way to get this right? dont start from the homepage in your design process.
Maybe that’s my problem with putting together my website. I’ve been trying different approaches for the homepage for a year now — nothing’s there that keeps me going.
I come up with a sketch, tweak it a little and after having it around for some days I ditch it.
The next time I’ll try to begin with another page. Hopefully that will lead to a better result.
Sites are like books…. You can’t design the cover without knowing what the book is about.
I preach this day in and day out at my office. It’s taken a while to get them all to listen and understand, but they are finally coming around. My advice to my fellow designers: Don’t give up! Persistence pays off.
Very good advice I believe. What helps me when developing an app is that I take the mockup and start clicking around on the image. If I find myself wanting to click where there are no buttons, I put some buttons there.
Good post. This is the kind of advice that is only obvious after someone points it out to you, kind of like when you learn a new word and suddenly start hearing it everywhere you go. Here’s some related advice from the 37Signals guys about starting with the “epicenter” when designing.
Right on. Of course my first reaction is “why didn’t I think of that before”? But what a great idea…
Following Jeff’s comment, how many people will even visit your homepage (given that most users will arrive at your site through a search engine/blog post)?
Personally, I’ve found designing the information-rich (content) pages first works better for me anyway - playing first with those pages that have more constraints rather than trying to fit a nice homepage design around ‘busier’ pages.
LEA: Great analogy on the book cover, I loved it.
Tony mentioned this before, but after I read the part about the Epicenter in 37Signals book, it all made sense and I unconsciously start with an inner/content page first ever since.
Homepage/dashboard always fills itself up afterwards. Good advice Cameron.
That’s a very interesting point. My only contradiction to your claim is those who have a slight case of OCD. Some designers, I being one of them, have a hard time moving past something, or going (seemingly) “out of order.” Sometimes I have a hard time skipping something, because it weighs on my mind while I’m working on something else, interfering the entire time. However, don’t get me wrong, I think you are absolutely right. I can’t tell you how many times I’ve revisited the “home” page after building an app, because I realized what important factors I wanted to display on a “pre-login” screen. I’m going to try your advice again, though, and hopefully I can move past the “home” page this time. Great advice.
I agree 100%. I can’t seem to convince my coworkers however. We spend 80% of our time (and budget) on the home page and 20% on the rest. When really it should be the opposite.
Are there any statistics out there that shows how long a user spends on a home page? I thought I saw stats at one point, but I can’t recall were that was… It would be helpful to back my case!
انا أتفق معك بشأن البداية من الصفحات الفرعية، أعتقد أن أكبر خطأ يقع فيه المصممون هو نقطة البداية، تكزن الرؤية واضحة جدا في صفحة البداية إذا أتممنا الصفحات الفرعية، موفق
this comment is by arabic. think you.
That speaks volumes…
I’ve been jabbering on about building a community website, and can’t get past branding the homepage. Brainstorming the functionality is in progress. Moving on with that sounds like the way to go then.
Check out thinkature.com for brainstorming ideas, it’s way cool for online flowcharting ideas for new domain applications.
Thanks for this post… It reinforces something I’ve thought for the past year now!
The theory makes a lot of sense to me but I prefer doing a rough mock-up of a homepage to get the feel of the design first. This is after ive done a complete story board for the entire site. I just like having an idea of what i want the feel of the site to be and doing a rough homepage puts it all into place. But then after that i start with the “Coolest” part of the site. Like a portfolio site i start doing the gallery page first. And sometimes the Homepage will completely change from my mock up but having it roughed in to be able to look at and make sure im not deviating from my design concept works the best for me.
Interesting article
It’s good to see we are not the only ones facing this dilemma. I agree that actual development of the app has to be the top priority. However, it is often difficult to educate users about and otherwise provide a “hook” for your product without some serious focus on the homepage. I agree with Jon that the correct tradeoff is probably around 80/20.
so simple but so helpful! this is a time-saving approach to app development. this bit of wisdom has come to me at a great time in building my new cms…
i think i was subconsciously getting more anxious and ancy that i hadn’t spent enough time on the “home page” yet. now i realize that actually makes perfect sense.
One word: Amen!
So true! You end up having to go back and redo things on the home page, if it’s the first thing you do, since the home page will feed off of other areas on your site.
Authentic Boredom is the platitudinous web home of Cameron Moll, designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Recent job listings, testimonials, and 100th Kiva loan
- The ISO50 Field Guide to Color Management
- Upgrading the hard drive and memory in a refurbished 13" MacBook Pro
- Inspiring type: Libro di M. Giovambattista Palatino
- Randomness, vol. IX
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.
Linkage:
Follow me: 
1 Jeff Croft ~ 27 November 2006
This is something I, too, have been preaching lately — not so much for web apps, but for content-heavy sites like the news sites I spend most of my time working on. I think the concept can apply to many different types of sites.
I’ve even been using the same terminology (“core actions”) to talk about the things I focus on first instead of the homepage — which, in my case, is usually things like reading stories, commenting on stories, viewing the weather, clicking through photo galleries, and so forth.
The bottom line, I guess, is that in most cases the homepage is still not where most people will spend all of their time — it’s just a jumping off point. So, I tend to give most of my attention — and especially my upfront attention) — to those places where people will spend most of their time.