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.

page width

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.

typopgraphy

Multiple Background Images

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

multiple background images

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.

out of the box

out of the box list

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.

splash

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.

post icons

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.

post format

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.

menu

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.

large headings

Breadcrumbs

The title's link also serves as breadcrumb navigation.

breadcrumb

breadcrumb

Animated Comment List

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

animated comment list

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.

portfolio

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.

loading indicator

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.

recycling

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

recycling - blog

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

recycling - press

recycling - contact

recycling - portfolio

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

recycling - about

recycling - freebies

recycling - freebies

Process Images

The main wireframes are done on papers.

wireframe sketch

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

initial outline

Then, I played around with the color.

color test

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

touch up

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

huge

Trent Walton

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

Trent Walton

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!

Jason Santa Maria

Subtraction

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

Subtraction

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.

Sushi and Robots

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.

31three

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.

What do you think of the N.Design's redesign?

View Results

Loading ... Loading ...