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!
excellent I like the way you call em echoes
that spartan logo is excellent – quite clever >
Cheers
Thanks Ben. The “Echoes” idea just kind of came to me a few months after I started this blog. I just kind of made sense :)
I love the Spartan logo! Very cool.
Thanks for the interesting post Matt. Found your blog thru your comment on Visual Swirl. Am looking forward to reading more! Keep it up.
I recently began a design and freelancing blog at NewfireCreative.net, and I’m trying to learn from other successful bloggers. if you have a second to check it out and give me any tips I’d appreciate it!