After 3 years of using the Pheonix theme on N.Design Studio, I finally redesigned it with a Koi theme. The new look has improved a lot in terms of design and WordPress implementation. Every section has a unique layout which gives you a refreshing feeling. This post will summarize everything about the new design as well as show you the process images. Also, I will talk about how other sites inspired me.

980px Page Width

The page width is 980px which is optimized for users with 1024px display, but also looks nice for users with high resolution display such as 1680px setting.

Typography

The main body font size is 16 point. I purposely set it large so viewers can read the text comfortably even sitting away from the monitor. The three main fonts that I've chosen are: Georgia, Helvetica, and Baskerville. Georgia is used for the main body copy. The purpose of using sans-serif font (Helvetica) is to provide contrast to the body type. Baskerville is an elegant font, so I set it for italic text and image captions.

Multiple Background Images

Each section features a different background image that blends nicely with the header image.

Design Out of The Box

Inspired by an article that I wrote, CSS: Design Out of the Box, I made the background images extend out to create the out-of-the-box effect. Notice the list items are also out of the box.

Homepage Splash

The short line of introduction briefy tells everything about the site and leads to the most important pages: portfolio, blog, about, web and illustration. The Chinese characters "欢迎" mean welcome.

Post Type Icons

Each post has an icon next to it. They help readers quickly identify the category of the post. The icons are from the Rocky Vector Set.

Flexible Post Format

The blog's content area is designed to fit most type of content: whether it is a long or short post, with large or small images, or with videos and galleries.

Menu

The menu navigation is origanized in column/lists which provides easy access. When you hover over the links, it will show a tiny icon.

Page Titles

I made the page title super large so readers can quickly locate where they are. To make it look even more interesting, I randomly selected different fonts for each character.

Breadcrumbs

The title's link also serves as breadcrumb navigation.

Animated Comment List

The animated collapsible/expandable comment list is done with jQuery.

Portfolio

In the portfolio, I dropped the sidebar to gain maximum area for displaying large images. I didn't set specific dimension for the image area so they can fit various sizes.

Image Loader

Unlike the usual image slideshow where images are loaded and hidden by CSS, and then swapped by Javascript. In the method I used, the large images will only load when you click on the circle buttons. This can save bandwidth and loading time because only the requested images are loaded. The tiny animated bar (right above the circle button) indicates the image that is loading.

The Art of Recycling

In case you didn't noticed, the main theme is based on the Koi fish illustration that I recently did and the rest are recycled from various illustrations.

The background illustration on the blog page is taken from the Abstract Phoenix.

The lily pads, flying mushrooms, and jellyfishes are taken from the Koi illustration.

The bamboo, Japanese cranes, and cherry blossoms are taken from the old Flash version of N.Design.

Process Images

The main wireframes are done on papers.

During the initial design process, I used outline vector to do test mockups.

Then, I played around with the color.

After I got the sizing and position right, I imported the color vector and brushed them up to match with the overall design.

Inspiration

Huge

Very obvious, my homepage's splash is highly inspired by the Huge's homepage where the graphic elements extend out of the box. Read related article: CSS: Design Out of the Box

Trent Walton

Another great example of out-of-the-box design.

Jason Santa Maria

Jason's web site is simply creative and amazing! Go to the site, and check out the posts. Note every post has a different layout and theme — very refreshing!

Subtraction

Although my site is not on a grid, but Khoi Vinh’s web site inspired me to use horizontal rules to divide content.

Sushi and Robots

Sushi and Robots is a beautiful site by Jina Bolton. Her site motivated me to use non-web-safe font, Baskerville italic. It is such an elegant font and I believe most of my designer visitors would have the font. Read related article: The Next Serif Trend.

31Three

My portfolio layout was inspired by Jesse's portfolio where he uses large image to showcase his works in full page screenshot. No description or marketing text, the images speak for his work.

Your Thoughts?

I'm very happy with the final result. It totally worth the time I spent on it — from wireframe planning to PSD designing to WordPress setup. Please let me know your thoughts on the redesign. Perhaps tell me the things that you don't like about it.