david a mcclain (blog) | Home

A self-doubting designer gathers no moss

For the past couple of weeks I’ve been playing around with an idea for a new davidamcclain dot com design (instead of doing something useful with my time).

I started with this study in light grey and understatement. Based around an idea I had of simple squared logo. The menu links turn black on hover and display “what they are” in a little text box under the logo {as shown in figs. 1 and 2}.

I’m not a big fan of using about pages so on this site when a user hovers on the about link you get fig. 2. I made the menu using flash because it was easier so that I could get that little text box to light up with the explanation of what that menu link is about. And so I could have the links gradually change black and have the about box fade in. Then because I’m a masochist caring developer I re-built the whole thing in CSS to show automatically if the user didn’t have flash. To make the about box appear I put the image link inside a div with a style="display:none;" tag and a reference to a javascript code that on clicking on the about link simply changed the display parameter to block (instead of none) by using the document.getElementById(id).style.display='block';. To my surprise it worked perfectly! (I used the swfObject.js to embed the flash file which in my experience is a much better way than the standard embed elements. Remind me to talk about that another time.) It may have functioned correctly, but I wasn’t happy with it. Then one morning while stumbling towards the coffee machine I had an idea…

White on Red

{See fig. 3} This one was made completely in flash. The previews of my work expand over just the x axis (left to right) because I wanted to make it fit perfectly into a browser window with no scrollbars. (Yes I know there is a scrollbar visible in the screen shot, that’s because it was a work in progress smart alec.) The menu links turn red on hover (or rollOver I should say) similar to the grey menu, but this time by changing the layout I made things appear a lot more compact although the header section has roughly the same vertical height as before. I didn’t know what to do with the “about me” section so I just dumped it at the bottom hoping I would either come up with a better solution down the road, or think of something useful to put to the right of it.

I didn’t like this version, mainly because I couldn’t find a red I liked that wasn’t overbearing. Did you know that The Incredible Hulk was supposed to be red? Well when it came to printing the comic the artists couldn’t find a consistent enough red that they liked. But, they did find a consistent green that wasn’t so bad. Apparently they went for the green also because all the other comic book heroes of the day used red and they didn’t want the hulk to be just anther red comic book hero. Funnily enough, I didn’t think of trying green. Instead I went with the highly unoriginal…

White on Black

{See fig. 4} I took the opportunity with this revision to rethink how I was going to deliver the content to the user. I decided that I’d much rather present everything at once so a potential client could scroll down the page until something caught their eye. With the red/flash version, they could only see one item at a time and would have to do a lot of clicking and I feared I could easily lose someone with a short attention span. So what you can see here in fig. 4 is made with CSS (no flash at all anywhere) and as demonstrated with the download wallpapers link, the links turn red on hover. The screenshot shows just one item of work, but the real thing is fed via an xml file and has a practically infinite vertical scale. Funnily enough, I had all the workings of the xml-fed content from the non-flash version of my (as of today) current site because I was too lazy to spend much time updating two sites. If you look closely, I’ve swapped the mail link and other project links around. In the black version I think it’s a better placement for the mail link and it gives me room to add links to the other projects section.

But I didn’t like the black after a while for two reasons. One, I felt limited with the colours I could use with enough contrast to stand up against the black background. The second reason is hard to qualify but I just felt that the vast swathes of black looked “unprofessional” for want of a better word, or too www circa 1998. I don’t know what it was, it just didn’t feel right.

Back in Grey

In music, sometimes you write this great riff but try as you might you can’t make a song out of it. I learned long ago to hold onto these little orphans because someday I’d find them a home. As such, when it comes to design, I think the same thing is true. Using this as an excuse, I tried grey again. This time a much darker, near black, #333333 affair as this would open up quite a few more colour possibilities. Better, but not enough. See fig. 5. This time you’re looking at a photoshop wireframe based off the black photoshop wireframe I used as a reference in building the White on Black version.

Re-using old ideas

Obviously nothing was working for me but I figured I was working from a limited palette {red, white, black and a few tones in-between} and I needed to expand my thinking. If you’ve seen my site, no doubt you noticed it was bright pink. Well the skinny on that was simply I was working on a photo of Senate House and I was trying out lots of colours and the bright pink worked really well. I decided to use it for a website because I figured it would stand out against all the red, white, black and a few tones in-between sites out there. Successful in it’s intent or not, I still agreed with the logic so I gave it a try with this maddeningly pedestrian design.

White on Blue

One constant I discovered along the way was that dark colours felt overpowering when used in this design so I looked at some lighter colours and came across this blue #9bcff3 that I had found some time ago but never found a use for and fig. 6 (again, the download wallpapers link os active so you can see the hover style) is what I came up with and what I intend on moving forward with. As of today I’ve coded the main/portfolio page and created all it’s content. Coded the wallpaper page and all it’s content (using a similar system of xml-fed content. Now I have the shop section to wireframe and code (still haven’t decided on how the mechanics of the transactions are going to be handled - any recommendations are warmly welcomed). I also want to redesign this blog to fit in with this new blue design. I’m using WordPress and a theme called Hemingway at the moment. I need to read up on how to design your own WordPress themes and then have a stab at that.

Summary

So that’s the journey I’ve been on these past two weeks and where I am now. Baring any crisis of faith I’ll be get the new davidamcclain dot com up and running very soon. The design works great in firefox and safari on mac, I’ll do a little testing on the windows side soon. I’m currently debating whether to go live with no shop and the current blog design, or wait until everything is in place and go live across the board. If I can be patient enough, I’ll go for the latter.

Update

Just after I finished this draft I was over at Elliot Jay Stocks’ site and he posted about ripping out all the unnecessary do-dads in WordPress to give you a clean slate before starting on a new theme design. Although this is probably a bit like overkill for my uses, Jina Bolton commented on Sandbox which is like a skeleton theme to build upon with your own theme. Thanks Elliot, Jina and plaintext.org!