If you are in Minnesota, or probably heard about the annual Overnight Web Challenge hosted by a group of  local generous web agency: The Nerdery. Which was an event to redesign websites for local non-profits. I have to say at first I was very nervous about it, but I had a blast and learned a lot of things. So here are the details.

The goal

The goal of the challenge is each team can have up to 10 people (strangers or friends), and each team will pair up with a non-profit chosen by The Nerdery. In 24 hours time we are to redesign and build a new website for our designated local non-profit client.

Outcome

In my case, my team was Team Venture – we were a mixed of former and current co-workers. Not everyone knows everyone, but we bonded quickly. Our client was Someplace Safe. Even though we couldn’t finish 100%, so we are still continuously working on it and provide support in the next 6 months.

Before

After

Rules

Anything goes… PHP, WordPress, Ruby, whatever. We could even prepare codes ahead (in which I hope we can prepare better next year).

What we did and lessons learned

We chose WordPress as our platform, the lessons I learned from it were:

1. Don’t build anything from scratch if not necessary, frameworks, frameworks, and frameworks.
2. Pre-installed plugins  – take them out if not needed. It’s easier to remove than add
3. List of jQuery components, snippets to generate WordPress page contents (sidebars etc…)

I am totally going to do the challenge again next year and because the winning team: TST Media pulled off some very amazing stuff in one night, they’ve inspired me to push a lot harder than just using a WordPress platform. So hopefully I’ll start posting more updates on what this “pushing harder” in the next few months.

Other than that, I encourage all web nerds in MN to try this challenge at least once. It’s thrilling, learn to work faster, and put our web nerdiness skills to use in a very meaningful way. Besides that, you get to meet maybe a Senator such as Al Franken, and the Tronguy. Foods in every 3 hours, massage, Yoga, live action Angry Birds and a whole lot more nerdy fun stuff.

Before I came up with this theme, I was messing with one of the Woo Themes called Irresistible.  In a matter of fact, I was so zoned into modifying that theme, that I was completely stuck.  My boyfriend also told me that isn’t “me” that the theme was too dark and grungy.  He said I need something “happy”.  Got a few ideas of “happy grunge” and things like that, but just couldn’t incorporated the idea.  After a while, I just decided to scrap the entire thing and started off somewhere else.

I started to work on the logo first, and I had a good idea what I want.  I really like the + signs embedded inside the logo that because that translate my idea of “learning” – also inspired by video games such as The Sims.  When a Sim learns something new, it gets a ++ sign over their heads as in gaining level.  After working on the logo for a while and picked two colors I really like, Orange and Dark Gray – I took a break:

Then I randomly grabbed a photo book lying around on my desk – which was by Getty Images – titled Infinity.  Flipped a few pages, and there I had it:

Then I drew the layout on a piece of paper, along with the logo I already had to glue the ideas together.  I’ve always been a sucker for simple designs, and flat colors.  So it is ended up as what it is right now.  A few people suggested, actually 5 of 3 people suggested that it is better centered.  Up till yesterday, the layout was still left aligned.  So there, I’ve taken other people’s advice and made it centered.  I am still fixing minor things here and there, but the site looks 90% the same across most major browsers – especially IE6.  There are a few plugins seem to be broken, because it is screaming when you open the site in IE – need to sort that out.  Eventually, I’ll have to fix up Sociable because it has a lot of invalid HTML/CSS, even though my theme is validated.

One last note, if you are using WP-Spamfree‘s contact form, the Submit button alignment will probably drove a lot of you crazy.  That because the author add a <label> before each <input> field excepted the Submit button.  If you dig inside the plugin and find the “contact form” and insert <label></label> before the submit button, you will able to adjust the alignment a lot easier.

A few days ago, I told myself that I need to reject the idea that I can’t draw.  So I started to look at tutorials how to draw and learn how to “think”.  One of the methods is to think each objects in line and shapes how that object is made up instead of let the brain telling me what that object is.  Using that method, I tried vectorizing an image.  I feel that helps me to learn how to put the shapes together as much as drawing – and the product was my USB icons.   The result was quite good, and that was a very good exercise apparently…

Because I had an inspiring moment when I was watching TV.  A very flashy, colorful commercial came up.  I don’t remember what commercial it was, but I started to look closely at a single object and followed it across the screen, quickly break the object down with line, shapes, and analyzed how I could achieve it as a drawing.  That was an interesting and inspiring moment, because I felt excited as I was analyzing the image on the TV screen.  That night, I had a vivid dream of a layout – next morning, I was able to recall the layout, colors, and drew it out on a piece of paper.  I guess I looked at and fed my brain enough design elements that entire day, and thinking in lines and shapes that a “dream” layout appeared.

Who would’ve thought dreams can be an inspirational source, eh?  Have you have a inspirational dream?  Do tell.