PowerPoint for Web Mock-Ups
I had read a tip for web designers a few months back - Adobe Illustrator is good for creating mock-ups for a web apps. Well, I got another tip for all those short-cut hungry, time-savers out there - Use PowerPoint.
We had some 5 days left for submission of Project SpaceLock's architecture for Student2Business, and I had no idea how to show to my group, how the Web Interface would look like.
Enter Microsoft PowerPoint into the scene. All I did was layout the menus and a little background, that all, everything else was taken care by PowerPoint.
Don't believe me? have a look at the Mock-Ups yourself - http://www.slideshare.net/ideamonk/space-lock-web-ui
And then compare it to the finished user interface I did today -
- http://spacelock.blogspot.com/2009/03/another-section-of-web-interface-down.html
- http://spacelock.blogspot.com/2009/03/intrusions-archive-interface.html
- http://spacelock.blogspot.com/2009/03/control-interface-finished.html
- http://spacelock.blogspot.com/2009/03/home-section-of-web-interface-is-done.html
Minor improvements are all that you will find. This is the first time I could complete a complete interface in just 4 hours, I usually take more that a day :O :P ;)
And guess what, mysteriously, I never had those famous nasty bugging IE6 design issues. It work's on a newly installed Windows XP too - http://spacelock.blogspot.com/2009/03/wow-that-worked-on-ie6-on-xp-too.html
The Lesson - Do look at PowerPoint too as an alternative for creating rapid prototypes and mocks for Web Interfaces.
Labels: Space Lock, tips n tricks, web design
posted by Abhishek Mishra @ Tuesday, March 24, 2009
2 Comments
2 Comments:
Hey for the mockup's in ppt you still have to put in all the contents and designs right? then what is that powerpoint is doing automatically?
Hmm, as in this project, I was done with the header and backdrop and needed to quickly layout some views of different pages to present to the team. Now coding HTML+CSS for that would have taken me a lot of time, specially with things like spacing, margins, buttons etc to be fixed up.
Powerpoint helps here by letting me lay UI elements quickly, I just draw some tables, add a little style and put some buttons and text here and there... and the mockup is ready.
The advantage is the ability to play around easily and to let others know how things are gonna look like in advance.
Otherwise I usually prefer a pen and paper to visualize what sort of website we're gonna make, as in http://snapsta.com , it was purely a paper pen mockup. Sharing becomes tougher then, my friend had to take a photo of the mock design to show me!
But, in Illustrator or Powerpoint, sharing and editing things become easier.
Mock-Ups are essential to planning, and help a lot in presenting your ideas to clients. For the work with http://www.bestdealaz.com , it was a mock-up of how the website would look, that helped our client get clear idea of how the website is gonna look like.
Anyways, since I didn't have much preffered Adobe Illustrator for all this, powerpoint was a nice help.
The content of course is taken from DB in most of the cases, rest are fill ups in HTML tags.
Finally, I would say PowerPoint did nothing more that keeping me on right track while I wrote HTML this time.
Note: I love hand coding HTML/CSS, Softwares like Dreamweaver, etc steal all the joy and control over your design :)
Post a Comment
Subscribe to Post Comments [Atom]
<< Home