May 7, 2011 2 replies

The ugliest websites in the world

CSS Hell

Welcome to hell.

Still on the subject of the dark side of the web: I found a contest for the ugliest website held last June. The winner, which turned out to be mytastynuts.com, won a free redesign package worth $1800. Now this could have been a little more buzzworthy if the contest and company site itself looked like there had been thought put into the design. Heck, if you ask me, the current mytastynuts.com looks better, and don’t really have the right to be doing redesigns.

Of course, there’s really no harm in entering a contest where a free redesign is up for grabs—even if it ends up being not much of an upgrade at all—but that’s the problem with web design: the threshold’s too easy to cross.

The ugliest website contest would also have gone viral if the site were designed in the ugliest manner possible. Something that looks like this (without looking like they’re ripping you off). But that’s the other problem with web design: not everybody “gets” good design.

  1. Many have high tolerance for badly designed sites and bad design in general. Put bluntly, they wouldn’t know if something looks ugly even if it hit them in the face. Sometimes design can depend on a person’s instinct and taste, but it can also suck
  2. Combine that with “it’s just a lowly website”, not something cooler like architecture, fashion, or an ad campaign, and it’s a steep, uphill battle.
  3. And to top it all off, there’s the thin line between design and decoration, which is the absence of purpose and real content. A website, more than any other designed entity, is nothing without content and function.

Don’t be such a downer

Okay enough with the pessimism. How do we get rid of said problems? Eliminate ignorance, for starters. Buckets of inspiration from CSS galleries and image bookmarking sites are always good to have, but it’s also important to know exactly what we should avoid.

I recommend grabbing some eyedrops before clicking any of the links below:

The next step is figuring out why said sites are on the list. But that’s for another (ugly) day.

February 16, 2010 2 replies

Windows Phone 7′s bold minimalist move

I find it very intriguing that Microsoft chose to redesign its new Windows Phone 7 Series interface this way:

The design and layout of 7 Series’ UI (internally called Metro) is really quite original, utilizing what one of the designers (Albert Shum, formerly of Nike) calls an “authentically digital” and “chromeless” experience. What does that mean? Well we can tell you what it doesn’t mean — no shaded icons, no faux 3D or drop shadows, no busy backgrounds (no backgrounds at all), and very little visual flair besides clean typography and transition animations. The whole look is strangely reminiscent of a terminal display (maybe Microsoft is recalling its DOS roots here) — almost Tron-like in its primary color simplicity. To us, it’s rather exciting. This OS looks nothing like anything else on the market, and we think that’s to its advantage. Admittedly, we could stand for a little more information available within single views, and we have yet to see how the phone will handle things like notifications, but the design of the interface is definitely in a class of its own.

Curveball thrown. While the look has been in Zunes for sometime now, the real challenge lies in whether this will take off for mobile phones. I have to commend their bravery for taking this step, going the complete opposite of Apple’s love for rounded corners, gradients, and shadows. It also looks open and airy compared to all the boxes (no matter how rounded) on the iPhone.

It definitely changes the game a bit, and like several others I’m starting to feel like the Apple interface looks dated next to this one. Pretty big deal if you ask me.

This move could backfire. People tend to shy away from minimalism, not to mention it could actually be underdesigned, lacking in visual cues and icons. It falls short of the unified look Apple has built over the years, and I doubt it could start a UI revolution the way OS X did. Would Microsoft even use this for its desktop OS?

We’ll also have to find how it really measures up in real-world testing because the interface alone won’t determine success, but also performance and features (IE and Bing instead of Safari/Mozilla and Google? What apps will it have?). Still, bold is better than half-baked, and in the mobile space this look definitely sets them apart.

September 3, 2009 3 replies

Facebook chooses consistency over rounded corners

Facebook

Just about the time it’s become almost trivial to create rounded corners, Facebook suddenly decides to go back to its originally boxy, “razor cut” look. In the announcement, the Facebook design team reveals its priority:

Since we introduced rounded corners to Facebook, their consistent use has been spotty at best. The corner radii vary, and it sometimes feels arbitrary which corners are rounded and which are not. Additionally, they add an extra layer of complexity to the code (note: IE, please add support for border-radius).

As part of the effort to simplify our visual style, the design team recently decided to go back to our square corner roots. In doing so, we hope to champion cleanliness and the razor cut look that Facebook is known for.

That’s choosing consistency over the popular choice to go with rounded corners just because it’s a recommended design pattern. Not everybody would have the guts to do that.

Heck, it takes guts for Facebook to keep tweaking its interface, because at each turn it’s spurned so many protesting groups that keeping track of which one is against which feature becomes futile. For all we know, new groups protesting this rollback will surface yet again.

facebook addicted

But Facebook always knows what it wants, it seems, and always sticks to its guns. Given the current design trends—from “Web 2.0″ gradients, candy colors, large fonts, and rounded corners, to Apple-inspired interfaces, to the highly detailed grunge and Victorian textures—would you, as a hypothetical head of the Facebook design team, have come up with something like its current look? Or would you have changed it? Save for the already-gone rounded corners, people wouldn’t have pegged this site for a spawn of the Web 2.0 era. It didn’t feel the need to look like one. Its features already spoke volumes.

Let’s talk feature redesign. The most controversial one so far, which put the status updates on the homepage, has also redesigned the social networking design pattern as a whole. It’s not just a copycat of the Twitter or FriendFeed (which it just acquired) interface, but emergence of the Real Time Web had a lot to do with it.

Back in the glory days of MySpace and Friendster, Facebook had a chance to copy its ability to ultra-customize profiles with custom CSS and background images. And there was a time when FB’s apps messed up profiles that things almost looked as horrible as any MySpace or Friendster page, but Facebook once again swept in and prioritized consistency. Over total freedom.

Facebook always seems to be choosing the unpopular, unconventional path, but it’s now the most popular social network on the planet, and the 3rd most popular site in the world second only to Google and Yahoo! They must be doing something right.

July 29, 2009 say something

The day Twitter lost its personality

Twitter homepage redesign with search

Twitter definitely upped its game as its new homepage rolled out today (viewable only if you’re logged out). Now its greatest strengths are featured front and center: real-time search and trends. A wise upgrade no doubt, but there’s something off about the design.

On any other website I wouldn’t have been bothered by this. A fair amount of blue, green, gradients, rounded corners, and overall sleekness reminiscent of a certain OS: these are all “acceptable” characteristics of good web design these days. The problem is, this is not what Twitter is about.

Twitter old homepage

To me, Twitter is warm, organic, friendly—all because of the homepage (and the Fail Whale, of course). Sure, it used stock illustrations instead of commissioning original ones, but they were distinct enough. None of the cliche sunbursts and clouds, or the decidedly safer shades of blue.

Yiying Lu :: Fail Whale

And just as Twitter exploded in popularity, so did its branding. There’s an official Twitter bird, but whenever I see any other illustrated bird—hawk, owl, or any other kind—I think of Twitter. Heck, when I see that almost distinct light shade of blue (forget Tiffany & Co.!) or a rounded typeface, I think of Twitter. And while LOLcats have cemented their meme-dom for a while now, it’s really Twitter that shot them to stardom when they were used as error messages on the site.

Sure, all these inside jokes, cutesy mascots, and pastel hues may seem immature to some, and maybe the higher-ups thought it was time to get Twitter a personality makeover. What did they replace it with, exactly? tweaked Web 2.0 slash Apple design elements? Try again.

The old design elements fit Twitter’s image of sheer simplicity, of 140-character answers to the question “what are you doing?”. And today, with the homepage redesign, that image has started to slip away.

December 26, 2008 say something

Microsoft is committed to a better web with MIX Online

MIX Online

Contrary to popular belief, Microsoft is committed to building a better web with with a redesigned MIX Online and its horde of interesting resources, from articles to web development tools to delightful goodies.

We’ve all been guilty of bashing Microsoft for several different reasons, but now is a great time to give it a second (or a hundredth) chance. After all, it’s Christmas!

Articles and Opinions

Let’s start with readable sources on MIX Online, the Articles and Opinions sections. Skim through them and you’ll get a good sense that MIX Online shaping up to be a reputable web design source that’s passionate about web standards, user experience, and best practices. Read Nishant Kothary’s walkthrough of the site redesign, transforming moleskine sketches to a cool community running on their new CMS platform (more on that later).

more

September 24, 2008 8 replies

Design View meets Political View, Andy Rutledge style

USA.gov redesign mockup by Andy Rutledge

So many people admire Andy Rutledge and his insightful articles at Design View; but that seems to have changed overnight with his latest offering, USA.gov Redux.

It’s a thoughtful look into the redesign of the USA.gov website, but what has got people irked—primarily in 140 characters or less—is the deliberate sprinkling of provocative political views against Barack Obama and his brand of “Change”, from start to finish. It’s present even in the final mockup.

I’m not sure if the article was written in all seriousness, or hilarity, or satire, which makes me hesitant in even asking, was Andy right to mix design and politics in such a sour tone? We certainly have seen it work well in a hopeful context.

But we can’t try to pretend that design is pure and free from any sort of intent—whether at the hands of a designer manipulating the vision of his client into what he deems fit, or a designer who sees eye to eye with his client one-hundred percent. It seems the latter is impossible, but the former should not be laced with malicious agenda.

March 31, 2008 4 replies

Finishing Touches

…and famous last words, perhaps.

I’ve done some minor fixes to the design, adding some icons to the sidebar. The cache might make it look a bit funky for a bit, both browser (Ctrl+F5 for Windows users, Command+R for Mac people), and server caching. Live with it, I’ve had to during this whole process.

The Wisdump redesign is my last effort here at Wisdump. Tomorrow, April 1st (which it might already be where you are in the world, perhaps), Ia Lucero will take the helm here at Wisdump. Treat her nicely.

I’d like to thank you all for being such good sports, no matter if you’ve agreed with me or not. There’s been some nice discussions, a few heated ones, a couple of douche bags, and so on. As can be expected online. No hard feelings, actually, just warm fuzzy ones. I’ve had fun.

So thank you for reading Wisdump during my time here.

Where am I off to then? Well, it’s a secret so I can’t tell you that I’ll be taking the helm over at The Blog Herald come tomorrow…

Keeping quiet sucks, so I won’t anymore.

She’s all yours, Ia!

March 26, 2008 17 replies

Wisdump Redesign: Public Beta

So here it is, the redesigned Wisdump in public beta. There are a few small things left, but I figured I’d get it up there to see what you guys think.

Feel free to compare to the mockup designs I’ve posted previously. They are just that: mockups, which means that the design you’re seeing right now isn’t 100% like them. I never intended it to be, so that’s all good.

Jumbled up? Ctrl+F5 on Windows, or Command+R on Mac, or simply just empty your cache and reload to see the new design.

What do you guys think? Speak up in the comments! I’m all ears…

March 20, 2008 one reply

Show Your Reliability With Weekly Returning Offerings

Lorelle VanFossen is great. If you’re the least interested in the WordPress community you know this. She’s got a great blog, she is a great interview subject, and she does a great job giving us the weekly WordPress recap over at The Blog Herald. The latest one went online yesterday.

Other blogs should learn from Lorelle, and The Blog Herald, in regards to the WordPress Wednesday News segment. By having a returning column on a given day you’re signaling reliability, and that’s certainly a good thing, especially online, where sites and blogs come and go.

Something to think about for your blog, surely.

With that I bid you a happy Easter. I’ll be back on Tuesday next week. Another thing slated for next week is the new Wisdump design, in public beta. How about that, huh?

March 10, 2008 2 replies

Siliconera: Blog Network Theme Done Right

You might remember that I bashed b5media for their general themes, and the lack of blog profiling in them, quite some time ago? If you don’t, then read up!

Anyway, they manage to lay their hands on the excellent videogame blog Siliconera, which wasn’t in the b5media template of course. It is now.

Luckily, this theme update to the gaming blog is well done, and a great example of having a general template adapted to the blog in question. Sure, there are things that could do with some polish, but I think it does Siliconera justice. more

/* */