*Please pardon the un-styled mess why I am rethinking and re-designing my blog!*
So I had an interesting assignment thrown at me at work (Brunello Creative) last week. We had a client who needed a bunch of print work done and at the last minute wanted a 3 page micro site done in just about a day. (go check it out: Humac360.com) Guess who got the project? ME!!! I’ll show you my process from sketching, to photoshop mock ups to production and launch!
After the client gave the ok for the project I started looking at what I what I had to work with: 2 pdfs of a brochure and a few photos:
The humac 360 in all its glory. This little thing can be hooked up to weight lifting machines to track the progress of physical therapy patients.
The device can then be plugged into a computer to generate biofeedback:
Humac 360 brochures our print designer Jess made
After sketching I looked around on the web for some microsite inspiration. I found a lot of mini-sites for cars and ritzy products that were all flashed based. This is all fine and dandy but there’s no way I was making a flash site with this timeline – The client needed a simple brochure type site so I decided to go in that direction.
Even though I was on a brief timeline for this project I did not forgo one of the most important stages of design: sketching! I drew a bunch of squares on my paper and sketch up 3 or so designs. After some brief discussion (with myself hahah) I picked a direction and went for it.
Some of the design variations I came up with:
The sketch I picked to take to the next phase
I fired up photoshop and made mockups for the homepage, a text page and a contact page. I wanted to go for a brushed metal look since that’s what the actual product was made out of. Pretty simple and straight forward. I wanted this site to be simple and get information to the customer quickly. I also wanted to draw attention to the product itself. In order to do this I made the Humac 360 (or the red box thingy) break outside of the blue header area. This also points the user to the site navigation in the right hand sidebar.
Another feature the client wanted was a link back to the main website. I made it clear that this product was made by CSMI by placing an absolutely positioned banner in the upper left corner of the site.
I also wanted to challenge myself with this design so I decided to add the element of a color switcher to the right sidebar. The Humac 360 product comes in 4 lovely colors (hmm imacs anyone? 
). I was not sure how I was going to implement this feature, but decided to go for it anyways.
The last feature I wanted to include was some lovely css3 elements. If you hover over the links in the sidebar you will notice that I used the border-radius attribute that is quite lovely Sorry IE users – you get to see an ugly box
I needed to get this design up and running fast so I started with the 960 grid system. I modified the width of the whole layout and selected two of the columns to use and BAM! I had a layout! I also went in and changed the class names to things that…well…were more meaningful (no more .grid_6) I love starting out with existing frameworks because it usually makes some of the (IE) coding headaches go away!
Next up I had to figure out how I was going to approach the color switcher element. I’ll admit I was lazy and took the easy way out. Each block links to a separate page with a different class applied to the humac360 element. I know there are much better ways to do this, but this is one of the things i left last on the list. I’ll eventually get to sicking some sort of style sheet switcher in there.
Another coding…feature is that I found this AWESOME png hack? called DD_belatedPNG. Why is this png thingamajig so amazing? It allows you to use png files as background images in ie6. This is a shortfall of some of the other png hacks out there.
Another feature I added to the site was thickbox. Eventually the client wants to display a few videos on the site. Thickbox works like litebox but it allows other types of content.
So after all that was said and done – I had a working 3 page microsite in less than 24 hours! I know theres room for improvement in the design and probably the coding as well. Its interesting to see what can be done in an extreme timeframe. Check out the site: http://humac360.com
Leave a comment and let me know what you guys think! Have you ever had a rush project like this? Tell me about it! Show it to me!
Get up-to-date 000-153 questions to practice for 000-032 exam. Also get free 642-731 tutorials with 100% pass guarantee.
[51] Comments
Posted in Boston, design, Graphic Design, Web Design
Story on DesignBump.com…
Your story was featured in Design Bump! Here is the link to vote it up and promote it: http://www.designbump.com/WebDesign/How_I_Designed_And_Built_A_Website_In_Less_Than_24_Hours...
How I Designed (And Built) A Website In Less Than 24 Hours | The Design O’Blog…
Niki Brown shows her process for building a website within 24 hours….
[...] 9. Niki Brown shares experiences on – “How I Designed (And Built) A Website In Less Than 24 Hours”. [...]
[...] How I Designed (And Built) A Website In Less Than 24 Hours [...]
[...] like I’m not the only one who likes (ha) to build websites in 24 hours. Check out the Full Code Press – a website competition that challanges designers and developers to [...]
Subscribe by rss, email, or in iTunes!
James says:
Why would I want to build a website in 24 hours? It will be rushed and not well thought out.
Congratualtions and making web design/development sound so easy. I bow to your mighty skill.
April 3rd, 2009 at 4:23 am
Niki says:
@james – im not trying to make it seem easy – im just talking about my process on a rush project!
Have you ever been in a situation like that? Its interesting to see how much you can do in a rushed time frame.
April 3rd, 2009 at 4:27 am
Lukes Beard says:
might impressive dude! Great insight into how you work
April 3rd, 2009 at 4:31 am
iiiccchhhaaa says:
What do YOU think?
I LOVE THIS POST, NIKI..!
April 3rd, 2009 at 4:33 am
Patrick says:
Not bad but like someone mentioned above the site being rushed like that is not a good thing. In every project I do I make sure to do competitive research for my client and let them know what their competition is doing, how they are doing it and why they are doing it. This helps my clients make the right decisions that will effect their business.
April 3rd, 2009 at 5:05 am
African Boy says:
The link to the author’s site on the website is poorly crafted. Obviously overlooked as a result of “rushing” the site? You have hgttp:// instead of http://
April 3rd, 2009 at 5:15 am
tobyct says:
Rushed or not the site turned out well. Achieved what your client asked for, hopefully they are happy, which is the important thing.
Thanks for the post.
April 3rd, 2009 at 5:45 am
Owais Lone says:
I did that once for my school…With some differences..
1>I used a template and customized it a lot.
2>No PhotoShop Mock Up..
As a student of Computer Science, I desperately want to know about the mock up..How does it help?..Don’t you think it’s just a waste of time?…
April 3rd, 2009 at 5:48 am
Nouman Saleem says:
Awesome work! I recently did a project for a client in 3 hours; here’s the link:
http://mildgreen.com/client/derek/v1/
without making a photoshop mock, just sketch to html.
April 3rd, 2009 at 6:11 am
Syzygy says:
Well this site looks rushed alright, just like everyone here has already mentioned. Nouman Saleem, your site looks horrible because it too is rushed. You get out what you put in and this showcases that rushing a job is only going to failure your career.
April 3rd, 2009 at 6:40 am
Chris Barnett says:
Great stuff Nikki. Talk about a turn around time. I’m not sure I have ever heard of a site going up so quickly. Just goes to show if you know what you want to achieve in the end, you can get a lot done in a short amount of time.
April 3rd, 2009 at 7:11 am
Lou says:
Parkinson’s Law my friend.
Oh, and in the words of General Patton: “A good plan, violently executed now, is better than a perfect plan next week.”
April 3rd, 2009 at 7:22 am
Kevin Brennan says:
Wow. There are a lot of Debbie Downers in these comments.
Obviously this wasn’t an ideal situation for Niki but sometimes it is necessary. Once launched there is still time to go back to make corrections is required.
I think it’s a great job considering the time constraints. Thanks for sharing your process. A lot more thought was put into the design than people here are giving you credit for. Not many people would have put forth the effort to do sketches or even a mock-up in a 24 hour time frame.
Nice work.
April 3rd, 2009 at 7:51 am
Steppo says:
You can even be faster when using Fireworks
I love it cause there is no other tool out there for rapidly prototyping websites and exporting all needed web graphics.
April 3rd, 2009 at 7:55 am
uidesigner says:
I had two similar experiences where I had a 24 hour deadline to develop a site.
1 Was for a politician that was making a major radio campaign and needed to have something up and running quick.
2. Was for a product company that was doing some major radio and ad promotion.
It was a challenge to build so quickly and you really have to make sure the client is accessible 24/7 and I mean that.
Thanks for the insight. I love seeing processes that people use!
April 3rd, 2009 at 8:02 am
Kayla says:
Good post, I love insight to any design process. This is the first ‘rushed’ design process I’ve seen, and it was very helpful. I’ve been in a situation like that before, and I really just needed a process like this to get through it.
April 3rd, 2009 at 8:03 am
Brooke says:
wow, so many design snobbery comments! deadlines are part of the business, people. we cant always take a few days to research the competition and analyze things to death. while its not ideal, sometimes things have to be rushed.
to the author; i did notice a problem on the contact page. as you switch through the colors, the website above the form is left off two of them. the red and the green are missing it.
nice post
April 3rd, 2009 at 8:27 am
Brian Hoff says:
Awesome insight Niki and clever post. Really enjoy reading your posts as they are always informative and put a smile on my face when I read them… Your personality shows through.
Was the client on a tight (extremely tight) deadline? Came out looking great though! Keep up the stellar work.
April 3rd, 2009 at 8:29 am
Chuck Wagon says:
When I first started out in this field – the simple solution was a fifth of Wild Turkey and a few lines of coke.
How things have changed.
April 3rd, 2009 at 8:55 am
jorge says:
Congratulations, you are a recordman! I hope not too much clients know this
April 3rd, 2009 at 9:22 am
t. daniel says:
lord, I wish this was less familiar to me than it is. seems like every third project I do. nice work, particularly as it’s without the blow and drink
April 3rd, 2009 at 11:52 am
JohnONolan says:
Well you did ask… I was expecting an actual full website. This site I think most people could’ve put together within 24 hours.
April 3rd, 2009 at 4:44 pm
Peter Monbailleu says:
Hey!
I think you did a great job… The only thing, as you know, is that your employer will probably expect you to do this again, and again, and again…
The bad side of success…
April 4th, 2009 at 11:37 am
Sarab says:
You had such a nice blog until you started publishing spelling errors, grammatical incorrect sentences and most importantly sluggish content. You call yourself a Pro-Blogger? Fuck, you make a broken English speaking Mexican sound fluent with this kind of content. Word of advice, at least use spell check before you publish something.
April 4th, 2009 at 4:49 pm
Aaron Irizarry says:
@Sarab
Wow looks like someone is full of piss, and vinegar. If you put as much effort into your website as you did thinking of harsh things to say hear… maybe people would listen to you…
But since you obviously don’t… I suggest you go back to making second rate bevel/embossed logos.
buh-bai
Aaron I
April 4th, 2009 at 7:26 pm
max says:
Hi Nikki
Interesting insight into your work – i applaud you for your quick-turnaround and clean-code + you managed to fit in a couple of new elements in this project.
I do have one remark though, i believe that with Flash you can create a simple website form a sketch in 24 hrs easy peasy !
Plus, if you use the GAIA framework for Flash, you can have a fully-fuctionnal, SEO friendly Flash site with unique URL just a few hours after finishing your psd mock-ups…
This could be useful for your next rushed project.
Anyway… keep up the good work !
April 4th, 2009 at 7:32 pm
Christopher Francis O'Donnell says:
Sarab:
Look, I may not run a popular blog or a computer maintenance company, but I’ve been taught that being a dick to others always comes back to you. It’s called, “burning your bridges,” and you just burned a bunch. There’s a guy who runs a business similar to yours in my city, and he’s also a dick, except he charges more. He doesn’t get too much work.
As correct as you are about some sentences NIki writes (I noticed a few oopsies: the word “microsite,” which I hate, a bunch of missing periods, and some words in all caps, which don’t look too professional, along with a little bit of generally disappointing typography), your own comment isn’t worded correctly. I believe you meant to say, “grammatically incorrect sentences,” instead of, “grammatical incorrect sentences.” We all make mistakes when we type quickly, but that doesn’t matter. I could pick your site apart until it bled, but I’m not a dick. I’m just not going to listen to bullshit from someone who isn’t qualified to throw that stuff around.
I think your energy could be better focused practising Photoshop, or whatever image editing program you generated your logo with. In fact, there are some great Photoshop tutorials on this very site.
Max:
Flash is easier to implement, in some cases, but isn’t very well liked, and can’t be viewed on the iPhone, or any other phone, as far as I know (probably wrong here
). For most sites like the one Niki built here, it’s absolutely unnecessary, and just means longer page load times. For a site like, say, YouTube, Flash is necessary. I haven’t yet found a Javascript library that can render streaming video. My point is that Flash is okay for some things, but not required for most things. It makes grabbing data from a database harder (I can’t use it with Django), and cuts out important devices like the iPhone (Flash should be coming to the iPhone soon, I think) from the user’s viewing possibilities.
Niki:
I applaud your effort. Your site built in 24 hours looks multitudes better than (insert name of commenter_x)’s, which was probably a free CSS template or something anyway. Whatever. I do have a question, though: beside your situation (and obviously other people’s similar situations), when would you ever want to push out a site that fast. I’m not a huge believer in doing excessive market research, I’m more of a getting-shit-done kind of guy, but I certainly wouldn’t agree to take on a project like that. Yours turned out moderately well, but most wouldn’t. Anyway, I’ve got homework. Nice to see how other people think and work. Oh, and I’d insert a smiley emoticon here, but there’s a horrible problem with your baseline whenever an emoticon appears in your post, so I won’t include one.
To those who read this entire comment: maybe I am a little bit of a dick, but I’m just trying to help out whenever I am. I wouldn’t have written this hella long comment if I didn’t care a little.
April 4th, 2009 at 8:23 pm
Christopher Francis O'Donnell says:
Oh, great! My links to http://djangoproject.com (both 404-generating links in my previous comment were meant to lead there) have been totally broken because they were appended to the post’s URI for some stupid reason. This is why we should all use Markdown to format comments. But no worries, I’m just a link worry-wart.
April 4th, 2009 at 8:26 pm
jack johnson says:
hooray, you can make a generic site quickly.
April 4th, 2009 at 9:20 pm
max says:
@christopher
Fair points and i will not enter yet another debate.. I was just suggesting that Flash can cut-down development time by a lot. As for the color switcher and video Niki’s client would like to add… well, Flash would make it a breeze…
+ I’ve just discovered GAIA and I’m a big fan !
But that’s just an idea for the next rush-job Niki gets… – I have to say that the site she produced is clean in all aspects, and i wouldn’t have blinked if i had been told it had taken weeks to design and code !
April 4th, 2009 at 11:36 pm
Nikki says:
Wonderful article niki! This gives me some insight into how i might approach this should i be put in a situation like that
Thanks!!
April 5th, 2009 at 12:04 am
Abbas says:
Did you proof your initial Photoshop mock-ups with the client? Or were you given free reign?
It’s hard to believe that a client wouldn’t be involved in any part of the design process.
April 5th, 2009 at 12:43 am
Tyler Hayes says:
I got about 2/3 through your comments section before I had to stop, hah! So much negativity, what’s up with that? Anyway, it’s not my place to bash others on someone else’s blog.
Down to your post, great job Niki! It’s fairly standard stuff for the design industry, sure, but it’s always fun to blog up little posts like this one to inform others, yeah? It may not be a perfect site, but hey that’s not the point! It looks good, it looks clean, and it certainly gets the job done on more than one account.
You know what’s weird? I went to look the site expecting to see a full brushed metal background, not just the header, couldn’t tell that’s what you’d done from the thumbnails above! Anyway, and I’m certain it’s just me that thinks this, but the header brushed metal background looks to me like a .jpg file that was supposed to be a gradient but wasn’t optimized properly. Not trying to be negative, just my thoughts!
I’ve realized that I notice this all around the Web when I see sites that use brushed metal backgrounds that aren’t silver/natural metal color. Oh well, that’s the designer in me!
Keep up the great work!
April 5th, 2009 at 4:12 pm
Anthony Hortin says:
Another great article Niki. Given the time contraints and what you had to work with (2 PDF’s and a few photos), I think you did a fantastic job. Obviously, 24 hours to do this is not ideal but that’s the nature of this business. Sometimes there’s contraints, whether it be time or otherwise, that we can’t do anything about.
April 5th, 2009 at 5:20 pm
Steve says:
Niki,
A quick question…what program do you use to build sites…Dreamweaver? Sorry if it’s a dumb question, but I’m a print designer that is hoping to learn the basics of web design.
Thanks!
April 6th, 2009 at 11:56 am
Rizwan says:
Mighty impressive bro….I believe you made the most of it
April 7th, 2009 at 3:21 pm
kyle steed says:
nicely done. gotta love the 960.gs framework.
April 8th, 2009 at 9:57 am
Trent Wood says:
I think this is the longest list of comments I’ve ever read through. Setting aside the criticism and praise for the site because it was a short project and people are reading way too much into it, thanks for the play by play. I enjoyed going through your design process.
Trent Wood
April 9th, 2009 at 7:08 am
Alex Hughes says:
Nice article, relates allot.
Forgot who mentioned it, but deadlines are so important in business and a quick turn around like this would be great for some!
Nice Job.
Also, not used the 960 grid yet, think I might have to have a look.
April 10th, 2009 at 6:38 am
Anto says:
Your lightbox js loading image doesnt work
Other than that. Nicely done.
April 10th, 2009 at 7:22 am
CoryMathews says:
24 hours for a three page site seems way to long… Generally for me it would be 4-10 hours for a design, 3 hours to change to html/css then since there is no server side programming, just another 2 to switch it to us php/asp.net/coldfusion. That adds up to be a whole 15 hours. I don’t see how under 24 is an accomplishment for such a small site.
April 11th, 2009 at 9:58 am
Ben G says:
Hey, I really enjoyed this post!
We all get rush jobs every once in awhile and it is nice to see a great end-result from one of those!
Keep up the good work!
April 13th, 2009 at 7:29 am
Edw says:
24 hours? Really, 1 hour for design 1 hour for programing. Done deal. 2-3 hours tops.
April 14th, 2009 at 10:40 am
How to Get Six Pack Fast says:
Hey, nice tips. Perhaps I’ll buy a bottle of beer to that man from that forum who told me to go to your site
April 15th, 2009 at 7:35 am
Thibaut Allender says:
Well, 24 = 3 x 8.
3 “work” days for a small website is not surprisingly low when you master all the technics:
- 6 hours of research
)
- 6 hours of design
- 4 hours to transform the PSD into an HTML/CSS template
- 4 hours to code some PHP stuff like the contact form, the dynamic navigation and organize things with header/footer
- there are 4 more hours to spend in fine tuning (obviously, you will debug IE6
You could even gain some time on design and use a small CMS system.
April 15th, 2009 at 7:50 am
Hoki says:
Meh
Nobody asked : how much would you have charged for that ?
September 23rd, 2009 at 10:12 am