website design, development, and seo blog - archives

As the weekend approaches, I’m reflecting on a great week. We got our blog off the ground and I am so excited to start sharing some insights into web design. One of the latest discussions I’ve read is that designers are still battling with the concept of great design while keeping page sizes low. If you know anything about website development, you will know that we always try to keep our web pages lean and fast loading. But, the days of keeping web pages under 100k are long gone, in my opinion.

So, if you can’t keep your page size below 100k, what can you do to improve user experience? Well, for years, we have been using different techniques that work well. I think the best way to save on file size is to keep your code as clean as possible. We have used all CSS layouts for years, which has helped. But, there must be more. I found this great article on optimizing images with HTML5 canvas. The article discusses the ability in HTML5 Canvas to optimize your images directly on the viewers web browser.

Ok, so this seems more like a rant about development than design. But, the reason I bring it up in the design section of this blog is to mention that we, as designers, need to be constantly aware of how development and code allow us to better design our sites. As I head off into the weekend, I encourage all you designers out there to learn as much as you can about code. There is a constant battle between what we want to do as creatives, and what the development world needs from us. Knowing exactly how to live in harmony will make us stronger teams that create amazing websites.

I have been a graphic designer since 2002, when I was already working for freelance clients as a student at university. In those years, I have often experienced times where I just didn’t know where to go with a design. Sometimes, I can be talking with a client and know exactly how the design will look before leaving the conference room. But, there are times when I just don’t have a clue where to go creatively. And, as a creative director, that’s my job! So, I thought I’d share how I approach creative projects where I am stumped and just simply lack the inspiration to create amazing work.

Word-Studies

One of my university professors taught me a trick that I still use today. A word-study is a technique used to place words that are similar or that evoke other words of more enhanced meaning on the page. These words can help a designer develop concepts that relate to the brand, product, or marketing campaign about to be created. Here’s an example. Let’s say that we were about to design a campaign for a bottled water company. The campaign would be about how their product is a higher quality and can be trusted to be more natural and clean than the competition because it comes directly from a little-known spring far, far away. A word study would place all words that are related to natural, clean, water, and fresh on the page. You might end up with 100 words. But, after a while, words like pure, flowing, clear, or unblemished might come up. These words evoke visuals in your mind. Now, in the design, you have more inspiration and clarity about your direction.

Research

Every time I begin a design, I make sure to research the industry and the competitors of my client. This is extremely important if you are trying to make your client look unique. But, it’s also a good opportunity to inspect  their competition and find ways to improve on what they have done. Then, I look at other industries and find color schemes that I think work well with the client’s idea. Here’s a warning! Do not copy the work of others! Instead, use their “direction” and develop your own unique take on the idea. For instance, if you like the way they used blue and orange in a design, there is nothing wrong with using a blue and an orange. But, change the color values. Don’t use the colors in the same way. Don’t make orange buttons if they have orange buttons as well. The point is, you are using their work as an inspiration. Don’t copy their work!

Sketchbook

I always have my sketchbook handy when I’m lost for ideas. But, don’t think for a second that I ever use what I sketch. In fact, I see my sketchbook as a filter. When I sketch ideas, I literally make my way through all the bad ideas first. This process has helped me so many times. When I see all the bad ideas put on paper, I am thankful that none of them made it to the final design. But, a strange thing often happens. Every once in a while something from those rejected images pops out at me. And, a new idea appears like it was there the entire time.

You’ve heard those movie trailers that start with “In a world, …” Well, if we were promoting a movie about website design in 2011 and beyond, it might start with this sentence: In a world where every web-browser has a mind of its own and every other screen is a completely different dimension, it’s clear the world needs responsive design more than ever before.

And, it’s true. The world really does need it. But, “what is responsive design?” you might ask. Well, it’s pretty much what it sounds like: design that responds to multiple browser dimensions and environments. Let’s say your browser is 1280 pixels wide. If you design your site for this width, how will it look on a mobile device that has a width of 240 pixels? Before responsive design, you really didn’t have much control over the look of your site in varying environments and platforms. Sure, you could build a complete mobile website or create a small mobile app version of your site. But, what if you could have just one website that responded to all dimensions?

Responsive design enables the designer to create design concept that will adjust to the various widths available to today’s web browsers. This effect is achieved by using percentages for widths and by using context aware image sizing. Basically, by adding certain relevant code to your .htaccess file, you can get images to load to a certain size depending on the existing browser dimensions. This means, you don’t create an initial size for your image. The code will determine what size the image needs to load to. This approach opens up multiple possibilities for developers.

Going forward, I can totally see the majority of websites out there feature some form of responsive design. And, as I begin to design more often for the mobile user, I’m realizing that there is no better way to deliver great looking web content than by using responsive design.