Designing Cloudy

2009-06-16_0516I chal­lenged myself to design a basic site in an hour or less while tak­ing a screen­shot every 10 sec­onds. At what ended up being 1 hour and 9 min­utes, I missed my mark -  but only by a lit­tle bit. Over­all, the end result is decent, but noth­ing spec­tac­u­lar. Given more time I would have prob­a­bly refined the header sec­tion a bit more and spiced up the wel­come area. Keep­ing in mind the time con­straints, the sim­plic­ity and bar­ren­ness can be over looked, in my opin­ion. Look for the full size image after the jump.

Click for the Video

Click for Full Size Image (1200x1000)


I would be lying if I said this wasn’t Twit­ter inspired. I ini­tially started with an ugly black colour palette in mind but quickly swapped that for a clean, white and blue scheme. From there, I imme­di­ately thought of clouds — that’s where cloud-no9’s brushes came in handy. Admit­tedly, the place­ment of every­thing isn’t very orig­i­nal, but that’s alright.

I prob­a­bly won’t end up con­vert­ing the psd to xhtml, but if some­one wants to, or just wants the psd, leave a com­ment and I’ll send it to you.

Hope­fully, if I do another one of these videos, the end result will be much more inter­est­ing. It should be noted that I still con­sider myself an ametuer at web design.

9 thoughts on “Designing Cloudy”

  1. @HardK0re @Jxtutorials — There is no xHTML on this one, it’s just the design made in Photoshop.

    @MilkGotter — Per­haps. I’m not so hot with Flash though.

  2. Y’know this prob­a­bly might sound embar­rass­ing but you’re a role model I look up onto from the day I started mak­ing videos to now cre­at­ing sites and Pho­to­shop and stuff. I am just 14 this year so I have years to come, I hope I fol­low the same track as you. :O

    - Plas­tic­fun­nel (on YouTube)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>