The special UI design actually inspired me to create this web design. It is clean and informative with the tiles. Therefore it is quite suitable for WordPress site because on a homepage a summary can be display with featured articles and photo gallery, etc.

This is the web design example based this Windows 8 tiles UI. Click the button below to see the real HTML demo

View Demo

We welcome any comments and discussion on this design and we are aiming to make a WordPress theme based on this too in the future.

Contest ends on Oct 24, 2011. Good luck!

How to Enter

• Write a comment in this blog post and tell us which icon set of Double-J Design is your favourite (You can view all icon sets here)
• One comment per person.
• The winner will be selected randomly.

Themes for The Winner

Here you can find the details and live demo about the themes we are giving away. We will send all theme files to the email you used in the comments.

Folo

Wumblr

Tisa

Elemin

Blogfolio

Great Thanks to Themify

We really appreciate Themify for sponsoring this giveaway. They produced a large number of WordPress themes with great design and usability. The customize and setting functions in the Admin panel are truly amazing.

Update

The winner is izwanyusof. Congratulations!

This time, the redesign included a number of changes to our site. We are still using WordPress as our platform but by using WordPress eCommerce plugin, our designs and products can be better presented and well organised. Also, it makes the purchase of  royalty free license and extended license much easier. We are starting to expand our works from only Icons to other areas e.g. Themes, UI Elements.

Again, thank you very much for your visit and your interest in our designs. We will continue to make free web design resources for you. Hopefully our design can enhance the appearance and experience of your website. I will introduce some changes to the new site shortly after.

These days, I spent some spare time to redesign and refine an updated version (V3) of Double-J Design WordPress theme. Today, after some initial tests, I am happy to officially change the V2 theme into this new V3 theme.

Here I would like to introduce further more about some of the changes in this version of the WordPress theme design.

New Logo

Firstly, I would like to introduce the new logo of Double-J Design. As Double-J Design is aiming for designing better Icon and GUIs for our clients. So in this logo, a square and a circle are simply being used for representing icon and GUI.  Here I use the logo in a dark background then the typographic is in white. There are some variations i.e. simple color version and greyscale version which can be used in different situation like printing or distribution.

Homepage and Individual Blog Page

In this version, the homepage is pretty simple as only the last entry is shown in detail. The most recent five entries are shown in title list. Another section which is called Recent Featured Work has been introduced to show the most recently designed custom project. In the way, space has been saved and the recent featured work has been emphasised.

A full screenshot of the homepage is attached here.

However, I have to reorganise all the recent design projects and produce some preview images for the recent featured work section. Therefore, this feature is temporarily not available at the moment.

Since only one entry is shown on homepage, I therefore produced a individual blog page for showing more the recent blog articles. Big thanks to Nick from N.Design Studio and Icondock to teach me some of the tricks in WordPress template settings.

Other Features and Effects

Sliding Navigation Menu

Someone suggested me to insert some dynamic or animated element in my blog theme to give it some nice feature. Here I have included one of the popular animated elements sliding navigation menu. This technique is taken from jMar’s blog using jQuery to implement an animated sliding navigation.

Rounded Corner

Rounded corner is a new feature in CSS3. However currently, some browsers have already implemented this technique. For example, Safari 4.0, Google Chrome. Simply insert the following lines in the CSS style sheet. There will be nice and crisp rounder corners.

img.thumbnail, img.left {
background-color: #EFEFEF;
border: 1px solid #bdbdbd;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
padding: 10px;
}

I haven’t tested in more browsers. But unfortunately, it’s not working in IE (even IE8). And also, this feature is still a new feature which is only implemented in CSS level 3. Therefore the CSS validation on the bottom of this page is taken without this rounded corner feature.

Latest Tweets

I started to use Twitter about half year ago, and now there are around 100 people following Double-J Design (@doublejdesign) on Twitter. So I put a section to show the latest tweets on the footer of our website. Thanks to the WordPress plugin Twitter for WordPress by Ricardo González. It’s really simple and useful. Here is the final look of this section.

Conclusion

Last time, I actually got a number of complaints that the previous old theme didn’t work in IE6 perfectly. This time, I particularly paid some attention on this. And now, it should be OK in IE6. However, I will be testing this themes for a couple of days and make it into a proper general WordPress theme later on if all the main issued within this version are solved. Therefore your opinion and suggestions once again become very important. Please feel free to write comments on this. I will much appreciate for your advices.

However, there are still some problems or bugs with this theme and I will try my best to improve it. For example, I found that the layout will be slightly different in Internet Explorer and Safira, the positioning of some texts are different. I also found that in Internet Explorer 8, using compatiable view will be better. I will be trying to minimise the mistake in the template files and CSS style sheet. Therefore I desperately need your comments or suggestions or solutions to those bugs or porblems which will be all greatly helpful in the improvment of my site in the future. Also after a few of days and after a few tweaks, I would like to contribute this theme to public as a WordPress theme. Thanks again for your visit to Double-J Design and hopefully everyone can find useful resources here.

Icons for WordPress

First, you will probably find there are normally several standard icons in a WordPress website.

Common WordPress blog icons include

These are some common icons which will appear in a typical WordPress website. They are all for the basic operations in a WordPress blog. Usually people or companies do like to iconic every main page (i.e. design icons for each single page and put them on the navigation menu such as products, services, downloads, about, etc.). You can draw these icons within minutes using Illustrator or other tools (i.e. Photoshop, Coreldraw) as icons are basically simple shapes which people can understand them by using their common sense. Too complicated shape will mess up the icon without giving more useful information. Actually, based on each of these icons there can be some variations.

Icons Variations

Now let us take a look at the typical WordPress template which includes header, contents, sidebar and footer in a two-column layout style. The default WordPress theme doesn’t contain any icon files in the theme folder. When we put the icons into the theme folder, we need to rewrite the CSS style file to set all icons in the correct position. The quickest way to do this is by setting the left padding into a large value and use the icon as the background for the class in your style file. I highly recommend to place the icons in this way rather than insert icons directly inline into the texts because it can be reused as many as you want and it makes your html files a bit clearer. Sometimes designers replace texts with icons when the icons are very well recognised such as RSS feed, email address, homepage, etc.

Now the WordPress page is looking a bit livelier. Then we can focus on designing and drawing these icons. I recommend drawing all icons in vector format and then converting them into icon or image files. Therefore, Adobe Illustrator is our number one tools for this (or you can use your own favourite, but the following of this article refers to some unique functions in Illustrator which other tools might not have).

Drawing and Styling Your Icons in Illustrator

The most important principle of drawing an icon to me is to keep it as simple as possible. However, you need to give people a clear understanding of what it is about. As shown in the above images, there are several places where icons can be put: date/time, author, categories, comments, RSS feeds, archives, some navigation arrows.

I’m giving some examples here to demonstrate drawing an icon in Illustrate. To draw an icon of date/time, we can use a simplified calendar image which consists of two rectangles, two rounded rectangles on the top and a triangle on the right bottom corner. You can apply colours to the icon (i.e. single colour or fancy colours with shades). However, you need to make sure that when icon is exported to an image file in the standard size (typically 16×16 for small icon, 24×24 for medium one, 32×32 for large one), the icon is still clear to be seen. In this example, the small icon is not so clear. Some people might not recognise that it’s a calendar.

You can now probably draw the rest of the icon set by only a few clicks. A magnifying glass for “Search”, a cabinet for “Archives”, a piece of paper for “Post”, a label for “Category” and so on. You will probably ask why every time we use these shapes for our icons. Of course you can think about some of your own unique elements for the icons. I did see some website of a food somewhere using different fruit as icons (i.e. apple as posts, pineapple as comments, banana as categories, etc.)

When you finish drawing the basic icon elements, you can add some sub elements to make the variations (i.e. Add/Delete/Edit etc). But you need keep each sub-icon in the same area. Normally we use a quarter of the whole icon area for the sub-icon. Also you need to make sure the sub-icon doesn’t block any major shapes of the main icon otherwise, the icon will be not clear in expressing information.

Here are some simple tips of drawing well designed icons:

1. Keep all the icons in the same style

To keep your icons in a same design style, you should keep all the property in a constant value such as stroke weight, stroke type, rounded corner radius, some angles, perspective, etc. If you feel your 2D icons are more or less the same to the others did, and you still want some unique design for your own. You can try to use 3D icons. Illustrator can easily transform your 2D icons into a 3D shape in one second. Make sure all your icons are in their own group, then select all the groups and click Effect->3D->Extrude & Bevel … , set all the parameters (i.e. rotation for each axis, lights, depth, etc), and click OK. Every icon will be transformed in to 3D using the same setting. You can preview the 3D effect in real time when tuning the parameters. It’s that simple!

As a different 3D rotation effect will give a brand new style for all your icons in the set. You can tune some parameters in detail to make some of your icons closer to it should be. For example, the post icon is a piece of paper, using this 3D effect will produce a very thick paper which does not look so good. Therefore, change the depth in the 3D effect will make it much better. Also, the cabinet (archives icon) looks too short in depth. Therefore increase the depth will make it better. After some fine tuning, your icons are looking unique now. You can apply different colour scheme to your icons according to your website theme.

Look at some others’ icon designs, some of them are making mistake in this point. The following icon designs are taken from www.webappers.com. They are all free icon sets.

The Example with Mistakes

This is designed by Smash Magazine. The design is cool, and colours are good. But they are not constant in style. You can clearly see that they are 2D/3D mixed icon set. The Home icon and the Printer icon are 3D while the rest are 2D. Even though, the Home icon is 3D in perspective. The Printer is in non-perspective. Furthermore, some of the icons are not clear in giving information. Take a look at the one between the pencil and the star, is it a fried egg? What information can a fried egg give in a WordPress blog or in an operating system? I have no idea.

The Good Example

The following design is from www.dryicon.com, and to me these icons are very good in the criteria of keeping a constant style. All the icons in this icon set are using rounded corners, a simple underline shade, a 2D front view and gradient fills. Also all the sub-icons are placed in the right bottom quarter.

2. Use the proper size of icons

As mentioned before, there are some standard icon sizes (i.e. 16×16, 24×24, 32X32, etc) for applications. However, for a website, every size is OK as long as the entire layout of the website is well structured. Normally, we use a square image as an icon. If you text font size is around 12px then, the icon beside the text is best to be 16×16. Or you can make them a bit larger (i.e. 18×18 pixel). However, too large in size will make the layout appear to be unbalanced. The following screenshots gave some example of using proper size of icons and the positioning. Middle sized icons can be aligned to vertical centre with texts. Sometimes a horizontal line would be helpful especially for the headings. Large icons also can be positioned into left top and the bottom space can be left blank to emphasis the icons.

Also, when using the small icons, it is better to draw the icon originally in small dimension. Even if using vector drawing tools like Illustrator, when an icon is exported, the vector image will be converted into pixels. Most of time, details in the icon will be lost. Therefore we recommend drawing the small icons separately. The following example shows really good icons in small size without lack of details.

3. Use the proper colour theme

You have to keep all your icons in a good colour theme. Also you have to fit these colours into your whole WordPress website. The following WordPress blog (designed by myself, for someone‘s cake shop). If we add a set of icon in this theme (the icon set is well designed in everything including colours). It’s clearly to see that the colour theme for the icons do not fit the whole site colour theme which is in dark reds. Therefore my original design doesn’t contain any icon in this theme.

Summary

This article gives some tips of how to design and use icons in a WordPress blog site. Also some examples have been given to show how to design unique icons for your sites using Illustrator. Hopefully, this article will be helpful for the people who want to make their site unique. To me It is important to remember four words in designing icons which are “Simple”, “Clear”, “Uniform” and “Unique”.