TopCoder Studio Contests
Post History | My Watches | User
View: Flat | Threaded | Tree
Previous Thread | Next Thread
|Forums > TopCoder Cookbook > Studio Build Competitions (Prototypes, Flash, etc) > Studio Basic #2: Getting Started to UI Prototype|
This preceding text is created to help anyone who interested to participate in UI Prototype contest. To participate in this contest is easy, you must be a TopCoder member, at least 18 years of age, meeting all of the membership requirements.
So what is it UI prototype, and why prototype are created?
(Note: I took this text from this thread, created by adroc)
1) Client communication - an HTML prototype helps a client visual all the interactions their website or application is going to do as opposed to verbal descriptions or staring at one or two storyboards.
2) To test usability and user interest - To make sure the click-paths/user workflow makes sense before going into development
3) Help sell an idea
4) To prove that something is possible or a design can be done as planned
At TopCoder they take it one step farther and try and make its HTML prototypes ready for development (correct HTML/CSS markup) so a client knows their code is ready for production and works in the browsers they have specified.
(End of adroc's credits)
Here are several official online documents provided by TopCoder for anyone interested in UI Prototype contests:
- UI Prototype Competitions
- Getting Started in UI Prototype Competitions
- UI Prototype Review Board Guidelines
UI Prototype Basic
In addition to official documents above, here is my personal account as a prototype competitor at TopCoder. I will covers informal aspect of it, and go further some fun stuff in it.
To able to work on most UI Prototype projects, there are some working environment requirements that you should met, at least minimally. As stated in most UI Prototype contest requirement, your prototype must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. Sound a bit crazy, huh? Should you own Mac or PC? Wow, that would take a huge investment before competing to prototype contests. But don't worry. The real concern is browsers. You don't need to test in all platforms, but you should do well testing the prototype in any mentioned browsers.
IE6 is available on XP. IE7 or IE8 is available on Vista. Firefox available on all platforms, and you can only take one version as testing because it is impossible to have both at once. Chrome and Safari are also available on mac and PC environments. So my best bet is, it much be better own a mac, then you can run virtualization on it, so you will have Mac, XP, and Vista at once. For virtualization software in mac, you can use Parallels or VMWare Fusion, both sold at the same range price. If you only having Windows machine, don't worry. You should, however, still tests your work in both XP and Vista platforms. Be gentle and explain your environment by making proper documentation on your work, and stated clearly if you are unable to met to the requirements testing. The key to successful prototype is test and much more test on all required platforms and browsers. So, if you didn't have the environments, you might lose a sight of your work.
UI Prototype contests usually provides one or more storyboard (mockup) that taken from previous contest. These documents usually in Adobe Photoshop format, but rarely in Adobe Illustrator. You must able to slice this graphic files into appropriate small chunks of graphic files that will be used as images into your prototype.
The first step to start your prototype work is to slice any provided storyboard into small graphic files. All the background, headers, some navigations if needed, are cropped or sliced from the huge provided storyboard. A good understanding of design as well as image optimization is needed to better create a good prototype, as the final result needed is a fast-load web page template that will get into production.
........continued in another post (8000 chars exceeded)
|post by oton ) | Reply|
After you did the slicing part. Now is the coding time. There are many tutorials, articles or books that will give you good understanding on how creating good web site. O'Reilly does published some good books you could read. One of my favorite are High Performance Web Sites (Steve Souders, O'Reilly, September 2007). This book will help you to meet high standard web sites development as practiced by some high profile company. By participating in UI Prototype contests, you should also aware some standards that TopCoder make the prototype works flawlessly.
Here are some useful habits:
Debugging and Testing
Then the most boring part. It really is. However, if you do some good amount of prototype works, you will find some good habits and future work will become easier and faster. I even experienced that I don't need to have to deal with some nasty bugs (hint: IE6, hello!).
Here are some of good habits:
...End for now... Will be editing later :)
|post by oton ) | Reply|
Really useful information. I think you should use the format problem-solution-discussion.
I have some notes:
- You don't need vista to use IE7/IE8 and to install IE6 you can use "multiple_ie" which let you install probably all IE versions (I'm not sure about IE8)
So, one win OS is enough for all IEs.
- In the debugging/testing part it's worth mentioning Firebug extension for Firefox as the ultimate tool for web developers, and the developer toolbar for IE.
Tidy (and Firefox tidy extension) is also a good tool to have as a web developer, it fasten your web development by making easy validating/formatting your code.
- I disagree with you when you say : "Tests your work from the most modern browser first. Do not deal with IE6 first, as this browser having lots of bugs rendering."
I used to test my work entirely on Firefox first, then test the other required browsers, and I missed many deadlines because of that :)
For me, The best think to do it to test whenever you think it's necessary and test in ALL browsers. This way you're sure that you are in the right track and that you won't have to correct the same mistake many times :)
Great work oton ;)
|post by AjJi ) | Reply|
Just small notes too from me:
- You can use IETester too, as far as i know can running IE8, IE7 IE 6 and IE5.5 on Vista and XP.
And for me to completed the prototype, i always used to test my work on Safari 4 Mac then test the other browser on Mac or Windows.
Cheers guys :)
|post by lunarkid ) | Reply|
Thanks for the feedback. Really appreciate it. I hope I can fixing it in the next two days as the deadline approaching. Well, to write this cookbook, we need a lot of time :)
I still have others idea need to write. Oh, only 24 hours a day....
Studio Build Competitions (Prototypes, Flash, etc)
> Studio Basic #2: Getting Started to UI Prototype
Previous Thread | Next Thread