Last month I had the opportunity to speak at Frontend 2010 (hosted by IXD) in Oslo, Norway. My topic was about beautiful design. I talked about how you can make beautiful websites by putting the extra detail in it. As promised, here is the slide and brief recap about my presentation. I apologize for the delay. You may also download the slide at SlideShare.

Beautiful = Fine Details + Great User Experience

My topic was Beautiful Design is All About The Details. First I talked about how I incorporated the details in two of my latest projects: N.Design Studio redesign and Themify.

slide

1. N.Design Studio

The overall design of N.Design Studio is very artistic. I've incorporated a lot of my illustrations into the design and paid great attention to the details such as the typography and layout elements. It is like a piece of art.

slide

Intro Box

The intro box on the homepage is visually appealing and has a function at the same time. It tells readers everything about me and provides links to the major sections of the site.

slide

Various Headers

Instead of having the same header throughout the site, I spent the extra time to design a different header graphic for each page/section. Each header has different illustrations, height, and font styles. The fonts are randomly selected.

slide

Post Icons

Then on the blog page, each post has an icon associated with the category.

slide

Out of the Box

I made the design seem out of the box by extending the graphic elements outside the boundary.

slide

Navigation Menu Icons

When you hover over the menu buttons, it will display a tiny icon as the hover effect.

slide

Header / Breadcrumb

The header on the blog post also acts as a breadcrumb. It takes you back to the blog index page.

slide

2. Themify

Since Themify sells WordPress themes, I couldn't go too crazy with the design. It has to look clean and professional. But it doesn't mean my design have to be plain and boring. Instead of spending time on the graphic, I played around with the typography, CSS3 effects, and subtle details.

slide

Smile

To add a little fun, I've designed a smiley face as part of our logo.

slide

Post Notes

I've design various post notes to highlight the annoucments and promotional messages.

slide

Cutout Effect

As you may probably know, I like to play around with headings. On Themify, I thought it would be interesting to make the headings look like they are being cutout.

slide

Again, Out of the Box

Again, I extended the image out the boundary to make it look out of the box.

slide

Pixel Details

When I design in Photoshop, I often design in the zoom-in mode. I pay close attention to the pixel. Below are several case examples that I've encountered while designing Themify.

Homepage Feature Box

On the homepage feature box, when the large Georgia font is placed with the small Arial text, it looks like it is being pushed to the right by 1px. What I did was apply -1px margin-left to make them look align together.

slide

Top Bar

On the top bar, I used a very light gradient bar to separate the navigation. I made the gradient overlapping so it looks more interesting.

slide

Form Fields

When styling web forms, we often use solid border which looks very flat. To add more depth to the input fields, I styled it with multiple shades of gray.

slide

White Space Issues

Next I want to share with you how I solved the white space issues while designing the themes page. On the themes page, I initially wanted the images to be borderless. It looked fine if the image has a color background. But if the image has white background, it will blend with the content background leading to a white space issue.

slide

Quick Solution = Border

To sparate the images from page, adding a border to the images is probably a quick solution.

slide

Contrast Issues

However, the border doesn't play well with my out-of-box layout on the theme detail page. The border appears fine with the light color images. But the border looks like a white stroke with dark color images due to the contrast.

slide

CSS3 Tricks: Box-Shadow

An alternative would be: use box-shadow with RGBA value instead of opaque border.

slide

Not Cross-Browsers

But CSS3 box-shadow is not a cross-browser solution.

slide

Solution: Gradient PNG

Then I came up a solution: instead of using border or box-shadow, I use a gradient background. I apply the gradient PNG as a background image and 1px padding which seems like a 1px graident stroke.

slide

Final Result

Now it works with any image on either white or color background.

slide

CSS3 Enhancement

Although CSS3 is not widely supported by all browsers yet, but it doesn't mean we can't use it. We can use CSS3 to enhance the design. The most commonly used CSS3 visual properties are probably: rgba, border-radius, box-shadow, and text-shadow.

RGBA

I use RGBA to enhance the login form fields.

slide

RGBA Border

On the footer, I use rgba value for the border color.

slide

Border-radius

Border-radius is used to make the rounded buttons.

slide

Box-shadow

I apply a very subtle box-shadow to add more depth to the design.

slide

Hover Box-shadow

Box-shadow is used as a mouseover effect on the theme screenshots.

slide

Text-shadow

Text-shadow is used with the calendar icon to make it look more 3 dimensional.

slide

Javascript Enhancement

Nowadays having a beautiful design is not good enough. Your site needs to have a good user experience. There are many Javascript libraries and plugins that can help you to enhance user experience. Below are couple examples on how I use Javascript to solve cluttered space problems.

jQuery Hover

On N.Design's blog comment list, instead of having the reply buttons on every comment, I use jquery to hide all the reply buttons. When the user hovers over the comment item, the reply will appear and makes my comment layout looks so much cleaner.

slide

jQuery Tabs

On the sidebar, I use jQuery to display the content in tabs.

slide

Sliding Login Form

jQuery is used to handle the sliding login form.

slide

Feature Slider

The slider is powered by a plugin called Cycle.

slide

Image Lightbox

The image lightbox is by prettyPhotos.

slide

Other Examples

Below are the sites that I think it has great attention to details.

Kaleidoscope

This is one of the best one-page designs that I've seen. Every section features a different layout theme that is consistently tied together.

slide

45 Royale

45 Royale offers a day/night theme which responds on the time of your visit. Pay attention to the rocket in the header illustration. In the day scene the rocket is launching at the bottom and for the night scene the rocket is in the space.

slide

Basecamp

On the homepage intro graphic, notice how all the arrows are gray, but the arrow pointing toward the "See Plans and Pricing" button is black? It is a minor detail but helps draw attention.

slide

Analog

Anyone spot the hidden rooster on the illustration? View the illustration in a new window and you will see the hidden rooster. It might be unnecessary, but very memorable.

slide

Sushi & Robots

Impressive typography work.

slide

Pictory

Pictory not only showcases beautiful photos, but has excellent user experience. I particularly like the Twitter's comments submitted by the users; it adds more meaning to the photos.

slide

For a Beautiful Web

I'm impressed by the spinning DVD disks done by Webkit transform.

slide

Conclusion

A detailed design doesn't have to be very busy and graphic-intense. They can be some minor touches like the arrows on Basecamp, beautiful typesetting like Sushi & Robots, or simple animation effects like the spinning DVD on For a Beautiful Web.

slide

Thank You

Big thanks to those who attended my presentation and Frontend 2010 inviting me to speak. Don't forget to check out their next year event Frontend 2011.