How I Design and Develop a New Site
You certainly wouldn’t know it by looking around this blog (which is just a super simple/basic/boring premium theme I bought after about 4 minutes of looking around), but I’m actually a fairly competent designer.
No, seriously.
It is after all what I started out doing in the first place back in 1997 just for fun and then for a handful of paying clients over the next couple of years. It’s really what lead me to doing everything else I do these days in the first place.
In fact, stuff I’ve designed has actually been mentioned on a couple of big design blogs (smashingmagazine.com, for example), which is always pretty cool.
And in all this time, I can honestly say that the design and development process really hasn’t changed much for me at all. It’s still the same 5 steps.
What 5 steps? These 5 steps:
Step 1: Think.
Before I start actually doing anything, the very first thing I do it sit and think. What am I looking to do? What do I want this site to be? What is its goal? What is my goal with it? Who is it for? What is it for? What will it have? What won’t it have? What would make it fucking amazing? What would make it suck?
This will usually lead to me making a sloppy unorganized list of things that I will need to keep in mind and look back at throughout this entire design process.
This is a very underrated step in the creation of a new site in my opinion. It GREATLY helps ensure that I won’t get deep into the design phase only to stop and realize “oh shit, I needed to have this over here or this like this or this can’t be like that.”
This step allows the design process to run smoothly in one direction without me having to stop and go back and fix things.
Not only is it a potential time/work saver, but it makes it really hard for things to get left out or forgotten along the way.
Step 2: Lay it out with pencil and paper.
This is really where the actual design work begins. I always wonder if this step started because I used to draw site designs in class rather than take notes or pay attention in high school. If I didn’t do that, would the design process still begin on paper for me?
Who knows. All I do know is that this is how I kick this shit off… good old pencil and paper.
What I do here is literally draw the site. I’ll draw headers and footers and sidebars and logos and everything else I plan for the site to have. I’ll make myself little notes about things like widths and colors and fonts. I might write “put a border here” or “this should have a gradient background.”
If I plan for the site to have an email list, I’ll draw the sign-up form into the design in the spot I think will be ideal. I’ll even draw in stuff like Retweet buttons and RSS icons.
This of course is all just basic layout related stuff. If all I’m creating here is something simple like a blog, that might be all I need to do. But lots of times I’m creating a bit more than just a simple blog. In those cases, I’ll take it way further and draw out stuff like user interfaces and conversion pages.
I’ll usually go through quite a few pieces of paper and draw a few different versions of everything.
Basically, whatever it is I’m looking to create here with this new site, I first draw out every single aspect of it that I can envision it containing.
Now that I typed all of that, I just realized I could have summed this entire step up with the word “blueprint.”
I’m a dumbass.
Even still, that’s what this step ends up leaving me with… a blueprint of what the site will be.
Step 3: Create a mockup with Photoshop.
Once I have the site pretty well mapped/planned out on paper, it’s time to bring it to life off paper. How?
With Photoshop.
I’ll open a new file the height/width the site will be, and then put everything I sketched out on paper into place. I’ll essentially transfer that “blueprint” of mine from paper to computer, only it won’t just be a blueprint anymore. This is when I actually make it look like what the site will look like.
Colors, headers, footers, sidebars, logos, backgrounds, images, gradients, shadows, fonts, text, buttons, etc. etc. etc. go into place in the way they should ACTUALLY look. On paper I might have drawn a little box somewhere with some instructions in it, now I actually follow those instructions and make that little box into what it’s supposed to be.
By the end of this step, just about every image the site will need (including a logo) will be made, the color scheme will be picked, and the entire design of the site will now exist in the form of a PSD file (which is Photoshop’s image file format in case that’s not obvious enough).
Step 4: Build it with code.
Once the full design of the site has been created with Photoshop, it’s time to break it all down and build it back up with actual code.
There isn’t much designing or creativity in this step. This is really just me taking the mockup image of my site that I made in Photoshop and turning it into an actual website. Meaning, this is when all of the HTML, CSS, PHP, JavaScript and whatever else the site will need gets written.
It’s the least fun step of them all, for sure. Although, seeing this thing gradually become a website is kind of exciting. Just 1 more important step to go.
Step 5: Make an infinite number of changes that make everything WAY better than I ever imagined it being.
This is really where all the magic happens for me. This is where everything I have originally thought up, planned for, mapped out, sketched and Photoshopped becomes a little less like exactly what the site will be, and a little more like my guide to exactly what the site should be.
What I mean is, this is when I basically change, test, move, try, imagine, and generally fuck with EVERYTHING. Really, this is when the obsessive perfectionist in me comes out and just goes nuts.
This of course can be both a good thing and a bad thing. For me, it’s always a good thing because it works. Time and time again, this is really when I make shit happen design-wise.
However, it’s bad because this could go on forever. There is really never a point in the design process where I stop and think “this is it, this is perfect.” Instead, I’ll just keep thinking “this is better” or “I know I could still improve this” or “this is almost perfect” no matter how perfect it actually ends up getting.
As you can imagine, this could potentially suck up a ton of time that could have been better spent on things more important to the overall success of this site.
Don’t get me wrong, the design process is important (sometimes even extremely important), it’s just that spending days/weeks trying to bring the design from “amazingly super duper perfect” to “slightly more amazingly super duper perfect” is rarely ever important or necessary, and is almost always a waste of time.
Over the years I’ve sort of trained myself to where I can usually snap myself out of it when I reach this point and feel this start happening. But man, it ain’t always easy. The important thing for me though is that by the time I’ve reached this point, I always have something really special to show for it.
Thanks crazy-obsessive-perfectionist-version-of-me. You da man.
Sometimes what I end up with is just a much better version of everything I originally planned for the site to be, and sometimes that original blueprint of mine is only barely noticeable anymore.
Whatever it ends up being though, it’s perfect, and there is never a doubt in my mind that it required every second of every single one of these steps for me to get it that way.
This time was no different. The design = done.
I admire your capability for design. As much as I want to, I don’t have the talent for design so I used Wordpress instead. Not all have talent like yours.
I HAVE been thinking of how to start up u inspired me with ur step by step on site design well done