Category Archives: Web-Based Multimedia Design

WEEK FOUR: IMAGES, COLOR, AND IMPACT

OLYMPUS DIGITAL CAMERAI am using a free online photo editor, REBBIT, and its options are not huge, but I did get to play enough with color and width choices, as well as shape, to understand the effect that edge treatments have on the overall impact of an image.  Here the “polaroid” effect detracts from the simplicity of the shot, but I like the blue to pick up the color in the bike seat, handlebar grips, and bricks, which lost a lot of gray with this edge treatment (new term: spontaneous contrast).

OLYMPUS DIGITAL CAMERAHere the border frame is partial, corners only, but still trying to work with the effect of blue.  As I deepened the corners, adding more edge, less photo, the importance shifted back to the bike, a bit like a telescope.

OLYMPUS DIGITAL CAMERAThis “museum” framing effect looks better at the site than in the transfer.  The vertical edges should be the same width as the top and the bottom.  The brown draws less attention to itself and goes well with the brown of the tires and the soft yellows and deeper gold color of the bike frame.  The entire scene, menu, pots, bike, appears more even in value in this frame.  Yes, the bike is the focal point, but it seems a part of the larger scene.

OLYMPUS DIGITAL CAMERAThis is a variation on the museum framing idea.  Once again, the vertical edges are misrepresented here.  What I notice about this frame’s effect is the way the color of the bicycle frame “pops” because of the addition of the color in the border.  I really like the effect.

OLYMPUS DIGITAL CAMERAIn the last paragraph of the exercise, Krause says, “And remember: a border’s role is (almost always)to enhance the image it surrounds–avoid adding a border that calls too much attention to itself” (p.197).  Obviously this is an example of a border that, in tone, bears absolutely no connection to the bicycle even though the candy corn hues aren’t jarring against the colors and hues of the photograph.  It was only after I completed the reading today about working with images, that I revisited the original photo and decided to experiment with “tight cropping.”  As White Space Is Not Your Enemy advised on page 134, “Extreme tight crops and close-ups are particularly interesting, as they force us to look at the subject in a new way”  (Golombisky &  Hagen).  When I cropped and zoomed with this idea in mind, the bike disappeared and the reason that the candy-corn frame serendipitously has some merit, emerges, as you can see below.  (I am sure that it was the sign that prodded, “Take this shot!”  What a great way to remember our day in Rome.)

OLYMPUS DIGITAL CAMERA

 

The idea that a different picture emerges when one plays with framing and particularly cropping, is part of what creates thematic force.  In designing a cover for a new young adult novel, Flirting with the Bully, I had to think about my audience and how symbolically and poetically I could create a compelling cover.  I have to give a HUGE nod to the incredibly brilliant “Let the Drummer Kick” (Citizen Cope) that exhibits the power of creativity with type (and the judicious use of only three colors to attain stunning effect):

Here’s my cover:

Flirting with The Bully

For those of you who have never used Canva (thanks to Richard Byrne here), check it out.  After only four tutorials, I got the hang of it!

(I just realized, in reading my peers’ posts, that I was supposed to complete three activities this week, but did not.  What to do?  I sit here facing the iconic azure and gentle surf of the Dominican Republic…without my texts.  I decided, rather than ignore my oversight, to design a new header for my eighth grade class blog, using design principles, color, text, and images to do so.  I hope it in some way suffices.  I need to work out some glitches; the problem is mine, not Canva’s, but once again, the finished product points to a certain lack of skill that exists despite the affordances of the technology.)

Design Elements and Principles

Version 2 Default 2

Photos from Martha Stewart’s Living July/August 2015.  Photos by Mikkel Vang.

The feature story from the most recent issue of Martha Stewart’s Living speaks to the principles of design and has a surprise, too!   Almost the entire two-page spread is a photograph of a house and its surroundings.  The CVI (Center of Visual Interest) is clear; wouldn’t you want to live here?  The choice of a panoramic view, eliminating the gutter, is a wise one.  It is how the layout achieves balance.  The angular, geometric structure of the house with its clearly vertical and horizontal lines is beautifully balanced by the fluffy foliage dominating the left-hand side of the photograph.  There is a hint of wind in the way the sea grass moves toward the right, while the house stops its flow off the page.  The grass almost becomes a pointer, as if to say, “Look, over there, the main attraction.”  It is subtle, but movement plays throughout the scene.

Contrast emerges as well as with the different colors and values.  The pale blue of the sky overhead contrasts with the inky blue-black of the pool, the darkest part mirroring the angular lines of the house in its gently rippled surface.  Through the juxtaposition of light intensity, images and color, the scene achieves atmospheric perspective.  It is as Golombisky and Hagan say:  “Dark color values always seem closer than light ones.  Colors in the foreground have darker, richer values than colors in the distance, which tend to fade and wash out”( p. 54).

The text choices, from the unexpected vertical orientation of the headline which follows the photo’s edge and is bold sans serif, to the openly spacious type face with serifs, contribute to the unity of the layout.  The hint of blue interjected by the text choice for credits adds interest and attention, but is not overwhelming because of the font size and plain style.

In the same issue, Samsung features an advertisement for its “4-Door Flex” Refrigerator.  The entire ad screams CLEAN, organized,and “innovative,” one of the words used to describe it in the clean, white-on-dark-blue type in a band where a closed-door version, all crisp and modern, runs across the the bottom third of the ad.  With the clever word-play, “…keeping your favorite foods within reach is easy.  Maybe too easy,” Samsung emphasizes with crisp, sans serif text, the allure of the wide-open door model that occupies the top two-thirds of the grid.  The doors seem to draw the reader in, offering a color-coordinated hug.  The movement is clear.

Fridge Ad

The wide-open fridge occupies center-stage against pristine white cabinetry and stands on contrasting dark hardwood flooring.  The contrast emphasizes the message:  No frills, but class!  The contrast continues with the choices of foods displayed on the panoramic shelving.  The top, seemingly vast, compartments feature all things green—and perspective is attained using relative size and scale of items.  The values of green vary, including beverages standing elegantly in the door frame next to a pineapple, offering a color-pop, but discreet, with the top frond echoing the green.

The choice to place all these healthy, green foods in three-quarters of the fridge and the fourth, bottom-right, to fill with mouth-watering desserts, primarily red and white, with chocolate brown as the accent, is unexpected, yet a necessary contrast. (It might also be saying something about the balance one needs in a healthy diet?!)

While font choices definitely play a significant role in the design of the Living examples above, the Design Basics Index exercise “Word Portraits” (p. 241) has made me view fonts in an entirely new way.  (Who knew that word groups fonts into collections and that these collections have names:”Fixed Width;” “Fun;” “Modern;” and “Traditional,” to name a few?)  I have had fun doing this even though I am unsure about some of my choices.

TWELVE FONTS

As my husband said when he viewed the “Twelve Fonts” document, “Fonts are everything!  It wasn’t for nothing that Steve Jobs stayed on Reed’s campus after he’d dropped out to take calligraphy classes.”

 

 

 

Mini-Art School: What Makes It Work?

When deciding which website to evaluate for good design principles, I hedged my bets.  No one does art like MoMA, and I need all the help I can get as I navigate these unfamiliar waters of design.  The website works in so many ways, but after the tour through Krause’s basics, I am beginning to underpin my, visceral “I love this site” reaction with some rhetoric for explaining why.  I’m sure that is a goal of this course.

MoMA utilizes the grid system, but not rigidly.  The header is divided into three columns, but the columns are of different widths.  The art exhibit is featured by a complete header images which changes to a right-hand side narrower, film-strip-like series of images representing all offerings at the museum and a left-hand explanation literal “pop-up” from the bright red “Exhibitions” tab.  The navigation is unique and unexpected, defying the typical mundane grid structure.  Information POPS-UP as opposed to the expected “Drop Down.”  This works to place emphasis on the additional features.  Colors work to do this as well…red, black and white.

In the middle of the home page, the standard grid form offsets the unconventional with three evenly spaced information columns.  The fonts are consistent, varying only with bold and regular, allowing for harmony.  The hierarchy is clear from the header…the ART is predominant, but there is no dearth of the necessary “nuts and bolts” of the business.  The white background , the clean margins, contribute to the order of the space despite the variety of visual art represented in the moving images.

Flow is clear, both in the movement and in the way the eyes are drawn to the bottom, the navigation.  because it is unique, one wants to see what develops as one clicks on the stationary navigation at the bottom.  While it is an unusual approach the tags at the bottom are clean and small, echoing the font used in the information section mid-page, except in all caps.

The three different levels of the web page show clear attention to placement and emphasis, achieving visual harmony.

 

miniart1

Now for my foray into design…ARGH!  Her’s what I learned from doing the Mini compositions…fluency must be attained by pushing through initial resistance.  I railed against doing this, but by the last four boxes or so, I was having more freedom with my pencil.  I also wanted to be able to more effectively manage the space.  Initially all I wanted was to fill the damn rectangles!  (I have to apply this to my discipline, writing, and realize that this applies to those students I teach for whom the free writing exercises that I do with them seem like torture…like them, I’m sure, the possibility that something good will come is met with skepticism.  (I do like the feel of soft lead on thick paper and was actually pleased to find that I had kept some drawing pencils from a class I took many years ago…not that I’ve used them since then!)

The Mutts

By Joseph Mischyshyn + ArséniureDeGallium [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons                                guitar

“Guitard Epiphone 03” by Rama – Own work. Licensed under CC BY-SA 2.0 fr via Wikimedia Commons – https://commons.wikimedia.org/wiki/File:Guitard_Epiphone_03.jpg#/media/File:Guitard_Epiphone_03.jpg                                        bass

By Steve Snodgrass from Shreveport, USA (Texmaniac Uploaded by AlbertHerring) [CC BY 2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons                   drums

Why Join a Community?

Summer Update

It’s summer, and one of the tasks I undertake is retyping the list of usernames and passwords for all the online places I frequent.  I update twice a year now…and today is the day!  I have added so many new “tools” and communities.  Do I need to access yet another?  It depends on what I want to learn, so perhaps.  Is it possible, however, that I have yet to fully explore communities to which I already belong, that within this trove I’ve cached, there lie the resources that could help me with my multimedia montage project (MMP)?  “Yes!” is the resounding answer.

I have joined our class community on google+ and added Teachercast Educational Broadcasting and PBL (Project-Based Learning) as well.  Then I scour my go-to places list to find that Pinterest has edudemic with a collection specifically devoted to web-design that looks promising for a newbie like me.  In addition, edweb, a familiar landscape, has amazing resources in communities such as “Game-Based Learning” and “Creating Multimedia Stories” that I might never have discovered were it not required that I go looking.

The course I will be finishing in the next two weeks, “Introduction to Teaching with Digital Tools,” has familiarized me with ADDIE to a degree.  Today, as I was looking at LDC.org, I realize that the way the design of lessons is outlined follows the principles of Analysis, Design, Development, Implementation, and Evaluation in a simplified form.  Now I am seeing design principles everywhere.  (This morning my yoga teacher had asked, “Has anyone ever had the experience of watching a movie for the 10th time and seeing or hearing something for the first time?  You were at a different place the other nine times…Now you are here!”)  And so I am!

Because I intend the audience for the MMP to be my seventh and eighth grade book clubs, and envision going through the steps with the model text that they will be going through, all of Jeff Bradbury’s help, particularly technical, will be invaluable.  I want to have my students using the skills that they already use in their extra-curricular lives (Walker, Jameson & Ryan as cited in Sharpe, Beetham & de Frietas, 2010, p. 213) in the structure of our learning environment.

The book clubs will be addressing the essential question,”What Is Justice?” through their study of different texts. (I see “driving” question on the PBL site, and think they may be similar, but am too ignorant yet to answer definitively.) The texts they will choose from, predominantly novels, explore different responses to injustice.  Their “Take-Away” projects are what I want to address through the MMP.  The website will display the work of the students and allow them the freedom of presentation options, the how.  To a large extent, they will also select the content, what they choose to examine.  As Walker, Jameson, and Ryan asserted, “There is significant value in learners bringing to their academic studies these habits of selecting and appropriating materials, seeing and creating new patterns of meaning, and sharing information in creative ways” (as cited in Sharpe et al. p. 217).  The students will be building understanding, not just for themselves, but to share with the larger community, those who did not read the same text.  Furthermore, the essential question is being used across the eighth grade disciplines throughout the year.  Hopefully the work, and the methodology, regardless of the class in which it happens, will transfer.  I know I will be teaching for that.