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:
General Principles
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 
Category: Tutorials
Download ALL of Our Premium Resources
Signup for a MediaLoot subscription today and get tons of premium resources to use commercially and even in web apps. At subscriptions starting at just $9, you can't lose...
Comments
Nice one! That’s pretty impressive. But be honest, did you REALLY make that in 60 minutes?!
I like this tutorial really looks very cool to me .. simple yet effective .. thanks for the good post
Actually, All you did was design an image. Good luck actually designing and coding a site in an hour.
Peter, I don’t really think that was the point. ‘Designing’ a site in one hour was exactly what he did.
Nice tutorial, but in my opinion good design takes more than an hour and definately more than a day even with pre-made resources. This is the type of stuff that makes it difficult for clients to understand why a proper job isn’t rushed or cheap.
If our clients see this tutorial they’ll be wondering why did their project took one week or more to design They’ll all want these “1h” designs so they could pay us less. Not good.
I bet that every web designer could make a mockup of one web page in 1 hour but that should only be done for practice and not in real-life situations.
Hey guys, thanks for commenting!
@Jack—Well, I designed most of it in an hour
I actually created an ‘inside’ page for MediaLoot members too, so that took a bit longer, and then I had to clean up the layers and name everything nicely before I uploaded the final resource, which also took a bit longer. Just creating the design above though, it was pretty close…
@Peter—Coding would definitely take a lot longer than an hour, that’s for sure. As I mentioned though, this was really only for the design portion of the site.
@Lisa—That’s a very interesting point, and I completely agree that really good design usually takes a a lot longer than this. In terms of explaining to clients, try this line:
“I might be able to do that for you in an hour, but it wouldn’t have any customization and I’d have to charge extra for every revision and change we make. I’d also have to charge hourly for our planning and strategy meetings. Plus, it would still be a very simple site.”
That usually helps me explain away “cheap” design. Pay less, get less—it’s that simple
Thanks guys!
Nice one Mason, thanks for the clarification. One final point - any chance of adding Direct Replies to comments on MediaLoot?
@Chris—Check out my point above. I have this conversation with clients all the time, you just have to explain how much they’re losing by going with a quick and dirty design. No customization, no revisions, no time for planning or strategy.
Usually they choose the right thing.
@Jack—I was just wishing for that feature right now, I’ll start looking into how hard it would be to add
Great desing. Pretty sweet read:)
Is it really a ‘design’?! Looks like blank Wordpress template or a wireframe of design. I don’t think 1 hour is enough to do anything decent and I think this post illustrates exactly that.
Thanks for the clarification Mason, but if a client came to me for a *quick and dirty* job then they might as well purchase a premade template and just slap their content in it. - which is easy enough to do. There would be absolutely need no need for my services as a designer/marketing strategist…. I agree with Jacob that for me it’s a base template or wireframe from which to work with for something more substantive - although I suppose you could market it as a *minimalist design* for someone who doesn’t want very much.
Pretty plain and boring design, nothing really new here. I think this proves proper design takes longer than 1hour. But interesting read nonetheless. Good work.
1hr… ok.
Still, this is not a “web-site” design.
I believe you just made a custom, simple WP blog Template.
Funny no one feels that web-site != Blog
btw :
“There are 5 or 6 key element groups that we need to have ready before ” : how come fonts, buttons and all other elements ( logo for instance that might be requested) are NOT part of the design ?
For a one-hour design, something that will obviously lack the intricacies of a designing something planned out for days or weeks, this is very nice. People here need to take it for what it is, a harmless experiment to show what someone can come up with, mostly for fun, in a very short time.
@Lisa—Yea, I agree totally. I think this could be a good starting process for a more customized site or for something basic. I’m actually considering using it as is though, as I do like very minimal websites.
@David—It is pretty plain, I’ll give you that, but it’s still fun to design in an hour
Think of the things you could do from here to make it more interesting, if you wanted?
@Rohnn—Isn’t a WP template a website? I would argue that creating a blog design is the same as most other websites. Maybe less complicated than some, but still more complicated than others.
@TheAl—Bingo. This is definitely a basic design, but by using some of these methods you can even create more advanced stuff in a lot less time. It’s a worthwhile exercise I think.
Thanks for all the feedback everyone:-)
Cheers,
- Mason
Mason,
Sure every blog is a website, still not every site is a blog !
See my point ? Here you are more talking about a blog template in 1hr.
( Not critizising the quality of the post. )
Thanks for this!
Unlike some of the other comments I think the final result looks sweet. Minimal layouts are a lot harder than they look!
I’m with Jack, though, I bet this took you longer than an hour
great tutorial.
thank you very much.
I actually find the design Mason did pretty cool - maybe it’s just me being a hardcore fan of minimalism and clean/white background designs but I already see how I can use this template as a starting point and use it for a live site
I don’t understand all of the negative comments. I read this article (not just look at design) and I feel like I got a lot of good advice even though I have 12 years of experience with designing and building sites (I, like a lot of you, am self taught so I depend on good articles.. thx Mason).
I personally think his design is good and the idea is to HELP us learn more efficient design practices… not teach us how to actually design.
Also, for all of you who complained about your clients seeing this… I think designers tend to think “snazz” is king when, really, content is king and a simplistic design is what a lot of people want.
Just because you CAN use opacity etc. or overcomplicated design techniques, don’t mean you should. Besides, the only value you have to your client is how they perceive you and your biz… I charge way more than most of my competitors (even though many have better credentials) and I get it without any hassles while they often get nit-picked to death over every detail because they do not sell THEMSELVES well.
There is no real “set price” for design work, only perceived benefit… If they have to ask why you take longer, then they may not “see” or perceive the benefit, which means you may not be doing something right.
Why does McDonalds pay millions for their sites? Because the companies they use have proven track records and the risk is low. It’s not because the designers are graphic wizards that’s for sure! Think about it.
@kevin if you don’t undestand the negative comments then you aren’t really designing your websites properly. A website design usually has to incorporate a clients branding. If this post was ‘how to design a website template In an hour then fine, but, if web designers just knock out minimal monochromatic designs like this in an hour then web design is truely dead. As web designers we need to be constantly pushing ourselves to achieve higher quality for our clients or else we fall into the tooler category. Clients shouldn’t be sold a design it should sell itself.
Not a designer but someone who truly enjoys a minimalist design. Knowing the fact that something like this can be designed in an hour itself is impressive, to say the least.
I would love to criticize here and point out a lot of things but again I am by no means a designer. If someone gave this design to me and said it took couple hours and charged me at an hourly rate of what designers do…I would most likely fork it out.
I need to learn how to design. Gosh, my 50 million projects might have come to fruition by now
Something I have to grant to this article is that it has some very good tips on approaching our web design projects from a more practical and efficient view, somehow ystematizing design process.
Imagine a project in which maybe the same designer developed a great logo for a great brand and just had to go live for their latest campaign.
I wouldn’t feel very comfortable selling a one hour website to any client, though.
Well, whatever your opinion on the outcome of the design itself—at least this has sparked some interesting conversation
I would say I actually agree with most of the comments here. Yes, one hour for a client design is not nearly enough. Yes, a minimal design is usually easier than a complex one (but not always).
Keep in mind the intent of the article, though—to examine your design process and make it more efficient. This process can apply whether you’re designing a blog, portfolio, a minimal site, a complex site, etc… and it will still save you time. It may not happen in an hour, but it will happen faster.
Thanks for the great responses, keep the conversation flowing
- Mason
“Keep in mind the intent of the article, though—to examine your design process and make it more efficient. This process can apply whether you’re designing a blog, portfolio, a minimal site, a complex site, etc… and it will still save you time. It may not happen in an hour, but it will happen faster.” via @MasonHipp
What you just quoted above is what I got out of the article. I think it’s just an example what someone CAN accomplish in that short period of time. Even a mock of a website can take up to an hour. So this is actually very good. I see what your intent was here, and other posts make sense too. But I understand you deep purpose for this post.
Great tips! I do have that problem when designing i am always looking for my design elements [tabs,icons,header graphics etc…etc…] So great tip on getting your graphics organized before hand. I usually take 8-10 hours on a web design mockup. Maybe a little long but i have to include staring at my monitor time. LOL. I think i will {very soon} become a member here @ MediaLoot. So many wonderful resources. Your site by the way is fantastic. So clean and easy to navigate. I’m a sucker for that beautiful Nav bar/icons. Are those icons on the Navigation bar for download? I totally dig those. Signed, Fan of MediaLoot.
Very Nice tutorial
thanks
Great Tutorial .. for Newbies (ME)
Thank you for this post! It is very helpful to people who are trying to design a website. However, sometimes it can be stressful and overwhelming dealing with all of the details. For help with web design, visit them.
Email Marketing Sonoma County
Thanks as far as something your posting on this website. From my own personal trial, scads times softening upwards a photograph may if possible supply the photography with a dosage of an artistic flare. Over again however, the pampered haze isn’t rigorously what you had in your position and can usually times kill a normally good snapshot, notably if you sensible connected with enlarging that.