It’s almost a month to the day since I launched my redesign, and I figure it’s about time that I open up in regards to how this all came together, and later, how everything works. My previous design was online for nearly 3 years, and shortly after launch, I wrote a couple articles sharing some of the CSS techniques I had used, along with some WordPress snippets. I’m planning to do that again, but first I’d like to walk through the initial planning stages. From wireframing, through months of design mocks.

Coming Up With Something Different

Since I had been sporting the same layout and design for so long, I wanted to really switch things up and go drastically different. At the same time, I wanted to maintain the image that people have come to know me for. My initial goals were…

  • Anything but black. Preferably dark text on light background. Stick with pink as main accent colour.
  • No visual horizontal division. Attempt vertical division.
  • Come up with new section heading/sub-heading treatment and/or placement.

Redesign '08 - Wireframe 1

I managed to come up with a pretty unique layout with my first wireframe. The idea with the ideas, was that they would be mini-tabs along the left margin. Clicking them would push the entire site to the right, revealing a tray that contains all of the headings and descriptive text. While I thought this was a great concept and would raise some eyebrows, I knew it would be a nightmare for older and lower spec machines. Not to mention, some people might not even notice them and wonder what all of the content actually was. In short, hiding the headings by default wasn’t the greatest idea.

My second wireframe corrected this potential issue by dumping the headings in a gutter off to the right. Having them as part of the main container meant I had less space for content, so some rearranging took place.

Doing Away With Black

I assume 2 things come to mind when people think of my old design – grunge and black. All along, my intentions were to stick with the grunge theme, but I definitely wanted to move away from dark colours primarily. I started working with beige and light browns, and after much tinkering with adjustment layers, settled on a colour scheme.

Redesign '08 - Mock 1

For the longest time, I couldn’t figure out what to do with the header and footer. I wanted to have the headings separated from the content area visually, but that gutter would be made wider for the article layout where it would be re-purposed as the sidebar. I had tried stretching the header and footer from edge-to-edge, but didn’t like the “T” shape it produced. After much fiddling, I decided to restrict the entire site in a container.

Back to Freelance

You may have noticed that there was no place for my design work on the homepage in the previous mocks. Up until March of this year, I had been working for a design studio and wasn’t able for hire. When I made my return to the freelance world, I revisited the homepage and put in a prominent space to promote my work.

Redesign '08 - Mock 3

It wasn’t long before I overhauled the design section to make it even more prominent. At the same time, I came up with the idea of separating blog and design related items in the main navigation. With the exception of the header, I was really happy with how things had come together and considered the homepage complete.

So Much For Change

Over the past year or so, I’ve taken a liking to brown. I own some brown clothes, and Deanna picked up this great set of luggage that’s brown with white and pink lining. I absolutely loved that combination and decided to give it a go. I posted a side-by-side comparison on Flickr to get some perspective from my peers in the field, and see which people were favouring. Some great points were raised and I decided to go with the brown.

Last Minute Decisions

One thing I was never crazy about was the length of the homepage. As much as I liked giving my readers a place on the homepage (recent comments), it was something I could do without. At the same time, I came up with idea of the thought bubble for my latest Twitter update, so that was one less thing adding length to the page. As I mentioned before, I wasn’t stoked on the header – primarily the nav and the “logo”. So I took another stab at it and came up with something much better.

The last thing to change before I started building the site out was the primary colours for each section. I had kept the colours from my previous design, but they were just too stark against the brown.

And that’s it. The final mock was locked down and I moved onto the XHTML/CSS phase.

30 Comments

That’s a great opening article. Never thought you had so many doubts about how the design should look. It’s also interesting to be able to see the whole designing process.

Looking forward to next posts about the redesign which (as we all know) kicks ass.

I must admit, that the darker scheme looks way better – glad you’ve decided to use it.

Oh!

I’m from second design present as a placeholder. Yay! ๐Ÿ˜›

I was going to put placeholders in for the recent comments, but thought some of you might get a kick out of seeing yourselves there. Seems as though I was right!

As always, love the new layout. I’m a new commenter here – have been lurking for quite a bit. I always enjoy your entries.

Great write-up, Matt!

It’s very interesting and inspiring too, to read all the thinking behind a design.

I think that this color scheme is a winner. It isn’t banal at all, plus it’s elegant while maintaining that grunge feeling you’ve come to master through your design career.

Love the header too, while I also liked the logo that was on the mockups before the final one.

Anyway, great work, nice article and keep ’em coiming!

Thanks Andre. I may still try and work my name into the header at some point. I know it should be there, I’ve just had a hell of a time coming up with something I like. Maybe I should outsource?

Yeah, well, the thing is that the logo would cover your face, as things are displayed right now.

My two cents (feel free to say "fuck you", if you don’t like it, hehe): perhaps a good choice would be to display only three images from your Flickr feed, and then shift the Twitter bubble to the right in order to gain some space. Three or five won’t make much difference, to me.

Doing this will also offer a nice vertical alignment of the three Flickr images, with the two ads columns below (of course, with some margin tweaking).

It’s true that the space gained wouldn’t be that much, but it could be a start ๐Ÿ˜‰

I’m sure you will nail it down, eventually.

It’s cool to see how it all comes together. I really like the logo you had on the 1st designs but I also really like the thought bubble lol.

Great to see how you work matt. Really nice to see that I’m in the mockup haha. Do you think people should make more wireframes? I really need to get into that.

I think wireframes are totally under valued. Taking the time to plan things out in a basic form can save you tons of time and energy when it comes to the design phase. I often use the wireframe text layers for the mock as well.

Cool man,

I’m really interested in how you actually made the grunge thing.

my site still looks like a freaking wireframe. It’s a rutt i’m desperately trying to get out of.

I wasn’t actually planning to go into any more detail on the design front. It’s all about brushes, though. There’s an absolute ton of free Photoshop brush sets that cater to the grunge style. I also use a lot of stock photos of surfaces. Concrete and cracked painted surfaces work really well.

Awesome to see the whole design process.. I gotta ask though, Do you actually photoshop all your albums and Games, or do you find those online?

If you do photoshop the Albums, you might want to look into some of the lastfm plugins that can display art.

The album and game covers are from Delicious Library. I’ve used Last.fm before, but I prefer to have control over the content that’s displayed, a lot of the albums I listen to are missing art, and I don’t want them to look like CDs. I don’t remember the last time I actually listened to a CD.

Ahh ok.. I like to feed from my lastfm favorites, and then I can just ‘favorite’ a song if I want it to show on my site. And then you can use CSS to overlay some style on the art.. (make it into a CD case or just a gradient like you have)

Just a suggestion. Love the re-design though, Awesome Job!

Using your favourites is a good idea. I hadn’t thought of that. Although, last time I really looked into it, I don’t believe they had a feed (or any other way) to tie into much aside from your recent plays. Might re-visit this down the road.

Yeah, I was wondering about this too?…

Thanks for the article, it was a great read.

I think I also need to redesign my blog sometime in the near future, It’s great to get some ideas from your workflow, really helps out.

Have a great weekend man…

That’s probably the most frequently asked question I receive in my inbox. I do have an FAQ page where it’s addressed, but I only link to it from my contact page.

i love the new design and seeing what went into it is great.

thanks.

can u do a post w/ quick run through on going from PH to html/css then to wp template. cuz i get up to the html css vers my way. then freak out when i try make it into a wp template and end up hacking another theme to look how i wanted it. but this seems like a long way to go about it. (hope that made sense…)

:S

ta

Great write up, always really interesting to see how different people ply their trade. Wireframing is invaluable and a great first step when going through visuals with clients.

I personally prefer the lighter color scheme you’re showing in the jpgs, but hey, they do say brown is the new black ๐Ÿ™‚

Matt,

Always like the header treatments on your

designs. Only thing I don’t dig are the drop shadows . I still favor the previous design ๐Ÿ™‚ but this is a really Nice redesign overall with a lot of attention to the little details.

Matt Brett Redesign รƒโ€šร‚ยท Top Best WordPress Blog Designs, Free Themes, Plugins, News Themes, Templates, Skins, Adsense Tips, Expression Engine, Symphony รƒโ€šร‚ยท SilentBits.com says:

[…] i am here… in first post after brake i would like to show you new Matt Brett redesign website. If you familiar with that portal i am sure you already see new design but for those who […]

As Aimme, I am a new commenter here but not a new visitor and i’m very impressed by the redesign ! too much details everywhere ! i keep browsing your categories and archives just to see the theme at work ๐Ÿ™‚

I m’ wondering how you deal with the thumbnails for your cd and gaming collection ? are they handmade or php-generated ? they look great and well integrated, i’m jealous !

You’re wireframe’s looks really good especially the 2nd version, nice job!

Although I do really like your wireframe’s but if I’m going to be a lil’ critic then its already to designed. (I would mind it if I had to make a design based on your wireframe, but since you might do both jobs I don’t think that will be a problem for you)

The only thing that might work against you is that your wireframe are already a concept design or more a fist stage moodboard, if a customer wants another layout then you had in mind then you need to work out both things again.

I.M.O. a wireframe should be plain and basic where you still can go different ways with the design.

Comments are automatically closed on articles over 5 years old.