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.


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.


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.


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.


Post Icons

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.


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.



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


Post Notes

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


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.


Again, Out of the Box

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


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.


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.


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.


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.


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.


CSS3 Tricks: Box-Shadow

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


Not Cross-Browsers

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.


Final Result

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


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.


I use RGBA to enhance the login form fields.


RGBA Border

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.


Hover Box-shadow

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.


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.


jQuery Tabs

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


Sliding Login Form

jQuery is used to handle the sliding login form.


Feature Slider

The slider is powered by a plugin called Cycle.


Image Lightbox

The image lightbox is by prettyPhotos.


Other Examples

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

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.


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.


Oct 20, 2010 at 8:35 am

Truly inspirational! Thanks for an amazing article.

Oct 20, 2010 at 11:35 am

Congratulations! I think that all those details improve the design. Your layouts are very beauty.

Oct 20, 2010 at 2:12 pm

Thank you very very much!! That was an awesome insight into what your thought process involved :)

Oct 20, 2010 at 2:17 pm

Absolutely amazing…these are the things that you just don’t notice but if they weren’t there websites would lack a lot of life! Has the talk been uploaded as a video anywhere?

Oct 20, 2010 at 3:56 pm

thanks for the inspiration, some of the things you’ve pointed out will be used on my new site.

Oct 20, 2010 at 4:01 pm

Great slideshow Nick! I’ve been looking for something like this a long time. Is there a video of your talk somewhere? Would really like to see you thoughts about design and layout of text content too!

Matt W
Oct 20, 2010 at 11:20 pm

Looks like it was a fantastic presentation… did it happen to get recorded?

Nick La
Oct 21, 2010 at 12:23 am

I think Frontend/IXD will be releasing the videos.

Oct 21, 2010 at 3:30 am

An absolutely fantastic and interesting insight into your process. Thank you so much for sharing, and excellent work as always.

Oct 21, 2010 at 8:26 am

Thank you so much for sharing! I love your design and I totally agree with you on the importance of details and the UX.

Imobiliárias em Sorocaba
Oct 21, 2010 at 9:34 am

Your delay in write some new articles doesn`t matter as long you continue to produce them with so many and rich details of the process. Thank you again, Nick!

Oct 21, 2010 at 1:26 pm

A lot of useful tips

Web Designing Chennai
Oct 21, 2010 at 11:15 pm

Very good tips , it will help to the begainers

Oct 22, 2010 at 2:56 am

always awesome~

Oct 22, 2010 at 3:47 am


Darkened Soul
Oct 22, 2010 at 12:44 pm

Thanks for this post, looks great ;) should’ve been there.

Oct 22, 2010 at 7:19 pm

Great presentation you have great design skills!

Gaurav Mishra
Oct 23, 2010 at 1:04 am

Worth the SHOW! *Kudos*

Oct 24, 2010 at 9:59 am

Those are really great web designs! You’re really good. I like the various headers idea.

Oct 24, 2010 at 8:44 pm

Thx very much! Very useful tips, it’s great!

Robert Web
Oct 25, 2010 at 2:43 am

Fantastic attention to detail on your site, you can tell you put a lot of thought and effort into studio

Sites Sorocaba
Oct 25, 2010 at 9:44 am

Fantastic, I’am from Brazil, magnification article

Web Tasarım izmir
Oct 26, 2010 at 11:14 am

Awesome details. Nice presentation. good work.

Oct 26, 2010 at 8:39 pm

I enjoyed the read, thanks a lot for sharing!

iPhone App Development
Oct 28, 2010 at 5:51 am

I enjoyed the slides. Thanks for the share.

Oct 30, 2010 at 3:15 am

I like your post. thanks a lot of sharing with us

malaysia web design
Oct 31, 2010 at 2:26 am

wow…this is amazing…i get a lot of inspiration here…thanks for sharing….

Oct 31, 2010 at 10:10 pm

I like the ico!!!

Nov 1, 2010 at 3:10 am

it’s really nice article’s.thanks for all

Nov 1, 2010 at 8:13 am

I enjoyed the slides. Thanks for admin..

Steller Designs
Nov 2, 2010 at 11:12 pm

This was great. Thanks for the tips! You are definitely one of my favorite web designers around. Keep it up!

Nov 4, 2010 at 12:04 pm

Great to learn how you do your work. I am your great fan. there are so many things you can learn but also so many things you just can’t :-(

Designer sunglasses
Nov 13, 2010 at 5:07 am

Great recap, I can’t even believe you were able to write that.I got so much anxiety just watching that and I thought I was the only one who had unnatural rage/hate for Kelly, glad I’m not the only one, as I was getting concerned. These women show that you can age without maturing.Designer sunglasses

Imóveis Sorocaba
Nov 23, 2010 at 6:54 am

Loved the slides! Keep goind, man. I`ll try to use it in my own project:
Imóveis Sorocaba

premier pixels
Nov 24, 2010 at 2:56 am

I like your slides.Keep it up!

Nov 24, 2010 at 9:19 am


Web Designer from Poland
Dec 1, 2010 at 8:08 am

Great review. Your design is really reach in HQ details. I admire it a lot. And what I appreciate even more are your drawing skills. This is unique skill, even in world web design…

Dec 2, 2010 at 11:20 am

I always love N.Design Studio … Thanks for featuring them :) great job!

Dec 13, 2010 at 12:19 am

Great slides. Keep it up. :)

Luan Ramos
Dec 13, 2010 at 6:37 am

Very goood!!

Air Jordan Fusion
Dec 21, 2010 at 3:20 am

Just it,good!

Dec 23, 2010 at 7:38 am

Perfect design!

Henry Peise
Dec 24, 2010 at 3:36 am

But to really see the difference between these cameras I put together an overview containing 100% crops. It’s not fair comparing the white iPhone 4 with an 18 megapixel DSLR but it’s good to have as a reference.

Juno Mindoes
Dec 25, 2010 at 2:33 am

White iphone 4 Conversion Kit is now available. Though White iphone 4 Conversion Kit is suppose to release until next year, but now, you got a great chance to buy White iphone 4 Conversion Kit.

Jan 10, 2011 at 7:35 pm

I always love your design~ ka yau!

Jan 15, 2011 at 2:43 am

That’s Great! Thanks for the post!

Webdesigner 4 Drupal
Jan 20, 2011 at 8:36 am

Thanks for this great article, just scanned trough it. But will definitly read it later on. Wished you have a youtube video of you presentation.

Gunjan Solanki
Feb 1, 2011 at 5:26 am

this is the best article for all web designer.

شات صوتي
Feb 8, 2011 at 5:15 am


Feb 13, 2011 at 5:52 am

Thank you for your sharing this informative article.


Feb 14, 2011 at 1:39 am

Thank you so much for this lovely site

Feb 14, 2011 at 6:19 am

Thank you so much for sharing such nice piece of information

Feb 14, 2011 at 6:19 am

thank you for your sharing this informative article

Uçak Bileti
Feb 16, 2011 at 9:07 am

really Great! Thanks for the post!

kilo aldirici
Feb 17, 2011 at 5:43 pm

ignore weight

Feb 18, 2011 at 5:52 am


diş beyazlatma kalemi
Feb 18, 2011 at 6:47 am

All whitening formulation is applied by dentists with quality features, powerful, secure, and very reasonable prices, as well as the missing handbag is a unique product design, fashion styling you will not ..

css splash
Feb 22, 2011 at 10:01 am

great collections csssplash | Web design Inspiration Gallery

cheap christian louboutins
Feb 24, 2011 at 1:18 am

with the help of it, we can clear christian louboutin high heels open which a door.

collezione borse
Mar 3, 2011 at 12:51 am

I enjoyed this post Abhishek. It was certainly creative and not what I was expecting when I clicked on the title – a title I might add, which is quite good. I know I had to find out what ways ‘guaranteed’ I could grow my list.

Mar 17, 2011 at 9:14 pm

I may never be a typophile, but articles like this may just help me bridge the gap. Thanks for the hard work.

Apr 9, 2011 at 9:14 pm

Finally I had some time to seat down and watched the 40min of presentation you did. It’s quite impressing! Admire your work and thanks for sharing tips with design community~~~

Pandora Jewelry
Apr 13, 2011 at 2:05 am

thanks for sharing such informative and fantastic post..

Apr 17, 2011 at 1:17 pm

Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

replique montres suisse
Jun 11, 2011 at 3:17 am

Certains sont bons alors que certains sont mauvais. Sois sage lorsque vous faire du shopping en ligne.

Jun 14, 2011 at 7:52 am


Réplique Montres
Jul 12, 2011 at 10:33 pm

OK,I love like it

Jul 15, 2011 at 4:18 pm

This is verry good.

Aug 7, 2011 at 7:56 pm

This sort of clever work and reporting! Keep up the terrific works guys I’ve added you guys to blogroll.

complex 41
Aug 23, 2011 at 10:01 am

And then he handed you the thirty-five pound paroskii.

complex 41
Aug 23, 2011 at 10:07 am

And then he handed you the thirty-five 55

Aug 23, 2011 at 10:40 am

And then he handed you the thirty-five 45

Translation Services
Sep 19, 2011 at 3:36 am

It must have taken a lot of time to find such intricate details.

But it sure is great work and I am impressed by how designers go into such miniscule aspects of their work.

Click Here!
Jan 20, 2012 at 2:44 am

Yet another issue is really that video gaming became one of the all-time most important forms of fun for people of nearly every age. Kids have fun with video games, plus adults do, too. The XBox 360 has become the favorite gaming systems for many who love to have a lot of activities available to them, and who like to experiment with live with others all over the world. Many thanks for sharing your notions.

Brigida Billington
Jan 28, 2012 at 7:17 am

It’s a pity you don’t have a donate button! I’d most certainly donate to this brilliant blog! I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will talk about this site with my Facebook group. Talk soon!

Feb 20, 2012 at 1:23 am

I look forward to brand new updates and will talk about this site with my Facebook group. Talk soon!

Mar 17, 2012 at 3:29 am

Cheap but high quality jerseys from
NBA, MLB, NFL, NHL and customized jerseys with $17.89

deepak sharma
Apr 25, 2012 at 1:35 am

that was amazing… the breadcrumbs was not the perfect one…..

May 2, 2012 at 11:17 am

Certains sont bons alors que certains sont mauvais. Sois sage lorsque vous faire du shopping en ligne.

fake ray bans
Jul 14, 2012 at 1:19 am

fake ray ban singapore.It must have taken a lot of time to find such intricate details.

Dymo Labels
May 31, 2013 at 2:16 am

hello sir
i really like your collection
this post very useful for us

Post Comment or Questions

Your email address will not be published. Required fields are marked *