Preview of process

I have a background in visual design and communication- be it Architecture, Photography, Graphics, Art, whatever. I in no way consider myself an expert in any of these fields, but can do a fairly decent job when given time and reason to do so. Overall, I think it is a really fun expression of design sensibilities that allows me to stretch my thinking in new ways. I also have a staunchly set and opinionated aesthetic, often to my own detriment because I like things to look clean, constrained, well-designed and polished and apply that to nearly every aspect of my life. Thankfully, I have in recent years loosened my grip on my perfectionism of how things look in many areas of life. But occasionally I get a chance to dabble in the creative realm and put some serious thought and effort into designing something to have a fresh and new visual impact. I have done Architecture presentations to business cards, but almost always they have been for someone else, with someone else’s requirements and likes. Don’t get me wrong, I really enjoy problem solving and getting the chance to do some ‘work’. I really love branding. In some ways it is actually easier when there are set perimeters and an overall vision for what needs to be communicated. I find it far, far harder to do this for myself simply because it involves some serious introspection, self editing and visually expressing an identity. Too often, there are too many possibilities, too many directions and rabbit trails to go down. And I never, never use the first rendition of anything, so it takes refinement.

Lately it has been really enjoyable to rebrand, redefine and redesign a few different personal projects, from natalie g. photography’s portfolio website and forthcoming new blog, to Matt’s consulting business blog, and currently the redesign of this space. So I thought I would share and go through some of the processing I have been in.

Like any design project, I usually start with some research and precedent studies. What else is out there? What am I drawn to? What is pushing the envelope of current design trends? What to avoid? Some of those I linked to in a previous post. Then I jump into a sketchbook. Or, in recent days, random bits of paper I carry around the house and jot down ideas, then get lost as soon as I discard their necessity. Happens with grocery lists too and those usually have the week’s meal plan on the other side. Sketching allows me to get ideas out of my head fast, and in a quick array of variations. I also write out objectives and overall aesthetic goals or possible looks I want to achieve. Sketching is more of an exploration exercise, visual brainstorming if you will. In this case, I wrote down ideas about what I want the Matalie look to convey and communicate ABOUT us, which is really hard because then I have to whittle away and decide what to project ourselves as. Much of what I write and draw out doesn’t make it any further than the paper. At one point I had written down and sketched out an idea for illustrated characters of each of us, an idea which quickly died for two very obvious reasons (1. that is totally not me, and 2. it wouldn’t last very long because with the kids constantly growing and changing it would be outdated in a matter of months). Not to mention it is a bit corny and trendy.

Before I went any further, realized I had to define what Matalie was going to be about. This took some serious self-inspection of what this blog, g.design journal, both does well and is lacking in, and then what think I wanted Matalie to be. Surfacing to the top of these priorities is that this blog is about our life, communicated mostly through photographs as a catalog and dialogue of what we are up to. Additionally our life is about our values and how we express them through parenting, design, making, thinking, doing and processing (many of which have been categories on this blog, which I feel are becoming rather limiting and simultaneously too general). The quick tagline, “snapshots of life” stemmed from this, which effectively tells the reader immediately what I want to communicate the blog is about- about life, through images, as it is happening. Now that I had fleshed out some thoughts, I could apply those on the style of the logo and what values would be presented through it.

From there I jumped into Adobe Illustrator and started the process of experimenting with different fonts, graphics and looks while having fresh in my mind the ideas and priorities I had already identified for Matalie. I tried to push out into some new looks and break beyond the typical constraints I am prone too. Sometimes there there is a downside to creative freedom surrounding design – there can be such a thing as too many ideas! I consolidated the ideas I liked the best, the ones that were rising to the top and moved the ones that were bad enough to not show (definitely not even here) off the page. Then I got some constructive feedback from Matt, which allowed me to explain my thinking process on each of the designs. 

Below: 

PROCESS_web

Starting in the upper left: Since the name Matalie was one we were dubbed with in college (Matt + the latter part of Natalie) I wanted to accentuate the unity and affinity between the two of us. Moving right and down the right side: I liked the gapped vowels in this simple font logo. The gaps signify that the blog isn’t a whole picture of who we are, that while we seek to share our life and be known, there is much left out and edited from the process of blogging. It also signifies we are incomplete, imperfect, a work in progress and lacking in many areas. The diamond-shaped logo, originally developed in the middle, became a sort of abstracted camera flash, playing off of the ‘snapshots of life’ and speaks to the overlapping, intertwined nature of our family and our marriage. I combined it with the text to try to create a bit of a camera look, the flash on most classic cameras is in the upper left of the body, so it would be flashing out of the page in this case. Moving down below the yellow: This one is by far the corniest. It is a bit too literal with the guy and girl in love name combo thing. The font is sort of collegian, speaking to the fact we met and got married in college. The two blue banded ones below: Another expression of the gapped text logo as negatives in a field. I ended up further developing the one on the left, which pulled to the bottom, creates a bit of a dynamic tension. The wiggly folded band on the right variation plays off the ‘M’ and an enfolded, complementary intertwining of our lives. I further studied that in the other two ‘M’s’ in the middle of the page. On the bottom and left: The two tabs were exploring fonts in a tabbed field. The blog template I have chosen has tabbed navigation at the top, so I thought I could pull a logo into a larger tab that would be congruently fitting with the template (it wasn’t).

Now that I had a lot of ideas, it was time to start exploring them within the format of the template. Many of the above designs were ruled out simply because they didn’t fit. My first idea for the template was to add a torn notebook paper header, which played off the whole college idea. The first idea usually is not the best one to go with, at least that has been my experience and firm belief in both Architecture and other realms of design. Think of it more as getting out the preconceived ideas you are likely drawing from your memory of having seen somewhere else, then throw it out and start over. So next I created a mock-up of the general window of the template. I played with some ideas of color theory, using Color Schemer to garner combinations and a pallet to work from. I knew I wanted to incorporate Yellow, it has become a bit of a running theme for me. Through this, I used the logo combined with a graphical scheme to develop the stark text into a few secondary variations such as being pulled up into the top of the browser window, cutting off the tops of the letters and making the word more graphic and dynamic. Also, I added the hatched lines in the white letters to soften the starkness of the negative cutouts the letters create, make some visual interest and capture a Retro-modern-vintage cycling poster-feel I was loosely going for. I struggled with how to incorporate the flash graphic and had a few different variations for the tagline. I left the items separate for now in order to export them over into the Blog Template in Photoshop so I could work with them in the real thing.

My Export below:

matalielogoidea_web

Once I got the graphic imported into Photoshop, I needed to rescale it down to the appropriate size and resolution. But then I noticed how I liked it in tension both at the top and behind the body of the content area. So I scaled it to be touching both the top and the tabs, allowing the text logo to still read behind the navigation tabs. Then I added a transparent bar over the left portion, which adds another color, serves to hold my tagline and then played off the same cropping idea with the logo. I think it still needs some tweaking and refinement before it is ready to export onto the web, but I doubt I will so completely change my mind that I toss this whole idea out the window. I am really digging the fresh, clean look that remains minimal without being overly stark or plain. I think it speaks to what I want to invoke for the Matalie brand without going over the top or being too mundane. I would love some feedback and thoughts on what I have shared and more than anything, really excited to unveil this new work and all that I have done!

Sneak Peak below:

matalie_home_testheader

A few thoughts, notions and reflections I have had from this process, which I wanted to share and remind myself of:

Visual design should tell a story without wordy explanation
Design is an amazing thing which, when used well, achieves far more than just what we see- it impacts feelings that people get when they open the page. It makes the strongest statement right off the bat in regards to what you’re about (peaceful, excited, energized, professional, welcome). Show, don’t tell.

Don’t overlook that first impressions are based on appearance
I can’t tell you how many times I have opened up a page only to navigate away as quickly as possible, not even giving the content a chance because the site is either hideous or looks just like the 20 I just looked at. I didn’t want my site to be like that. When we look at something for the first time, we make a judgment about the site’s relative success, professionalism, and relevance before we read a single word or click on any links. Often even before we realize it, our judgment on whether or not we will stay and invest time looking is influenced and determined by what the blog looks like. What will the first impressions you want people to get? Do they know what the site is about immediately? Does the logo, graphics, header, tagline, title tags all strongly communicate what the site is about? Where are the viewer’s eyes drawn to (is it one important element or are things cluttered)? Make them want to stay.

A few more appearance things to think about:

Minimize visual clutter
Everything- (button, graphic, link, and flashy-moving animated gif thingies) that you add should have a clear purpose. Just because you can put it on there doesn’t mean you should. Figure out what you really want the focus to be on, and minimize the rest. Not everything has to be on the front page.

Unique appearances sets you apart from the standard
At the most basic level, break away from the preconceived, canned looks provided and take ownership of how the site is a reflection of you. This can be as easy as changing fonts, colors, and header all the way to purchasing a unique template or custom design. Take a look around what is out there. What’s good? What’s not? What’s trendy? What do you identify with? A note of warning- don’t go crazy here. Just because you can change it doesn’t mean you should. All I have to do is reference MySpace or GeoCities sites from 1994 and you instantly know what I am talking about. A little variation can go a long ways in making things unique. And don’t overlook consistency. Looking at any major brand and you will notice how the look sets the tone, then is held constant.

What do you want them to do when they get there?  
Beyond just how it looks, what is the purpose? One question to ask when looking at your blog’s front page is ‘what are your objectives?’ What do you want people to do when they arrive on the site for the first time? If you can prioritize what is important, then everything else you might have on your site becomes secondary. Remember, there is about 30 seconds of time that someone will give before moving on, so the visual impact needs to clearly communicate what you are about AND how they can respond. Do they look at your images? Do you want them to read what you wrote? Do you want them to get engaged and comment? Do you want them to get to know you elsewhere, like Twitter or Facebook? Once you’ve identified your objective for them you can integrate a predominant position for that call to action in a prime and logical location. 
Give them something to do.


Advertisements

~ by gdesign on April 24, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: