Wireframes and mockups

What are wireframes?

Simple. Wireframes are a bunch of boxes, circles and lines that when combined together create a skeleton of what will eventually be a finished product. Call it the chicken wire to a sculptor, the rough sketch to painter or even the Lego instructions of the X-Wing.

But why?

Why not? As a visual artist, and person, I have to communicate with visual aids. One way is using said circles, squares, lines and even some text to help get my point or vision across to others. Web design is much the same way. A designer must create a visually stunning website while at the same time making it an easy to navigate through the site.

How is it achieved?

By creating wireframes and mock-ups. They are a great tool for designers as well as developers.  Recently, I have been working on creating a set of elements that are commonly used when it comes to creating web site wireframes and mockups in Illustrator and it has been both a little hard but fun as well. I have loved every minute of it since it has given me ideas about how I want to visually communicate to a future client even better. Part of it derived from reading the WordPress developer site and seeing how they got their ideas across and so I figured I would not only follow suit but also find a way to contribute to the community.

I am almost done with the Illustrator file with some basic elements but I keep getting this weird feeling like I am forgetting to include something. Something that is a key element when it comes to wireframes but I keep looking and nothing has yet to come to mind.

What next?

The next stage will be creating a user interface file with both Illustrator and Photoshop to share but that won’t be for some time. Either that or create some simple buttons, icons or random web graphics for people to have for free.

Published by

Jose

Born in El Salvador. Loves to read, write, draw, paint, build, test, typography, hike, photography, art, design, sewing, and many other things.