How to build a front page

http://unalone.tumblr.com/post/84937340/how-to-build-a-front-page

by unalone • 17 years ago

70 26 17 years ago

unalone.tumblr.com

mixmax3• 17 years ago

I don't think this is very coherent. It's basically the author's impression of what works and what doesn't. It isn't really substantiated.

A few examples:

he complains about snipd (first example) having too many colors on the frontpage, yet praises Basecamp (last example) even though they have even more colors on their front page.

Comparing Snipd's service to Google, and saying that Google does a better job of conveying information because they have less of it on their frontpage is a bit too easy. Snipd's service is substantially more complicated and unknown than Googles (seen from a user perspective, of course)

It's not a bad post by any means, it should just stress that these are opinions of the author, and not necessarily what has been proven to work.

unalone6• 17 years ago

Absolutely! I jotted this up in an hour, thought people here might like it, and submitted it. Consider this to be the rambling opinion of a guy who likes looking at web sites.

he complains about snipd (first example) having too many colors on the frontpage, yet praises Basecamp (last example) even though they have even more colors on their front page.

The problem with Snipd isn't the colors. It's the fact that the colors don't contast well. There's faded-green next to vivid-green, cream with orange, and a lot of colors that don't fit well together. (I think when it was first posted here I said it reminded me of a liver spot, and the blue at the bottom felt like athlete's foot.) The Basecamp one, meanwhile, really pops. You get that really comforting dark-on white, there's lots of padding, and it all feels very cozy. (I particularly like that they contrast the red of the Basecamp page with the green of the sign-up button on top.) It's not perfect, but I thought nitpicking would detract from the message.

That's worth a completely different write-up: it's a big problem if people don't know why they should use your product. I don't get the point of clipping sites, so I don't know what design would work well for one. On the other hand, there are a lot of search sites, and Google was the one that figured out exactly what they were supposed to do.

I was thinking about using Zooomr rather than Snipd, but Zooomr is so incredibly awful that I didn't want to use it in an article like this. Zooomr I can't help but laugh at. Snipd actually works very well: they just have an ugly front page.

mixmax3• 17 years ago

Glad you replied - I wasn't quite sure about submitting the comment, since it might sound like a grumpy old man telling the kids to get off his lawn. I see you don't take it that way :-)

And for something jotted up in an hour it's pretty spectacular :-)

potatolicious• 17 years ago

I agree that Snipd's colors seem misplaced - the Basecamp site is vibrant and colorful, and colors are used well.

Snipd's homepage on the other hand is fairly bland, and where colors do deviate from the theme they are hardly justified. One particular sore spot is the atrocious green "no avatar" placeholder, which clashes terribly with the rest of the page.

If you are a user-content-sharing site IMHO you need to be more colorful than drab - you're trying to convey excitement and fun, not uptight and business-like.

markessien2• 17 years ago

His methodology is wrong. MySpace is very successful. It's a huge site, very profitable and used and loved by a great many people. So the frontpage obviously works.

The opinions reflected there are completely subjective, there is not even an attempt at any type of objective comparison between two patterns, to show why one pattern works and one does not.

"Could it be that Facebook is so popular because it constantly understates itself?"

It could be. It could also be exactly the opposite. There is no data, there is not even knowledge about why this approach was chosen.

If you want to analyse something, then take two items, one of which works and one of which does not. Point out the differences based on data. Then draw a conclusion.

unalone6• 17 years ago

Forgive me; this response may be something of a rant.

His methodology is wrong. MySpace is very successful. It's a huge site, very profitable and used and loved by a great many people. So the frontpage obviously works.

It's successful because when it got created, it offered a music service that nobody else did. People joined to revolve around bands. I joined because friends had joined. That said, MySpace had a near-monopoly, and yet it was still beaten by a small college start-up. That's not the sign of a good web site. If MySpace had been better, Facebook wouldn't have had a chance.

You can succeed with a bad front page. That doesn't mean your front page is good. MySpace's is bad, and it's bad in a way that, when it's pointed it, is pretty obvious. (I would draw parallels to Windows, which is in many way very poor, but which is still successful. It doesn't mean that designers should take their cue from MySpace.)

There is no data, there is not even knowledge about why this approach was chosen.

That's a dumb way to look at it. Facebook's intent is obvious. If you want, you can look at the history of Facebook's redesigns and look at which central cues its designs revolve around. It started off with a login space and a large "sign up" button, which was replaced with a registration form.

That said, you don't learn good design through analysis. You learn good design by seeing designs that resonate with you. That's what I was trying to do: I wanted to call attention to the things that most stand out to me in the design of front pages.

If you want to analyse something, then take two items, one of which works and one of which does not. Point out the differences based on data. Then draw a conclusion.

Mark, we've had this exact discussion before, so I'll keep it brief this time. Analysis only goes so far. It's useful, at some points it's necessary, but you don't learn how to make good things by looking at numbers. You look at the things that stand out, and you talk about what's good and what's not good.

I'm a writer. I believe in design as art. We've argued this before: I recall we fought over the guy whose new year's resolution was to make a Youtube video that got 100,000 views, and you said that the number count mattered, and I said that you should focus on making a good video rather than a popular one, and that good things always found their crowd. We have different views on this, and I doubt I'll change your mind because I haven't in the past.

The opinions reflected there are completely subjective, there is not even an attempt at any type of objective comparison between two patterns, to show why one pattern works and one does not.

Objective comparison only goes so far. Web designers spend too much time thinking about this, and it pisses me off because web designers are missing so much and yet they get so elitist about it. Look, at some point pure analytic technique falters, and you need to begin going from your gut. That's not to say there's no process: it's just that the process becomes a question of assessing things on your own rather than falling back on numbers.

Of course, I follow this because I'm a writer, and writing is traditionally the hardest art form to easily assess. You can't objectively compare, say, Ulysses and The Unnameable. Ulysses is maximalist, The Unnameable is minimalist. One uses a hundred thousand different words, the other uses as few different words as possible and focuses on repetition. They're both excellent books. And it's possible, if you're really an anal prick, to create the exact set of rules that each book falls under, to say "There are two schools of design and this is the one and this is the other," but that ignores the fact that there are a million other books that defy those two schools.

The best design is unique. Compare two great things and they will always be radically different in most ways. You can underline the main fallacies (don't be cluttered, don't do such-and-such), but in the end you can't learn by being handed a list of don'ts.

So this post of mine is meant to be subjective. It's me saying "Here's what I've learned, because I've spent five years looking at every web page I go to and taking it apart internally and learning, and here are the things that helped me the most." For me, that helps more than something listing Fitt's Law and discussing things like that. There are excellent articles about those things. This is not meant to be an article like that. This works from the evocative, emotional, even artistic view of design, the view that says "Here is how I, as a critic of front pages, view these front pages, and this is what I like and dislike about them all." In the end, the individual opinion is all I have to offer. I think that it's an opinion with a lot to offer, which is why I submitted it here, and apparently other people thought it was interesting. But we disagree, we know we disagree, and neither of us has anything to gain from arguing about it further because each of us thinks the other is wrong.

menloparkbum• 17 years ago

It's successful because when it got created, it offered a music service that nobody else did.

This is the safe-for-the-media version of why MySpace was successful. It's wrong. Pardon my crassness, but Myspace was successful because it had more sluts.

At the time, Friendster made it hard to sign up, impossible to view profiles unless you were a member, and it actively deleted semi-risque photos. Myspace did none of these things. Anyone could sign up, anyone could view profiles, and teenage women were encouraged to post tawdry photos of themselves. There were even loads of bogus profiles of babes in bikinis.

The music stuff was an interesting side note, but in the beginning it rarely even worked right and certainly wasn't why people joined the site. They joined because it was essentially a dating site without the social stigma of being a dating site.

markessien2• 17 years ago

Alright, there's no need to repeat ourselves. I'm a numbers guy. For me, any argument needs either a straight logical step or some type of numbers to back it up. I respect your approach towards things, because I know it works also. (I just don't like it, because it needs experience.)

So I'll say you did make a good number of good points, and seen from the angle you are approaching it at, what you wrote is a good essay.

phil_collins• 17 years ago

I don't think there's any way to improve snipd.com. The fundamental problem is that it's hard to understand what exactly snipd does. I'm a computer expert and I still don't understand it.

ctingom• 17 years ago

Maybe a video?

unalone6• 17 years ago

Videos are poor solutions, because they require the user to follow at the video's pace, and pace is very hard to get right.

The more general problem is that most people don't know why clipping things is easier than just copying and pasting. (It's worse on the Mac, because cmd-shift-Y automatically clips to a sticky note, meaning the online solution isn't adding much at all.)

alexS• 17 years ago

Updated the front-page: http://snipd.com/

Thoughts?

unalone6• 17 years ago

Definitely better. I'm still not a fan of the color scheme, or of the little people-boxes, but this is cleaner and more concise.

falsestprophet• 17 years ago

1. You should get rid of the newest link. It will be full of porn. Although, now, there is only one porn link.

2. Your service is difficult to communicate. (At least, I did not immediately understand its purpose.) I think you should automatically play a short, silent, unobtrusive screencast that demonstrates the unique features of your product.

3. On your front page, consider displaying only those users who have uploaded thumbnails. And you should probably pre-approve those images. Now, I'm looking at durbin licking a sharp piece of class. It is kind of freaking me out.

All in all, I think you are a tasteful designer: well done.

Good luck.

lacker• 17 years ago

Agree with only showing users who have thumbnails. This is what twitter does in its public feed, for example.

caustic• 17 years ago

alain94040• 17 years ago

Wrong advice. Copyright date should use the date of the oldest material, not the newest.

Why? The purpose of putting a date on copyrighted material is to help you know when the copyright will expire (althought it's not in your lifetime :-). If you have material that you created in 2008, but put a (c) 2009 on that page, technically you are trying to cheat and extend your copyright protection by a year.

I know, for web pages it doesn't make any sense, but you might as well know what the right thing to do (TRTTD) is.

sho• 17 years ago

Why is there a "feedback" box sitting on the left-most edge of the page, away from everything else, and on every page? I've seen this trend on several sites now, and I hate it. This anomalous object is always floating on the left, killing the symmetry of the site, no way to get rid of it. Maybe I'm just neurotic or something but I find it really distracting.

Can't you put the form down the bottom (or up the top, if you're really desperate), in line with everything else? It would look much more balanced IMO.

codeview• 17 years ago

Your old design looked fine to me. I didnt notice "nine separate colors" until it was mentioned in the article. For me it looked like 3 sections showing 'What', 'How' and a 'Quick overview'.

The whole 'snip it' concept was clear from the front page image itself.

tripngroove2• 17 years ago

I think the author has done a good job of discussing how the functional elements of a good front page should work together to focus communication and create a favorable first impression.

However, there's a lot of art-design advice sprinkled in alongside the content-design advice that I think is of a fundamentally lower quality.

"Color variances should always be blatant rather than subtle."

This statement is SO wrong. Contrast can be very important in creating visual separation and hierarchy, but this is dangerously close to the implication that everything should be contrasty all the time. (Think about flourescent spandex from the 80s as an example of this idea brought to life.) Style needs harmony. Walk in to a banana republic and look at how all the subtle variations of earth tones can blend to make some very stylish outfits... visit barackobama.com or whitehouse.gov and notice how all the different hues of blue work together to create a great aesthetic.

Wish I had more time for this... There are some FANTASTIC ideas in here about content design; what companies should be trying to say to potential users... and what they're actually saying.

But take the color-related, art-design stuff with a grain of salt.

And please author, there's no reason to make the posts on your blog bold all the way through! Bold type is not designed to be legible in large blocks... it's hard to read... and anything you DO choose to specifically emphasize is lost in the visual noise of all the boldness.

unalone6• 17 years ago

My blog's set in standard Helvetica. Nothing bold there, beyond the title. Do you have Helvetica installed? If so, is it actually Helvetica or a font using the name Helvetica? I've tested this theme on every major OS/browser.

There's probably a better way for me to say that, absolutely. It's not contrast per se, it's just making sure that your colors all look pretty. Gradient colors are very pretty when they're used well, as they are on all of Obama's page designs.

tripngroove2• 17 years ago

Oh wow. Your blog looks great in FF3. I initially read it from Chrome and for some reason everything came through in bold. My apologies for having little faith!

How to build a front page

Related Stories