Adobe Education
Educators and Professional Development Specialists


Lesson Plan Published 11/11/13 Last updated on 5/22/19
A wireframe is a visual guide representing the basic elements of a website. A well-designed wireframe includes three key elements: interface design, navigation system, and main content areas. In this activity students are introduced to wireframes, learn why they are an important part of the design process, and learn how to create them.
  • Dreamweaver

    Design and develop modern, responsive websites.

  • Photoshop

    Editing and compositing for photos, web and mobile app designs, 3D artwork, videos, and more.

Age Levels
1-2 Hours
Custom Standards
ACA Dreamweaver 2.1, 2.2, 2.3, 2.4, 2.5; ACA Photoshop 3.2, 3.3, 4.1, 4.2, 4.6, 4.7, 5.1
Research and Information Fluency, Creativity and Innovation, Technology Operations and Concepts, Critical Thinking Problem Solving and Decision Making
Adobe Dreamweaver CC, Adobe Photoshop CC
CC License
Attribution Non-Commercial Share Alike
5 / 5 • 16 Ratings

Resources (4)

or Join for free to access materials
File Size

Comments (5)

Write a reply...
or Join for free to view all comments and participate in the discussion.

Maria Beatrice Wierusz Kowalska

Posted on 2/16/16 10:25:04 AM Permalink

Thanks so much! These resources are very useful to me.

Sidney Ryan

Posted on 2/15/16 11:26:58 AM Permalink

This is a great resource!!! Thanks for sharing this!

Jon Vandermeer

Posted on 2/12/16 2:57:06 PM Permalink

Very informative, might consider including Adobe Comp for the iPad as another resource

Linda Spaulding

Posted on 2/11/16 4:19:13 PM Permalink

Might have been helpful the beginning of the course. I will consider creating a wireframe on existing unfinished Muse project.

Alisha Crawford

Posted on 10/14/14 7:32:48 PM Permalink

The wire framing activity will be very helpful with designing my website.