

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

======
mixmax
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.

~~~
unalone
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.

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

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.

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

------
markessien
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.

~~~
unalone
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
_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.

~~~
unalone
Huh! I didn't know what about Friendster. (I was pretty late onto the MySpace
bandwagon: only joined in 2005.)

I would suspect that the people who remain on MySpace, however, do so for the
bands. The sluttiness has moved its way towards Facebook, at least in my
social circle.

------
tripngroove
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.

~~~
unalone
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.

 _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._

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.

~~~
tripngroove
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!

------
alexS
Updated the front-page: <http://snipd.com/>

Thoughts?

~~~
falsestprophet
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
Agree with only showing users who have thumbnails. This is what twitter does
in its public feed, for example.

------
phil_collins
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
Maybe a video?

~~~
unalone
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.)

