Gojee

Gojee is all about personalization: you have to be signed up to their website to take advantage of its features. Enter the ingredients you “crave”, “have”, and “dislike” to get a list of handpicked recommended recipes, whose photos are displayed in full. You can browse back and forth using the arrows on either side of the page, or the arrows in your keyboard—the up and down arrows toggle recipe details at the bottom right. The use of translucency and large imagery gives a stylish, high-end feel to the site.

Recipe Finder

Recipe Finder takes the Google approach to finding recipes through a minimal search engine interface with an almost playful look between its cartoon logo, polka dots, and stripes. You have the option to view recipe results as text or images, and narrow them down with advanced filters. Meta information such as calories, servings, and preparation time are also listed.

Recipefy

Recipefy is built on the contributions of its community and other social aspects, like inviting friends and following fellow users. You can explore recipes with the color-coded tabs on the left side, and the icons to the right of the page heading, then like or add them to your own cookbook. The woodgrain background and warm color palette definitely gives the site a homey vibe.

Punchfork

Punchfork aggregates recipes from the top recipe sites and food blogs with a clean, warm look. The homepage features no less than 45 recipes arranged in a 4-column grid and extends with infinite scrolling. The recipe page displays its ingredients in either list view or categorized view—meaning you can see which food items are produce, dairy, condiments, and so on. The page also has a notable emphasis how highly rated the recipe is in terms of tweets, Facebook likes, and stumbles. You can even choose from not one, but four short links you can share.

Foodily

Foodily also has a search engine slant and recipe “glamor shots” in the background, but uses a second “without” input field. Results are arranged horizontally, like vertical index cards, and have nutrition indicators for calories, fat, and fiber. If the recipe doesn’t have a photo, the default graphic reads “Food, I love you”, which is what the name stands for.

Visual Recipes

Visual Recipes has many different features in its community, including cooking videos, forums, a blog, and a list of culinary schools in the US. As the name suggests, its selling point is a photo-centric approach to preparing recipes: ingredients and each instruction has a corresponding photo for reference. The recipes tab in the navigation and the footer section feature a mega-menu listing categories by meal, dish, beverage, holiday, and cuisine.

Cookthink

Cookthink compartmentalizes its sections into the digital equivalent of recipe card dividers. You can search by ingredient, dish, cuisine, or mood, with each tab displaying tag clouds of popular keywords you can add into the search box. Results are displayed in a 4×3 grid of recipe photos and titles, which you can hover over to view short descriptions. There’s also a reference section to fill you in on tools, techniques, ingredients, and cooking styles.

Yumit

Yumit sports a retro diner look that lets you discover recipes by dish and restaurant. On the homepage photos in each section go from large to small as you scroll lower.

Cooklet

Cooklet seems almost wizardly with its stars and yellow-purple color scheme. Recipes are displayed further down the page while recipe collections and latest news are given higher priority. Aside from its community and academy section, the site also has extra tools for measurement conversion, calorie intake advice, dish timers, and mobile and desktop apps.

Jamie Oliver

Jamie Oliver uses pastel colors, grungy, textured boxes, and an illustrated background to give the dense site a very light feeling. Featured recipes are shown in slideshows and different panels grouped in threes.

Food Network Canada

Food Network Canada mixes bright red and mint green, circles and curly braces for its branding and graphic elements, while its section headings are on photographic backgrounds. The search box is wide and prominently featured to the right of the logo.

Disclaimer: I worked on the front-end interface of Recipe Finder.

Aside from creating brilliantly art-directed articles that push the limits in with the latest HTML and CSS features, David DeSandro is redefining at least two classic site features at the same time with his Portfolio page:

The portfolio format.

Most portfolios consist of image thumbnails with either short or detailed descriptions about each project undertaken. DeSandro’s portfolio, on the other hand, contains full-width, full-height screenshots with guided markings explaining the how and why of his work, not just the what. Not only can you admire and drool over the designs, but you can learn from them as well.

The HTML image map.

The concept of image maps is sound but its execution isn’t so exciting: you don’t exactly know where to click and if you do, you don’t know what you’re clicking on. DeSandro created annotations that are intuitive and easy to navigate.

Does your portfolio need a refresh?

Your portfolio is your resume. Presenting your work and communicating your design view is critical to how others perceive you and shouldn’t be an afterthought. David’s portfolio isn’t so complex as it is well thought out. The designs are in full view; the details are straightforward. No distractions, no hype. Reexamine your portfolio page and see if yours is the same.

They’ve reused the Pitchfork logo of course, and uses TV video cables to further show off the TV aspect of this venture. Nice visual work there, although the cables feel pretty old school in today’s world of HDTVs and HDMI cables?

A close-up of the Pitchfork.tv logo:

Do check out the original Pitchfork site as well. The fonts are a bit small and the site feels a bit crowded, but the graphical elements are good.

What’s not as nice is the design the flagship site, Read/WriteWeb sports. It’s a fairly new one, and a real downgrade if you ask me. I’ll tell you why.

First of all, the header is uninspired. I really dislike the logo, but the worst part is that it feels so simple that it borders to amateurish, instead of simple in a good way. The subscribe options to the right, and the color usage (red being their brand color) is OK, but the menu and search box is dull. It’s just a poor header, which surprises me.

The main content area is user friendly, with a top story to the left, and popular posts to the right, and ads to the far right. Three featured posts go below the first main post area, all very accessible, and that’s fine. It’s no eye-opening design, but it’s clean and simple in a way that works.

I like the recent comments positioning to the right of the ad. I also like the post listing that follows. Good use of images as well, although they don’t really work as well in single posts.

The sidebar is OK. Ads mingled with things that might interest readers, but it should have something more to make it more appealing. Now you can actually skip it without losing any serious functionality, a bad thing as regular Wisdump readers well know.

The content part of single posts is good, but trackback management is poor at best, and the comments are downright ugly.

Such a strong brand, and profitable site (I gather?), as Read/WriteWeb should really do better than this. Surely they can afford to hire a designer to spice this verison up a bit, that should do the trick. Redo the header (and kill that logo please), spice up the comments, move some stuff around to vitalize the sidebar, then you’re there.

What do you think about the Read/WriteWeb design?

Enter Blog Perfume, which has a decent design overall, clean and sober, yet modern and with things happening. I’m no fan of the header, the background makes it a bit too busy, but other than that it’s nice enough. Also, the search bar needs to pop more.

And the sidebar is great.

On top, the subscribe graphic, precisely where you expect it to be.

Under that, a nice two column categories menu, with a separate background plate to really stand out. It works well with the Feedburner flame in the subscribe graphic above, very nice.

Two ads follows. I see them, they don’t annoy me.

Then the sidebar gets a little more anonymous, something I think is on purpose. Light grey boxes for popular posts and recent comments (which has an overuse of bold type, unfortunately) offer deep linking to the readers, and they do it in a sober and clean manner.

Finally, there’s a bigger square ad at the bottom. I think it’s OK to end the sidebar with a bigger ad, I have no problems with that. On this particular occasion, all ads fitted the layout nicely as well.

Watch and learn, people. No crappy widgets, just clean functionality for the readers, and the necessary ads. A good utilization of the sidebar.

NYT on Windows Vista

David Pogue in a YouTube clip explaining (sarcastically, in case you miss it) that Windows Vista is nothing like Mac OS X. Ignore the flurry of useless comments below it and you may have a good laugh.

(NYT is blocking the embed on this one, visit YouTube to watch.)

Wii Safety: The Missing Manual

First, check out this post on the near-comic pages and warnings from the Japanese Wii Safety Manual. That would seem good enough, sporting images like this one:

A Flickr set was started by The Iconfactory with hypothetical images for what was called “The Missing Pages” of the Wii Safety Manual. The first time I saw the group I laughed so hard I cried.

The Psychology Behind The Service

What is it about sharing your thoughts that ultimately makes this a viable idea? I mean, honestly, I don’t personally find these things appealing; but I think I can see where some people would. It plays into our inner most desires to be seen and heard. We want to broadcast our thoughts because somehow we think that we are important; that we matter. Whether we do or not is a question for open debate, but with Twitter and Pownce, you can feel as important as you think you are.

Now, I kind of think that these types of services are redundant; I thought that there were already features in other services that filled these needs. Think of MySpace and its headlines or Facebook with its status updates. Doesn’t that cut the mustard? I mean, even though Pownce has more features than just thought sharing, it definitely doesn’t have anything that social networking sites don’t already have… But hey, who am I to question the usefulness of two of the web’s most popular services?…

Are You A Twit?

Let’s take a look at Twitter’s design, shall we? Well, my initial first impression was, “Wow, it looks like some of those Web 2.0 generators threw up in here.” You’ve got your vibrant blues and greens, with a lackluster menu and a bubbly logo. What more do you need, right?

Well, beneath its quintessential web 2.0 exterior beats the heart of a simple, direct, useful service (if, of course, you find the idea behind it useful). It is as if a minimalist and a utilitarian got together and worked on this website. It needs no instructions. Everything is obvious and to the point. It has only the one feature and the design does nothing to get in its way.

Sure, it doesn’t suit my taste, but I cannot fault it for not hiding away features and not complicating its menu. And if anything, the logo was a bit ahead of its time. It nailed the principles behind whatever web 2.0 is; it is looked upon as a standard now, and must be given credit for that.

Do You Prefer To Pownce?

For me, Pownce is a fantastically designed site. One for the CSS galleries of this world. There isn’t much I don’t like about this look; the logo, the color scheme, the layout. It all works in my book. In fact, I would say that the focus of the site is the design; which is quite the problem in and of itself.

You log in and see a welcoming, warm environment. And if it isn’t warm enough for you, Pownce offers 4 different themes for your profile; all of which are well designed. But we should also look past the design. And that is now small task. The basic functionality is easy enough to use though, and while some features are a little bit more cryptic, there is nothing too difficult to find or use.

Speaking of those features, there is a laundry list of them. Pownce does much more than just share your thoughts. You can post images, files, links, build a comprehensive profile, and we haven’t even gotten to the desktop companion yet. But is that too much? Do you really need all of that in this sort of service? I, for one, do not think so.

Who Will Come Out On Top

The idea behind both of these services is very simple; share your thoughts. And Twitter gives you what you need and nothing more. Share your thoughts with your friends and be done with it. On the other hand, Pownce does this and much more. With all of its features, I feel like its reaching too far. Don’t get me wrong; I was pumped to get my beta invite and try out this much hyped service. But in the end, Pownce comes off more like a half assed social networking site than anything else. These services should be competing on the basis of what they are supposed to be; they should not try to mimic what they are not. For now, Twitter is king (Alexa rank of 636) and I see it staying that way. Pownce (Alexa rank of 3780) may seem like a challenger, but the novelty of its myriad of features runs out fairly quickly.

Ordering Up A New List

Steve Smith’s Ordered List has been one of my personal favorite designs since I began blogging. His black and blue color scheme with subtle highlighting was fantastic. Well, now all of that is gone, but let me be the first to say that I love the new look.

The motivation behind the redesign was actually to enhance the business aspect of the site. He has deemphasized the blog while enhancing the exposure of his personal company. Of course, besides the shift in the site’s philosophy, he also refreshed the look. A new brown color scheme is the most obvious change. If you would have said that it was going to be brown, I probably would have thought it was going to look terrible, but Steve pulled it off. He also subtly realigned elements, which makes sense for his new business orientation.

The only thing that was changed about the logo was the color scheme. Interestingly enough, I noticed that the logo was actually an unordered list, not an ordered list… But, it is still a great logo, conveying the basic idea about its namesake.

On a typographical note, I am a big fan of the way his actual posts look. The large font of the opening paragraph with the subtle line beneath really set it apart. It also helps to draw the reader in to the article. Additionally, there is a refreshing lack of advertisements. In fact, he doesn’t even have a sidebar, leaving all of the focus on the article, which is presented in a very easy to read font. Overall, the redesign is great.

Relaxing In The Lounge

The folks over at Devlounge have utilized a major technique that we preach about here at Wisdump; whitespace! That’s right, they have cleaned up their look and reemphasized their content. But somehow it still leaves something somewhat lacking.

Don’t get me wrong, I like the overall look. Yet I can’t help but notice that it seems like a bit of a step backwards, whether that was their intention or not. It resembles their previous look to a strong degree. I know that isn’t a bad thing, but I just feel slightly cheated. Again, I like the look, but a part of me is somehow slightly resentful.

As I mentioned before, their content has become the focus. Everything has been simplified; there are no distracting elements and advertising is at the bare minimum. There is a distinctive lack of graphical elements, which is impressive, because the site still has a tremendously professional feel. Again, this redesign was more about removing things than it was about changing or adding things. It is a quintessential grid design.

Personally, I would have preferred to see a tweaking of their previous design. I liked the artistic flair of the banner and I also thought that the magazine layout of the homepage was interesting. It was a bit complicated to navigate, but I thought it really stood out. So some enhancements would have been preferable for me, yet overall, I still like their new design.

This article was written by J David Macor.

Of Course They Want More Readers

Fair enough. But think of how classic blogs were designed. They had their title, with a menu on the left and then a long list of posts; the content was the focus. Then came this fat header design trend, whereby a large header image or graphic was used at the top. It took away the focus slightly, but being solely a design element, a reader would eventually make it back to the content a few inches below.

However, now we are seeing more content in the actual header. Header’s have become more than design elements; they are now useful beyond just being a clever place for an extremely zoomed in photo of your eye. More and more things are appearing in the header; above the proverbial fold. But is that really a good thing?

What Are They Stuffing Up There?

What isn’t being stuffed up there? Seeing search boxes or menus is nothing surprising; even the odd RSS icon is fine. But links to recent or popular articles, newsletter subscriptions, affiliates; is that going too far? Lets take a look at 4 examples:

These examples come from Better For Business, Josh Mullineaux.com, John Chow.com, and Nate Whitehill.com. All of the afore mentioned elements appear in each of these examples above the fold. Things like links to other posts, subscription options and so forth used to be sidebar elements. They even were considered appropriate for the ever popular fat footer (still a trendy place for Flickr photos and the like). Now the thinking has changed.

But Wait! Isn’t The Content Still King?

Those elements still take you to some form of the authors content. But to a degree, it breaks the flow of a traditional blog. It puts the very best the author has to offer in your face, and above all asks you to become a regular reader. I don’t necessarily think that this is a mistake; in fact, I myself am experimenting with this type of technique. Nevertheless, it still represents a bit of a shift in the makeup of a blog. Now you don’t have to wait day to day for the best articles and then decide whether you want to be a reader; you are bombarded with the author’s A-game and then asked to make a decision on the spot: subscribe or move on!

This post was written by J David Macor.

While the page height has been drastically reduced all over the platform, it has become much harder for the reader to easily navigate the platform. The old homepage was only 400 px higher, had less whitespace, but offered more.
Before, your typical nuke left sidebar offered many different configurations, depending on where you were on the side. The left sidebar has been replaced with a modern header navigation, but a header navigation with some elements in a JS drop-down navigation and other elements in dropdown boxes. More clicks for the user.
On the main and section pages less stories are listed, thus making navigation for people interested in headlines harder.
Bad become both problems on the subpages. Obviously the most popular sport for Skysports, football – soccer for Americans and Beckhams – is the best example of this. Many leagues and headlines were listed on the former football page and the old fashioned left navigation bar offered a quick navigation to the different league pages. Today only some headlines and stories are linked anymore and the leagues have disappeared in a dropdown box.

The design team of Skysports has done a visually appealing job but forgotten that there is no fold! Internet surfers are used to scroll pages nowadays and the great article Blasting The Myth Of The Fold, by Milissa Tarquini, Director of User Interface Design and Information Architecture at AOL, proves that not everything has to be stuck in the little area above the fold, with a practical example: on the 2500px high, now retired, AOL News Daily Pulse one poll at the bottom of the page had more than 325k votes!

Footer design has become a very important part of actual webdesign. Many navigational items are nowadays found in footers. Give the reader something when they arrive at the end of the page. They have thought about a footer area, but the footer can heavily be improved with useful content.

Clearly the Skysports designing team has missed the last 12-18 of web design evolution. Maybe someone can pitch them Roger Johansson’s 456Bereastreet. They might as well learn that the propagation of horizontal design implementation of horizontal scrollbars doesn’t improve the accessibility of any site.

The Skysports redesign, a perfect example of how modern design could make your site less usable.