“It’s a Me, Mario!”

Nintendo 3DS – Slide Design

The Process

In this imaginary scenario, I am asked by my employer to analyze one of their existing ads, and then to use my findings to create an additional ad that would fit in with that same ad campaign. I would then make a slide presentation that would assist me in explaining my findings. I set out to examine and evaluate a design for an advertisement. I chose an ad campaign for the Nintendo 3DS handheld gaming devices. The ad I chose featured the video game character Kirby.

kirby ad
photo credit: DerekMartinez.Net

For these ads, the target audience is young, american boys and girls, ages 10 to 18, who enjoy playing fun video games. The message being conveyed is that something exciting is changing about the games you already love; you can now be immersed in a 3D adventure with your favorite video game characters from Nintendo.

slide

Original Ad

I then examined the design of this ad, reverse engineering it in a way, to understand what they were going for when they made it. I looked at the design, the layout, the use of typography, the color scheme, and so on.

 

New ad

I set out to use my findings to create an additional ad that would fit in with that same ad campaign. I found some CC0 images that would fit for what I was going for.

3ds
photo credit: pexels.com

For this 3DS, I rotated it slightly counter-clockwise and adjusted the hue to match the main color for Mario – red. They do make red version of the product, so we’re good there. I made a mask to eliminate the white background.

mario
photo credit: pexels.com

For this image, I only needed Mario, so I made a mask to eliminate everything but Mario. For both images, I used “shift edge” to avoid any leftover white edges/outlines.

nintendo 3ds logo
credit: Nintendo 3DS logo (Fair Use)

I of course also needed the logo for the Nintendo 3DS (fair use will apply here). I adjusted the hue to match the accent color for Mario – blue. For the overall ad design, I’m using a mostly monochrome color scheme based on the red in Mario’s outfit. He also has some blue, so I’m using that as an accent color, which adds some nice complimentary contrast. The typeface I used was Helvetica Neue Condensed (in all caps), which falls in the Sans Serif category.

Some of the feedback I received during a peer review process mentioned the drop shadows that I had been using, so I took care of those. I guess I had one or two typos in there too, so I went back and fixed the spelling mistakes. I’m pretty happy with my ad design, so I then made slides that overview and examined my design and it’s similarities and consistencies when compared with the original ad.

Slides

Conclusion

In this exercise, I analyzed an existing ad for the Nintendo 3DS for Kirby and then to used my findings to create a new Mario 3DS ad that fit with that same ad campaign. I then make a slide presentation to explain my findings. I’m pretty happy with my final design and this was a fun learning experience overall.

Advertisements

Staple Ads

Creative Ad

The process

I set out to design a create advertisement. For this endeavor, the target audience (randomly generated) consists of single men and women, ages 25 to 34, with Associates degrees who have and income ranging from $40,000 to $59,000 and whose media consumption primarily consists of TV and Social Media. The product to advertise (randomly generated) was staples. I then chose the Bostitch staples brand.

The message in the ad is intended to be something like “these staples are reliable so that you can relax/rest assured” or “these staples work hard so you don’t have to” or “These staples help you organize your life / without these staples you’re life would be messier/harder”.

At first all I could think of were straightforward ideas like showing a person using a stapler to put up a poster onto a bulletin board or something like that. However I wanted to try to be a little more creative. I eventually thought of having a train going along some train tracks but, instead of train tracks, there are a bunch staples in a row forming a track for the train to use as a track. The staples then run out and we see the stapler placing each new staple to continue the track for the train. I liked this idea because it creates a sense of urgency. It tells you that when you’re in a pinch, you can count on this product to keep you on track. This is illustrated in the text of the ad as well. At first I was going to go with “Don’t get derailed” but eventually opted for the simpler, more positive “Stay on track” instead. I decided, since the audience is movie/tv fans, to have the train be the Hogwarts Express. For the call-to-action, I settled on “Visit Bostitch.Com”.

 

hogwarts express
Photo courtesy of Target.com

I used various Adobe programs to edit the photo(s) and create new shapes and text. I used the typeface called “Utility BoldCondensed” since it matched the company logotype. The company colors were the inspiration for my color scheme; I went with a mostly monochrome look consisting of shades of orange, with black and white in there as well. The “Stay on track” text is meant to stand out the most, so I emphasized this with larger text and higher color contrast (white on orange) with less important text being smaller and having less color contrast (darker orange on orange).

Primary Ad

main ad
TV Static Ad (1920 px by 1080 px)

Secondary Ad

secondary ad
Facebook Static Ad (400 px by 209 px)

Conclusion

I feel this the final result conveys the intended message. It shows that the product help you organize your life and imply that, without it, you’re life would be messier or harder. This idea also creates a sense of urgency, telling you that, when you’re in a pinch, you can count on this product to keep you on track. This is illustrated in the text of the ad as well, with the words “Stay on track”. The train being the Hogwarts Express caters to the movie/tv watching audience and the design has a clear, straightforward call to action in the words “Visit Bostitch.Com”.

Musical Cymbalism | Music Icons

Objective

I set out to create some music icons that incorporate things like musical instruments. With these icons, the target audience would consist of musicians or music fans (male or female) ages 16–26 in the USA. The audience will probably be a little tech savvy, as the icons could be used for things like mobile app icons, web icons, or youtube icons. The message these icons seek to convey is one of fun, one that says something like “we make great music that will make you want to dance/sing/etc.” With this in mind, I set out to create these music logos. I decides to have the icons depict pianos, a microphone, an ocarina (which is a recorder/flute-like instrument), and a violin.

Final versions

final icons
9in by 6in PNG image with all the icons

I wanted all these to seam like they belong together, unified in a sort of set. I chose a color scheme of red, dark red, and white. Red is a warm color, so it pops out and grabs your attention. Using a monochrome color scheme, the accent color will be a much darker shade of red for good contrast in the accents. The white will be used for a stark contrast to the red colors and for negative space as well. Normally I wouldn’t saturate a design with so much red as this can tend to overpower the eye, but since these will likely be represented as small logos or icons on the web, I felt that the red was tastefully used. Since logos need to be simple and recognizable, I simplified the details in favor of appealing white space in some of the icons.

Design Process

Above you see the first icon which depicts piano keys (shown: 400 px version, then 60 px version). To add asymmetry and visual interest, I tilted the design so that the keys are at a diagonal. The darker red color forms an accent and in places acts as a shadow. Since the keys were white, I added a shadow to help define the circular border while still leave some of the border to the imagination.

Above you see the second icon which depicts a different take on the piano keys idea (shown: 400 px version, then 60 px version). Since the keys aren’t white in this version, there was no need for any border-shadow.

iconicon

Above you see the third icon which depicts a microphone (shown: 400 px version, then 60 px version). I use repetition together with asymmetry, making all of the icons at similar diagonal angles for unity and visual interest. The darker red color again forms a shadow which helps define the microphone for the viewer. I add a tiny bit of the gestalt law by having the circle at the top of the microphone not be completely defined – letting your brain complete it for you. I feel that this also add visual interest and I’ve seen many logos do this as well.

Above you see the fourth icon which depicts a recorder/flute-like instrument called an ocarina (shown: 400 px version, then 60 px version). The ocarina is nice and I asymmetrical and I have it at a diagonal angle for visual interest and consistency. The darker red color again forms a shadow which helps define the ocarina for the viewer. I removed the triangle design and some of the finger-holes – simplifying the design in favor of visually appealing white space.

Above you see the fifth icon which depicts a violin (shown: 400 px version, then 60 px version). I again have it at a diagonal angle for visual interest and consistency. The darker red color again forms a shadow which helps define the violin for the viewer. I removed the f-holes and strings – again simplifying the design in favor of visually appealing white space. This helps the logo not look too cluttered or confusing, especially when viewing the smaller versions. For this icon, I used even more of the gestalt law, having the lower half of the violin not be completely defined – letting your brain complete it for you. I feel this works well because the violin is already a very easily recognized instrument and because the thinner waist section (aka c-bouts) curve back out towards what would’ve been the wider lower half of the instrument. I took advantage of this curve and had these instead curve directly into the red outer circle and your brain fills in the rest of the violin for you. The gestalt law is also why I didn’t define the very top of the violin.

Finale

I feel that I have accomplished what I set out to do. I’ve created music icons – incorporating musical instruments – that are tailored for the target audience. Musicians or music fans might be interested in these for things like mobile app, web, or youtube icons. I feel like the color and simplicity give off a fun vibe that speaks well to the intended message. Each icon feels like they belong together, unified in a sort of set because of the consistency in the use of repetition (red background, circular border, white body). These logos are simple, working well in small view as well as enlarged. Overall, I’m pretty happy with the final look I’ve achieved.

Musical Cymbalism

I have included the following images in the blog post:

  • One 9in by 6in PNG image with all the icons (below):

all icons

 

  • Individual PNG icons each 60px by 60px (below):

piano apiano bmicocarinaviolin

  • Individual PNG icons each 400px by 400px (below):

piano apiano bmic ocarinaviolin

These icons are going to be music icons that incorporate things like musical instruments. The target audience would be musicians or music fans (male or female) ages 16–26 in the USA. The audience will probably be a little tech savvy as the icons could be used for mobile app icons or web icons or youtube icons.

The message these icons will seek to convey is one of fun that says something like “we make great music that will make you want to dance/sing/etc.”

Red is a warm color, so it pops out and grabs your attention. Using a monochrome color scheme, the accent color will be a much darker shade of red for good contrast in the accents. The white will be used for a stark contrast to the red colors and for negative space as well.

 

Bread & Design

p1

p2

p3

Designs by Spencer Allred

I set out to create a magazine spread using Adobe InDesign and, in the process, exercise the principles of design. The first page is simply a page while the second and third pages form a single spread. The text for this design comes from a General Conference address by Elder D. Todd Christofferson entitled The Living Bread Which Came Down from Heaven*. Since the article comes from a General Conference talk, the look I’m going for would be akin to something published in the Ensign. My target audience would therefore be mostly adult members of the Church. For specificity purposes, we’ll say the target audience is male and female Church members, ages 24-40 years old, living in the USA, who are conservative and have an interest in spiritual growth and learning. This design is trying to communicate a message of peace; in a way, it’s saying “What to have greater peace? Read this talk to find out how”.

I felt that the ideas of peace and spiritual growth could effectively be conveyed through images of nature. I took a close-up photo of a tree and used depth of field to make it more dynamic looking. This went on the first page behind the title and a column of text. The photo had some nice green grass, so naturally green became a part of the color scheme. I needed some contrast to make the title stand out, so I chose a soft blue that I felt had a nice, peaceful feel to it and I drew a rectangle behind the title. I wanted that box to feel like it belonged, so I used repetition with various boxes to tie the whole design together. There’s a green box behind the singular column of text and boxes for the article headings, quote, and as a repeated footer.

For the title, I emphasized the important words with larger text and heavier weight. For the title, subtitle, headings, and quote I used Avenir Next LT Pro which is a Sans Serif typeface, which create contrast ing the typography. For the body text I used Palatino which is an Oldstyle typeface. Then I staggered the lines of the title and subtitle so as to create a direction/flow which guides the eye from the title to the article. To avoid the title’s blue box from having too much horizontal flow/movement, I add the vertical green box and column of text. The contrast of the vertical and horizontal boxes makes the design more dynamic and visually interesting, as does their asymmetrical placement on the page.

On the second page / left-side of the spread, I used the green for the background to enhance the natural/peaceful feel. The corner shows some wheat†, the tips of which point the reader’s eye into the page. The wheat works on two levels; it works with the nature aspect as well as ties into the bread mentioned in the article. Since the article helps the target audience with spiritual growth, I showed a sort of growth/progression from the wheat into the wheat bread‡ which is found on the opposite end of the spread, which again hearkens back to the “bread from heaven” in the article.

I took a photo of rainwater on the sidewalk to further the nature/outdoors feel. The way the quote overlaps the image mirror the overlapping boxes from the first page, unifying the design. These two, as well as the bread image, use text wrapping to improve readability and visual interest. To create more visual interest and avoid overwhelming the eyes while too much green background, I swapped the colors on the third page to instead be green text on a white background.

In this design I’ve used contrast, repetition, asymmetrical balance, and typography to name a few. The design has a cohesive flow and theme that aides its target audience. The colors and images used all fit further the themes of natural growth and spiritual development.

 

Links: 

* – The Living Bread Which Came Down from Heaven by Elder D. Todd Christofferson – https://www.lds.org/general-conference/2017/10/the-living-bread-which-came-down-from-heaven?lang=eng.

† – Photo credit: Richard Revel (CC0 License) – https://www.pexels.com/photo/wheat-bread-slices-166021/

‡ – Photo credit: Skitterphoto (CC0 License) – https://www.pexels.com/photo/agriculture-arable-barley-close-up-546332/

Photo Rules

In this reverse engineer post, we’ll look at examples of some design / composition principles in photography. I’ll take a professional photo and examine it’s composition, including some draw-overs. Thanks for joining me as we take a closer look and maybe we’ll learn something on the way. Ok, let’s get started.

Rule of Thirds

man by net
– danielweisser.com

This photo can be found from danielweisser.com which a photography website.

draw over thirds

As you can see, this photo uses the rule of thirds pretty well. The green lines cross right at the guy’s eye which draws our attention/focus there. His shoulders line up with the purple line to form a sort of ‘horizon’ if you will. The vertical orange rope on the left side follows the blue vertical line pretty closely which prevents it from being jarring or distracting.

courtyard

courtyard grid

As you can see, this photo I took also uses the rule of thirds pretty well. The green and blue vertical lines line up with the tree and lamppost. The purple line matches up with the top of the bush and the pathway, forming a sort of ‘horizon’ if you will. the orange line matches up with the red banister/railing on the right half of the photo.

Leading Lines

man by ropes and trees
– danielweisser.com

This photo from danielweisser.com shows a man leaning against some orange ropes. In green I have marked how the rope toward the center sort of point toward the man and the focus of the photo. These lines exist in the environment the in which the photo was taken and they lead our eyes and tell us what important things to look at.

pathway to a bush

path/bush lines

This photo I took shows a bush in a courtyard surrounded by paths. In blue, I have marked how the pathways guide our eyes toward the bush. the line in the snow also points to the bush (which is a lucky coincidence as that’s not even a planned architectural thing). The slant of the railing and the house on the left both point there too. These lines exist in the environment the in which the photo was taken and they lead our eyes and tell us what’s the important thing to look at.

Depth of Field

cactus
– danielweisser.com

draw over depth

In this danielweisser.com photo we see a short cactus bush and a rock in the foreground while in the background we see a sand/gravel path, some taller plants and trees, and what appears to be some buildings in the distance. The photo uses depth of field to create a more dynamic look that draws your attention to the foreground. The cactus and rock are in focus, drawing our attention. The rest in the background is blurry and out of focus, reinforcing and highlighting the foreground as the ‘main attraction’ so to speak.

tree

tree circles

In this photo I took, we see a tree close up (in orange) and in the background (in purple) there’s some grass and a house. The tree trunk is in focus, drawing our attention, while grass and house the background are blurry and out of focus, highlighting the tree as the ‘main attraction’ so to speak. That how this photo uses depth of field to create a more dynamic look.

Conclusion

This reverse engineer / draw over exercise has revealed and explored some examples of principles of design and composition in photography. I feel like I now have a better grasp on these ideas. I’ve especially learned more about depth of field in this exercise; before this, I was a bit… hazy on what it meant and how to use it. Now things are coming more into focus for me. Learning about leading lines also I think helped point me in the right direction. Also, that third one rules. Hopefully using it will put my photos on the grid.