Article C4: All about Website Wireframing

https://unsplash.com/@kellysikkema Featured image

Website Wire frames are basically drawing out your plan for how to navigate through the website or app U.I so that you can replicate it for the final project you end up making. Something you might end up doing for your site is something like navigating through the log in screen/ sign up screen, or helping you navigate to important sections of your app like the shopping section or what have you. The reason why we do this before the website is made is so that we can make it easy to already make if you know what you are doing.

Which is better for making a Wire Frame? Pencil and Paper, or an Adobe Program?

Before the rise in popularity of Adobe programs like Photo shop, Illustrator, and so on, there was a way of doing wire frames with out using technology. Drawing the wire frame on pencil and paper is something people used to do before this tech renaissance, while it is something that gets job done equally as well, it takes a bit more time to draw it on paper and then adapt it to computer, where as on an adobe software, you can draw it and import it to the wire frame with ease, and plus, it doesn’t waste resources. On the other hand, drawing it on paper is much less cost effective, and if a worker could not afford an adobe software, this could be the only thing they have access to. It really depends on the person, but I would rather use adobe to do wire framing. Now if you want a great example of wire framing so you can improve, I have 5 different examples for anyone reading this, so here you go.

Here are 5 Different Examples of a web site wire frame for you study

https://www.invisionapp.com/inside-design/wireframe-examples/

If you look at this example, it is a very straight forward and simple way of making a wire frame, this person just drew it all in red with a drawing program, its pretty effective, although if they all made a more detailed version, it would be even better.

This one right here is very slick, and I would say its a pretty good reference point, plus you can download it.

Wireframe Graphics, Designs & Templates from GraphicRiver
This one is quite simple as well, you don’t have to have a super detailed plan, put you could add some colors.
Ux Graphics, Designs & Templates from GraphicRiver
This does its job, but it looks kind of generic and bland.
UI/UX Design Sketches and Wireframes from Instagram
This is definitely the most detailed one i have seen so far, but as i said, I think its better on the computer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s