Happy Thanksgiving! At least if you live in Canada, like me! I’m stealing a few minutes here and there to write this post on this weekend in which I will be eating three different turkey dinners with friends and family. That’s a lot of roasted bird, and I expect much fullness and sleepiness to ensue.
On the design front, I had a meeting last week about a new project, which looks like it’s going to be really, really great. I also released a new freebie this week – the Abstract Blobs pattern – and wrote a tutorial outlining how to use the pattern (or any other seamless vector pattern) to create a really cool wallpaper effect in Photoshop.
I’ve also made a lot of progress on a current website project, which I hope to get to a certain point this week. After that, I will probably be taking a break from that, while working on some roughs for a couple of other websites, and a cool little project on which I am partnering with Jon over at Spyre Studios. We hope to have that one out soon, and we’re both really excited about it!
So that’s the week in review, now let’s get on to this week’s Echoes!
Logo – Red Wave
Our logo this week comes from Just Creative Design’s own Jacob Cass. Jacob is a renowned logo designer, prolific blogger and one of my own design heroes. Recently, he posted an article outlining some of his most recent projects, and it was in that article that I came across this awesome logo.
Red Wave Systems by Jacob Cass
In one previous article, Jacob wrote that, when designing a logo, he tries “to convey a deeper meaning or some sort of visual puzzle into the logo” (When is a logo too simple?). He cites the FedEx logo as an example, with its subtle and often overlooked arrow, created by the interplay of the letters (if you don’t know what I’m talking about, go read Jacob’s article).
I think that this logo is doing something very similar, though perhaps just a bit more obvious. I’m sure I don’t have to point it out the shape of the wave, created between the w and the a in the type. It’s a really simple effect, but it creates a real sense of visual interest. Combine it with the not-so-subtle red colouring of the word “red”, and we have a very effective and very interesting logo!
What I really love about this, though, is the way that the design works itself into the typography of the logo itself. Clearly, Jacob spent time examining the words and the letters, studying the interplay of the letters, probably in several different fonts. Through this process, I imagine that the natural curve of the a reminded him of a wave. With a bit of work, he was able to take advantage of that natural curve to create the cool and interesting shape of the wave. It’s a really great example of how, sometimes, you don’t even need to look beyond the typography to create an effective logo.
Art – Dragon Mage
I’ve already mentioned that, for me, it’s the Thanksgiving, a weekend so-often associated with over-indulgence. Now I’m no advocate of gluttony, but I am going to indulge myself with this week’s artwork and bring you a totally awesome and good old fashioned fantasy image, complete with a beautiful elf-like wizardress and a giant hulking dragon!
Dragon Mage by Kerem Beyit
Yes folks, this is fantasy archetype at it’s finest, with everything you need to get every basement dwelling, Wizards of the Coast worshiping fan boy salivating like a puppy. I would like to come to this image from a slightly different angle, though. Yes, I love elves and dragons and all that jazz. I even played my fair share of Wizards of the Coast games when I was a teenager. But I try to see something more in art like this. I am drawn to the majesty of it, the strength of the dragon, the beauty of the elf-woman, all of which is but a hyperbolic reflection of our own world.
Notice the reversal of the Eden story, too. In the book of Genesis, it is the serpent who tricks the woman into eating from the fruit of the Tree of the Knowledge of Good and Evil. It is the serpent, then who causes the downfall of humanity and their banishment from the Garden. Here, however, the roles have been reversed. The woman – beautiful and idealized, even beyond humanity and into the realm of the Fey – is clearly in control. The dragon – large and strong, but really nothing more than an exaggerated serpent – appears almost domestic, and certainly bound to the woman’s will.
Regardless of what you believe (as a Christian, I do believe in the Garden story), the reversal has startling connotations of humanity’s effort to pulls itself up out of the darkness, and even more so of women’s fight for equality. Now, while I am certainly not trying to suggest that the artist had any of these intentions in mind when painting the image, it is interesting to see the way that even fantasy art – often relegated, like it’s literary cousin, to the pulpish realm of the popular – can have surprising meaning when you look at it a bit closer.
But enough of the intellectual stuff for now – does anyone else think that she must be burning her butt sitting on that stone with all that lava flowing around her?
Tutorial – Create a Clean Modern Website Design in Photoshop
Today’s website is about creating a website design completely in Photoshop. Generally speaking, this is the way that I like to work, and Chris Spooner provides a really simple tutorial for how to create a basic layout in Photoshop. If you’ve never tackled designing like this, this would be a great place to start!
Create a Clean Modern Website Design in Photoshop
The tutorial will take you through basic pencil and paper sketching, show you a basic wire frame mock up and then focus primarily on how to render the various required elements in Photoshop. It also shows you how to make great use out of the 960 grid system, which I have written about in a previous post.
But the question may be asked: why would I want to design a website in Photoshop? Isn’t that what Dreamweaver is for! Not so! At least not in my view. Maybe other people see it differently, but for me there are three steps to creating a website. They are somewhat interwoven, but still distinct. The first is design. Design involves creating the structure and the visual look of the site. How many columns? What colours and graphical elements? These kinds of questions are answered in the design stage.
Development (or coding) follows design, and involves cutting up the design elements into images and then coding the HTML (or XHTML), CSS, JavaScript and everything else in order to reproduce the design within a web browser.
These two stages are both important, and both distinct. Personally, I like to use Photoshop for the initial design stage (supported with a bit of Illustrator from time to time). Once I have my design, then I switch over to Dreamweaver and start doing my coding. Invariably, some things change along the way, so I am frequently hoping back and forth between applications, but for the most part, keeping the design and development separated from each other works very well for me.
That’s part of the reason that I think that this tutorial, and dozens of others just like it, are incredibly valuable. So go have a read!
Oh and the third part of website design? Content. The greatest design and development in the world are completely useless if the site doesn’t have some really great content!
Website – New Abdezzeuo Design
I am changing things up a little bit for his week’s website design. Instead of featuring just a cool website, I am featuring a cool re-design. Recently, the popular design blog, Abduzeedo, went through a rather significant overhaul, and the new look is really slick.
Abduzeedo Redesign
There are a few really cool things going on here. First, the basic design works really well. The old design had a really strong “space” theme in the header (which is still present at the footer of the new design), probably inspired by the “abducted by design” tag line, which the site has retained. The new design is somewhat sleeker, using solid greys and blacks together with some subtle gradients to great effect.
I also really dig the main page, which has its articles listed very nicely, with large bold images for each. I also really like the way that the headlines are cut into these images. The other cool thing about the main page is right at the top, to the right of the “What’s New” heading. You will see two subtle icons. Clicking these actually changes the way the page displays. By default, the pages are listed with a wider heading, title, post time and description.
However, by clicking the icon with the four small boxes, you can actually reduce each entry to a single square thumbnail, overlayed with the title and post date. This is a cool little usability feature that you to choose how you want the content displayed!
Another nifty little function on this new site is the way it allows you to share contnet. Once the page is fully loaded (it only becomes avaialble then, probably due to some jQuery plugin), try dragging your mouse over any of the images in the post (including the header image). You should see a small text box pop up, saying “drag to share”. Click and drag the image and four icons will appear at the top of your screen – for Facebook, Twitter, Email and Instant Messaging – to open a new window and share the page through the chosen medium. It’s a cool little function which seems to work really well and should definitely help encourge disemmination across social media!
Well that’s it for this week’s Echoes. Which ones were your favoirtes? 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!
Great post Matt, i just love it! thanks for sharing.
Thank you for the write up Matt – a great analysis of the logo. You were correct regarding looking through fonts, after I found the wave in the letter ‘a’, it look a lot of analysis of many different fonts to find the most natural curve – Myriad Pro was the final font of choice!