Category Archives: Design

Promoting Your Design

I have never been able to design something decent enough to promote in the various design galleries, but I have witnessed first hand what happens to a site that is widely promoted in such a way.

If you have what you consider a beautiful custom design for your site, the rewards of taking time to show it off can be huge if done well.

I recently read a post on Design Reviver about promoting your site on design galleries, and they give some great advice. I used to work on posting sites on CSS Vault, one of the first CSS galleries and also one of the biggest, and highest PageRank ones, and the tips in the article definitely held true when I was working on CSS Vault.

Tips like:

Submitting with a Purpose

You could randomly submit your site to one gallery and more than likely end up on many more. However, if you take a more structured approach to your submitting, you end up getting featured on more sites. There are some galleries that want to be the first to feature you, and probably won’t feature you if you have already been seen on too many other sites. The key is to submit and get listed on these first, then follow with the less picky sites.

If you aren’t sure if your design is gallery worthy or not. It doesn’t hurt to submit it and see what happens. The worst that can happen is you aren’t featured, and have lost a little bit of time, which is not a big deal when you consider the possible rewards.

Originally posted on April 28, 2008 @ 12:39 pm

Best WordPress Themes: All from One Designer

What I am going to say is probably not going to be some people’s favourite thing to hear, but I believe that all the best designed WordPress themes come from one designer: Elena of Design Disease. I have worked with her for around two years now, and while she might not work with a grid or any of those other “designer” conventions, she works around advertising sizes, and has a special style that I am enamoured with.

Even if you just look at the free themes she has released for WordPress, I think you will be amazed at her work. While it isn’t always the most flexible for adding your own personal style, they are all very beautiful themes.

InSense is a two column design with rounded corners and a distinct blue colour scheme. It allows the user to switch from a narrow version to a wider version, but I think the narrow version has the better line width, and thus is easier to read.

InSense WordPress Theme

Illacrimo is a three column theme with another distinct blue colour scheme, this time the design is very different, though many of the elements are positioned the same. This is by far one of my favourite WordPress themes, though probably the most difficult to shift towards a personal preference design-wise.

Illacrimo WordPress Theme

Smashing Theme is a three column theme that has many of the same design elements and influence as Illacrimo, but this time with an orange colour scheme, and some very different graphics. It was created for Smashing Magazine, hence its name, and is very nice to look at. I like the way the different content sections in the first sidebar have different colours, and how icons are used very sparingly on this theme.

Smashing Theme

Gossip City, or really, Gossip City 2, since Elena didn’t like the first theme, and started again from scratch, is a three column, header heavy theme, that is much easier to modify than most of her other themes, as it keeps the content area very clean, using many less graphics than some of her other themes. The theme was created for the growing celebrity blog niche, and has become quite popular in that and other arenas.

Gossip City WordPress Theme

Christmas Days was Elena’s first attempt at a seasonal theme with blue, green and red combined, I think she really pulled off the feeling of Christmas. She had some interesting design challenges when finally releasing the theme to make sure that it was easy for anyone to just drop into their themes folder to use it right away without having to customize any images.

Christmas Days WordPress Theme

Dilectio is her most recent free theme is another one for Smashing Magazine, this time, the design is again mainly orange for its colour scheme, but has a very natural vine-like feel to it, as swirls of colour are everywhere in the design. It is three columns, and has a nice wide first sidebar for putting all sorts of content like your Flickr stream, about details, and recent posts and comments.

Dilectio WordPress Theme

Not only has Elena of Design Disease released all of these wonderful free themes, but she has also done numerous blog designs, including this one you see today on eXtra For Every Publisher. Another fine example of the type of WordPress theme design ability that Elena has. I am always amazed at her work, and I highly recommend everyone check out what she’s done.

Maybe you’ve seen all these themes before, but did you know they were all done by one designer? If you look through them, you can see her sense of design and style slowly shifting and evolving as she comes up with new designs. I am at the point now where I can usually tell how old a theme of hers is, just by the placement of certain key elements.

Originally posted on February 12, 2008 @ 12:09 pm

The 449: Amazing Blog Design

A long time friend of mine Chris Garrett, has decided to start selling his blog design packages for WordPress once again, and I couldn’t be happier.

His skill with WordPress, CSS and design is second to none, and now with a team of his colleagues helping him out, I am sure the company will do well.

Even better, I been given a discount code from him for the first people to sign up for his service.

The first 10 people that email him at chris[at]cgmmail.com quoting the promo code “xfeprocks” will get a £50 discount, making the deal even better at £399.

Very impressive work, check out The 449 if you are looking for an excellent WordPress blog design.

Originally posted on December 10, 2007 @ 9:05 pm

How to Build a Web Design Around a Logo

If you have ever designed a website for a company or organization with a pre-established logo, you’ve probably found yourself between a crossroad. The customer will come to you because he needs to revitalize or strengthen his company’s image, and purchasing a website is one of the most cost-effective ways to do so.

The problem starts when you are given the logo to work with. There are various types of logo designs: some are mono-colored, others are multi-colored; some are based on text, some are based on a symbol and finally some are a combination of both. Continue reading

Originally posted on November 8, 2007 @ 8:36 am

Mistakes in Design: JohnCow.com

After the rambling that took place in August, against ProBlogger.net, David invited me once again to criticize the design of another popular blog: JohnCow.com.

I have to say that my first reaction when he gave me the link was “don’t you mean JohnChow.com?”, but after clicking on the link, and comparing it with the site that inspired it, I found it surprising that it is actually nicer to look at than the original.

I don’t mean to say that John Chow’s website has a bad design, but I think it has a very exaggerated amount of advertisement. Then again, he didn’t become a dotcom mogul by sparing on the ads.

After the initial sympathy I had for John Cow’s website, I quickly realized that it had it’s own flaws, and after the beautiful header loses it’s grace, what’s left underneath it leaves much room for improvement.

The “Pretending” Tabbed Container

First of all, the first thing that strikes the user, after looking the banner, is the list of orange buttons that feel completely detached from the rest of the design. They do not fail to look like buttons, so after clicking them the rectangle underneath them changes.

johncowweb20box.jpg

The height of the content area also changes, so that made me wonder how it would look like if JavaScript was disabled. The result wasn’t pretty…

johncowweb20boxnojs.jpg

The content you see underneath the rectangles is the content that appears individually on all of the options you can choose. And, obviously, the rectangles don’t work. Some might say “every browser has JavaScript”, and that is almost true. But whenever good web designers make a website, they usually have some concerns regarding the site’s graceful degradation, or in other words, how the site will look like if it the browser is outdated.

In terms of usability, that whole area would much easier to understand if it was design as a tabbed container. Even though they don’t look like tabs, they act like them, so common sense would say that they should indeed be tabs. Also, the selected “tab” button should have a different look from the other buttons. As it is right now, you don’t know which tab is active unless you click on it and see that it doesn’t do anything.

The Subscribe Options

Moving a little to the right we find yet another section of the website that feels out of place due to the awkward colors chosen for it’s elements.

johncowsubscribe.jpg

Starting from the top we have the green-outlined and blue-backgrounded search box can missed very easily unless you’re paying attention to it. The site’s background (in the container) is green, so I think that common sense would say that we wouldn’t use green as the border of an element we’re trying to make evident.

Then we have a black white and yellow/orange RSS icon, followed by a dark gray Feedburner button, next to a green and orange box. There’s nothing wrong with those elements separately, but since they’re placed so close together they should have all shared similar, or contrasting colors. As it stands, this is probably the “messiest” part of the site, in terms of colors.

The newsletter field also has a few mistakes. For example, the input field doesn’t look like an input field. This site seems to have something against making visual elements appears as they should. When you click on the input field which has the words “Enter email here”, that text doesn’t go away.

If I had to put my money on which of the two elements, the text field or the submit button, was the submit field, if it didn’t have any words in it. I’d certainly say the button was the text field. It has most of the visual elements that we’d expect from a text field: a very light background, a light border and even a slight indentation.

Sidebar Links

Moving down, and past the six ads, of which I don’t really have anything to comment upon, we have a few lists of links, and those have two problems. First, they have the same color as the color of the text in the articles. Secondly, the font size is bigger than the text in the articles. Once again, this breaks the consistency behind the whole design.

The Articles

In the articles, we find another coherence, and usability, flaw. The title of the articles has a different font that is found nowhere else on the site. I didn’t check this, but from a quick look at the top part of the page, I can see three different font faces, which once again (say it with me people) breaks the site’s consistency.

The article’s text has a justified alignment, which does in making the content feel very organized. But for a content driven website, article texts should never have a justified alignment because it makes reading the articles very tiresome because your eyes have to adapt to the space between each word on every different line.

The Header and Conclusion

Thankfully, the critiques end here with the header, and that ends up being one of the most pleasant parts of the site.

John Cow Header Image

Personally, I find it a damn shame to see a design that starts off so well at the top turn into a mess during the middle. The header of a website is, for most modern designs, the most important design element, which will define whether the content is of a high quality or not, and JohnCow.com’s is great.

If you want to do a bit of homework, you can visit John Chow’s own website and look at how he implemented a similar type of content, with even more advertisements, without breaking the site’s consistency.

Originally posted on October 18, 2007 @ 8:38 pm