Objectives
• Analyze the uses of graphic design principles, including the rule of thirds, proximity, pattern, background color, shape, and typography.
• Create a storyboard of a page banner.
Materials
• Examples of page banners of varying designs • Grid paper (optional)
• Drawing materials (pens, pencils, paper, colored pencils, and so on)
Time
45–90 minutes
Overview
Students examine design principles used on different page banners and then plan their own page banners they would include on a portfolio or personal website.
Student product: Page banner storyboard
Activity steps
1. Introduce the idea of page banners as part of an overall personal and business presence. Discuss how they have a focus, purpose, and audience.
2. Introduce the idea of a page banner as a way to add an identity to a website.
• The design reflects the broader purpose of the person or organization’s website. • The banner fits within the basic layout of the screen.
• A different shape can act as a banner across the page.
3. Introduce additional design principles, including the rule of thirds, proximity, pattern, background color, shape, and typography (including serif and sans serif font faces).
4. Form small groups of students and ask students in each group to look at different page banners on the web, either by searching their favorite sites or by viewing a list you’ve previously compiled. Be sure to include a variety of business, entertainment, and personal websites in each group’s review.
5. Ask students to identify the use of design principles in each banner:
• Previously covered principles: composition, balance, unity, contrast, emphasis, line, and color in logos
• New in this activity: rule of thirds, proximity, pattern, background color, shape, and typography
6. Have student groups report to the class the design features they found and explain how these features portray the industry, company, or organization in terms of its focus, purpose, and audience.
7. Ask students to design a storyboard of a page banner, perhaps using the logos they created. Have them consider their audience and goals, as well as the mood they want to convey (for example: fun, serious, formal, or cool).
Preparation
• If you plan to provide students with a list of websites to view during this activity, prepare a list of websites with page banners that represent different groups, such as personal websites, restaurant websites, corporation websites, entertainment websites, or education websites.
• Review the websites on graphic design principles. See the following background resources section. • Prepare a list of websites students can research to generate discussion on design principles.
Extensions
Researching design principles: Divide the class into groups, assigning each group a research topic such as the rule of thirds, proximity, pattern, background color, shape, or typography. Have students present their research findings through a paper summary or an oral report. You might want to monitor students’ progress in their groups. You might also want to assess the group process or oral presentations. Some possible expectations to discuss include the following:
• A paper summary of their findings (include URLs of sites researched)
• A brief (5 minutes) oral report that includes the main idea behind the principle • Vocabulary definitions
• How their design principle can be applied to the page banner examples or other projects
Multiple meanings: Many of the design topics have alternate meanings when you use them as keywords for searching the web. Guide students in refining their searches to include the following keywords: graphic design, art, layout, and visual design. For examples of page banners and logos, search for design services.
Rationale
A page banner appears on most websites as the first identifier that is seen for the organization or person who sponsored the website. The design of a page banner conveys information about the sponsor—how it wants to be perceived. These identifiers are consistent with the overall design of the site and help visitors recognize that they remain in the site as they move from page to page. Designers identify goals and the audience of a design before they create it.
Background resources
Graphic design principles
• Dimitry’s Design Lab has many design topics, including texture.
• A short article on consistency in design
Rule of thirds • Proximity
• An article that discusses proximity and alignment. Has some nice interactive examples that require the Adobe Shockwave plug-in to view.
Patterns
• Although the focus of this article is about patterns in rugs, it has very useful general information applicable to graphic design.
• An article about design principles, including repetition.
Typography
• A general introduction to typography on the web.
Background color
• A fairly comprehensive article on backgrounds and textures, with examples.
Assessment
Does not meet expectations Meets expectations Exceeds expectations Page banner
research
Absent or incomplete. Student use strong search strategies to find page banners. Students collect, evaluate, and analyze page banners for design principles reflected and how these principles impact audience, purpose, and organization goals. Students report research results.
Student use strong search strategies to find a range of page banners that reflect distinct types of organizations. Students collect, evaluate, and analyze page banners for design principles
reflected and how these principles impact audience, purpose, and organization goals. Students clearly and concisely report research results.
Page banner storyboard
Absent or incomplete. Students create a
storyboard for their page banner and identify the design principles chosen to meet their goals.
Students create a
storyboard for their page banner and identify the design principles chosen to meet their goals. Students can convey design principles and their role in message and tone of the banner plans.
ISTE NETS*S Standards for Students
This activity is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and
content area the student selects you may research your own state content standards to see how this activity aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students I. Creativity and Innovation
Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students:
A. apply existing knowledge to generate new ideas and products and processes. B. create original works as a means of personal and group expression
D. identify trends and forecast possibilities. II. Communication and Collaboration
Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and contribute to the learning of others. Students:
A. interact, collaborate, and publish with peers, experts or others employing a variety of digital environments and media.
D. contribute to project teams to produce original works and solve problems. III. Research and Information Fluency
Students apply digital tools to gather, evaluate, and use information. Students: A. plan strategies to guide inquiry.
B. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media.
C. evaluate and select information sources and digital tools based on the appropriateness to specific tasks.
D. process data and report results.
IV. Critical Thinking, Problem-Solving & Decision-Making
Students use critical thinking skills to plan and conduct research, manage projects, solve problems and make informed decisions using appropriate digital tools and resources. Students:
A. identify and define authentic problems and significant questions for investigation. B. plan and manage activities to develop a solution or complete a project.
C. collect and analyze data to identify solutions and/or make informed decisions.
Adobe Certified Associate, Web Communication objectives
1.1 Identify the purpose, audience, and audience needs for a website. 2.3 Demonstrate knowledge of page layout design concepts and principles.2.5 Demonstrate knowledge of flowcharts, storyboards, and wireframes to create web pages and a site map (site index) that maintain the planned website hierarchy.