I really don’t PLAN to redesign every year. It just seems that I’m happy with a design for only a year or so, and then something I see strikes me and I’ve suddenly got redesign fever. This time, it was a font- League Gothic.  I have long been a fan of Trade Gothic, especially in it’s bold condensed form, but I just cannot spend almost $300 for a font, no matter how much I like it. So, when I discovered League Gothic, I did a little happy dance and promptly decided to redesign my site around it.

This design is probably more “me” than any in the past, clean and simple, lots of color and some unexpected touches here and there. I always have a hard time deciding on just one color scheme, so with this design, there are several color schemes and each time a page is loaded a random one is chosen. Also, I’ve gone with a bit less focus on the blog and more on my work.

Thanks, as always, for visiting my little corner of the world- I appreciate it!

Once upon a time a running group decided they wanted a new web site design. They thought that going to one of those “crowdsourcing” sites would be a great way to go because they could hold a design contest and get lots of ideas and then take a vote on which was the best. This is what they ended up with (go ahead and click on the image so you can see it in it’s full glory):

One of their group is a former client of mine who has good design sense, and she thought the site was sort of awful. She had taken the reins with the project and sent the Photoshop file asking me to keep the same basic design (since the group liked it), but to “fix it” so it looked and worked better. I realize most designers would have probably said no to the request, but I wanted to help her out and I had time in my schedule for some extra work, so… here’s the site after I spent some time on it:

It’s still sort of awful in some ways, but in several important ways it’s a much more effective site.

Fonts

There were WAY too many fonts used and almost none of them were web safe. Much of the text had drop shadows and outer glow applied which interfered with legibility. A good rule of thumb when designing a site is to keep the number of fonts to 3 or less and make your main font a web safe font so everything doesn’t have to be a graphic element. Also, be very judicious about effects applied to fonts as they can interfere with legibility.

Graphic Elements

The site was plainly over-decorated. Everything had a gradient, strange shadows inside and outside of containers, extra borders and pictures. The eye does not know where to look. Clean visual elements allow the visitor to easily process what they’re seeing so they can interact with the site in a productive way. When in doubt, keep it simple.

Clarity of message

Visitors should be able to take in a site in just a couple of seconds and have a decently clear idea of what the main message is and what you want them to do about that message. If fonts are too small, illegible or hidden within visual clutter, the message is lost.  If the message is lost, it does not matter how “pretty” the design is.

And the moral of the story is…

You get what you pay for.  This organization paid for a design that would have been a big, bloated, ineffective site. The person who did the original design likely didn’t know any better. When you’re just starting out, you make mistakes- it’s just part of the process.People who participate in these kinds of design contests are almost always inexperienced and mistake-prone, and the mistakes they make will often cost more than the money you saved by using a design contest site in the first place.

You can read more about crowdsourcing/spec work sites in this interesting article about design contests at Web Designer Depot.

I was excited when Deb Ng of the Freelance Writing Jobs Network approached me about creating a business card design. I knew Deb would be fun to work with, and I also don’t get the chance to design business cards as often as I might like.  Deb is a writer and social media consultant and wanted a unique business card design that would reflect her business as a freelance writer, professional blogger and social media consultant. As we discussed the design, she indicated she’d like something with a slightly retro feel in font and color and that was not the standard rectangle shape.

I had one of those middle of the night inspirations about the back of her card and was pleased she liked the idea of covering the card with words, along with the tagline “the power of words”.  In order to get an idea of what kind of retro color palette might appeal to her, I asked her to look through the retro designs in this Smashing  Magazine post of retro web designs. I used one of my all-time favorite fonts, Chalet (the Tokyo variation) to continue with the retro feel and I also loved the way the shapes of the d, b and g mirrored each other in her name.

She used UPrinting.com to produce the cards. I have used them in the past with good results and they provided a high quality product for Deb as well, for a very reasonable price.

Are you one of those who is wondering, why does a blogger need a business card anyway? Check out my post on that topic here, and then take a look at a nice collection of business cards of bloggers at Brian Yerkes’ site. Ready to create a card of your own? Don’t miss David Airey’s post on what makes a good business card.

I wanted to use the 960 Grid for this design, and looked around for a blank canvas theme built on the grid to save time. I found a pretty good one (only had to fight with it a little) in the 960bc theme. This was my first use of a framework and I’m totally sold on it. It makes everything SO much easier. If you haven’t tried using a grid system, check out this tutorial.

I used CSS sprites for the first time with this site for the navigation. Just like the grid system, I’m wondering what took me so long, as it’s relatively easy. I found this tutorial to be helpful. In case you’re not familiar with sprites, the basic principle is that you design one image and just adjust the background position as needed. For example, here’s one of my navigation images. I just adjust the background position by -38px on the hover state. I could have put the whole navigation in one image, but I thought I’d start out simple on my first try. For a more complex example, check out how Ryan Imel uses a large sprite very effectively in his site.

I’m using the media settings within WordPress to manage the homepage thumbnail sizes. I just set the thumbnail and medium settings to the size I needed and it automatically generates the sizes I need!

The font for headings, navigation and logo is a wonderful font called Museo- three of the weights are totally free! I used the AnyFont plugin so I could have the same font for my widget headings. The social media icons are by Function and I found them on MySocialButtons (where else?). Other plugins that are useful in the new design are :

GetTheImage – automatically generates thumbnails in the archive and articles pages)

Advanced Random Posts – after 2+ years of blogging there’s a lot of good content that can easily get buried.

FlexiQuote Rotator – to manage my testimonials

Tweet This – for the submission links to Twitter, etc below each post.

I’m still looking for some things to put in my sidebar on internal pages. Any suggestions?  If you have any comments or suggestions, or find any problems I haven’t caught, please feel free to share in the comments.

I became interested in monograms several years ago, after stumbling upon this amazing gallery of monograms.  I was so inspired in fact, that I set up a little custom monogram site, and did a decent business for a while before I realized there were other, more profitable things I could be spending my time on. I still love them though. I love the idea of having one’s own personal logo and of a couple developing their monogram when they get married.

Here are some monograms I created back in the day:

I wondered what her web site looked like and wondered if other monarchies and royal families were keeping up with the times as well as Queen Rania.

Queen Rania’s site features a lovely color scheme, but a rather surprising lack of attention to detail. There are problems with the layout, aspect ratios of photos and typos here and there.

The British royal family has it’s own YouTube channel as well, and a very extensive, thorough web site.

I love the clarity of the Danish and Norwegian Royal sites. The use of gray really puts the focus on the beautiful photographs.

The Dutch Monarchy’s site is beautiful, with a very nice color scheme dominated by royal blue.

The site of the Swedish Royal Court is very nice, but could use a little help in the main body of the site.

The Belgian site is not great, but functional.

Will somebody please tell the King of Spain that you’re supposed to smile for pictures? (Particularly the one you want to put on the home page of your web site.)

And finally, the Japanese Imperial Household site. It is in serious need of an update and more pictures would be nice.

What is a wireframe?

A wireframe is simply a visual communication tool. It consists of a layout of the site’s various pages with no graphics or content. In other words, what goes where and how big it is. Here is a great example by 31Three Design.

The advantages of using a wireframe

Anytime you can improve communication in any project it’s an advantage. It cuts down on the production time. I don’t need to create a mockup that is a “guess” as to how the site should be laid out and then rework the whole thing when the client moves everything around. The process of creating a wireframe can be very helpful when making decisions about the content layout, because of it’s visual nature, rather than just being a list of sections of content. You can see how everything is going to fit together.

How to create a wireframe

To create a wireframe, you can use anything that will allow you to draw boxes and add text. Here are some options:

• MS Word or Excel.
• Google docs- great when you’re collaborating on a site design.
• Photoshop, Illustrator or any other graphics software.
• WireMaster- a Java based wireframing tool.
• Gliffy – an online diagramming tool that includes wireframes and allows you to share projects with others easily. They have a free basic account that allows most options.
• Of course a pencil, paper and scanner work just great too, as long as you have legible handwriting!

What to include in the wireframe

In a word: everything. Everything you know you want on the site and all ideas about how it might look. Beyond just laying out the blocks of content, you can include notes on color, functionality, example URLs, etc. Be sure to note the size of ads that will be used on the site. I find that a wireframe is a good place for questions as well. With any project, a client may not be sure what the best choice is for certain sections, and there may be questions about plugins or functionality- the “is this possible” kinds of questions that come up so frequently. A wireframe may also contain a site map.

Whether it’s been created by the client or the designer, a good wireframe makes it easy for a designer to move into the mockup stage because all the client’s ideas are in one place and have, hopefully, been agreed upon Because the ideas are represented visually it helps to avoid the communication issues that often arise from describing how you’d like something to look in words. Obviously, it has it’s limitations and I’m not suggesting that it’s the client’s job to decide exactly how the site should look, down to every detail, and then simply describe it to the designer so they can execute it. Rather, it’s a place to centralize everything a client knows they want the site to include and how they envision it being laid out.

Who should create the wireframe?

Either the client or the designer, whichever works best. It really depends on the type of job it is and how clear the client is on exactly how they want the site to look. I’ve had clients who know exactly what they want and where they want it, and there are some who would prefer to have more designer input on layout.

A couple more articles on wireframes for further reading:

Wireframes: Much More Effective Than Interpretive Dance

Creating an Effective Wireframe (video tutorial)

Of course, as I’m reading, I’m thinking about how the concepts apply to what I do every day, and blogging in general and I thought I would use some of the principles as inspiration for posts.

The first principle in the book is the well-known “80/20 Rule” or “Pareto Principle“:

A high percentage of effects in any large system are caused by a low percentage of variables.

Spend Time Wisely

The 80/20 Rule is most helpful in determining where to put your time and resources. If 20% of a site’s functions are used 80% of the time, then it only makes sense to focus time and attention mainly on these items. This seems like a no-brainer, but it’s so easy to get bogged down in some minor detail that ends up sucking all your time away.

I have 2 ways of dealing with this issue:

1. I complete the most important items first, so that if anything is going to get shortchanged on time as a deadline is looming, it will be the least critical elements.
2. If I get stuck on a less important item, I force myself to put it aside until the most important pieces are complete. Often, giving my subconscious time to ruminate on the problem makes it easy to solve when I get back to it.

Using the 80/20 Rule as a Formula for Success

Another way to think about this principle is to look at all of the activities that consume our time as we work towards success in whatever we’re trying to accomplish. The 80/20 principle indicates that about 20% of the activities we engage in are responsible for 80% of our success. The other 80% of the activities might be somewhat useful, but are not major contributors to the bottom line.

An interesting exercise might be to list out all of the activities you participate in during the time you have to work. If, for example, you’re working towards being a successful blogger (whatever your definition of success is), then you have multiple activities you engage in including things like researching and writing posts, tweaking your site, reading other blogs, commenting, networking, participating in social media such as Twitter and StumbleUpon, etc. and the list goes on. Rate all these activities by how much they contribute to the actual success of your blog.

Let’s say you have 5 hours a day to devote to your site. 4 hours should then obviously be given to those things that fall into the top 20%, leaving an hour for all the other items.

It is so tempting to get sucked into Twittering away the day, or reading every last item in the feed reader, and before you know it the day is gone and nothing has been accomplished. This happens to me regularly. If I would only keep my eye on those few things that are most important, I would be much more productive.

Okay, so this post has been a big pep talk to myself really. There is so little time and so much to do. I need to be more disciplined. I encourage you to check out the Universal Principles of Design- it’s a great read.

My 2 Year Blogaversary is coming up at the end of January! I’m celebrating with a week-long Blogstravaganza with lots of prizes, so be sure to check back or subscribe so you won’t miss it!

Concept

As I begin the design process, I look through my inspiration folder in my bookmarks, and through inspiration sites like Best Web Gallery. I particularly liked that site because it includes a small site preview when you mouse over the thumbnail. To get color inspiration, I use ColourLovers and ColorSchemer. As I page through the color schemes others have created, I make screen prints of those that I like and paste them into Photoshop and then narrow down to one that suits the site the best. Once I have design and color inspiration I go away from the computer and close my eyes. That might sound a bit strange, but I find that I must have some time to visualize the site before I do any sketching.

Sketch & Mockup

Once I get a visual idea in my head for the site, I then either sketch the layout on paper or begin sketching in Photoshop. I wanted to move to a grid layout so I downloaded the outstanding 960 grid system, which includes Photoshop grid templates that I used to lay out the site.

Once I had the body of the site complete, I had a really hard time deciding on the background. I had a great time using the pattern maker at Colour Lovers, but never ended up with something that looked good. So, inspired by sites like N Design Studio, I used a set of brushes found at Brusheezy. Though the background is wide, It was worth it to design for the wide screen since over 70% of you are using something wider than 1024px.

Code

I fully intended to use the code that came with the 960 grid, but as I got into it, being anxious to make my design a reality, I gave up too quickly trying to figure it out and instead used a totally cool javascript grid bookmarklet that allowed me to dynamically overlay the site with a grid. It made it easy to tweak the margins and padding to line everything up as I had it in the mockup.

As always happens, I got everything set up and then checked it out in IE6 and of course, the code required some minor changes. I bring this up because 9% of you are STILL using IE6! I know some don’t have a choice, but if you do, please, I beg you, upgrade! Better yet, switch to Firefox.

One of my goals for this design were to bring my design work more “front and center”, and have done that with the “Welcome” section at the top of the main page, as well as the client testimonials at the top of the sidebar. I also wanted more color than the prior design, because lots of color just makes me happy! Here’s a screenshot for those of you who are subscribers:

If you find any issues with the new design, let me know!