Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION
User Assumptions

For this class, there are no prerequisites and students in the 10th through 12th grades who show an interest in the subject matter are invited to register. The course material is designed to present the artistic movement of Cubism to the students including the history, the artists, and how to paint in the style. For students to be successful in the class they should have some prior experience with art, art supplies, computers, peripherals, the Internet, and common software programs. Further, the art supplies will be provided by the school (i.e. brushes, palette, easel, and paint) and each student must sign out for and return these items. The software programs that students need for the course are Microsoft Office 2010, Adobe Reader or Pro X, and the current version of Flash Player. The online course was designed to be viewed using the Mozilla Firefox browser. The course meets the Nevada State Board of Education (NSBE) teaching standards for Fine Arts and Visual Arts for high school students. The following are the expected learning outcomes given the NSBE standards: 1. Analyze the effectiveness of and relationships among visual characteristics, purposes, and/or functions in works of art. (2.12.3) 2. Explain the origins of specific subject matter, symbols, and ideas. (3.8.1) 3. Associate a variety of artworks with cultures, times, and places. (3.12.2) 4. Evaluate artwork based on various characteristics such as themes, styles, purposes, and subject matter. (4.5.2) 5. Plan and produce a work of art that displays the ability to choose subject matter, symbols, and ideas to communicate intended meaning. (5.12.1)

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION
Design Process

The website was developed using Adobe Dreamweaver 5.5 with CSS. All project files are located on the Boise State University server. The programs used for graphic design were Adobe Fireworks 5.1, Adobe Illustrator 5.1, and MS Word and Picture Organizer 2010. The site design followed the structure of examples of past student projects and the expectations of the grading rubric. The majority of the student examples included a home page, three or four lessons, lesson plan descriptions, header, footer, sidebar, navigation, justification paper, and unit of instruction. This is the format this paper followed. At the start of the process, I knew the subject matter that I wanted to feature for the course, the artistic movement of Cubism, but was unclear about exactly how to present it. But once the website design format was determined it became clear that there should be three lessons for the unit that should cover the history, the main artists, and a lesson on how to paint in the style. The following is a description of the design process listing each individual graphic that was used with an explanation and commentary. Graphic Descriptions Header & Footer 1. Cubism (Color): On the top of each Web page a main header was placed. The instructional goal of this image is to provide information about the subject matter without attracting an excessive amount of attention. This was accomplished by the use of a low value cool color, olive green, which tend to recede or blend (Lohr, 2008, p. 267). The use of the opposite type of color, high value and warm such as orange, has been shown to advance colors (p. 267). In other words, the use of warm colors tends to capture a persons attention more and is the reason why it was used in the design of the informational pages. Finally, the footer is identical

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION

throughout the website and it has an olive background color with white text. The text features the current year, the name of the author, the name of the course, and the university. Introduction Page 2. Palette (ACE/PAT): This main page (home) graphic features an artists palette with four different colored circles with text, a paint brush, and three paint blotches. Inside of the four circles is text with different options which are quick facts (blue), history - lesson 1 (green), artists - lesson 2 (red), and paint - lesson 3 (yellow). The intention of this image was to gain the learners attention which is the first stage in Gagnes nine events of instruction (Brown & Green, 2011, p. 103). Further, according to Alessi and Trollip (2001) the design of the introduction page is extremely important for all multimedia programs because the initial goal of the design should be to attractattention and create a receptive attitude (p. 49). In addition, the navigational palette also added interactivity to the main page which has been shown to increase the depth of learning or understanding in online environments (Evans & Gibbons, 2007, p. 1156). The effect that was intended was hopefully achieved in this design through the use of the multicolor interactive palette and the directional easel. 3. Easel (Organization): On the main page positioned next to the palette and placed in the top right-hand corner is an easel featuring text that reads click on paint color to enter section. Underneath the text is a road sign arrow pointing in the direction of the palette. This directional cue was created for two reasons. One is to direct the users attention to the palette and the other is to inform them that the palette is not just a graphic but also a form of navigation. As stated in Lohr (2008), these type cues are important because they provide pathways through information that might otherwise be confusing or distracting to the learner which increases cognitive load (p. 123). As every good instructional designer understands, the key component to effective

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION

multimedia instruction, and all instruction for that matter, is the reduction of extraneous cognitive load as it interferes with the learning process. 4. Favicon (Decoration): The image of a cube with an olive green background was added to the source code as a favicon and it appears on all of the Web pages. This was added as decoration. Lesson 1: History of Cubism 5. Map (Color & Depth): Added to the history section is an image of the map of Europe during the time period. This map presents a few facts related to Cubism and features the four countries where most of the artists were predominantly from. These countries are France, Italy, Czechoslovakia, and Spain. The colors used for the header, footer, and the countries are lower value cool colors and are considered appropriate and aesthetically pleasing by the designer and test user. In addition, depth was created by using a map template which had shadowing around the water bordering countries. Lastly, for more depth there were 13 instances of the drop shadow effect added to the page text. 6. Timeline (Selection): A timeline was created as an organizational visual to show where the movement of Cubism fit in chronologically with other art forms ranging from the years 1870 to 1975 (Lohr, 2008, p. 18). For the design, white space and color were used to direct the learners attention (selection) to the dates of Cubism on the map. The reason this was used was because e-learning relies heavily on the screen to communicate and because of that instructional designers should make heavy use of relevant visuals (Clark, 2008, p. 39). 7. Quick Facts (White space and Figure-Ground): This graphic features eight short facts about the movement. The intention of this graphic was to direct the learners attention using white space as it has been shown to divide text (Lohr, 2008, p. 272). This was accomplished by alternating the color (black and white) of the text, numbers and background for each of the facts.

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION

Additional space was created by the centering of the text. From the designers perspective this form of alignment forces the eye directly to the text. As stated in the main textbook, though often ignored, unused space is considered a design tool as important as type, shape, color, and depth (p. 275). This design also displayed a good use of the figure-ground principle as it was concentrated, concise, and concrete in its presentation of the information (p. 103). 8. Art logo (Typography): The logo was created for the typography assignment but there was no intention to use it for the actual project. It was added to the bottom of the history page of this project just for effect but it would not be included in the actual instructional website. Lesson 2: Artists 9. Container (Color & Shapes): At the start of the process the color that was chosen for the header, footer, and corresponding shapes for the Web pages was a deep orange. After receiving feedback from the class, this was changed and the header and footer is now the olive color that was previously described for the header. 10. Sidebar: Picasso page (CARP): This page was created as a pop-up for the artist Picasso and contains a few tidbits of information along with graphics and a few actual paintings. It is situated on the right-hand side of the page on the very top of the sidebar. This graphic relates to the CARP principle as it includes examples of contrast, alignment, repetition, and proximity. This was the only individual artist page created for the project. The initial goal was to produce one of these type pages for each of the eight artists listed but time constraints did not allow for this to occur. Lesson 3: Painting Exercise 11. Sidebar: Video icon: This graphic was used as a visual cue and a button that directed users

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION

to the six-minute video explanation of how to paint in the style of Cubism. The video icon was located during an Internet search, and not created by the designer, but as stated by Clark and Mayer (2007) the use of any relevant graphic within the design improves learning by usingvisuals to illustrate content (Clark & Mayer, 2007, p. 315). 12. Containers (Color & Shapes): The colors that were used for the Paint page match the other pages. For this page, a white rectangular shape was added behind the main informational container and a drop shadow effect was applied in order to create a sense of depth. Also, the two sidebar containers feature a white shape for the main background, with a drop shadow, and an orange colored rectangular shape tucked behind it.

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION
References

Alessi, S. M. & Trollip, S. R. (2001). Multimedia for learning: Methods and development. (3rd ed.). Needham Heights: Allyn & Bacon. Brown, A. & Green, T. D. (2011). The essentials of instructional design: Connecting fundamental principles with process and practice. (2nd ed.). Boston: Pearson Education, Inc. Clark, R. C. (2008). Developing technical training: A structured approach for developing classroom and computer-based instructional materials. (3rd ed.). San Francisco: Pfeiffer. Clark, R. C. & Mayer, R. E. (2007). Using rich media wisely. In R. Reiser & J. Dempsey (Eds.), Trends and issues in instructional design and technology (pp. 311-322). (2nd ed.). Upper Saddle River: Pearson Education, Inc. Evans, C. & Gibbons, N. J. (2007). The interactivity effect in multimedia learning. Computers & Education, 49, 1147-1160. Lohr, L. L. (2008). Creating graphics for learning and performance: Lesson in visual literacy. (2nd ed.). Upper Saddle River: Pearson Education, Inc.

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION
Media Sources

Introduction Page 1. Colored Circles: www.shutterstock.com 2. Palette: https://www.tsl.state.tx.us/sites/default/files/public/tslac/ld/projects/trc/2004/manual/internal _chapters/images/patterns/T_Pattern_Palette.jpg 3. Paint Blotches (Palette): a. http://us.cdn4.123rf.com/168nwm/ginosphotos/ginosphotos1010/ginosphotos101000603/ 7972826-yellow-paint-splatter-isolated-over-white-background.jpg b. http://us.cdn2.123rf.com/168nwm/prawny/prawny1008/prawny100800023/7684196simple-graphic-illustration-of-a-splattering-of-pink-paint-or-ink-isolated-on-white.jpg c. http://rlv.zcache.co.uk/orange_paint_splodge_cork_coasterrf35e20949e8c407ebade5fe69fc62457_ambkq_8byvr_512.jpg 4. Brush: http://the-smiling-pony.deviantart.com/art/Artist-s-paint-brush-request-258925853 5. Easel: www.shutterstock.com 6. Arrow: http://www.wgnflag.com/xcart/images/P/G-62A_ArrowStockSign.jpg 7. Favicon (Cube): http://www.charlespetzold.com/blog/2009/07/RotatingWireframeCube.png Lesson 1 History Map 1. Blank map of Europe: http://s210.photobucket.com/user/korvinblue/media/Europe1.png.html#/user/korvinblue/med ia/Europe1.png.html?&_suid=136457480541008934959777632665 2. Czechoslovakia Cubists - information: a. http://www.czechcubism.cz/english/ b. http://charles_hom.tripod.com/czcubism.html Sidebar 1. Franz Metzinger Table by a Window - 1917 http://www.metmuseum.org/toah/works-ofart/59.86 2. Juan Gris Violin and Playing Card 1913 - http://www.metmuseum.org/toah/works-ofart/1996.403.14

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION

Lesson 2 Artists Signatures: 1. Picasso: http://www.ambilogo.com/wp-content/uploads/2012/04/Picasso_signature.png 2. Diego Rivera: http://www.google.com/search?aq=&rlz=1T4ADFA_enUS425US441&q=diego%20rivera% 20signature&um=1&ie=UTF8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=tRp8UabMCejP2AWQyIDYDA&biw= 1054&bih=521&sei=vxp8UZLrMInQ2QXHxYCoDw#imgrc=9LkoO3jMQn3nMM%3A%3 B6_5H2-MkleXb5M%3Bhttp%253A%252F%252Fwww.painterspaintings.com%252Fwpcontent%252Fuploads%252F2011%252F08%252Frivera_diego_signature.jpg%3Bhttp%253 A%252F%252Fwww.painterspaintings.com%252Fdiego-rivera%252F%3B350%3B96 3. Braque: http://farm1.static.flickr.com/91/241902994_840361ecac_o.jpg 4. Duchamp: http://0.tqn.com/w/experts/Fine-Art-3122/2011/10/signature_138.jpg 5. Leger: http://media.liveauctiongroup.net/i/7679/9300883_3.jpg?v=8CC88323CCEDE90 6. Gris: http://media.liveauctiongroup.net/i/4782/6953067_3.jpg?v=8C96CF66E73C1E0 7. Boccioni: http://www.theartstory.org/images20/chart/signature_boccioni_umberto.png 8. Metzinger: http://www.google.com/imgres?imgurl=http://p1.laimg.com/359/23574/8383669_2_l.jpg&imgrefurl=http://www.liveauctioneers.com/item/8383 669&h=400&w=600&sz=47&tbnid=RSVLfvpvZhWTIM:&tbnh=90&tbnw=135&prev=/sea rch%3Fq%3Dmetzinger%2Bsignature%26tbm%3Disch%26tbo%3Du&zoom=1&q=metzing er+signature&usg=__sghwE8DGSkTK1GLH7Fk4ZQd6hp8=&docid=_PEHLkiNgxoxSM&s a=X&ei=nZsrUfDCFrTo2gWN1IE4&ved=0CDUQ9QEwAQ&dur=256 Links to Artist Web pages: 1. Picasso: http://www.pablopicasso.org/ 2. Rivera: http://www.diegorivera.org/ 3. Duchamp: http://www.metmuseum.org/toah/hd/duch/hd_duch.htm 4. Gris: http://www.juangris.org/ 5. Boccioni: http://www.the-athenaeum.org/art/list.php?m=a&s=du&aid=224 6. Leger: http://www.fernand-leger.com/

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION

7. Metzinger: http://www.the-athenaeum.org/art/list.php?m=a&s=du&aid=1752 8. Braque: http://www.georgesbraque.org/ Sidebar Links to paintings 1. Picasso: http://www.metmuseum.org/toah/works-of-art/49.70.33 2. Braque: http://www.metmuseum.org/toah/works-of-art/1997.149.12 Pablo Picasso Bio Information for Web page 1. Biography: http://www.biography.com/people/pablo-picasso-9440021 2. Art: http://www.funofart.com/top-10-most-expensive-paintings-by-pablo-picasso/ 3. Spain Flag: http://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Flagmap_of_Spain_(1785-1873,_1874-1931).svg/749px-Flag-map_of_Spain_(1785-1873,_18741931).svg.png 4. First Cubist painting: http://smarthistory.khanacademy.org/assets/images/images/avignon.jpg 5. Quote 1: http://www.brainyquote.com/quotes/authors/p/pablo_picasso.html 6. Self-portrait: http://www.google.com/imgres?imgurl=http://www.awesomeart.biz/awesome/images/t_Picasso%2520%2520Self%2520Portrait%25201907.jpg&imgrefurl=http://www.awesomeart.biz/awesome/shop/item.aspx?itemid%3D4787&h=500&w=373&sz=43&tbnid=fF8srCwp 2Aml0M:&tbnh=93&tbnw=69&prev=/search%3Fq%3Dpicasso%2Bself%2Bportrait%26tb m%3Disch%26tbo%3Du&zoom=1&q=picasso+self+portrait&usg=__gRzWIjBF5u9aRWOh 5cyVtch3vIU=&docid=I25dXORAvCMnUM&sa=X&ei=t7ZDUfG_IMf62AWqt4C4Cg&ve d=0CHkQ9QEwFQ&dur=379 7. Quotes 2: http://www.pablopicasso.org/quotes.jsp 8. Quotes 3: http://www.quotationspage.com/quotes/Pablo_Picasso/ Lesson 3 Paint 1. Content: http://www.wikihow.com/Do-a-Cubist-Style-Painting 2. Video icon: http://academiclifeinem.blogspot.com/p/p-videos.html

10

Rick Robinson Boise State University EDTECH 506 Spring 2013

JUSTIFICATION

Images Used

11