ITAA Unit 4: webpage layout

ITAA Unit 4: Webpage Layout

Using Wireframes to plan site design

​What is a Website Wireframe?

​

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.

​What do they do?

​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.

Open Ended

Below, describe what obvious differences do you see in a wireframe, that you don't in a completed color comp?

​Why make Wireframes?

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

​Some reasons to make wireframes!

​

• 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

Poll

Out of the below reasons to create wireframes prior to making web-pages, which one do you think is the LEAST important???

• Brainstorming initial ideas.

• To show your client before spending time working in Dreamweaver

• Making sure all team members are 'on the same page' with the project.

• To highlight any potential problems before the site is built.

​The Truth is....

​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'!!

​

​

​YOUR Dream Business

​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?

​Your Journal project (see CANVAS assn:)

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

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