Now this is totally different from the last two reviews. This page is ultimately all about showing mathematical calculations, not showing off design. For anyone who is interested in design this is a huge challenge, everyone hates answers that have poor presentation value, too much gets messy, and too little leaves you with the standard Microsoft bullet point presentation which is just as dull as it is grose. If you present information in a nice way, it can be great. So lets take a look.

Sorry Dave, it's an overload..

I’d like to start with this. This didn’t happen right away, and this is during launch – the site is not supposed to be live yet, in fact the real site wasn’t. This screen came up in the sub-domain of “/input/” where we could sneek-test the engine during launch, and it happened only in one of many attempts. So having the feeling I wasn’t going to see this again (hopefully I won’t) I took a screenshot, and decided to write this review.

That’s a GREAT “we’re sorry” icon. It grays out the page, so you know you’re not really getting an answer from the “white page”. It includes the wolfram star, (that I’ll talk about later) the inside of the star is formed like HAL’s eye from Kubrick’s awesome filmatic interpretation of 2oo1 – A space odyssey. Now if you don’t know the movie, you could be wondering who “Dave” is. but for us who do know (the rest of the earth) .. we’re ecstatic about it. I’m not sorry I saw that screen, I’m happy! It also states (to the unconscious brain) that what you’re actually interacting with is a supercomputer, not a “normal website”, which happens to be true. Also there are some graphs under the grayout that tells you that this is a mathematical engine. Following that “no-content error”, lets take a look at some “real” results.

WolframAlpha Header

This is the main search area. The rest of the page is fairly clean and white, so this is where they want your eyes to go to. (Remind anyone of any other search engine you use a lot?) You intuitively know how this works. Two rectangles outside each other, each with approximately 10-12px rounded corners, the outside thinner, slightly transparent and darker(more red) than the other. This is a human eye-catcher. We love spiraling stuff, stuff outside other stuff. The outer line fade out where the logo is. The logo includes the Wolfram star (As far as I know, Stephen Wolfram has been using this on Matematica and other projects before Wolfram Alpha, please correct me if I’m wrong) But the star has been simplified, it looks slightly vectorized, and it has added layers of shadows and highlights. Makes it want to pop out of the site. (just like we like it!) The title uses the two words (the ones in the url), no space between them (like in the url) but separating them by different colors and using caps for each first letter. Yes! This is smart. To any human eye this is two words, which makes it easy to remember the address to this site. The slogan says “computational knowledge engine”. People will still refer to it as a “search engine” for a while, until they understand.. that’s not “really” what it is.

WolframAlpha seach button.

Now this is brilliance. As you can remember from my previous posts, it’s all about the lines you don’t see, but in this closeup, you can see the three different colors that make up the line around where you type your query. But more important to that is the “search” button itself. You don’t want a search button saying “search” or “I’m feeling lucky” with an engine like this. This isn’t about searches or lucky, it’s about empirical computational facts. and ofcourse the “next” button to your query is the symbol that means “equals”.  A lot of people won’t see this, but it’s absolutely brilliant. The person who decided this, simply understood the meaning of symbols on a website, and how humanity is using symbols before they are using words or other concepts. And we all prefer symbols on websites over words, at least when it comes to clicking.. (Most of us press enter, but we always look to see what “button” enter will press from the text field we’ve been typing into)

Searching for the Ninja within WolframAlpha

Now take a look at this search. Whats important to the developer is plainly providing information. So there’s the query (which is the colored part we discussed earlier) Now theres two more frames. The first has a light gray, same curve, line-rectangle around it. This frame only shows the assumptions about your query, if you’ve done anything wrong or the website don’t understand what you mean this frame will tell you what it assumes, or what it didn’t understand. This frame is less important than the one below which contains the results. The frame below has more of a bevel/emboss effect, making it stand out from the page. This enhances it from the block above. See how smart that designer girl is? (She did say in the interview, that Stephen Wolfram was fairly strict on how he wanted the page to look like. Seems like their collaboration worked out.)

Furthering the thought that the information is the selling point on this site, the biggest words are the actual information. The headers are in a smaller size as well as in a sans-serif font. The “add” words to make the information more readable from a human perspective (like the words “English Word“) has a light gray color, which also makes it stand out from the computed information.  The linked text is also small, and it’s orange. Three colors: gray, black and orange, and you intuitively understand what each color means. This is major kudos, simple and elegant, exactly as it should be.

Now I didn’t do any presentation of graphs (they are colored, comparisons are different colors, all about easy readabilty) but it continues the same pattern. Easily understood information, color separated, with the same high class subtle design.  I can’t find a single error on this page, and I’m the girl who always finds the errors, which means..  This is a very very good website. Everyone interested in design should take a look at WolframAlpha and see the best way to present information.

Happy designing until next time..

J.

Overview Website Entrance

Louvre Entrance:

The site opens and shows a gray/pink -gradient to white page, the logo is an image with black background placed on top of it. theres a flash slideshow with an interesting waveline that slides across, showing some stunning images. However, having been there, I know what majestic real world location these images portray, and the photos don’t do much justice to it, as they are very very thin and you feel like you are missing out on the detail. I’m sure the photographer took proper images, it’s the designer of the site that haven’t realized the potential here.
Some buttons of whats hot are placed partly above the flash slideshow, a quick way to get any visitor to think “I should click on that, to get more of whats not seen in the slideshow”.

And some of what comes up, is new, not made by whoever made the site. (or those persons have learned a lot about good design lately)
Some of the content is really good, although this is a review about the “main” website, We can see why some of these buttons are so accessible, while the menu is so gray and dull, they don’t really want to visit the rest of the site, but visit these other mini-sites they’ve made.

There’s a javascript dropdown menu, that noone really bothered to do “right”. It’s gray and uninspiring, there’s been a small thought of doing something, as there is a thin brighter line underneath it, and when watching one of my cropped images for it, I noticed it’s actually a small gradient beneath it, from slightly darker gray to slightly brighter gray. Now I always check whats beneath any javascript or flash to see if the developer has taken the effort to provide alternate content for people without flash and/or javascript. And in some way they have.  Without javascript the menu still functions as it will take you to a sub-page, and that sub-page has the other links for the category. So all pages are accessible. However, the developer has decided the visitor is missing out, and decided to inform them of the wonders of their gray uninspiring javascript menu by inserting a text-string at the top of the page.

Louvre informing us of no javascript.

Which you all can see is offset to the page, it’s ph-ugly and it’s not helping any user. When you’ve provided alternate content / navigation for non-updated users. You shouldn’t tell users to update anything. Unless it’s something like “Get Flash to view this movie”. Which would be essential to the experience. Also you can see how the logo is not really implemented in the design, but cut-and-pasted from somewhere else on top of the design.
Disabling flash and entering the site you get an image instead of the slideshow in the same size. Great! Exactly how to do it.
Then you get a pop-up in french telling you to get flash player from Macromedia. Bad! First, do not change language unless the user asks to.
Second, do NOT provide update info in such a way. Popups are bad!  Unless this update hides essential information, do provide links in the footer or something, Never break a users journey through your website. Third, most new browsers now open popups in a new tab, and focuses on that tab, which made my IE7x64 give me a huge gray page on it with a small notice. (Yeh, I use the IE7x64 to test what pages look like without flash, it’s not my personal choise of browser) And Fourth, it’s years since Macromedia was bought by Adobe, and it’s Adobe Flash Player now. Now ofcourse the Adobe guys has redirected old Macromedia links to the new site, but for a non-informed user, or someone sceptical this is actually a “broken” link, as it links to something else than what it says.

Now, moving on to to a sub-page, we se something new. the gradient dissapears, the color scheme continues, but it’s a lot less gray-pink, and the site becomes a more “white-page” design, like a pamphlet. There are few “large” images, but at least it seems like “whole” photos. It’s no grid system, the lines do not meet sufficiently, but at least the designers had some idea of what they liked (and we all like) and so they tried to emulate it.

Trying to find grid from upper boxes.

Looking for grids in the footer.

This doesn’t really give justice to the much better colors of the “white pages” as the gradient-footer is quite prominent in both images, it does however show that the boxes within the footer has gradients with white lines that make em stand a bit out from the rest of the design. The footer seems to have some idea of grid, as the boxes are of equal size and with equal margins between them. The top part has no idea what a grid is, and while the center box of the image has a own background color for it’s “header” part, the box next to it hasn’t, and it’s really sad that none of these boxes match up. Is this a case of one designer for the bottom, and one for the top? With no common plan except what colors to use?

So what should the louvre do? Or any other designer who’s page resembles this?

By all means if you like the colors, keep em. I’d mix in a bit more of a bright beige, as thats the color of the museums floor tiles as you enter. However get rid of the gradient on the first page.

All pages should have the same layout and design, and it should conform to a grid, it just looks more tidy that way. You can still use a gradient like that on the footer of every page if you like them.

Flash on the front page is great, but somehow you turn the museum into something cheap with those narrow images. You should use the whole top half of the first page to show a huge image of the lobby, or some featured installment you’d like to show off. It’s fairly easy to change something like this from your CMS solution on a monthly basis or so, as long as the flash is done right. I make flash intros with exchangeable modules through cms every week.

Start using HUGE pictures in every article. Visiting the louvre the first time for me was a breathtaking experience, as I had no idea how gigantic some of the stuff in there is. Your images don’t give justice to that at all.

And WHY are there no people in any of your images. The museum had loads of people in it every time I’ve been there. Having people next to the ancient monumental stone artwork from mesopotamia would really show any visitor the enormous treasures you have. This museum is one of France’s biggest prides, even Europe’s biggest prides. You should flaunt it for what it is!

Well, thats it for now, didn’t really want to start out with an all-out slaughter. After all it’s a “neat” website, it does use some flash, it does use some javscript, and it does contain useful information, but I don’t start with a plan as to how to write it when I start writing. And everyone should visit the Louvre at least once in their lifetime.

Until next time, happy designing!
J.

Ok, everyone knows who Apple is, what they make and almost everyone has visited their website at least once. Most people seem to think that the website looks fairly good, but when someone are inspired by it and tries to make something similar, they end up with something less than optimal. So what’s the trick, what is it that most people don’t see. Now lets take a look at the three things that they do that are absolutely magnificent.

1: Subtle Design Elements

To most people the buttons seems like fairly normal text, that changes color when you hover over it with your mouse, however there’s a subtle line in there, that enhances the letters, makes them stick out of the background. The subconscious notices this, but most people are not aware of this “trick” when they see webpages. Take a look at these magnified images.

Apple Menu Button

Apple Menu Button (Hover state)

The menubar itself is a gradient, between each button is not only a thin darker line, but a brighter line on each side. The menubar also has a thin brighter line at the bottom which separates it more from whats going on below. When you look at the text of the button in “normal” state, you can see there’s white text under the dark gray text which has been moved 1 pixel down, making the text seem like it’s inside the gray bar. In hoverstate you can see the opposite, when it’s white text it has a black outline 1 pixel above it, again to make it stand out from whats underneath. This is a much used trick by designers to make something pop out of your screen. Our eyes are made to see things in three dimentional space, and we approve (without knowing) of design that implements this.

Apple Frontpage Grid System

2: A Neat Grid

Apples frontpage uses a grid, most of you can see this immediately, but if one of these frames were moved slightly to one side, your eyes would tell you that “this does not look right”. A lot of great grid resources are available on the web if you want to learn more about implementing one into your design.

3: Huge Images

The strength of apple’s products are their design. Apples little gadgets look smoother than most other gadgets made out there. And apple uses this on their website by using huge images, and very little text. Apple also links directly to a video explaining why this new gadget is something you have to buy. Images and videos speak louder than words, especially when what you are selling is design. The image on the frontpage of their website now continues the white/gray-gradient style that Apple have been using on their gadgets for a long time. You KNOW you are on their website if you just stumbled upon a random link to “some gadget”, or “check this out”.

So.. What could have been done better?

Apple’s weakness shows when you get to their subpages. The grid from page one does not continue throughout the site. Swapping from a 4-grid to a 5-grid back to a 4-grid is not something that the eye catches in a good way. If they had done a 4-grid to a 6-grid it would still leave  a few shared grid-lines in the middle. Now apple has designed their site ages ago, so it’s a lot more narrow than what we designers think of as optimal for the common screen resolution today. Apple should widen their site, and remove the 5-grid elements.

Apple 5-Grid, What are you guys doing?

And then back to 4-grid?

Also as you can see from the 5-grid page, when apple tries to sell you something, they fill the page with spam. I will not download iTunes if a still image called “iTunes Showcase” seems spammy. That gives me the impression that the program live is probably even more so.

In conclusion I have to say this page is well build, but the maintainance of content is mediocre. These kinds of design-flaws are common when theres a team building a site without a well-planned structure. One team is responsible for one subpage, while another team builds the next page.

Lets hope the Apple web teams get a common grid template soon.

J.

J.