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.
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.
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.
The menu navigation is origanized in column/lists which provides easy access. When you hover over the links, it will show a tiny icon.
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.
The title’s link also serves as breadcrumb navigation.
Animated Comment List
The animated collapsible/expandable comment list is done with jQuery.
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.
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.
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.
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
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!
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.
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.
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.