Several months ago, I read an article on WebDesigner Depot entitled “The Difference Between Art and Design”. It was a fascinating piece that attempted to establish a clear distinction between these two very closely related concepts. Over the past few months, the article has really stuck with me and caused me to do a lot of thinking. I would like to expand on some of those thoughts here.

Between Art and Design

The WebDesigner Depot article presents five different statements that attempt to establish a clear distinction between art and design. These are as follows:

• Good Art Inspires. Good Design Motivates.
• Good Art Is Interpreted. Good Design Is Understood.
• Good Art Is a Taste. Good Design Is an Opinion.
• Good Art Is a Talent. Good Design Is a Skill.
• Good Art Sends a Different Message to Everyone. Good Design Sends the Same Message to Everyone.

I can’t say that I completely agree with all of these statements – especially the taste/opinion and talent/skill pairings, but the article certainly raises some interesting points. By and large, it also seems to be suggesting that art is personal and design is universal. In many ways, I think this distinction may actually hold up very well, though it may face certain challenges.

Personally, I would also add a sixth statement: Good Art Stands Alone. Good Design Supports Content. Basically, a good piece of art is able to stand on its own, and exist in its own right. A painting, a poem or a short film can all be their own, independent works. Design, however, always exists in order to support its content. A website is a means of framing information on the internet. An magazine ad presents information about a company, product or service (even if that information is very abstract, as in some more “artistic” ads).

Recently, though, I’ve been thinking a lot about how much material seems to fall somewhere along the boundaries of this distinction, possibly even in that grey, indistinct netherworld that exists between them. There are a number of different areas of expertise that seem to hover somewhere between design and art. Here are four that stick out the most in my mind.

Illustration

At first glance, illustration may not seem to have any ambiguity associated with it. It’s art right? Maybe not – or at least not entirely. After all, what is an illustration other than a means of providing visual support from some other form of content? In a children’s book, the colourful illustrations that span the pages are created (or even designed) specifically to match the words (sometimes abstractly). On the covers of full-length novels, illustrations are crafted to in some way represent the story itself, either through mood or theme, or literally by portraying an actual scene.

The same is also true of illustrations that you might find in magazines, on direct mail or accompanying an entry on your favorite blog.

In a sense, these illustrations that look so much like art are actually carefully designed. A cover artist will very often be given a creative brief, just like a designer. The publisher may require a specific character, or a specific look for the illustration. These are essentially problems given to the artist, allowing them to apply their unique skill to develop a visual solution.

Even though the illustrations may look and feel like art, does the intentional focus behind it not seem to be venturing dangerously close to design?

Character Design

In this case, even the very name seems to suggest a distinct blurring of the art/design opposition. Again, the final product may actually appear to be art, since it usually involves some form of drawing or painting (traditionally or digitally). Yet we have the word “design” right in the title.

Basically, character design is design. It simply (and generally) uses techniques that we often want to reserve strictly for art. Yet, the character artist’s job is actually to help design something. They will likely be given an idea, a concept or possibly even a full description of a character. It is then left to them to bring that character to life. There are all kinds of different decisions to make, regarding body shape, costume, appearance, accessories, weapons and so on.

Take, for example, this character design by Brandon Peterson which I found on the Behance network:

Tao Feng Concept

This is a very simple and typical way to approach character design. The figure himself is featured prominently against a white background. Despite the pose, all the major physical elements are clearly present. The wide-legged, silky pants suggest a distinctly Asian influence, while the pattern and colour gives the impression of a fiery persona. This is emphasized by long hair and the red, tribal tattoo.

Contrast that against this other image, from the same gallery

Tao Feng Concept

Here we have another male character, rendered in much the same style, but for a vastly different type of character. This one appears much less fiery, though likely no less powerful. The strong blue colours are more calming than the reds of the other character. The hair – either cropped short or tied back – is much more orderly and even the tattoos are more geometric and structured.

All of this simply demonstrates the way careful and intentional decisions were made regarding the composition and key elements of the characters. The final product may look like art, but it’s also very much a form of design.

Concept Art

The same is true of concept art, which encompasses a much broader range of work, and can often actually include character design. In this type of work, artists imagine and conceptualize things like weaponry, creatures, vehicles and even entire worlds!

This kind of work is incredibly popular in the development of movies, comics, video games and any other media where visuals play a strong role as the primary means of communication. Here are some great examples of different types of concept art that I picked up on deviantART:

Vehicle concept art

Landscape (environment) concept

Weapons concept

Many of the same points that I made about character design also apply here too. The landscapes, vehicles and weapons are all developed in order to establish the look and feel of a unique, fictional world. Moreover, they are created to help support a particular type of content, whether that content is a film, a video game a comic book or some other medium.

As such, despite it’s obvious artistic heritage, I think that in many ways concept may also be more akin to the world of design than it is to pure art.

Icon Design

Of all of the disciplines that we will look at in this article, I think that icon design is probably the one that seems to be a clear cut case of “this is design”. While looking at illustration, character design and concept art, the suggestion was pretty much the same: that though these things look like art, they are also actually a form of design.

Now I want to invert that argument. The creation of icons may seem to rest firmly withing the realm of design (see my Icons and the Web series), and they are certainly a popular topic among the design community. However, is the creation of these icons not closely related to illustration?

It’s a matter of drawing pictures.

I know there’s a lot more to it than that, but if you strip everything else away, an icon is really nothing more than a tiny (and sometimes not so tiny) illustration used in any one of a range of unique contexts. Just look at this incredible icon set:

Remarkably detailed icons

These are all beautifully rendered, and are almost like works or art in their own right. The detail and all the shading is exquisite, and with the increasing size of icons these days, these types of completed projects are becoming increasingly popular, meaning that this branch of design is becoming home to many incredibly talented artists!

Wrap Up

Okay, so some types of art are more closely related to design, while some types of design seem to branch over into art – so what? Does it even matter? Yes and no. It doesn’t matter at all insofar as the individual disciplines are concerned. Illustration, character design, concept art and icon design will all continue regardless of how we may chose to classify them.

At the same time, however, I would argue that it does matter because of the ramifications that it has on the definition of design itself. At the very least, it raises a series of very interesting questions.

• What is design?
• How do we define it?
• Is our definition unintentionally narrow?
• How does the definition of design relate to the title of designer?

I’m not going to try to answer these questions now, but I encourage you to start thinking about them. I will be posting a follow up article either next week or the week after, in which I will attempt to address these questions in a little more detail.

In the meantime, though, it is certainly interesting to look at that grey area that exists between the worlds of pure art and pure design, and to really consider how many disciplines may actually involve a little bit of both.

What about you? Do you call yourself a designer or an artist? I struggled with this myself and eventually settled on the term digital artist, though I’m still not completely satisfied with that! I’d love to hear your thoughts on this, or the article in general, so leave a comment!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

So, here we are in the fourth part of this series about icons and the web. So far we have talked about why icons are important, where to find them and how to organize them. This is all very good, solid information, but it becomes very meaningless very quickly if you never get to the point of actually implementing those icons into your design!

Icons and the Web - Part 4: Implementation

That’s what this article is going to be all about. We’ll look at some of the things that you are going to want to keep in mind when adding icons to a website. We’ll cover consistency, size, image types, sprites, metaphor and cultural differences, all of which will make for a fairly extensive article. That being said, however, I want to stress that this discussion is meant only as a general set of guidelines, and not as hard fast rules that absolutely need to be followed.

So let’s get started!

Consistency

One of the most important things to remember when implementing icons into your web designs is the concept of consistency. In its most basic form, this means using icons that work together, or that at least don’t fight with each other. There are several different ways to look at consitency.

First, you may want to consider general style. If most of the icons that you are using are of the glossy or shinny variety, chances are that you are not going to want to throw a grunge icon or a sticker icon into the mix. It just wouldn’t fit. Instead, everything should have a nice, unified appearance. The website for the OS X task management app Things does a good job of this.

Simple, consistent icons

All of the icons have a similar feel and general aesthetic appearance. Imagine how the continuity would be effected if all of the icons were from different sets. It would certainly be lessened (or perhaps completely broken) and the overall design would surely suffer because of it.

Another area that can help maintain consistency between icons is a focus on colour. Many icon packs have a tendency to use similar hues and shades throughout their various icons. For example, the Shine pack from IconEden uses a the same basic green, orange and light grey scheme through most of the set.

Colour helps to establish unity in this set

This certainly builds a very strong sense of continuity throughout all the icons, a continuity that would be translated into any website that implemented these.

Perspective, position and rotation can also play a strong role in consistency. Many sets will use a common “camera angle” for all of their icons. Often, focus on perspective becomes a crucial element of the overall design. For example, here are some icons from two different social media sets from IconShock:

Different icons at different angles

Notice that, though each set is awesome and detailed, they are each set at significantly different angles. As such, combining icons from these two sets would likely cause real sense of disunity, making a design feel awkward or unfinished.

Size

Icons come in all different sizes, and when you’re looking to include them in your web designs, there are several size related issues that you should consider.

The first is the purpose for which you will be using the icons. There are many different reasons why you might want to include an icon in a site design, and for each reason, a different icon size might be more appropriate. Here are just a few examples.

Tools or Options – If your site is more of an application based site, then you will likely be using several icons to help represent different types of functionality within your site. In this case, small and simple icons will generally be more useful. Facebook is a perfect example.

Facebook makes excellent use of smaller icons

This is a screenshot from the current Facebook sidebar. Each link leads to a specific application within the site, and is represented by its own unique icon.

Visual Meaning – Many pages elect to use icons to help support an idea or concept. This is particularly popular for sites listing a collection of features for a given service or product. In this situation, a medium sized icon will generally work the best. Here is an example from the website of Episodic, and online video platform.

Medium sized icons used to emphasize meaning

Each icon supports a different feature of the product that they are offering. They are chosen to visually reinforce the message behind each feature, and also work very well to break up what would otherwise be a great deal of text.

Also, notice the size of the icons. They are not nearly as small the ones we saw in the Facebook screenshot, and are large enough to have a nice, somewhat glossy effect on them. However, they are not so large as to be distracting. Of course, the exact size for this kind of icon use is going to vary from page to page. The more features you have, the smaller you will probably want to make the icons, just for the sake of balance. On the other hand, if there are only two or three features, you could also make the icons a bit larger, to really draw attention.

Application Websites – Another use of icons on websites can take an almost logo-like approach, especially for sites whose primary purpose is to promote a particular program or application. The atebits home page is a perfect example of this, featuring the icons for its Scribbles, Tweetie and Tweetie 2 (for iPhone) apps.

Larger icons used to promote their applications

Because the purpose of the icons is actually to represent their own individual applications, it only makes sense to present them in a large beautifully crafted manner. This is especially true since the icons themselves are so exquisitely designed.

The other sizing issue that you need to consider is scalability. Many of the icons that are available out there these days are almost like works of art in their own right. They are large and beautifully rendered with incredibly precise detail. However, beyond a certain point, these specific icons just don’t scale down all that well. That being said, however, some sets do come packaged with smaller versions, specifically designed to fit into a fewer number of pixels.

Image Types

There are essentially three types of images that you can use to integrate icons in your web designs. These are these same three image types that supported by all major browsers – JPG, GIF and PNG. Each type has its own advantages and disadvantages.

JPG – This image format is ideal for detailed icons on a static background. It offers a full range of colours, and can be used for those beautiful and highly detailed icons that can really bring a lot of beauty to a site. The JPG also offers excellent compression, though its important to find a balance. Too much compression and your icons will start to lose their quality and become overly rastered. If there’s not enough compression, though, image files can become unnecessarily bloated.

The downside of JPGs is that they don’t support any level of transparency. As such, they either need to be set against a solid background (which matches the background of the image itself), or placed with a near pixel perfect accuracy.

GIF – Not nearly so common as it used to be, the GIF is a much smaller type of image, limited to an index of only 256 colours. Fortunately, this index can be customized and does not have to be limited to the standard index of the old 256 colour space. This colour limit is both an advantage and a disadvantage.

On the one hand, it can be really great for small and simple icons, like the ones we saw from Facebook. They only have a few basic colours each, so using the GIF format is perfect, and yields really tiny file sizes.

On the other hand, the GIF tends to fail with any real level of detail. Because of the severe colour limit, even mildly complex images quickly become grainy and pixelated, losing much of their detail.

The GIF format does support a very basic level of transparency, but it is very limited. It can basically take a single colour from the index and render it as fully transparent. As such, it is pretty much an all or nothing kind of transparency that only has a few limited uses in modern web design.

PNG – The PNG is probably my favourite image time, due mostly to its versatility. It offers the full colour gamut of the JPG, along with a vastly superior form of transparency, which works independently of the colour information. This means that any coloured pixel can have a transparency level within 256 degrees. This allows for a great deal more flexibility with your images, and allows you to place icons over complex backgrounds, which can be huge advantage in terms of implementation.

PNG images do tend to be larger than either compressed JPEGs or GIFs, so that’s something that needs to be taken into account during your development. It’s also important to remember that Internet Explorer 6 doesn’t support full PNG transparency. Some very clever people have developed methods of getting around this problem, but you still always need to keep it in mind if you plan on developing websites that support IE6.

Each of these three types can be appropriate in different situations, so it’s always a good idea to choose your image format based on circumstance and what will prove to be the overall most efficient option for what you are trying to do.

Icon Sprites

This won’t always apply, but you may occasionally want to make some sort of interactive change to your icons. For instance, I recently created a menu that used icons above the text labels. I wanted all of the icons to have the same monochromatic colouring, except for the icon of the current page, which would appear in full colour. The concept, of course, was to delineate the current page within the menu itself.

To achieve this, I made use of CSS Sprites, placing all of the different icons, in both their monochromatic and full colour states, into a single image. I then used the image as the background of of the HTML list elements that made up the menu, adjusting positioning values as necessary. It’s all basic sprite work, and helps to keep overall overhead down by reducing the number of HTTP requests.

Recently, I also read a really interesting and clever article over at NETTUTS+ outlining the possibility of using @font-face in CSS to implement icons through a custom font. It’s not quite the same thing as using sprites, but it has many of the same advantages. Be sure to check it out.

Metaphor

In the first part of this series, we talked quite a bit about what an icon is, and how it is meant to represent something else. One of the examples we used was the floppy disc as a well recognized symbol the action that would save a file document. This basic premise is really little more than metaphor in action. As such, I would suggest that a strong metaphor is an intrinsically important part of good icon implementation.

Your use of icons needs to make sense, especially in circumstances where they may not be surrounded by words that give them context (though, in this case, it would probably be a good idea to use a tooltip). So, if you want to have a save function, you would do best to use the floppy disc or, if you really want to get away from that, something like an SD card.

What you don’t want to use is something like a life preserver. This may seem to make sense, since it is something that can be used to “save” someone who is drowning, but this isn’t quite the same as saving a file, so the metaphor is not as strong. Also, the life preserver is occasionally used to represent help or support functionality, so using it in a different way may be counter-intuitive for your users, leading to confusion and frustration.

Always give careful consideration to the implied metaphors of your icons.

Cultural Differences

Of course, analyzing metaphor is not always easy or obvious. We all think, visualize and conceptualize in our own unique ways, but the fact remains that a lot of what influences these faculties is actually our immersion in our own cultures. If you’re building a site for a client in a different country, and are looking to implement icons into the design, be sure to keep these cultural differences in mind.

To use a really broad and general example, suppose I was designing a site for a client in South Africa (to pick a seemingly but not entirely random location), and that I wanted to implement the an icon to represent the concept of sport. As a good, true blooded Canadian, my first instinct might be to use a hockey icon, like this stick and puck from Kevin Anderson’s Sports Illustrated icon set:

Ice hockey

For me, and many of my Canadian compatriots, the hockey metaphor would work perfectly. How many people really play hockey in South Africa though? I put this question to South African native Sue Rutherford on Twitter. Her response was that they typically follow soccer and rugby. As such, the hockey metaphor loses some of its meaning and may not be the most appropriate choice, given what the icon is supposed to represent.

A better option would probably be a soccer ball (or football, if you prefer). This might be even more relevant with the FIFA World Cup coming up in South Africa this summer.

A soccer ball

Moreover, soccer is also a far more international sport, meaning that his icon will also likely be more widely understood by visitors from around the world.

So, if you are designing a site that will have a world wide audience, or if you are designing for a client in another continent, or even just another country, keep the idea of cultural difference firmly in your mind. You might also want to consider doing some research and testing, just to make sure that the icons you want to use actually have convey the meaning you intend.

Conclusion

I really believe that icons are a great way to add extra meaning, usability and visual flair to a website. I also believe these icons need to be implemented thoughtfully and with a careful attention to detail. Too often, I’ve seen great websites that are dragged down or disrupted by the poor deployment of icons that seem to have been added almost as an afterthought.

What about you? Do you have any thoughts on this matter, or any other areas that you think need to be addressed when implementing icons into a website? Please feel free to share!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Man, it feels like it’s been a long week, and I don’t feel that I have a ton to show for it. Last week, I mentioned that I had another tutorial in the works, and that one’s finally been published over on MyInkBlog. And when I say finally, I am totally pointing the finger at me. For a variety of reasons, that particular post took me forever to finish. But it’s up now, and if you should go have a read if you haven’t already.

I also finished another vector character pack for the guys over at MediaLoot. This one was another guy, but this time I tried to make him a bit more like an artist, and built in several extra accessories, such as a paintbrush, a portfolio, a chalkboard and a clipboard. I’m pretty happy with the overall finished product.

Other than that, I’ve just been enjoying this fine weather and celebrating with some really good friends who just welcomed the first child. That was pretty awesome!

Anyhow, let’s get on to this week’s Echoes!

Logo – Zeughaus

It’s amazing how many logos I feature here on Echoes where I have absolutely no idea what the name means. We have another one this week.

Zeughaus PPP AG

Still, this is a really nice design. The designer’s comments on this one say that the “client asked for something dynamic and futuristic,” and I think that it really does a pretty good job in this regard. I really like the way the mark itself offers an interesting treatment of what is, essentially, just a basic half-tone pattern. The bright reds, oranges and whites give the mark a real sense of energy, as does the seemingly random arrangement of the colours.

I always like to talk about how a logo will translate into black and white too, and I think this one works. At first glance, I wasn’t so sure, because a lot of the effect seems to come from the colour. However, upon further inspection, it becomes clear that some of that energy also comes from the halftone pattern itself. As such, I do think that the logo will translate well into black and white.

Art – Assassins Creed

One of my favorite video games from the past few years has to be Assassin’s Creed. I really enjoy the dynamic of the first game and have the sequel sitting on my shelf just waiting to be played. This week’s art features a really nice fan image of that game.

Assassin's Creed

It doesn’t look like our Assassin is doing all that well in this particular piece, being underwater with an arrow sticking out of his shoulder, but the image is still really nice. I’m especially fond of the way that the water is rendered in this one. The blues are really vibrant and the bubbles look great.

What I really like, though, is the same thing that first drew me to the game itself – the costume. I love the design of the assassin’s outfit cloak and cowl. The bright red against the white, combined with the concealing hood, really combines to create a character who is unique and memorable, yet blends seamlessly into the game environment. This painting does a great job of capturing that costume!

Tutorial – Create Custom Option Panels with WordPress 2.9

For the second straight week, I am bringing you a WordPress tutorial. Last week, I was working on a WordPress site where I needed to set a custom option for the entire site, so when I came across this one it was really awesome.

Create Custom Option Panels with WordPress 2.9

Basically, this tutorial will show you how to go about creating your own custom options panel for the WordPress administration from within your theme (with no need for a plugin). This was incredibly useful for me, and I’m sure that it could prove equally useful to you too if you do any significant development in WordPress.

For me, I was creating a WordPress blog as an extension of a site that was running off of Concrete5. I wanted to keep the same basic design and didn’t want to upload all the same design based images again (it’s just inefficient). So, I set up a universal property which contained the URL to the Concrete5 theme, including all images and stylesheets, allowing me to very easily adapt the site’s basic theme into the blog. I’m sure you could do all kinds of similar things by creating your own options panel.

Website – Brizk Design

Some of you may have already seen this site, which has been tweeted a few times today by some fairly major players in the design community, but I thought I would feature it anyhow, for those of you who may not have seen it yet.

Brizk Design

The design itself has a nice, watercolour based minimalism, prominently featuring the hand painted hummingbird as the cornerstone of the site’s visuals. Other hand painted items – leaves, flowers and a butterfly – also appear across this single-paged site, bringing a strong sense of continuity to the overall site design.

The site also has some really nice animation effects, which I would like to draw to your attention. First, it is one of those single page sites were clicking on any of the navigation items will actually cause the page to automatically scroll down to the appropriate section. Try scrolling on your own, though, and watch as the active menu item changes as you hit each new section. Very slick. Also, try hovering over the tiny little bird icon at the bottom of the page. A footer bar pops up with the latest tweet and a link to follow the designer. These are the little touches that can really turn a site into something special!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Hey all. Here were are with another edition of Echoes, and things are going to be changing just a little. I’ve found that I’ve been getting a bit verbose in some of these articles, and spending a ton of time writing them. People have left some really nice comments in the past, but these posts certainly aren’t the most popular articles that I publish here. So, in an effort to free up a bit more time, I’m going to try to keep the exposition to a minimum – usually just a paragraph or two.

In general news, I had another article published over at SpyreStudios over the weekend. This one is called “A Coder’s Journey,” and chronicles my (often slow) development in the world of coding and programming. The article has received quite a bit of attention and some really nice comments, so be sure to check it out. I also submitted a tutorial to another site, which should hopefully be published sometime this week. Keep an eye on my Twitter account for an update on that.

Now, let’s get to this week’s Echoes!

Logo – ShadowCatcher

We’ll start this week off with a sweet and somewhat abstract logo design for a company called ShowCatcher, which apparently “gathers information for their clients from trade exhibitions through a wide range of media.”

ShowCatcher

I love the colours and the general feel of this piece. It has a wonderfully organic aesthetic, while still feeling fresh and modern. The simple non-serif typography really offsets the energy, giving the entire design a solid anchorage. It’s all about striking the right balance.

Other than a vague S-shape, I don’t see much of a connection between the mark and what the company does, though, and the use of gradients may effect its ability to be reproduced in certain media if there is no pure black and white alternate. Still a really nice design though.

Art – Gidleigh Goat

I have been reading through Karen Miller’s The Awakened Mage over the past little while and really love the cover art, so I went looking for more from the artist, David Wyatt, and came across this little gem.

Gidleigh Goat

The first thing that strikes me about this particular piece is the incredible depth of the green, which is just so wonderfully rich, especially for something that was rendered in watercolour. After that initial reaction, the eye instinctively seeks out the subject, which we find to be this gentle, and somewhat old looking goat character.

Yes, this is another fantasy piece. I’m sure most readers have just come to expect that from me by now! Unlike much of the other fantasy art that I have posted in these Echoes, though, this one has much more of a fairy tale feel to it. The creature seems very wise and friendly, and full of character. It almost makes me want to pull up a log and listen to whatever stories he has to tell.

Tutorial – Building A Custom Subscriber Panel With Stats In WordPress

With so many designers and developers working in WordPress these days, a good quick tutorial about how to whip up a certain bit of code is always useful, and that’s exactly what we have this week.

Building A Custom Subscriber Panel With Stats In WordPress

In this tutorial, developer Amber Weinberg (who has guest posted on this blog) outlines her process for creating a sidebar panel for displaying your RSS counts, email subscribers and twitter followers. It looks and functions much like a widget, but is actually hardcoded right into the theme – though I suppose that and industrious developer could take the information provided her and convert it into an actual plugin widget.

What I like the most about this brief tutorial is that it offers a (partial) alternative to FeedBurner. Personally, I’ve only ever had a few issues with FeedBurner, but it does seem to have developed a quasai monopoly on generating and tracking feed statistics. So, in addition to showing you how to create an awesome little information panel, this tutorial also brings to light what appears to be a very viable alternate method of tracking your stats, directly from WordPress itself!

Website – The Green House

Occasionally I come across a site with some interesting visual effects, and I have to right click on the page to see if it is actually using Flash, or if the effects are achieved with jQuery. This week’s website was an excellent example.

The Green House

The site’s home page has three large photographs, which are individually faded in and out in the background. It’s both a subtle (in terms of effective animation) and not-so-subtle (as in completely changing background) effect, which until a few years ago would have been almost exclusively achieved in Flash. Now, it’s great to see this sort of thing being done independently of any browser plugins.

Beyond that effect, though, this site also has a very interesting blend of strong graphics and photography. I really like the way that they’ve integrated the photographic images in with more vector-like elements. It has a unique and original feel to it. I also love the way the site builds really nice icons into its overall navigation system, especially since I am currently right at the beginning of a series on icons and web design. That kind of makes it the perfect time to include the site here.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Well, life is pretty much back to normal. My wife got back from Haiti last week safe and sound, so we’re back to two parent mode, which makes my life a whole lot easier – at least in one regard. Of course, life always seems to trade one type of busyness for another, as I have two different websites launching this week.

The first is a complete redesign for Highland Marketing, where I am the Creative Director and have been working diligently at building and releasing a new design for the site. It launched today! The point was to create something simpler and more streamlined than the old site, which was a bit rigid and boxy. Please feel free to check the site out and let me know your thoughts. And if you’re doing any direct mail and we can be of service, don’t hesitate to hit me up!

The other site should be launching later this week, and is a freelance client project built on a custom, hand coded WordPress theme. It’s a pretty cool site, and I’ll be glad when it’s up.

Anyhow, on to this week’s Echoes!

Logo – Pink Flamingo Farm

I came across this week’s logo over on Logo of the Day, and it’s just another awesome example of interesting and clever execution – this time by means of the interaction between two distinct animal shapes.

Pink Flamingo Farm

I’m not certain that I would give the name “Pink Flamingo” to a farm that focuses on breeding horses – it just seems to beg for confusion – and from the name itself, it might seem like a great challenge to come up with a design that is both interesting and meaningful. The designers deserve credit on this one, though, for devising something really interesting. Just like last week’s equestrian themed logo, this one also involves a horse’s head, except this time, the horse is actually comprised out of negative space, and the outer line of its head forms the inner line of a flamingo!

The interplay here is both clever and intriguing, as I always find these kinds of logos really interesting. I would love to see the rough work for this one, and trace the development of the concept. Was this a concept that came to the design relatively quickly, or did they produce dozens and dozens of sketches before finally devising this concept? That’s always an interesting question to ask.

Art – Final Sleep

This week’s artwork is a beautiful watercolour painting of a beautiful and dream-like scene. What I find truly remarkable, though is the amazing level of detail in the painting itself.

Final Sleep

In this context, there is probably not a lot that I can or would say about the narrative of the piece itself. There is a woman and a dragon and some other magical looking creatures, all of which could probably be imbued with some sort of story and meaning. That’s beyond the scope of any Echoes post, though, so I will won’t get into it.

I would, however, like to underscore the magnificence of the style. Watercolour seems to have been a reasonably popular trend in some recent design, and watercolour Photoshop brushes remain a much sought after resource. There is nothing, however, that can really compare to an actual watercolour painting. Despite the fact that the colours are often somewhat washed out, there frequently seems to be a strong sense of energy in this genre of painting, which I think stems from the very organic appearance of wet paint hitting paper. It’s probably my favorite form of traditional painting!

I am also astounded that level of detail in this painting. It’s difficult to see here, but there are links to detailed closeups from the deviantArt page, in which you can really see the the extensive detail that exists in this one. It’s really amazing – especially since it is done with watercolour, which can be a very finicky and somewhat unforgiving medium. Because the paint always shows through, it can sometimes be difficult to fix mistakes. So, at least for me, the seemingly flawless execution of this one is truly to be admired!

Tutorial – How To Create a Stylish Navigation Bar In Adobe Fireworks

I do nearly all of my graphics in either Photoshop or Illustrator. For most web elements other than icons, I tend to focus on the Photoshop side of things. Today’s tutorial, though, is all about creating a cool web element in Fireworks.

How To Create a Stylish Navigation Bar In Adobe Fireworks

There are a couple of interesting things about this tutorial. On one hand, it really shows how easy it is to make these kinds of graphics in Fireworks, which has been specifically engineered with the web in mind. Whereas Photoshop is a vastly powerful image editing package, with capabilities that far exceed what is typically needed for creating basic web graphics. Fireworks, on the other hand, is specifically created for this process. From what I’ve seen, this basically means that you have a more focused set of tools that can potentially help you do your job more efficiently (I’ve also read that Fireworks actually offers better compression than Photoshop).

That being said, though, don’t make the assumption that Fireworks is actually a stripped down version of Photoshop (that’s called Elements). There are some familiar tools and palettes, but it’s a completely different program, with its own way of doing things. I played around with it a bit, and will admit to feeling a bit lost. It’s kind of like the first time you get into a completely new car – you have a basic idea of how to make it work, but it still feels a bit strange and foreign, and you know it will take some time for you to really get to know where everything is.

Still, I this is still a great tutorial, and I would recommend it to anyone who is looking to give Fireworks a shot.

Website – Digital Puffin

This week, I received a request on Twitter to have a look at the redesign page for Digital Puffin, a two-man design firm based out California. I always enjoy seeing the web work of creative professionals, so I had a look and decided to feature the site here.

Digital Puffin

There are a few things that I really like about the site. I’ll start with the mascot design – of a puffin, of course – which is both simple and memorable and relates very well to the brand. I also really like the minimalism of the site, which features a different coloured background for each sub-page, along with very subtle radial gradients, watermarked with the a diagonal “dp”. The site also features some nicely styled typography, which helps complete the overall design.

It also has a really cool navigational animation effect, wherein every time you click the menu to move to a different page, the content quickly fades out. Then, in similar fashion content for the next page fades in after it loads. It’s a subtle effect, but it adds a nice flair to the site. It does present a navigational problem, though, in the use of the back button. Every time I click the back button, the previous page loads in its last state – namely with the content faded out. All that I see is a blank, coloured screen. Just seems like a minor navigational bug to me – I’m sure it will be ironed out soon.

One other area that I think could be improved is the menu system. It exists as a series of coloured bars down the side of the page, with each bar sliding out on a hover event, to reveal the menu choice. It’s a really cool little effect, but may not be the most intuitive. Users might not know where the menu is, assuming that the coloured bars are just part of the background. Also, unless you’ve been to the site before, having to hover over every option until you find what you’re looking for could be a bit frustrating for the user. I think that using small but meaningful icons could go a long way in helping to smooth out these potential usability issues.

Overall, though, it’s a really great site.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Well it’s been a crazy week, let me tell you. With my wife in Haiti for the entire week (getting home tomorrow), I’ve been holding down the fort along with my little girl. It’s been a lot of fun just hanging out with my precious little munchkin – and completely and totally exhausting all at the same time! It’s also meant that I haven’t had quite as much time to work on projects as I would have liked.

I did, however, complete another set of vector characters for MediaLoot. This time, it was a female character, with the set containing 5 different poses. The style and proportion of everything are designed to match the other character set I did, which featured a guy who – despite my dear sister-in-law’s observations – is not at supposed to be me!

Oh, and by the way, if you’re not a member of MediaLoot yet, you should really consider signing up! It’s a great new community and resource base that will continue to grow in depth and general awesomeness. Be sure to take advantage of the special, introductory pricing that they have going on right now!

Okay, with that plug out of the way, let’s get on to some Echoes!

Logo – Equestrian Clothing

This week, we have another clever logo that does a great job at combining the two different concepts in the company name into a single attractive mark!

Equestrian Clothing

I think that part of the reason that this logo works so well is that the two graphical concepts are both immediately recognizable. The first thing that I see when I look at this logo is definitely the two horse heads. However, after a quick glance at the text, I also very quickly saw how the two heads formed the shape of a jacket too. On it’s own, this is pretty cool.

It’s even cooler, though, because the actual shape of the jacket is reminiscent of that older style cut which is so often associated with the Equestrian sport. Thus, the logo pays homage to its roots in multiple ways.

The typeface also works well. It has that kind of elegant feel to it, and the same sort of sophistication that is also typically associated with the sport itself. The only thing that seems a little off to me is the fact that, at a smaller resolution like this, some of the finer detail on the lettering seems to get lost, and starts to look almost like rogue pixels. Take a closer look at the “q” and the “a” to see what I mean. Still, I do really like the general feel of the type and think that it works pretty well.

Art – Tire Sculpture

I don’t normally feature sculpture here on Echoes, but it’s definitely something that’s worth doing from time to time, and today is one of those times. There is an entire genre of sculpture out there that makes use of various recycled materials. Perhaps you’ve seen the work of Mirko Siakkou Flodin, who creates incredible works of art entirely out of (presumably recycled) tires.

Awesome Tire Sculpture

There are a number of awesome examples of his work that I could have decided to feature here, but this is one of my favorites, possibly due to my love of cats and other large predatory animals – though of course that love is purely abstract and conceptual. I do like to keep my lethal predators at a safe distance.

I also like this one because of its energy. Some of the other works (though certainly not all of them) can seem a little rigid and static, but this piece seems almost alive. The positioning and the photograph almost make it look like the image was captured as this incredible tire beast was prowling past. What’s more – I can almost imagine this creature stalking some industrial graveyard by night, looking incredibly menacing.

A lot of these sculptures have that feel to them, too, along with an oddly alien apperance. A good part of it, of course, has to do with the blackness of the tires and the ridges of the tread, both of which serve to create the appearance of some bizarre and manufactured exo-skeleton.

Tutorial – How to Create a Highly Detailed Hi-Tech Power Button

If you hadn’t noticed, the entire TUTS+ network has gone through another realignment. The branding and colouring is all still the same, but the layout of the sites have been redesigned again. They have really been simplified, and it’s taking me a while to get used to. One thing that has been introduced, though is the idea of Basix, which is of course just a fancy way of saying basics, and is a section that focuses on teaching the basics of the site’s area of focus. Today’s tutorial is one such article from the PSDTUTS+ site.

How to Create a Highly Detailed Hi-Tech Power Button

Despite appearing on PSDTUTS+, which typically focuses on tutorials for Photoshop, the first chunk of this tutorial actually describes how to work in Illustrator to create the basic shapes that will be needed. Quite frankly, I like this. I personally move back and forth between those two applications all the time, and it’s nice to see a tutorial that emphasizes the ability to move between them.

Other than that, what this tutorial really focuses on is some of the basics of using selections and shapes and layer styles to create a really cool looking illustration, which doesn’t really look all that basic at all. So I guess, in a sense, one of the coolest parts of this tutorial is how it demonstrates that creating awesome work in Photoshop doesn’t have to be complex, especially when working on a clean and sleek design like this one.

So, if you haven’t already, consider taking the time to really work through this one. Unless you’re a real master, chances are you’ll pick up a trick or two to add to your Photoshop arsenal of tricks!

Website – The Ship and the Sea

I think this is probably the first time that I have featured a band site in Echoes, and quite frankly, I have to say that it’s about time! There are a ton of really cool designs for band websites out there. Actually, this site is for the The Ship and the Sea, an album from the band The Autumn Film.

The Ship and the Sea

Like some of the other sites that I have discussed in past editions of Echoes, the site features some really lovely illustration, including a heavily blue palette (going with the title of the album), and a sort of grungy, almost watercolour-like feel to it, which I really dig. The specific illustrations also help to divide the content into different horizontal segments, including a large header, prominently featuring the album cover art.

The site also appears to consist of just the single page, and in addition to featuring the album art, you will also find a music player, which allows you to sample the music, links to purchase the album (obviously), some video, and a bunch of testimonial-like tweets praising the new disc. Oh, and there’s a link to the band’s main website too, of course. All in all, a cool little site.

And if you’re wondering about the music, I would compare it to something like Death Cab for Cutie, soft and melodic, and a kind of folky, distant cousin to indie punk. But that’s just my opinion.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Hey all. It’s been a pretty quiet weekend here on the Echo Enduring Blog. I haven’t been feeling just the best over the past week, so I’ve spent quite a bit of time resting. I was also away with a bunch of the youth from my church over the weekend, and as you can imagine that meant that I got nothing done (which is okay – I was totally expecting that going in).

I’m hoping to be a bit more efficient this week. I’m planning on publishing the follow up to my Language and Metaphor: An Alternate View on Coding for the Web article, and have some other great content planned for the coming weeks too. Also, if you haven’t entered to win the first installment of the new First Friday Giveaway, be sure to check it out. I have one free license of Fanurio available to one lucky reader!

I’m also really excited for tomorrow, which is the official launch date for MediaLoot, a new and awesome design resource that I have been involved with, and have mentioned in several posts and and tweets over the past few months. I’ve had the opportunity to design some of the resources that will be available there. I’ve also seen some of the resources from other designers, and I have to say that it looks totally awesome. If you’re a designer looking for the best resource base on the net, I think that MediaLoot could well be it, especially as it continues to grow with awesome new resources! Be sure to check it out.

Now, let’s get to this week’s Echoes.

Logo – Hands Across the Americas

As I’ve stated before, I am a big fan of logos that make clever use of a particular mark, or which incorporate two distinctly different icons. This week’s logo does exactly that, by combining hand prints with the outline of the American continents.

Hands Across the Americas

This logo is apparently for a volunteer based missions to South America. Since the organization is based out Texas, the name makes perfect sense, as the mission connects the two American continents. It also lends itself perfectly to the clever mark used in the logo. At first, I would guess that almost everybody will see the hand prints. It’s only after looking at the logo for a bit longer (perhaps a half second, a few seconds or even a few minutes), that we actually see the shape of North and South America cleverly worked into the palms of the two hands!

This is a really the kind of interesting and subtle effect that I always enjoy seeing in logo designs. To me, it suggests that the designer actually spent a lot of time brainstorming and sketching out ideas until they came up with something really interesting. Either that, or they happened to stumble on a brilliant concept – but somehow I doubt it.

The one remark that I saw several times, and which I agree with, is that the type does seem a little crowded up against the mark itself. However, the designer’s comments also indicate that this was a change requested by the client, and as all good designers know, half the job is that balancing act of trying to create the best possible design while still pleasing the client. So, I still say that this is good work!

Art – Enforcer

This week’s artwork is a really awesome digital painting for the cover of a novel from the Warhammer 40000 universe. I’ve never played the game, and I don’t think I ever will. I played quite a bit of Magic when I was a teenager and a bit of D&D, but I’ve kind of grew out of those years ago. I still love a lot of the artwork done for those games though, and this is no exception.

Enforcer

I understand that the term fantasy has a pretty broad range of meanings, and that sometimes those fantasies can be of a more mature nature. I even recognize that, my and large, the mainstream fantasy genre tends to be dominated by men (and hormone filled teenage boys). That being said, however, one does tend to get tired of the thousands and thousand of “warrior” women who seem ready to go into battle wearing little (or less) than most real women would wear to the beach.

Okay, ladies (and your artists), you might have some pretty tight abs, but unless part of the fantasy is also having flesh as dense as iron, the first swing of a sword is probably going to spill your guts, and you won’t be looking so pretty then…

Yes, I am ranting a bit, but mostly as a build up to say that, with all the scantily clad heroines out there, it’s always refreshing to come across an image of a woman who would last more than twenty seconds in a real battle, and in this case, who appears as though she could actually do some serious damage! The character in this image is wearing fully body armour, which looks like it’s seen as much damage as she has. This character is far from the beautiful, soft skinned warriors that we see so often. Her face is bruised and scarred, and she’s probably more than capable of laying a serious whooping on anyone who gets in her way.

The image itself is also beautifully rendered. I love all of the fine detail in the character herself, especially around the eyes. She is obiously a tough, battle hardened warrior, but there also seems to be something hauntingly lonely in those eyes, as though this life of war and violence is not one that she chose for herself, but is now something from which she can never escape. It’s a truly wonderful piece!

Tutorial – How to design a print ready business card design in photoshop

I’ve already mentioned the impending launch of MediaLoot, but there is also another site that has gone live recently, called TutToaster.com. This is a site where you can expect some more tutorials from me in the future, but today, I would like to launch of this site by featuring one of their first tutorials, by none other than Mike Smith (who was also featured in out 7 Questions, 7 Designers series).

How to design a print ready business card design in photoshop

As the title of this particular tutorial clearly suggests, it is about how to create a print ready business card in Photoshop. I think this is incredibly valuable, especially for newer web designers or developers who may not be all that familiar with preparing designs for print, which is a whole different world than the web. This tutorial will help teach newer designers to create their own printed business collateral.

For instance, one of the first things that the tutorial instructs is to set up proper guidelines to designate the bleed areas for the card. I’m always amazed at how often I see artwork that is supposed to be “print-ready”, but has no bleeds or crop marks, despite the fact that the artwork extents to the edge of the page. I really do think that this is symptomatic of many web designers attempting to make the transition to print and just not being aware of some of the greater caveats.

Personally, when I design business cards, I’m more likely to work in InDesign, which has natural export options for bleeds and crop marks, and some very powerful tools and options for working with type. That being said, however, there are certainly many legitimate reasons for designing a business card in Photoshop. Perhaps you want to do some really rich graphical treatments that are just too difficult (or impossible) to achieve in InDesign. Or, maybe you’re a master at Photoshop but either have no access or no knowledge of InDesign. If any of these describe your situation, and you’re looking to design yourself a business card, this tutorial could be a great place to start.

Website – Jonas Lekevicius

This week’s website is actually the landing (or home) page for the personal site of designer Jonas Lekevicius. It is incredibly simple, and has a few interesting things going on.

Jonas Lekevicius

One of the things that you cannot tell by looking at the screenshot above is that the green you see is actually a constantly shifting colour, which moves rather rapidly through a full spectrum of different hues. The same shifting is also achieved in the logo through some clever use of images. The static grey sidebar is actually a PNG image, with the logo “punched” out as a transparent part of the image, which ultimately allows the shifting background to show through. So, as the background shifts, so does the colour of the logo. That’s pretty cool.

Similarly, the text in the sidebar is also effected. As you hover over any of the items, they will bounce slightly to the right, in a flash-like animation, but with no actual flash used, which is very nice (jQuery instead). The colour of the hover state also shifts, which I would guess is a matter of dynamically shifting the colour associated with the hover state. Pretty simple, but a nice touch.

From this single page, you are able to go to various sub pages within the site. When I first saw that, I was a bit concerned, since the shifting background would make readability difficult on content pages. Fortunately, the sub pages use a different, and more static design.

I’m actually thinking about doing something similar for my site, having a main landing page, and then forking off to this blog, my portfolio and then an about section, probably each with a slightly different design! This will probably happen sometime over the next few months, so keep an eye out!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Well it’s finished. I watched, with pensive hope as the Canadian Men’s hockey team pushed into the last minute with a single goal lead, trying to hold of an increasingly aggressive 6-man attack my team U.S.A. Then my stomach hit the floor as the Americans scored with just 24 seconds left in the game to send it to overtime… I could hardly watch as that sudden death period started. It was fast. It was furious. It literally had me on the edge of my seat until Sidney Crosby got a hold on the puck and somehow, some way, drove it past Ryan Miller to end the game, and put the crowning achievement on an incredible winter Olympics.

I don’t think I’ve ever been so proud to be Canadian. I’m sure many of Canadian readers feel the same way.

And to all of my American readers – wow. Way to shock the world by playing some incredible hockey throughout the course of the tournament. For a team that the “experts” weren’t even expecting to contend for the podium, team USA was just amazing – especially Miller. Shooting at him was like shooting at a brick wall! Keep playing like that and I totally predict a rematch in 2014!

Anyhow, that had absolutely nothing to do with design, so please forgive me for a moment of shinning patriotism. Now, let’s get on to this week’s Echoes!

Logo – Maska

This week’s logo is an excellent example of how to incorporate “tribal” style artwork into a cool looking logo design, along with some really great colour and stellar typography.

Maska

I really like the way the designer combined the various bits of tribal design to create the mask-like face in this one. Since the logo is for a restaurant/cafe, I immediately get the sense that it will have a strong ethnic flavour to it, either through the food or the atmosphere – and probably both. The bright, bold colours also seem to suggest an equally bold culinary experience.

I’m also really keen on the typography in this one. I recognize that the trick of eliminating the crossbar on an upper case A is nothing new or all that original, but somehow I still love it. The technique really does a great job at conveying a sense of tradition and antiquity. This logo design does a great job of calling on that.

Art – Fire Within Me

For the past couple of weeks, I have featured art that was somewhat dark and creepy. This week, I would like to break way from that a little bit, with something that is a bit more magical and beautiful.

Fire Within Me

This is a really beautiful and imaginative piece. The painting is based on an original stock photograph, and stays very true to the woman’s basic features. The lighting, however, is completely changed, what with the violin bow being on fire and such. Obviously, this required a great deal of excess brush work, which softened the image and gave it a much more (digital) painterly feel.

What I really love about this one is the fire. It’s superbly well rendered (using brushes or stock?), and certainly becomes the focal point for the entire piece. I can’t help wondering, though – does fire come from her incredible gifting as a musician, or does the gifting come from the fire within her? I’m wondering if it might perhaps be the later, given the title of the piece, but it certainly raises some interesting questions about the relationship between our own passions and talents.

All in all, though, this is a truly magnificent piece of art.

Tutorial – How To Get Digg, Delicious and Tweet Counts Using jQuery

Most of the tutorials that I have featured here in Echoes over the first 25 weeks have been about techniques for designing in programs like Photoshop or Illustrator. There have been a few coding relating tutorials, but they have certainly not been the majority. This week, I would like to bring you a quick little jQuery tutorial that you may find useful, especially if you are a purely front-end developer.

How To Get Digg, Delicious and Tweet Counts Using jQuery

Personally, I’ve never even really considered the possibility of grabbing stuff like Twitter, Delicious and Digg counts from the front end. These always just struck me as tasks that were reserved for back-end, server-side scripting. So, when I found this tutorial, I was quite intrigued by the possibilities.

Basically, the concept is to grab data from each of the different social media sites via separate <script> tags, pass that information to a jQuery plugin to extract the counts and finally update the count areas on the page through unique HTML id’s. The tutorial also makes use of techniques that will allow for graceful degradation for instances where JavaScript may be disabled. In such cases, a simple text link is displayed, without the count.

Because this technique requires separate calls to each social networking service, plus several lines of code, it can add some bulk to the size of your HTML file. That’s something you may want to consider before implementing this technique, but if you’re a front-end developer looking for a solution that doesn’t rely on PHP, this tutorial might be right up your alley.

Website – Sick Designer

This week’s featured website is an awesome looking blog called Sick Designer, and has some really “sick”, grungy design elements that I think you will really dig.

Sick Designer

I think the first thing that really strikes you when you visit this site is the bold use of colour and grunge, especially down the left-side of the page – and I do mean down. That gungy splash of red, yellow, orange and green actually does extend all the way down the page by means of a repeating background. Fortunately, the background image is high enough that you hardly see the repetition at all.

There are a few other elements that I really like about this site. The Twitter section is really nicely done, and integrated so well into the overall design. There is also some cool colour coding of posts based on categories. Most of all, though, I love way that the first post is highlighted on the main page, via some basic stylistic changes. It’s given a colourful background – whereas all of the others are grey – and the text on the date is turned to white, to really help it stand out.

I would also like to note that this site – apparently recently redesigned – makes extensive use of both HTML5 and CSS3. As such, it is somewhat of a showcase for what can be done with these emerging new technologies. I’ve only browsed this site in my current browser (Firefox 3.5.8), but I would be interested to go and check it out in an older, less compliant browser to see if it degrades gracefully.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Hey guys. I hope that you are all doing well. Not a ton of stuff to report on the Echo Enduring front this week. I finished of some more design work for MediaLoot, which you should be able to see soon – once the site actually launches. I’m pretty excited about that. I think it’s going to be a totally great resource for designers!

I also climbed over 500 subscribers this past week, thanks in part to being featured in an article titled “50 Fresh Design Blogs You Should Be Reading” over at Six Revisions. Actually, I’ve been over 600, but 500 was a somewhat more significant number, since I it was actually one of my goals to reach. So that’s nice. It’s always great to reach your goals!

Anyhow, let’s get on to Echoes, shall we?

Logo – Spartan Golf Club

Regular readers probably know by now that I am an absolutely huge fan of logos that have multiple meanings, or at least a primary and a secondary meaning built into them. I think that this week’s logo does this better than anything I have seen in a while.

Spartan Golf Club

There are really only two concepts that need to be built into this logo. Most importantly, the designer needed to get across the concept of golf itself, which was achieved quite nicely through the shape of the golfer himself. Wait… that’s not a golfer. It’s the face of a Spartan warrior, complete with that classical and easily recognizable helmet, which fits perfectly with the name of the golf course.

Obviously, it’s both – and I think that’s what makes this mark so awesome. It’s amazing the way that the designer manages to make the shape of the Spartan’s face also look like a golfer. Or, if you prefer, to make the golfer look like a Spartan’s face. I guess it all depends on how you approach it. Personally, I saw the Spartan first.

The only thing I’m not a huge fan of is the typography. The tracking on the word Spartan is a little wide, but that wouldn’t be so bad if it wasn’t for the words beneath it, which have a much tighter tracking and just seem put it conflict with the main typography. They also seem to crowd it a bit. Unfortunately, this unsettles the entire design, breaking apart what could have been a truly top-notch logo!

Art – Encounter

This week we have yet another animal image with a somewhat dark and/or sinister feel to it. Last week we has a gun toting rabbit. This week we have a fox, seemingly in the midst of either a nightmare or an otherworldly visitation.

Encounter

I really like this drawing, partially because I am oddly partial to foxes – for no real reason other than their being exceptionally cute and somewhat mischievous. Those big bushy tails of theirs help too. So that just helps me love this piece right off the bat. Additionally, though, it has this sort of animal spiritualism which – while I don’t believe in it – has a certain sort of interest narrative interest for me.

So, here we have this (young?) fox, coming face to face with some sort of spirit. Perhaps it’s the great spirit of all foxes, or the spirit of his grandfather. Maybe it’s something else entirely. I get the sense that, while the otherworldly fox is somewhat dark and frightening, it is not entirely sinister. Perhaps it’s almost like a guardian or guiding spirit. It’s like the stuff of fables, and so I really do enjoy this piece on that narrative level.

I also really like the style. Apparently, this was all done with pencil, which is pretty incredible to me. I really think that the mixture of the graphite with the texture of the paper really helps to give this one a unique appearance, which goes really well with the overall feel of the piece! Great work.

Tutorial – How to Code up a Web Design from PSD to HTML

As I’m sure you already know, there are a ton of tutorials out there about how to create this or that type of website layout in Photoshop. I’ve even featured a few of my favorites here in various Echoes posts. There is, however, a much smaller number of tutorials outlining the development process – namely taking the PSD and actually coding it into working HTML and CSS. Today, we are going to look at just such a tutorial, from the Line25 blog.

How to Code up a Web Design from PSD to HTML

This is actually something of a follow up article to a tutorial that Chris had published a few weeks earlier, in which he outlined the process for creating a “gnarly snowboarding themed website design concept in Photoshop” (his words, not mine). This PSD becomes the foundational working document for conversion into code, so you might want to check it out before reading this tutorial.

The article is basically broken down into the four key steps of coding. The first step basically involves opening up the PSD and cutting it up into various JPEGs and PNGs. Next comes the HTML. Based on the structure of the PSD design, create some simple and semantically correct HTML to structure the content. Third, apply styles through CSS. This can be the trickiest part, as you work to bend various styles to match the design elements in your PSD. Finally, once everything is in place, add a little jQuery for some extra animation and interactivity.

And that’s pretty much it in a nutshell. Obviously, there is more detail to it than that, but that’s pretty much the basic process of coding a PSD into a valid HTML file. You can even remember it with a ridiculous and possibly totally useless mnemonic device – SMuSA – Slice, Mark Up, Style, Animate (with jQuery in this instance). Or not…

Also, be sure to check out the working demo from this tutorial!

Website – Coda

A few months ago, I first heard of an application called Coda, which could be used as a replacement for Dreamweaver. I had been using simply because it came with my CS4 design standard package, but was looking for a change. Several months ago, I decided to give it a try, and my coding has never been the same since! So, in honour of this great app, I decided to include their equally great website in this week’s Echoes!

Coda Website

Like so many of the great Mac app sites, the defining feature of the Coda website (and it’s sister sites, for the other Panic applications) is a wonderful simplicity. A large title, along with the icon, meets you the moment you log on, with three key navigational options – download, purchase and help.

Beneath this, there is another in-document window, with different icons some of the various features that are part of the Coda application. Clicking on any of these (or the navigation arrows to either side of this window) will initiate an easing scroll, bringing the appropriate content into the window. This is achieved through basic HTML, CSS and jQuery, and helps minimize the complexity of the site – keeping all of the features right on the front page – while still maintaining a clean and uncluttered design.

What I really love about this site is the fact that it is as clean and easy to use as the application it is showcasing. The last thing you would want to do would be to have a really killer, easy to use app, and an obtuse and inaccessible website, which could sour potential users before they ever even get the chance to test drive the software. So, if you’re designing a website for an application, go to school on the Coda site. It has some great design principals! You might also want to check out the website for Things, my favorite task management software!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Here were are again with another installment of Echoes. It’s been a pretty good week here on the Echo Enduring Blog. I saw the most traffic ever in a single week, and am starting to see more traffic coming in from a variety of different sources. I’m pretty stoked about that.

I’ve also been pretty busy. I am working hard at bringing more great content for this blog, and a few guest posts for some other big design blogs. That should keep me pretty busy! Speaking of tutorials, I had another article published on SpyreStudios, entitled “How To Design Your Own Valentine’s Day Heraldry Illustration“.

Now, on to this week’s Echoes!

Logo – Vancouver 2010

Call me a proud Canadian – because I am a proud Canadian. Who hasn’t seen the logo for the Vancouver 2010 Olympic games? There is certainly nothing new here. However, in the spirit of the Olympics I am including this logo in this week’s Echoes!

Vancouver 2010 Logo

There are a few things that I really like about this logo. First, I like that it’s not the London 2012 logo, which is just totally hideous. The shape of the mark itself is also really great too! For those who don’t know, the mark itself is an inukshuk, a man-made stone structure used for navigation for hunters and travelers in arctic regions.

As such, it is a perfect symbol for the Olympic games being held in Canada. It has a snowy, wintry connotation to it, and there are inukshuks scattered all across the snowy regions of this great country!

It also allows for a really great segmentation of colour. Because the inukshuk is constructed of large, independent slabs of rock, the designer was able to give each stone one of the classic Olympic colours (as seen in the rings). The sole exception is the wide flat stone, which is set to a dark blue rather than black. I actually think that this substitution is a good idea, since the black might contrast too strongly against the other colours with blocks these large. The choice to go with the darker blue just softens the entire thing.

Obviously, as a Canadian, I’ve been seeing this logo for years now. Still, I do really like it. And please forgive me when I say go Canada!

Art – Eerie Fables

If you’ve been following my Echoes posts for any amount of time, chances are you will know that I am a big fan of dark, macabre kind of art. I don’t necessarily like things that are overly sensual or grotesque, but art with a sort of eeriness does appeal to me. So, this piece called Eerie Fables is right up my alley!

Eerie Fables

This is just an unsettling and creepy piece. The shape of the bunny (or hare) is stretched and stylized, giving it a really dreamlike sort of appearance. This, of course, is emphasized by the artist’s use of texture. I really like the way the the bunny actually blends into the texture at the bottom of the piece, and the way that the artist achieved a sort of blurry effect, which again helps to emphasize that ethereal, dreamlike quality.

Of course, the real creepiness of the piece probably stems from the gun resting in the bunny’s back “pocket”. Combine this with the glowing white eye and angry angled brow, and this looks like on pissed of rodent. Looking at it, you just really do get the sense that this animal is almost like a spirit, come back from the dead to lay some serious hurt on the poor hunter that killed him.

A really, really great piece!

Tutorial – How To Repair Scratches, Tears, and Spots on an Old Photograph

Most of the Photoshop tutorials that you will find out there on the internet today have to do with things like creating photomanipulations, designing websites or illustrating icons. One subject that does not seem to be to get a lot of attention is the concept of photo restoration. Well, this week’s tutorial is on precisely this subject!

How To Repair Scratches, Tears, and Spots on an Old Photograph

This tutorial will take you step by step through the process of how work through the restoration of an old, black and white photograph that is in pretty rough shape. The tutorial will show you how to remove all kinds of blemishes and cracks, and yields a pretty solid result!

To some degree, the photo itself actually looks like an old drawing. For some reason, as we move away from the face, the details just seem to disappear. Perhaps this is some sort of old, photographic technique that I am unfamiliar with, but I do have to say that I would like to have seen the process be applied to a more “complete” photograph. Of course, the author may have had a very limited selection to choose from.

The actual tutorial doesn’t have a ton of text in it either. I would also have liked to seen more explanation. There were a couple of places where I felt that a bit more detailed instruction would have been beneficial. Specifically, in the step in which the face is replaced with detail from another photograph just seems to be missing something.

Still, if you are looking to learn the basics of photo restoration, this tutorial can provide you with a really solid start!

Website – MyInkBlog (Redesigned)

For the second time in three weeks, the Echoes website actually features a complete redesign of one of the design blogs that I frequent on a regular basis. This time, it’s Andrew Houle’s awesome MyInkBlog.

MyInkBlog (Redesign)

This was one of the first design blogs that I started following in my RSS reader, so I had become very accustomed to the old design, which was based on a (highly) modified theme. I really liked the old design. I love the new design.

I’m glad that Andrew kept a pretty similar colour scheme, with a nice dark grey and soft, almost banana coloured yellow. However, while the old site featured that yellow a bit more prominently, it is really just a simple accent colour in the new site, which has a darker (as in less bright) overall feel to it. You can see it in the main logo, and then repeated in the hover state of the options in the main menu.

I’m also a big fan of the way Andrew incorporates the rounded corner effect into this design. Obviously, rounded corners are nothing new in the world of web design, but I really do feel that this design uses them particularly well. I’m especially fan of the way the main content area is differentiated from the sidebar by means of a slight height differential. It gives the design a nice sense of depth.

As for the rest of the site, it is just a nice, well organized and contemporary design, which is attractive to look at but not so busy as to be distracting. Overall, this is a really nice design and is certainly an improvement over the previous version (though the previous version certainly wasn’t bad). Well done Andrew!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd