It has been an incredible week here at the Echo Enduring Blog. The traffic has really been through the roof, at least in terms of my traffic history. I’ve had two post that have proven highly popular on various social media and design voting sites! The first is an article called “5 Things to Consider Before Designing Your Next Website” and looks to be on pace for becoming the most popular post ever on this blog!
The other article is entitled “The One Design Tool You Absolutely Need to Use,” and talks about the need for designers to use their minds as their most important design tool. It hasn’t done quite as well yet, but it has climbed into the top 7 posts, which is still pretty darned good for just five days!
I also picked up an iPhone last week, which has been pretty sweet. Of course, I’ve been totally addicted to it ever since. What an amazing device, with so many cool apps! Unfortunately, that’s also probably part of the reason that I have been less productive than I would have liked. Over the long term, though, I think that the iPhone will actually help me become more productive overall!
Now on to this week’s Echoes!
Logo – Evernote
Obviously, I have been looking at all kinds of cool and different apps for my iPhone over the past few days, just to see what’s out there. One interesting app that I came across was this one called Evernote, which I am currently trying out. Regardless of what I decide about the app itself though, I absolutely love the logo, and am including it as this week’s feature logo.
Evernote
For those who may not have heard of Evernote before, it is a an online note saving service that uses the tagline “Remember Everything”. You can also use an iPhone app to add and access your notes (as well as other mobile apps for Blackberry and Android, and desktop apps for Windows and Mac). The logo does a great job of representing the product, calling on a common belief out of folklore.
Traditionally, elephants are believed to have remarkably memories. It has been said that an elephant never forgets anything. Now, I’m not sure as to why kind of empirical evidence there is to support (or disprove) this myth, but it has certainly provided a great deal of fuel for symbolism and representation. The Evernote logo calls very clearly upon this tradition, by using a stylized elephant as their primary mark, emphasizing the notion of helping users remember everything.
The other part of the logo that I absolutely love is the way that the elephant’s ear folds down, in a manner that is reminiscent of many “documents” in contemporary computer iconography. As such, the logo really does a great job of fusing the symbolic implications of the elephant with the fact that the primary purpose of the application itself is as a means of recording notes to help remember things!
All in all, I think this is a brilliant mark, which integrates really well into the standard iPhone style icon!
Art – CP9
Apparently, this week’s artwork is a piece of fan art relating to the manga The One Piece, or something to that effect. Like almost every other manga out there, I’ve never heard of this one, but from what I’ve read it seems to have a devoted cult following, and I suppose that this piece forms a part of all that. I just think it’s really cool.
CP9
For me, the principal strength of this one has to be the rendering what I understand to be the central character, at least of this illustration – the front-and-center behemoth who looks like a cross between the Thundercats’ Cheetara and the Incredible Hulk. The muscle definition is enough to make the character appear as a perfect specimen of the massive man-beast. I also really like the way the fur is rendered. It looks oddly soft, which is an interesting contrast against the general look of the character.
As for the other folks in the background – they certainly make an interesting group. Like the cheetah-hulk man, they are all exceptionally well rendered, but I have to say that I am not entirely sure what to think about the samurai giraffe mailman. He’s either completely ridiculous or absolutely terrifying. I can’t seem to decide which. Mister zipper-for-a-mouth is pretty darned creepy too.
I’m sure this all has a great deal more meaning if you are familiar with the context of the original manga. However, since I know nothing about that, I will simply have to appreciate this awesome painting on the basis of its exceptional composition, vivid imagination and high degree of energy!
Tutorial – How to Make a Professional Buddy Icon in Photoshop
This week’s tutorial comes from the relatively new design blog DesignInstruct. Seriously, the site only launched a few weeks ago. There are only a handful of articles up there so far, but the site is growing quickly. This particular tutorial will teach you how to make a glossy looking person icon (or “buddy” icon as the tutorial states) in Photoshop.
How to Make a Professional Buddy Icon in Photoshop
This is a fairly straightforward tutorial, so people of most skill levels will be able to follow along. The only exception might be a brand new beginner. The tutorial does make extensive use of the pen tool and layer styles, so if you don’t understand those things, it might be a bit difficult to follow along. Fortunately, the tutorial does come with unique screenshots showing the settings for each layer style, which will be hugely beneficial to someone just starting out.
For this reason, I think that this tutorial can be hugely valuable. It certainly is not a comprehensive analysis or collection of everything that can be done with layer styles, but working through the steps in this one will help a novice, or even an intermediate Photoshopper, to really get to know layer styles better, especially as they relate to creating clean, glossy effects.
This tutorial also helps add a bit of weight to something else that I have been thinking about lately. Traditionally, I’ve always considered Illustrator to be the application best suited to icon design. Recently, however, I’ve seen more and more icon work being done in Photoshop. The argument for this is actually quite compelling. While Illustrator’s graphics are generally more scalable, if you design your initial icon large enough in Photoshop (512 x 512 for example), you should never need to scale it down.
Considering that you can actually achieve more effects in Photoshop, I’m beginning to understand why more and more people are choosing it as their application of choice for icon design – and this tutorial is an excellent example of the high-quality product that can result from this decision.
Website – Academy
This week’s website is that of a design firm simply known as Academy. The site is an interesting and unique instance of how to creatively structure content in a manner that appears very open, and almost random, but which sticks very rigidly to a grid!
Academy
The screenshot is actually from their Projects page, which is a much better example of what we are talking about. I would, however, also like to address their home page, which does something interesting to the logo. On this first page, the logo is fragmented into a series of squares, and then scattered across the grid in an abstract and almost random manner. The pieces are large enough, however, to be recognizable as parts of the logo. This creates an interesting effect and take on site branding.
One thing that I though would have made this even cooler would have been a simple bit of JavaScript of jQuery that would have allowed the user to rearrange the pieces into the proper order (minigame!). I actually tried to do this, with no luck!
Now, if we flip over to the projects page, there is actually quite a bit more content, showcasing some of the work that Academy have done. All of the images are cropped and structured into square or square-based blocks, which are scattered down and across the page. Content snippets describing each project are also found in simple square blocks, interspersed between the various images.
As you scroll it becomes very obvious that all the elements are very strictly placed onto the grid. The proportions of the images and the content areas are all uniform, though occasionally by multiples. For instance, some images will be two squares long, or two squares deep. This provides interest and contrast in terms of size, while maintaining an incredible uniformity in terms of alignment.
The same thing can also be said of positioning. Rather than placing every single element in the same horizontal and relative vertical position on the page, the designers chose to play with space, placing images and content in different areas and using a number of empty blocks to build in white space and help prevent the site from becoming to dense. They also made some considerations for varying browser widths, with some content elements shifting as the window shrinks down.
Of course, all of this happens without every breaking the perfect alignment of the grid, which in my view makes this a superbly executed site design.
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!
