ThatDeadPixel.com design process

ThatDeadPixel.com design process

I love reading about other designers’ methods of planning and executing a piece of art or web site so I thought I would do the same for my process of building That Dead Pixel.

Planning in my head

I’m not going to lie, I wanted to start a blog a long time ago. But I’m an awful procrastinator. I would constantly daydream about the color scheme, layout, theme, article ideas, etc. Sometimes I would write ideas down, other times I would just try and remember and probably forgot most. In May of 2009 I had thought up a theme and purchased the that.com domain name. Finally progress!

The Theme

I’ve always been a fan of the Mexican Día de los Muertos (Day of the Dead) art style. I wanted to incorporate a little bit of that into my design. Once I had that idea in my head I started thinking of domain names for the site. I don’t know if you have ever had a dead pixel in your monitor before…I have. You can’t help but look at it sometimes. So this blog is like a dead pixel on your monitor, you just can’t help but look at it! Get it? Man I should be making more money with ideas like that.

Notes, sketches and wireframe

I’m not sure when I finally started sketching, but I believe it was sometime in October 2009 based on the dates on some of my early files. My first physical step in the design process is sketching my ideas and layouts on paper. Quick sketches are quicker than heading straight to the computer to mock sites up. I also make a lot of notes. I list everything I want to include on the pages so I make sure I can find a spot for it in the sketches and there are no surprises later on in the process. As I had been thinking about this blog for a long time, and it is a personal project, I had the majority of it planned in my head. For client work I create many more sketches and more detailed notes and sketches than I did for this project. It’s a necessity when you are under deadlines and don’t want to go over the hours billed. You can see a scan of one of my pages below. It is sloppy and unorganized, but that is pretty much the way I do it!

Notebook sketches

Bringing it to the computer with wireframe mockup

After I’m relatively happy with the direction of the sketches I move on to the computer for wireframe mockup. This is actually something I didn’t do when I first started designing for the web. I would jump from sketches to full-blown color mockup. After running into the problems inherit to this method and reading a bunch of great articles online about wireframe I was like, “Duh! should have been doing this the whole time!” I use black, white and gray colors to mockup and layout everything. Working in black and white allows me to focus on layout and content hierarchy without colors and graphics clouding my judgement. You can see a screenshot of one of my wireframe mockups below.

black and white wireframe

Bringing in color and graphics

I had been thinking about a color scheme for a while. I really like sites with an off-white/tan color so that was going to be a big part of the design. As you can see from the screenshots below I made quite a few changes as I progressed. Some things I imagined in my head didn’t look as good on-screen so I had to evolve it into something I was happy with.

Around this time I started working on the logo. I had an idea from the beginning to put the name within a square. The square would subtly represent a “pixel”. I also wanted it to be simple and for the typography to not clash with the typography on the rest of the site. I made a lot of changes to the logo as I worked on it. I’ll be completely honest, while I like how it ended up, I wonder if I should have put more time and effort into it. Sometimes I wonder if I should have made something a little more creative and memorable and not played it safe like I did. The good thing about a personal project is you can always go back and change it later. Anyone have any thoughts on the logo? Let me know in the comments.

In between the color mockup and the logo I worked on the background illustration. I knew what I wanted, but I wasn’t sure what style I wanted to do it yet. Did I want the lines to look hand drawn? Did I want it to have color and be bright and bold? I started creating it in Adobe Illustrator based off the small sketch I did. I would occasionally take the illustration and place it in the Photoshop mockup to see how it looked with everything else. I really started liking it with clean lines and threw the hand drawn lines idea out of the window. I also realized if I added color or used a darker color for the lines that is was a bit too distracting from the content. Eventually I settled on the current illustration and colors. I think it adds a bit of detail to an otherwise simple website without getting in the way. What do you guys think?

Creating background image in Adobe Illustrator
Photoshop mockup 1
Photoshop mockup 2

Slicing up images and marking up the html/css

This is probably my favorite part of the process, writing html and css. I use my favorite coding software for the Mac, CODA to accomplish this. I thought about using html5 and css3 to build the site, but I was excited to get it done without having to research all the new things. Plus I thought it would make a good article someday about transitioning over.

Editing html/css in CODA

One thing I notice that I do differently than other designers is that I will markup and style one section at a time before moving on to the next. For example, I might code and style the header completely before adding a single bit of code for the main content area or sidebar. I’m not sure why I do this, it just has always been my preference. I also check the site in multiple browsers frequently as I go. I like to catch inconsistencies as I go as it makes it easier for me to diagnose problems. For client work I pride myself on having nearly pixel perfect sites in the majority of all browsers, including IE6. Unfortunately site statistics have shown around 20% of people still use it! I would love to wipe these people from the planet, but since that isn’t reasonable, I continue to check my sites in IE6. With that being said, I think I checked this site in IE6 only one time during development. It probably looks like absolute crap. The only reason I have not tested and fixed any problems is because I know my audience won’t be using IE6. There is still a little voice nagging me to check and repair for IE6, so someday I might cave and work on it, but for now I’m confident you guys keep up to date with your browser tech.

I have been using Firefox for development for a while now. I LOVE firebug and the Developer’s Toolbar. Lately I have been getting tired of how slow Firefox is. I decided to give the Mac Google Chrome beta a try. I actually really like it even though its missing a lot of features in this version. The built in developer tools are ok and did the job when creating this site. About the only thing I missed from Firebug is the ability to hover over the web page to select different elements. It made it easier to view the properties of an element rather than just clicking through them in the html window of the Chrome developer tools. I’m going to continue using Chrome as my everyday browser, and will probably alternate between Chrome and Firefox while building a site.

Choosing a CMS and implementing it

For the client sites that need a CMS I prefer ExpressionEngine. I’m not a PHP guy, and I remember using it for the first time and having it really “click” with me. I loved that I could build my site templates separately and then just add the EE markup to make it work. For this site I did debate on using ExpressionEngine or the “blogging king” Wordpress. I realized EE could do what I wanted and I like the community and support so I went with it. I’m definitely a fan of Wordpress and other CMS’s out there. I think the Wordpress Control Panel is more user friendly and intuitive than EE’s CP. Sadly the new CP in the newly released ExpressionEngine 2.0 is not a huge improvement over the old version. I have also used Textpattern which i like. It is simple to use and has an extremely simple and easy to use CP. For a while it looked like support might be dying for it. But last I checked they released a new version and updated their website. Maybe it will get kickstarted again. My advice is to test them out and find which one works for you and the project you are working on.

Implementing my site into ExpressionEngine was a dream. I got most things working quickly, and anything I got stuck on was quickly answered in their forums.

Summary

The build up of the site was definitely the fun part. Once I forced myself to get started on this project I couldn’t stop working on it. My process was basically the same for this web project as a client project, but I did take a few liberties along the way. Even though I had no real deadline, its good to set one for yourself. I wanted this site up and running early January 2010 at the latest. I could have tweaked it forever, but sometimes you just have to let things go or you will never be happy with it. If you have any comments on my methods or want to share your own, leave a comment! I’m always looking for ways to improve my methods and speed up my workflow. Thanks for reading!

Did you enjoy this article? Share it!

11 Comments

Gravatar for Charles Roper 1 Charles Roper January 12, 2010

Interesting article. I like reading about other designers process.

I found it intriguing that you felt your sketches were sloppy and disorganised - I thought they looked great for sketches. I like to think of sketching as permission to be sloppy and disorganised. It’s just a rapid way of getting ideas down.

Did you use the free version of EE or the paid version?

Gravatar for Mike Lohrman 2 Mike Lohrman January 12, 2010

Thanks Charles!

I developed the site using the free EE 1.6.8 Core. When I was ready to go live I bought the personal license and upgraded to 2.0. I would have bought the freelancer license, but since I hosted with Engine Hosting I got a 20% discount on the personal license.

Gravatar for Sam Wilson 3 Sam Wilson January 12, 2010

First post on your site, this is a very beautiful and cozy design. I see you also are into EE and Flash like me. Cool! I’ll be keeping an eye on you mister.

Gravatar for Mike Lohrman 4 Mike Lohrman January 12, 2010

Sam your site blows me away every time I see it! If someone told me, “I’m going to make a site with a corn field and brown grass.”, I honestly would probably think it would look like crap. But the design ended up so great! A lot of great feelings come out of it.

Thanks for the comment!

Gravatar for Bleyder 5 Bleyder January 13, 2010

Really interesting reading. I like the way you have used typography in your site.

Gravatar for Matt 6 Matt January 15, 2010

A great write up; your site is beautiful!

Gravatar for lebisol 7 lebisol January 18, 2010

Hi Michael!

Thanks for sharing your workflow.

One thing I notice that I do differently than other designers is that I will markup and style one section at a time before moving on to the next.

I do the same thing out desire to perfect 1 section before moving on but I found that it does slow me down…especially when the “body” starts to fill up with spans etc. Sometime I even forget in what direction I am going and why in the world I have to float something. smile. Btw I hate the word “float” used to describe positioning…anyhow.

Have you considered css frameworks?

Personally I am not a big fan since I can not follow the imposed naming conventions etc. the changed them back to what does make sense; just seems as if I am now working “backwards” when comapred to ‘build header (css) -> move on’.

Many people rave about 960 grid…and flexible grids in general while I am still stuck in my own hacked up snips. smile

Thanks!

Gravatar for Mike Lohrman 8 Mike Lohrman January 18, 2010

@lebisol : I think one reason I like doing one section at a time is so that I’m not forced to ignore a crap load of un-styled content and markup. Plus it makes it easier to diagnose inconsistencies between browsers as I go, rather than after everything is done. For client sites I still test in IE6.

I do see the benefit of grid systems but I’ve only just read about them. The div naming never really appealed to me much. I think someday I will try it out though, can’t really judge it without trying it for a bit.

Thanks for the comment and thanks for inadvertently letting me know I need to style my comment quotes! smile

Gravatar for Nick Gascoigne 9 Nick Gascoigne January 19, 2010

Hey Mike, Nice design and EE build you have here.
I’m wondering, how did you get the MuseoSlab500 font working…I see it in the CSS but I don’t think I have it on my computer, yet I can see the font. What’s the trick?

Gravatar for Mike Lohrman 10 Mike Lohrman January 19, 2010

@Nick : I used the new CSS3 property @font-face to display the Museo font. With it you can host the font files on your server and when people go to your site it will download the fonts for display.

Each browser uses a different font format, so I used the “@font-face generator” at http://www.fontsquirrel.com/fontface/generator to convert my font file to the different accepted formats.

Only other thing you need to make sure of is that the license for the font you want to use will allow @font-face embedding. The free version of Museo allows it, but the other weights that cost money aren’t allowed.

Another option is to use http://www.typekit.com. All the fonts on their service allow embedding. I’ll probably use this service for the next site I’m working on.

Shoot me an email if you need more information and I would be glad to go into more detail!

Gravatar for Virtuousquare 11 Virtuousquare January 29, 2010

Really nice blog, and cool vecto illsutrations.
Good continuation.

Write a Comment

Commenting is not available in this channel entry.