Intro to Graphic Design | Basic Concepts Site - Design Brief

Introduction to Graphic Design Basic Concepts Site

Jennifer Fidler Savannah College of Art and Design ITGM 715: Interactive Web Design Summer 2010 Professor David Meyers Project B Design Brief Monday, 26 July 2010

Table of Contents Project Description . . . . . . . 3 Objective/Rationale . . . . . . . 3 Inspiration . . . . . . . 4 Target Audience . . . . . . . 4 Competition . . . . . . . 5 Site Map . . . . . . . 7 Type Studies . . . . . . . 8 Color Studies . . . . . . 10 Thumbnails . . . . . . 12 Digital Comps . . . . . . 19 Revised Comps . . . . . . 20 Final Site . . . . . . 21 Conclusions . . . . . . 23

Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Project Description Using Macromedia Flash and any tools you prefer to use for image creation (Photoshop, Illustrator, ImageReady, Fireworks, Digital camera, scanner, etc.), create a fully functioning Web site on the subject of your choice.

Some suggestions for subject matter are: a tribute Web site exploring the life’s work of a famous figure, a public service announcement based on the work of a nonprofit organization, a music band Web site, a site exploring an artist’s work, a site to promote a product or business, and a tourism site.

Objective/Rationale For my Flash-based project, I have chosen to create an educational web site geared towards high school art students. As a graphic design teacher, I often find myself reviewing basic concepts dealing with color theory, the elements and principles of design and typography every year. This site will act as a review tool available to my students as both a study guide for exams, as well as a reference to use when working on class assignments.

3 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Inspiration One of the major sources for inspiration for my site comes from an interactive presentation created

by Andrew Mundi about a decade ago. Originally posted on his web site (then named mundidesign. com), the presentation can now be found at designconsolidated.com (see Competition section for link to the full-screen version of Mundi’s presentation). Although a more simplified version of what I hope to achieve, the Mundi presentation is an excellent example of the type of resource I hope to create for my students.

I will also draw inspiration from my experience as a high school educator to establish the look and feel of my interactive, educational site and resource.

Target Audience The primary target audience for my site are my high school graphic design students, both male and female, coming from a largely Caucasian middle class town. These students are current 10th, 11th, and 12th grade students (roughly 15 to 18 years old) from Wilmington, Massachusetts. Having

4 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

grown up in a culture driven by computers and the entertainment industry, these young adults have embraced the internet, as well as cell phone and other electronic tools. Drawn to video games and other interactive devices, this audience will require a fun and entertaining approach towards learning.

While my own students are the primary target audience, I do hope to create a resource that could be embraced by other educators and selflearners. While the overall style and interface will be geared directly towards the primary target audience, it is my hope that it will also appeal to a wider audience if necessary.

Competition As mentioned previously, Andrew Mundi’s presentation was the major inspiration behind the plans for my interactive site. In addition to a link to his approach to this topic, I’ve included links to some other sites with helpful resources pertaining to design basics and principles.

5 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Competition (cont.)

Principles of Graphic Design http://www.designconsolidated.com.au/graphicdesign-principles/presentation.htm This interactive presentation provides some basic information pertaining to the design process, color theory, composition and layout, perspective, and typography. Heavy on text, I hope to attract a younger audience with more graphics and interactive features than Mundi’s presentation.

A 20-Minute Intro to Typography http://psd.tutsplus.com/articles/techniques/a-20minute-intro-to-typography-basics/ This blog article has come in handy while teaching anatomy of type and the corresponding vocabulary to my students. Although it provides handy diagrams pertaining to each of its glossary terms, the information is presented in a dry manner. I hope to provide far more entertainment with my approach.

6 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Site Map HOME

Introduction to site purpose and interface.

ELEMENTS

Breakdown of the elements and principles of design as listed in the Massachusetts Curriculum Frameworks (elements: line, color, texture, shape, and value, space; principles: unity, rhythm, harmony, balance, variety, and emphasis).

COLOR THEORY

Deeper exploration of color theory, complete with interactive color wheel and breakdown of traditional color combinations and techniques. Will also compare and contrast CMYK and RGB color modes.

TYPOGRAPHY

COMPOSITION

RESOURCES

Interactive glossary of typographical terms and breakdown of the anatomy of type. Will also cover some of the traditional rules of type students should aim to follow as beginners.

Considerations to be made in terms of hierarchy, impact, curiosity, function and scale throughout the overarching structure and layout of a design piece.

A further collection of links and resources pertaining to the basics presented within my site.

7 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Type Studies

8 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Type Studies (cont.)

9 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Color Studies

1.

7.

13.

2.

8.

14.

3.

9.

15.

4.

10.

16.

5.

11.

17.

6.

12.

10 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Color Studies (cont.)

11 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Thumbnails

Concept 1 This is a fairly intuitive Flash interface where the various links are arranged in sliding menu bar.

As the user clicks on the different links, the content area changes to reflect the new topic and its respective presentation/game.

A small blurb will also help to instruct the user as to the goal of the current page.

12 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Thumbnails (cont.)

Concept 2 This version is set up to look like a board game where the different paths lead the visitor to the various presentations and other informative content.

13 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Thumbnails (cont.)

Concept 3 This version presents a sliding navigation system where the tabs slide out to reveal the requested content. A home button will be placed in the upper right corner (never covered by the content page) but the other pages will also be linked in the various sub pages for easy access.

14 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Thumbnails (cont.)

Concept 4 Set up like tabs in a binder, this version will flip through the various pages based on visitors interaction with the tabs provided on the right.

15 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Thumbnails (cont.)

Concept 5 This is currently my favorite concept, although I’m not quite sure I’ll be able to pull it off entirely in the time allotted for this assignment. The idea is that the site starts out with a very simple aesthetic that evolves as the user explores the site. Ultimately, it will be the user that determines the overall look and feel of the site.

16 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Thumbnails (cont.)

Concept 5 (cont.)

Since this 5th concept is my current favorite, I further explored this idea on paper. My hope is to create a site that will allow users to add, alter and arrange visual elements based on the content they are exploring, regardless of the order that content is explored. Users should be able to change colors, add elements of design, play with type, and compose the overall layout.

17 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Thumbnails (cont.)

Concept 5 (cont.)

Realizing that my Flash skills may not be proficient enough to pull off an entire site with the potential for customizing the overall aesthetic by the user, I’ve settled in on this layout which will provide users with a limited opportunity to change layout and set up. As I become better acquainted with the action scripting needed to pull off my initial plans, I hope to go back and adjust the presentation.

18 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Digital Comps

Here is the initial aesthetic I propose for my site. The navigation bar at the bottom provides a different color rollover when the user hovers their cursor over the buttons. Once a topic is selected, the navigation bar with slide up to towards the top of the presentation to reveal the page content (the home page may only be returned to upon a reset of the presentation). The overall aesthetic will depend on user interaction from this point on.

19 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Revised Comps

The images shown here represent changes made to the general design based on the suggestions and feedback of my classmates and professor.

Everyone responded well to the clean, interactive interface but recommendations were made for adding more color and making the interface more obvious to users.

20 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Final Site http://studentpages.scad.edu/~jfidle20/itgm715/proj_b/index.htm In addition to adding a few more elements and making some small adjustments to the existing content, the site interface has been completed. While I do have more work to do on the individual presentations for the various design topics, the overall structure and style of the site has been well established.

21 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Final Site (cont.) http://studentpages.scad.edu/~jfidle20/itgm715/proj_b/index.htm The interactive features of this site allow users to customize the various elements by changing the size, color, rotation, and transparency as desired. While there are some limitations as to the color selection and structures, there are an infinite amount of possible design combinations.

Here are just a few of the possibilities.

22 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers

Conclusions

I truly enjoyed working on this assignment from start to finish (or at least, the finish for now). While I was only able to complete the color wheel presentation, I do hope to return to this project to finish the other interactive topic pages. In the meantime, I am quite pleased with the level of interactivity I’ve provided visitors in composing and altering the page style. This will definitely inspire future projects I have planned.

Thanks to everyone for such a great quarter. The feedback and assistance along the way has been amazing. Without their suggestions and inspiration, this site would have not been as successful, both in terms of the interaction and overall aesthetic.

23 Jennifer Fidler | Savannah College of Art and Design | ITGM 715: Interactive Web Design | Summer 2010 | Professor David Meyers