ITAA Unit 4: webpage layout

​

A website wireframe is a visual prototype of a web page that focuses on content, layout, and behavior.

It usually doesn't include any styling, color, or graphics. It's like a blueprint to a house that shows the plan for plumbing and electricity without the interior design.

​A website wireframe can also show the relationship between pages, allowing you to navigate between a series of mockups with clickable components.

​

A wireframe is constructed using basic boxes, lines, and other shapes to create an outline of the functional parts of a web page without wasting time creating an intricate, polished design. It's often the first step in the website design and web development process.

​It may be tempting to skip wireframing and provide clients with high-fidelity mock ups instead. However, wireframing provides a few key benefits:

​

• Brainstorming design ideas and iterating rapidly (sketches esp!)

• Soliciting feedback from stakeholders, team members, and clients before devoting resources to a more refined design effort.

• Making sure that everyone is on the same page and shares the same vision

• Highlighting any potential problems and flaws early before they can become larger roadblocks

• Focusing on user interaction, usability, and user experience

​All these reasons and MORE will help the team move the project from 'idea' to 'finished product' much more quickly.

​

​Just remember that communication between team and or client helps prevent doing work 'over and over again'!!

​

​

​Thinking about YOUR dream business, HOW do YOU think your website home page?

​

​HOW would you attract attention to viewers? (Think about your junkmail project.)

​

​Big Photos? A video banner?

​

​Cool graphics or text elements?

• ​Sketch out a wireframe comp with paper and pen / pencil.

• ​REFLECT on your results.. What worked out great? What would you change?