Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Atlantic Corporate Interiors. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Atlantic Corporate Interiors

“From our business software to our product solutions to our back-room process, everything we do is built around listening to our customers and responding accordingly. Not surprisingly, this idea, as simple as it is, still resonates in the marketplace. As the pace of business increases and the demands of marketplace performance are heightened, one guidepost remains steadfast. Are we listening to the customer? If we do that well enough, everything else follows. Our solutions will be creative, within budget and, most importantly, exceed the customer’s expectation.”

Here is a screenshot of the homepage:

First Impression

I chatted with this site’s designer a bit and he noted that the site had just gone live the evening before I began this critique. It’s an interesting opportunity to get a chance to evaluate a site that’s so recent. As you can imagine, it can often take days or even weeks to smooth over all of the little quirks and errors that you don’t notice until the site is seen by thousands of people.

My first impression about this site is that it looks very clean. I can definitely tell that the designer worked hard to make sure the final product didn’t become overcrowded by unnecessary elements and messaging.

The pages are organized well. There are three distinct sections: a header, content area and footer, kept separate by color and texture. From a purely subjective standpoint, I feel like the site is a little texture heavy. I’m not particularly fond of the prominence of the lines and gradient in the footer. I realize that it’s a visual theme carried over from other elements but I feel like it’s a little busy and distracting in such a large area.

Once again, this is more of a personal taste thing than a logical criticism. On the whole, the new design seems like a success. It’s a solid attempt at a current design style that brings this company into 2011 and beyond. As I look around, there are definitely some specific points worth mentioning and possibly updating. Let’s discuss these.

Page Title

One of the first things that I noticed about the site is that it looks like someone forgot to update the title. This is currently a technical reference to an old test. Now that the site is live, it’s crucial to make sure this is updated to reflect the business name for both functional and SEO purposes.

Vague Purpose

Though I’m a huge fan of the minimalist web design movement, sometimes the principle can be taken too far. The home page of this site might be an example of this. When I load the site up on my laptop, here’s the portion of the page that I see:

As you can see, the site is pretty vague about just what is going on. There are some key questions that you want users to be able to answer right away: Who is this site from? What/who is it for? As an answer, the top portion of the site gives you only a logo that says “ACI.” There is absolutely no description of the company or what it does. The pictures in the slideshow are a clue, but looking at those I’m not sure if what’s being offered is a product (furniture), service (office set up) or both. The best indicator for what ACI is offering comes from the word “furniture” in the navigation.

This sort of “piece together the clues to solve the mystery” web browsing experience can leave users frustrated. Granted, some people will only navigate to the site because they know exactly what it is, others though will stumble upon the site via Google and other resources and you want to make sure these visitors don’t quickly lose interest due to a lack of information.

How to Fix It

The fix here is easier than you might think. You don’t necessarily need a huge paragraph of text to tell people who you are and what you do. Instead, try a simple one liner. For instance, Twitter is a pretty complicated concept, but its homepage simply says the following:

“Find out what’s happening, right now, with the people and organizations you care about.”

This just tells you the very core concept about the service, nothing more. I recommend that you strive to come up with something like this for the top portion of the ACI site.

Secondary Navigation

Moving on past the home page, we find that the secondary pages are fairly well designed too. Most of these pick up an effective and simple two column layout like the one shown below.

On these pages the designer has introduced a secondary navigation feature, which helps keep all the content neatly categorized and condensed. The repetition of the bright orange from the logo is a nice touch, it helps keep the color palette consistent and yet brings some life to the page.

The problem that I have with the secondary navigation is that it’s not always used. Some pages don’t have any siblings and therefore possess a blank navigation area. This makes for a pretty awkward element in the design that looks more like an accident than something intentionally left blank.

How to Fix It

The solution here is simple, just hide the secondary navigation altogether when there’s no content to put in it. The homepage is an example of a page that’s left this element out so it’s completely appropriate to do this again here.

Random Links

The last thing that I noticed about the site as I clicked around was that there are a couple of image links that don’t really go anywhere. Instead they open up larger versions of the images. In principal, this is fine and is even standard practice on image galleries. However, these appear on images that don’t merit this functionality. As far as I can tell, this is confined to the sidebar images like the one below.

Here we see a picture of a phone on a keyboard, which makes perfect sense given that this is a contact page. However, when I hover over the phone image, I get a hand cursor, which leads me to click. This gives me a large picture of a phone on a keyboard. Why do I need a closer look at a simple stock photo? This unnecessary functionality has the ability to distract the user from what’s important.

Conclusion

To sum up, I think this site redesign was a success. The aesthetic is clean and current and really pairs well with the stylish, modern furniture being sold on the site. Overall, my suggestions for improvement amount to subjective design decisions and slight bug fixes:

• Consider easing up on the texture a bit. Perhaps tone down the noise layer and make the footer less distracting.
• Fix the page title.
• Make sure the purpose for the site/company is clearly stated on the home page.
• Hide the secondary navigation bar when it isn’t needed.
• Ditch the links on random stock photos that don’t have a reason to be viewed at a larger size.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Today’s site is Lake Gibbs Estate. Let’s jump in and see what we think! When you’re finished looking over this article, be sure to check out our huge collection of other web design critiques.

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Lake Gibbs Estate

Nestled in the foolhills of the Sahayadri mountain range, the peninsular Lake Gibbs Estate offers a perfect spot for your second home. Covered in lush green forests, surrounded by the waters of Thokarwadi Dam that merge and mingle with Andhra lake, Shirawata lake and Valvhan lake; Lake gibbs offers a unique opportunity to disconnect from your everyday and reconnect with yourself. Far enough from any urban area, but within 30 minutes driving distance from Malavli, Bhivpuri Road and Paladari stations; Lake Gibbs is the perfect getaway for the weekend or even the alternate year.

Here is a screenshot of the homepage:

First Impressions

The Lake Gibbs Estate website is very simple. There’s only a single page with a large slideshow and some very brief descriptions. Consequently, this will be a fairly brief critique!

My first impression of this page is quite positive. It’s very sleek and attractive, the fullscreen photos of beautiful scenery really grab your attention. For the most part, I think the designer has done a great job of creating something that’s both basic and interesting. Each piece of the design merits a comment so let’s take a closer look.

The Slideshow

As I just mentioned, the slideshow is the real show stopper here. In fact, the site is the slideshow, there’s little else. I’m always a bit proponent of leveraging great photography in design. A good photo can be more effective than hours of “from scratch” Photoshop work in grabbing the user’s attention and communicating an aesthetic feel. It might feel like you’re taking the easy way out by reducing a design to fullscreen photos, and maybe you are, but it’s hard to resist the idea of less work leading to a possibly more attractive finished product!

One place where photography heavy design works quite well is with product shots. When you’re selling a beautiful product, bullet points are great, but the image of the product should be the real hero. You see this at work in design from Apple, Dyson and many other premium product manufacturers. Here the same principal applies, the interesting part is that the landscape is the product (they’re selling plots). This works out fantastically because there’s almost nothing more attractive than lush greenery and a colorful sky on the bank of an expansive river.

Typography

When you have a photography heavy design like this one, typography becomes one of the most important decisions that you will make as a designer. You are tasked with choosing something that complements the imagery. It should be attractive and match the mood of the visuals without trying to steal the show.

A quick press of my WhatFont bookmarklet reveals that the modern, condensed typeface used on this site is a free font called Steelfish. I think the font is perfect for this project and I like how, despite only having one variation of the typeface, the designer was able to help certain aspects of the design stand out through the use of all caps.

The type would definitely not stand out against the photos so a simple and effective design trick was used: a reduced opacity black overlay. This frames the site nicely and highlights the important information while not detracting too much from the primary visuals.

One problem that I have with the typography is the word spacing, specifically on the “Lake Gibbs Estate” text. The space between words relative to the space between the letters seems way off. This is unfortunately the single most frequent problem that I run into with free fonts, few really seem to pull off word spacing as well as premium fonts.

Footer

On the surface, it appears that there isn’t anything else to the page but the slideshow and the name of the site. However, upon further inspection, it turns out that there is more. At the bottom of the page, you find a black bar with captions for each of the images in the slideshow:

Hovering over this bar expands an “About” and “Contact” section from the bottom of the page in a nice, fluid animation.

I like the way this area looks, but I’m definitely not a huge fan of the functionality. The problem is inherent in my previous comment, this section is fairly hidden. There’s no indication anywhere on the page that it exists, it’s only when you start randomly placing your mouse over various areas that you discover its presence.

I definitely recommend adding some ever present visual indicator. Perhaps a little tab that sticks up from the bottom bar that says “Learn More.” There are a million possible solutions, several of which will work just fine, the important part is to use something (anything) to help the user realize how to get to this important information.

Conclusion

To sum up, here’s a quick checklist of my thoughts on the design.

Good

• Simple, clean design that serves its purpose well.
• Slideshow: Gorgeous fullscreen images really grab the user’s attention.
• Font: It’s clean, modern and attractive. It’s also not used on the smaller body text, which is a good call as it’s clearly a headline font.

Needs Work

• The word spacing on Lake Gibbs Estate. I like the font but if you can’t fix this eyesore, it might be better to find something new.
• The hidden footer. It’s not apparent that this exists until you accidentally find it. Think of a way to highlight this content better.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Today’s site is the homepage of Ray Cheung, self-described simply as an Online Entrepreneur.

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Ray Cheung

“Rather than making websites for clients, I love working on my own projects; Starting from an idea, designing from scratch with some inspiration along the way, coding, and then spreading it around the world gives me a great sense of accomplishment. Currently I am managing self-started websites with about two million visitors per month – all with the aim to share useful resources to people.”

Here is a screenshot of the homepage:

Initial Impressions

Ray Cheung is a man who needs very little design instruction. He has not one but several very successful web ventures, all of which look great and his homepage is no exception.

The overall theme is pretty interesting: a wooden background with a stack of papers to hold the content. However, instead of using a paper texture, Ray went with a star field background. It sounds crazy but the overall effect is quite nice! I love it when designers do something unexpected rather than just running with a trend.

The stacked page effect is reminiscent of a popular Tumblr theme, but the similarities really stop there as overall layout and design is fairly different.

At a glance I really like what Ray has done here. Let’s dive in and take a closer look at some of the sections.

Texture and Color

As I mentioned above, the space and wood textures are an unlikely combination, but both are very well designed and seem to work perfectly together. I like the dark color palette that results from the two:

Fonts

When you have a fairly bold visual theme, it can be overwhelming to combine it with some crazy typography. The general idea is that you don’t want too many objects competing for attention.

In light of this, Ray made a solid choice in being conservative with his fonts. All of the typography is comprised of easily readable sans-serif typefaces. The main site header is bold, followed by an ultra light variant (perhaps too light). These and the bold condensed section headers are images with the live body copy in Arial. It would be great to see some @font-face integration to bring some of this type live, but the images are pretty tiny so I don’t really think it’s a big deal (though whipping up a sprite or two wouldn’t hurt).

Navigation

Between these critiques and our design gallery, I’ve taken a close look at a ton of website designs over the years. It’s not often that I see a trick that I’ve never come across before. Ray’s navigation though genuinely surprised me. I don’t believe I’ve ever seen this particular effect.

The design of this section is simple and works beautifully with the overall page. I love the contrast of the slightly extruded buttons and the inset section under them.

When you click on one last two buttons, the page automatically scrolls to take you to that section, a pretty typical idea. However, the other two buttons link to two sections that are already at the top of the page so when you click these their respective sections actually shake back and forth in a smooth animation. It’s a pretty simple effect that makes the site seem more dynamic and almost alive and friendly.

Sections

The page is broken up into two vertical columns. On the are the various projects that Ray has worked on and on the left are miscellaneous small sections of content: About Me, My Skills, Reading and Recognitions.

Each section is topped with a header and a little icon, another little feature that instantly makes me think of Tumblr.

These sections are clearly distinct and easy to hone in on individually. Each has a unique design but they tie in together well. One small thing that I would consider on the “My Skills” section is coloring the horizontal bars to match their respective portions of the circular graph. This would help the consistency of the two graphics and immediately communicate how they’re connected.

Intelligent Scrolling

Another thing that I really like about this site is how Ray thought through the scrolling functionality. The left column ends at the contact form and the right column is significantly longer. As you scroll down the page, the entire page scrolls uniformly as you would expect right up until you hit the contact form. At this point, the left column stops scrolling and the right column continues.

Touches like these just show how much time was spent thinking about how to make the site more user friendly.

Lights Off!

One of the few things I wasn’t quite sure about on the site was the switch near the top to turn the lights off. I expected that once I hit this switch, the theme would change somehow. Maybe the wood background would fade into black revealing more stars or something else equally interesting.

However, when you hit the switch, this is what you get:

I understand the message here: save energy by turning off the lights. However, the implementation is a bit awkward. This page gives you no way to go back to the site in the case that you were just pressing the button to see what it did, nor does it direct you anywhere else such as one of Ray’s other projects or some resources on saving energy. Another confusing element is the “Battery is running low” message in the site footer. This may be connected to the message in the header, but it’s pretty unclear.

I think the intentions are good here but the result is bringing down my perceived quality of the site and I think if these are going to be kept they need to be rethought.

Conclusion

In closing, I think Ray has created a great web page here to introduce you to himself. The page clearly states who he is and what he does and looks great doing it. The layout is logical and easy to follow, the design is unique and interesting and the content is, for the most part, relevant.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

We’re going to take a quick look at the design and layout of this new online service, and explain what works well and what we think could have been done better.

Email

This section of the service has done a great job of emulating a desktop application. The existing .Mac webmail application was already excellent, so porting this across has not changed a great deal. Design features which stand out include:

• The use of a lighter font to separate the subject and following message content
• Adding a new email indicator to the top toolbar, and the page title, to show your unread messages whilst using other applications

It is interesting to point out the lack of branding running through the site – nowhere is the ‘MobileMe’ logo featured, and the user is free to use the service without being confronted with too much Apple-centric branding. This is a distinct step away from Microsoft or Google online applications, which both use branding extensively.

Photos / Gallery

There are a plethora of modern AJAX galleries online, all with their own pros and cons. Apple’s now integrates with the iPhone, iPhoto and your Mac, along with offering different viewing methods.

The addition of reflections to the photos looks typically Apple, but seems to make reading the caption underneath more difficult. It raises the eternal dilemma – at what stage do superfluous effects become more of a hinderance to the user than a positive addition. That said, there are several design elements which are notably good:

• The permanent share-able URL in the top right makes showing others your photos very simple
• The simple design of the album settings popup
• The ability to resize all photos at once (no mean feat to achieve whilst keeping load times down)

Considering the lack of any Flash, the gallery pages do a great job of showing content in a dynamic and appealing way. The technologies used are nothing new, but have been used to very good effect.

Calendar

The previous online calendar on .Mac was relatively poorly designed, with little to no interactivity and various restrictions. The new version offers not only a much more accessible and practical design, but also a variety of new features.

We particularly like the dragging and dropping of calendar appointments which snap to place in the grid structure of the page as they are moved. Features such as this illustrate how JavaScript can really allow online applications to feel as natural and robust as desktop counterparts. Other aspects which stand out are:

• Transparency in event backgrounds allow you to still see time intervals
• Excellent use of subtle colours in the small calendar in the lower left to make it immediately obvious what day it is, which day you’re looking at and where the month begins and ends
• Slightly larger line spacing between events in the month view (making the online calendar actually easier to read and scan than the desktop version)

One inconsistency found here is the difference in design of the ‘settings’ screen when compared to the equivalent in the gallery section. It would have made sense to standardize this across all the various online applications. However, on the whole we think that the design of the online calendar is actually better than the desktop version, and hopefully some of the interface features (increased line spacing, less rounded corners etc) will be brought to the desktop version in a future update.

iDisk

The use of JavaScript and AJAX provides, for the first time, a practical interface for managing files and folders. Flipping through directories is seamless, as is dragging and dropping files as the page does not need to be reloaded for changes to take place.

The pink/purple icon for the iDisk is, to be frank, awful. The contrast between the two colours clashes and could certainly have been designed better. I’m not sure why a departure from previous aluminum drive icons, or the iDisk globe, was needed – either of these would have been more aesthetically pleasing.

However, the layout and view options look good and files/folders are clearly defined. There isn’t a great deal to say in relation to this section – it’s straightforward and does what it says on the tin.

Lessons to take away

• Branding isn’t always essential – put the user interface first and offer a simple service
• Be careful not to use visual effects when they come at the detriment of user experience and accessibility
• Icon design is not easy, but avoiding colours such as bright pink is generally a good idea!
• It is certainly possible to create online applications which look, feel and respond in a similar – if not better – way to desktop counterparts
• Pay attention to line spacing, as it can make text much easier to read

Do you have any other comments and opinions on this new service? Let us know below!

Most designers are familiar with the relative pros and cons of different publishing tools – but what about the websites of the blog platforms themselves? We all know that you shouldn’t judge a book by its cover, but I would argue that there’s no harm in looking…

We’re going to take a look at the homepage for four popular platforms: WordPress, Textpattern, ExpressionEngine and Blogger. Which ones are beautiful enough to compel you to use their platform, and which ones have the design aesthetic of a hello kitty toaster? Hopefully through a critique of these designs you can take home some good pointers for use in your own work.

WordPress

The WordPress homepage has recently gone through a complete re-design for the release of version 2.5 of the software. Whilst the site does have a huge amount of content, the homepage is simple and easy to read.

What works:

• The use of orange to highlight download links makes the task that most people visit the site for a simple one
• The style of language – “WordPress is both free and priceless at the same time” is a great sentence.
• It makes WordPress understandable to someone who has very little knowledge of technical aspects. The words PHP and MySQL are not even mentioned!
• Form input fields have been painstakingly designed

What doesn’t work:

• The WordPress for Dummies image in the bottom corner clashes with the colour scheme
• The fact that the site ironically doesn’t seem to be powered by WordPress

Textpattern

Textpattern is the most basic of designs and does not go a very long way to ‘selling’ itself to potential users. However, with all the focus being placed on textual content it does live up to it’s name. We use Textpattern to publish certain sections of Design Shack and we’re more than happy with it!

What works:

• Splitting the layout using only text columns screams professionalism
• A subtle use of yellow defines the Textpattern ‘brand’
• The requirements and interface features are quickly found

What doesn’t work:

• The site is focused towards the technically minded
• There is no emphasized area of text which introduces the software
• Screenshots are displayed in a fairly flat and uninteresting manner
• The download link is tricky to see
• The amount of content on the page is excessive, overloading visitors a little too quickly

Blogger

Blogger differs from the other platforms we are analysing as it is a hosted service. Powered by Google, it allows completely non-technically minded people to start publishing a blog with great ease.

What works:

• Content is kept simple with a minimum of technical information
• The ’3 easy steps’ idea easily guides the user through a straight forward process
• Branding is used well, imprinting the Blogger logo on the readers mind

What doesn’t work:

• The use of typography is confused, with too many different effects, colours and faces
• The site lacks professionalism, clearly focused towards a certain user group
• The icons look decidedly dated
• Tables are used for layout in certain areas which really should be styled with CSS

Expression Engine

As the only commercially sold platform in this analysis, Expression Engine has a different motive to persuade publishers to use their software. This leads to a design more reminiscent of other commercial software sites.

What works:

• A professional, well designed colour scheme
• The use of tabbed content on the homepage to show a greater amount of information in a visually appealing way
• The website is powered by Expression Engine itself
• Unlike Blogger, the icons and graphics used and professional and well crafted

What doesn’t work:

• The bold logo for the testimonial section immediately draws the eye – away from the main Expression Engine logo
• Due to the heavy graphical nature of the page, loading time is slightly longer than the other designs

Lessons to take away

• From WordPress: Place emphasis on the most important reason the user came to the site, in this case, to download the software
• From Textpattern: Too much information can overload the reader, and a brand can be created using a single line of colour
• From Blogger: Guide the user through a process
• From Expression Engine: Using a dynamic area can allow more information to be conveyed without overloading the user at first

We hope you enjoyed this “design analysis” concept and found it to be useful. Please feel free to give your two cents on the above designs in the comments.