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.

81 Comments

Rick
Oct 20, 2010 at 8:35 am

Truly inspirational! Thanks for an amazing article.

ddsign
Oct 20, 2010 at 11:35 am

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

Shebby
Oct 20, 2010 at 2:12 pm

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

glynn
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?

david
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.

Dave
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.

helium
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.

Kihwa
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!

adikahorvath
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

derek
Oct 22, 2010 at 2:56 am

always awesome~

aieie
Oct 22, 2010 at 3:47 am

good

Darkened Soul
Oct 22, 2010 at 12:44 pm

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

Jenn
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*

Webranes
Oct 24, 2010 at 9:59 am

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

Crimeadesign
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 n.design 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.

Yvonne
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.

Tech2connect
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!!!

POG
Nov 1, 2010 at 3:10 am

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

vidanjör
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!

ben
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!

iguoguo
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…

Swoppers
Dec 2, 2010 at 11:20 am

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

xcubelabs
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!

John
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.

n55lW
Jan 10, 2011 at 7:35 pm

I always love your design~ ka yau!

Ben
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

thnks
goooooooooooooood
min:(

Ralph
Feb 13, 2011 at 5:52 am

Thank you for your sharing this informative article.

Ralph

Raymond
Feb 14, 2011 at 1:39 am

Thank you so much for this lovely site

shuaib
Feb 14, 2011 at 6:19 am

Thank you so much for sharing such nice piece of information

shuaib
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

happmaoo
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.

Pandora
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.

Min
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..

dexx
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.

Anılcan ERÇOLAK
Jun 14, 2011 at 7:52 am

great!

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

OK,I love like it

orhanbt
Jul 15, 2011 at 4:18 pm

This is verry good.

NFLJERSEYS
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

complex41
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!

cheapjerseysus
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!

Mejerseys
Mar 17, 2012 at 3:29 am

Cheap but high quality jerseys from http://www.mejerseys.com
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…..

magazin
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
thanks

Post Comment or Questions

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.