Most designers have a storm of ideas floating around their creative brains. Recently my freelance work has slowed down so it has given me the opportunity to work on a few personal projects that’s having been on the back burners for a while, stewing in my creative juices.
One of those personal projects just got pumped to the front of the range and it’s a photography website, based around a photoblog. There are a few reasons I wanted to start a new photoblog (had an old one, but the backend was crap) and I plan on turning this into more than just a photoblog, but a resource that fellow photography enthusiasts can come to learn as well as share some experiences. I have a few other creative minds that are going to be collaborating on this (including a few professional photographers), but I will inform you more on my idea behind this new website at a later date when it’s more matured.
(sorry for the terrible pictures, my SLR was stolen and my new 7D hasn’t shown up yet, so I resorted to the old point and shoot.)
Get your rough ideas down on paper!
So we have this idea in the old mind crockpot, first thing I like to do in my design process grab a pencil, pen or that half broken crayon that I never seem to throw away and start throwing down ideas. These ideas can be words, symbols, small sketches; really there are no rules here. Just let those creative ideas flow through your brain, down your hand and onto the paper, total this took me around 10 minutes.
In my case I wanted a clean and simple design that worked around one single large image. For instance one of my words that trickled down from the brain was B&W (black & white). I wanted to keep it B&W so the focus would remain on the single picture element. If you have studied design at all you realize that color draws the eye and in this case the only color I would ever want is in the photo being displayed.
I then started sketched a handful of quick thumbnails with elements I knew I wanted in my design. In this case I needed the main photo, very simple navigation, title of the picture, a link to view comments and photo exif data and finally the date of post.
Narrow that shit down!
After I had a handful of ideas lined up next to each other, I went through and circled elements I liked and crossed off elements I didn’t find appealing. I took those elements, drew bigger comps and now we are getting somewhere!
Finally I drew a large rough that had all my core ideas in it. As you can see these are not the god damn Mona Lisa of drawings. They are quick and to the point, they are only there for your brain to reference when you are taking your design into the computer.
Have you heard of the 960 grid system?
Now a quick few notes before I open Photoshop. There is a new “unspoken rule” in web design called the 960 grid system, brought to you by 960.gs. I won’t get into all the details about what 960 grid system is, you can read that here, but I will tell you that the 960 grid system is what I now base all of my web design from. It’s the unspoken standard for clean design, not to mention they have a shit load of templates that make the design process a whole lot easier. No more guessing about how wide to make a column or any of that shit.
I used the Photoshop template file I downloaded from their website to start from, so that’s why you will see all these columns and guide lines in my PSD. Here’s a screenshot of a blank template using the 12 column 960 grid.
Photoshop time!
I open up my 960.gs template and go to work. I drop one of my photos in the document and drag it to the appropriate size on the grid. Can you imagine how long I would have tweaked the image before the 960 grid system before I was happy? That’s where this grid saves your ass time; you can thank me later or at the bottom of the page. 
From here it’s pretty straight forward, I work from my sketches and bring those elements into my Photoshop mockup; tweaking where I feel necessary until I am happy with my design. Since this design is based around simplicity I am keeping the amount of elements to a minimum and since most of my work was done on paper I am able to get my design done in no time!
Finally, here is my almost-complete Photoshop mockup: (critique me in the comments; I am always down for some other’s ideas on my designs, good or bad)
As you can tell if you really scrutinize it’s not 100% complete, I need to finalize the identity design of this new website, but I will be posting more on this soon enough.
Remember stoners…
- Your brain is your best tool, not Photoshop.
- Get your ideas to paper quickly (it’s not the god damn Mona Lisa).
- Decide what you like, what you do not.
- Do you have a system? (960.gs)
- Reference your sketches to quickly produce in digital format.
Like the design, don’t like it? What are your thoughts on the 960 grid system? Leave comments and critiques below!
Yes, the 960 grid system is marvelous… I’ve used it myself several times. The creator is also a pretty cool guy.