Ad

Tuesday, May 28, 2013

Just a bit flatter - MVP, Flat Design and Bootstrap on Codediv.com

On my new personal coding tutorial website Code Div , I started fast and quick prototyped the website within 2 hours of exploring the idea, with the help of Twitter Bootstrap and Flat Design. If there's one thing I learnt from Stanford is rapid prototyping. Even our education system - the quarter system- is a constant chasing of cloud.


How to get to the MVP (minimal viable product fast) is perhaps on the mind of every Silicon Valley entrepreneur. Growth Hack... what is that?

The best talk I have heard at Stanford was from material science and design school: prototype generates discussions, and help obtain feedback. Without MVP, we are all but idea people... brilliant, but that's about it. Later on use of MakerBot and 3DPrinting reenforced the idea of using prototyping.

How it is possible that I got the website up and running in 2 hours? Previous I built a Rails Twitter App in 2 days. Okay it wasn't really like Twitter, but that thing worked with 140 characters and allow you to post comments like no other!

I'd be happy to go into details but here's the quick and dirty tip collection, so that the blog post does not run on:

1. Twitter Bootstrap as the first pass of design standard for a new born website
2. Flat Design that focuses on clarity of the information, comparison, call to action, and color schemes that still speak personal, startup, without screaming enterprise and boring, but requires very little design money
3. MVP focus on the core functionalities, even if the backend is not ready yet! My view of the backend is that, without a good architectural solution, the back-end does more harm than good. Until the website is ready security wise to take people's passwords, just DON'T.
4. Do not reinvent the wheel. If there's one thing I learnt as a consultant is that, tested and credible solutions win in Production (deployed websites), experiment in hackathons, but don't go crazy on your real website.

Some flat design pics from CodeDiv.com
This is the 2nd iteration.





The list flat design is worth quite a mention, because it is night and day compare to a flat ordered list, even if styled partially with Twitter Bootstrap. Imagine, the above image, compared with below, the bare bone list....



  • 1 Currently costs $5 for an entire year. May increase later
  • 2 Cloud hosted video library updated frequently
  • 3 Extra media, infographs distributed via MailChimp & Youtube
  • 4 Limited time offer of personalized contents & page
  • 5 Gears towards new beginners of web development
  • 6 Payment info securely handled by PayPal, no info retained
  • 7 No sketchy automatic renewal
  • 8 Purchase is final, refund will NOT be granted
  • 9 Planned topics: HTML | CSS | JavaScript | jQuery | AJAX
  • 10 Planned: Ruby | Ruby on Rails | PHP | CodeIgniter
  • 11 Planned: jQuery Mobile | PhoneGap | API
  • 12 Priority topic: plan for web development bootcamps
  • 13 Priority topic: navigate the career world, in-depth analysis
  • 14 One-time annual subscription for $5, expires after one year
  • 15 A growing collection of video & media resources

Yikes don't even bother with the blob below

And at one point all jumbled up like : Currently costs $5 for an entire year. May increase later. Cloud hosted video library updated frequently. Extra media, infographs distributed via MailChimp & Youtub Limited time offer of personalized contents & page Gears towards new beginners of web development Payment info securely handled by PayPal, no info retaine  No sketchy automatic renewal Purchase is final, refund will NOT be granted Planned topics: HTML | CSS | JavaScript | jQuery | AJAX  Planned: Ruby | Ruby on Rails | PHP | CodeIgniter  Planned: jQuery Mobile | PhoneGap | API  Priority topic: plan for web development bootcamps  Priority topic: navigate the career world, in-depth analysis  One-time annual subscription for $5, expires after one year A growing collection of video & media resoureces

No comments:

Post a Comment