Published on November 30th, 2011
Do you spend time in tools like the WordPress administrator or other web based WYSIWYG tools experimenting with ideas or layouts? Do you download plugins only to find out that despite its awesome functionally it just doesn’t look good in your site?
Have you swapped out images only to download yet another new one, because you can’t quite make up your mind on this one or that one? Only to repeat the process over and over again!
Logging in and out, uploading, deleting, renaming then trying to space perfectly only to change your mind again. These small work-flow processes can eat up lots of time when repeated over and over. If this is you, then log out of your back-end administrator tool because there is a faster and easier way.
In this article and video I’ll demonstrate some rapid prototyping techniques that I use to get ideas for how I want an article or web page to look. I’ll show how to use some tools to edit your site without ever hitting save or refreshing your browser to get you performing fast website layouts.
- Real Time Success
- Screen Capture Scrapbooking
- Harness the Power of the DOM
- Fast Prototype Video
- What do you think?
Real Time Success
For you to effectively layout your content rapidly and with visual appeal you have be be able to prototype your site without editing and saving HTML directly or messing around with a slow WYSIWYG web editor that tries to output the HTML.
Web based WYSIWYG tools have come a long way but they should not be used for prototyping your ideas until your ready for the final result.
The process of tweaking HTML, navigating to a style sheet and changing a few properties. Then moving images around inside a div or a table and tweaking everything down to precision just to get an idea takes way to long. Whether your using a tool or manipulating the markup directly this really is not a good use of your time.
Even if your an HTML/CSS Ninja you still can take other approaches to layout that will help you get the fundamental feel of what your ultimately trying to create, without messing around in the markup or a WYSIWYG web tool.
Let’s face it we tend to spend serious amounts of time trying to tweak the look of our content when we should be spending the time writing the content. Don’t let technology slow you down, just re-shift your thinking a little bit and create a digital scrapbook of your ideas before you actually build them.
Screen Capture Scrap-Booking
Screen capture tools have gotten very high tech and can save significant amounts of time, when your just trying to get a feel for what a widget or even an image might look like on your site.
You can use screen capture tools to rapidly create ideas and layouts that otherwise would consume all kinds of time by downloads and editing files directly. Learning to cut pieces of your existing site and pieces of other sites or images so you can easily craft out a general feel for your layout is critical to rapid prototyping.
For example say you see a widget on a site that you like, simply screen capture it and paste it on another screen capture of your site and you’ll see really quickly if this is something you like. If not then you wasted absolutely no time trying to install a piece of software on our site or upload an image. Because in the end lets be honest, if it doesn’t look good we probably won’t keep it!
Harness the Power of the DOM
The DOM stands for the Document Object Model and is the foundation of every web-page. With powerful tools like Chromes Developers tools you can tap into the force of the DOM and become a Jedi moving Master.
So lets get into all these techniques by checking out the video below! We’ll run through how you can move your site around and change things without ever refreshing your browser, and we will get you going with the basics of screen capture prototyping.