How To Design a Website in One Hour
For most professional designers, time equals money. Creating the same quality work in less time means you can earn more money -- so there is a significant incentive to work efficiently.
In this tutorial I'm going to explain how it's possible to design an entire website in under an hour, and I'll show examples of the site along the entire process and at completion. You probably don't want to do this for any really important projects you're working on, but hopefully this exercise will give you a few tips to make your design process more efficient while still maintaining really high quality work.
Okay, let's take a look at how this works:
There are several principles that make it possible to create a website concept in one hour. These principles are mainly designed to keep your work as efficient as possible, and the goal is to allow you to sit down and design without stopping. Here are the big ones:
- Separate planning from designing
- Use pre-made resources for certain design elements (like icons)
- Collect all resources and plans BEFORE beginning the design
By following all of these we will create an environment that is free of distractions, interruptions, and even thinking. After the planning stage, all we have to do is sit down and design. The goal is to follow a process that will lead us directly to a finished website, and we are going to avoid any time-sucking potholes along the way.
0:00 -- Kill Distractions
The first step in the process is to get rid of any potential distractions. An interesting email can kill 5 minutes, a phone call could kill 30, a random youtube video could lead to an hour of distraction. So, let's close outlook or gmail, turn the phone on silent, and shut down any other websites that could potentially be distractions.
Once this is finished you should be in 'work mode' -- with nothing but a pad, pen, and Photoshop. Maybe a few explorer/finder windows for file management, and maybe a few websites for icons and other resource downloads. We'll finish with the latter resources quickly, though, and move into "photoshop-only" mode pretty soon.
0:05 -- Plan & Sketch
Before we can start finding resources or even sketching out the website we need to know what it is we're going to design. For this project, my goal is to create a modern-style blog index page. I'm going to go fairly minimal, with large images, and maybe a few frills here-and-there. This vision is going to drive most of the decisions made from here on out, and I will often refer to it when there's a need to choose between one method or another. What's your vision going to be?
Once you've got the overall vision for the website, it's time to start sketching. When I sketch a website I like to quickly jot down the layout and maybe a few tips or hints thrown in for good measure. Basically, we only have about 10 minutes for this step, so don't be too detailed -- just give it a rough overview. If you take a look at my sketch you'll see it isn't going to win any contests, but it will definitely help speed up the design process when I start working in Photoshop.
0:15 -- Collect All Materials
Perhaps the most important step of this process is to collect all of your materials in advance, before beginning the design process. Imagine opening up Photoshop and having every single element of the website ready to go -- boxes, buttons, fonts, etc -- it would be super-quick to just arrange those elements and create your design, right? This is our goal.
There are 5 or 6 key element groups that we need to have ready before starting the design. These groups are:
- Your vision and sketch (see step two)
- Fonts, including the logo font if you need it
- Icons for social media and/or navigation
- Any buttons you plan on using
- Content containers and sidebar boxes
- Other misc or specialized elements
You'll want to decide upon and gather as many of these elements as possible before you start designing. Once Photoshop is open and you start working, the design should essentially build itself. With some of these design elements it's better to find or buy a pre-made resource -- things like icons, fonts, and sometimes other buttons/ui elements. These pre-made resources can save you from a lot of work, and in many cases can even improve the end result (I know that personally I'm terrible at font design, so I always buy or use an existing font).
For the example website I'm working on I've decided to use the icons from Jon's monochrome vector icon set, available to MediaLoot members here
, the font "Museo Slab" which has parts that are available freely (see here
), I'm using the sketch I produced earlier (see step two), and I don't really need any specific boxes or ui elements as this is a modern-style design and will use very simple box elements.
Once you've collected all of the resources you plan on using for the site, it's time to move on to the rough concept.
0:25 -- Rough Concept
So up until this point we've been doing mostly planning -- and you may be wondering why I've spent 25 minutes out of the hour time limit not designing anything
. Don't worry, the answer is coming in this step. During the next 20 minutes of work we're going to take all of those sketches, plans, and resources we've gathered together and transform them into a mostly complete web design. Let's take this step by step:
Step 1: Place Your Guides
As you can see above, I've roughly positioned the guides to the sketch I made earlier. This should take only a few seconds, and if you decide to use a grid layout it will take even less.
Step 2: Make The Boxes
Since this is a fairly minimal design, the 'boxes' I'm using are really only dotted lines to separate the content areas -- in your design you might be using a colored background with light boxes and drop shadows, it really doesn't matter too much. I've also jumped ahead a bit and placed the logo and sidebar ads into the design as well.
Step 3: Create Dummy Content
A little lorem-ipsum goes a long way, and combine that with some images that are arranged according to my earlier sketch and this step practically creates the whole website. If you're following along with your own design, do your best to align your dummy content with the various elements of your sketch earlier. Don't spend too much time tweaking details yet, though.
Step 4: Icons & buttons
Time for buttons and icons. I've added the primary social media icons up at the top of the design, and I've also added a comment icon near the blog post title. I also created a 'read more' button that's a bit further down the page. Other than that, this design isn't very button heavy. For those of you who don't feel like designing your own buttons, you can always grab a pre-made pack such as this soft-satin web button set
At this point, the design is mostly put together. There are still a number of details left, but for now I'm officially moving on to the 'refine and polish' stage.
0:45 -- Refine & Polish
By this point you should have most
of the design finished. Ideally, you can use these last 15 minutes to make sure everything aligns nicely, add a few finishing styles, and make the design look really great.
Realistically, though, you probably still have some more stuff to design. When I reached this stage I had forgotten about the footer entirely, so that was the first thing that I created:
Oops, forgot the footer:
Following my modern and minimal style guidelines, I just repeated the puzzle image from the logo and created a few columns of text for navigation.
Some Final Touches:
After completing the footer I started to add a few finishing flourishes. One example of this is a little angle bracket I added to the post meta (author, category,etc...).
Your design might require entirely different finishing work, such as creating nice sharp lines or adding background images to various elements. As long as you are well prepared with your design elements and style guidelines, it should go very quickly.
1:00 -- Complete
That's it, times up!
Thankfully the 'one hour deadline' is only a self-imposed suggestion, so you actually can use as much time as you need to finish the site. If you are still new to design this will be an incredibly hard deadline to make, and even if you're experienced it still won't be easy. Hopefully, though, by following these steps you can speed up your process considerably, even if it does end up taking 2 or 3 hours to finish everything.
Here's the final design I created:
It certainly isn't the best design in the world, although I'm fairly happy with how it turned out. The cool part is it took very little time to create -- by contrast, writing this blog post took a lot more work than the design itself.
It's also a fairly minimal design, which does help contribute to the speed of creating it. That said, if you follow along with this general process you could easily add some complex styling or grunge just by swapping out the background, boxes, and a few buttons and icons. Might add another 15 minutes to the process if you were quick.
What's your take?
Have you ever created a 'speed design' like this before? How did it turn out?
Let us know what you think in the comments.
Members: Download the Files
MediaLoot members can download all of the source files for this article, including an internal page that I designed to match the index page you see here. If you're a member, download the modern & minimal website design here
If you're not yet a member, this could be a great reason to join