ITAA Unit 4: webpage layout
Presentation
•
Design, Computers, Arts
•
9th - 12th Grade
•
Practice Problem
•
Easy
Martin Sconduto
Used 15+ times
FREE Resource
9 Slides • 2 Questions
1
ITAA Unit 4: Webpage Layout
Using Wireframes to plan site design
2
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.
3
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.
4
5
Open Ended
Below, describe what obvious differences do you see in a wireframe, that you don't in a completed color comp?
6
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:
7
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
8
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.
9
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'!!
10
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?
11
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?
ITAA Unit 4: Webpage Layout
Using Wireframes to plan site design
Show answer
Auto Play
Slide 1 / 11
SLIDE
Similar Resources on Wayground
8 questions
Digital Health Technology
Presentation
•
9th - 12th Grade
9 questions
IT
Presentation
•
9th - 12th Grade
9 questions
Spanish Demonstrative Adjectives
Presentation
•
9th - 12th Grade
9 questions
Cubism
Presentation
•
9th - 12th Grade
10 questions
Absolute Value Equations
Presentation
•
9th - 12th Grade
6 questions
Publicity
Presentation
•
9th - 12th Grade
9 questions
AP-CSP - November 30th
Presentation
•
9th - 12th Grade
8 questions
Pemrograman C
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade