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
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.
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.
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.
Then on the blog page, each post has an icon associated with the category.
Out of the Box
I made the design seem out of the box by extending the graphic elements outside the boundary.
Navigation Menu Icons
When you hover over the menu buttons, it will display a tiny icon as the hover effect.
Header / Breadcrumb
The header on the blog post also acts as a breadcrumb. It takes you back to the blog index page.
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.
To add a little fun, I’ve designed a smiley face as part of our logo.
I’ve design various post notes to highlight the annoucments and promotional messages.
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.
Again, Out of the Box
Again, I extended the image out the boundary to make it look out of the box.
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.
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.
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.
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.
Quick Solution = Border
To sparate the images from page, adding a border to the images is probably a quick solution.
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.
CSS3 Tricks: Box-Shadow
An alternative would be: use box-shadow with RGBA value instead of opaque border.
But CSS3 box-shadow is not a cross-browser solution.
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.
Now it works with any image on either white or color background.
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.
I use RGBA to enhance the login form fields.
On the footer, I use rgba value for the border color.
Border-radius is used to make the rounded buttons.
I apply a very subtle box-shadow to add more depth to the design.
Box-shadow is used as a mouseover effect on the theme screenshots.
Text-shadow is used with the calendar icon to make it look more 3 dimensional.
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.
On the sidebar, I use jQuery to display the content in tabs.
Sliding Login Form
jQuery is used to handle the sliding login form.
The slider is powered by a plugin called Cycle.
The image lightbox is by prettyPhotos.
Below are the sites that I think it has great attention to details.
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.
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.
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.
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.
Sushi & Robots
Impressive typography work.
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.
For a Beautiful Web
I’m impressed by the spinning DVD disks done by Webkit transform.
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.