In my last blog post, I outlined my “6 Phases of Web Design and Development”. I would like to extend ‘the Plan’ step by going more into wire framing. If you missed the post, wire framing is a process to create a site’s architecture, functionality, and content before creating a final, submittable mock-up.
There are many different ways people wire frame but all in all, it is a basic and easy way to plan a website’s layout and page structure. There’s no need to focus on actual content or a color scheme. The primary goal of wire framing is to get a general idea of the layout of the elements needed on each webpage of the site that satisfies all of the client goals. Here are a few examples:
- Pen (or pencil) and Paper:
Fast and easy.
- Cut and Paste:
Literally, laying out all the components pieces, all cut up and pasting them into place. It is a very hands on method, easy to change and move content around.
- Software (such as Illustrator)
More in-depth, I first wire-frame using pencil and paper then move the layout onto Illustrator to get a more visual idea of everything.
Wire framing can be very simple as well. Again the goal of wire framing is to layout the elements needed a webpage. Here’s a very basic example:
Side note: If you need content to better visualize the layout, you can use placeholder text like lorem ipsum. Here’s a link to a generator: http://www.lipsum.com/feed/html
Let me know your techniques when it comes to wire framing!
I delіght in, lead to I dіscovered just what I ᴡas taking a
look for. You Һave еnded my 4 day long hunt! God Bless ʏou man.
Haave a ցrea day. Вуe
I savour, cause I discovered exactly what I was having
a look for. You’ve ended my 4 day lengthy hunt! God Bless you man. Have a great day.
Bye
Gli esperti dі Terry Lifts vi potranno
aiutare.