Why Wireframing Will work for Your web site

From my personal experience, I assume you might categorise your website design process into two sections: the style process that doesn't utilize a wireframes, along with the one that does. Being previously on both sides on this fence, I've a comprehension of methods those two processes work and even though designing without having a wireframe works, I'd personally need to vote in preference of them.

Wireframing, the creation of a "visual blueprint", needn't be overly complicated. At most beginner's, I've seen wireframes which are are simply compilation of post-it notes with the user interface (UI) elements drawn on them. They are then placed onto a notepad to indicate the structural layout. Compare this to wireframes produced through design software and you might go to a slightly more refined wireframe with the latter, but regardless how you want to you could make your structural model, the result is always exactly the same. The bottomline is, it shows yourself, your client or any other party where things will probably be found on the page.



This is often a realtime saver in case you are to become a website for a client. Returning to my events of due to being on "side A" in the fence, when producing a website for any client I never accustomed to perform any wireframing process in the past. The complete process was comprised of: gathering requirements, spec'ing out your website, allowing the graphical UI then building the site if the design ended up agreed. The most important flaw I ran across in this process would be the potential for the customer attempting to alter the main layout quite considerably. I'd don't have any problem when they would like to tweak things here and there e.g. colours, make text larger, add some more images here and there, make the video a bit bigger (the usual stuff); but it was a whole lot more painful if they then want to move a number of things about on the page that directly affected the "page template". Jumping to "side B" from the fence and producing the wired layout for that site implies that layout could be agreed beforehand in the knowledge that when the UI design is presented, you could possibly then just need to update the standard stuff.

Being forced to Spell it for Clients

Even if presenting a wireframe to a client though, I've had occasions where they might be reluctant to sign this part off on the basis that it looks very "blocky" and "plain". "Yes it does" can be my immediate solution to this since these blocks will determine where we're going to put things on the lovely page to ensure once you get back to me down the road when you have reviewed the graphical design, you cannot then say to me why's the navigation up here rather than there? Trust me, I have had clients like this during the past so even though creating a wireframe, there might be times when you continue to must spell it that this is only to find the layout correct to begin with, then we'll apply the pretty little with it afterwards.

An Arsenal of Design Software

You don't need to necessarily know on your path around Adobe software so that you can produce some decent wireframes. I personally use an online tool, Cacoo, to generate mine. This online software lets you drag and drop pre-created elements on your page. This can save time and effort in the process.?

Conclusions Please...

Just like everything web related, everyone may have their own opinion for this topic, but my personal preference is to apply a wireframe every time I'm designing an online site. Whether or not it's to get a client or my own site, regardless of since it implies that the UI design is sped up because you're effectively working coming from a template.

If you are taking care of a task for a client, then hoping to have Joe Bloggs sign off of the wires before you begin for the UI is part of this design procedure that I would call important making sure you maintain good budget and personal time management on a project.

Leave a Reply

Your email address will not be published. Required fields are marked *