A Trick of the Eye

KevinTong6

I ran across this beautiful graphic this week and loved it for several reasons. First, it’s very creative. Second, it still uses a lot of great design principles to really emphasize it’s message. I’ll point some of those out below.

Alignment

alignment

This design uses center alignment for it’s image and main title information. Unlike regular center alignment, however, it tweaks the wording so it is slightly diagonal. They do this for a number of reasons – first I think because it makes it more artistic with the center alignment with the image. Second, it aligns well with the diagonal lines that are softly shown in the background of the page.

Color Scheme

color scheme

The color scheme of this design is also a fun one. They have a soft blue background that is lighter on top and has darker hues as it gets lower on the page. The main image of the design has a mix of colors, the main ones being red and blue – good contrasting color choices for warm and cool colors. This works well with the design of the image to show conflict.

Contrasting Typography

contrasting typography

The designer of this ad chose contrasting typography. They used a very flowy script font for the title information and then used a standard san serif block font in all caps. Using contrasting typography brings in enough of a change to make the typography interesting and engaging.

Contrasting Design Element

There is a lot of contrast in this design, specifically for the main design graphic. There is the face of the woman looking out with traditional coloring of her face. You can tell that shape is a woman’s face and make out those details.

face 1

Then the contrast to that is in between the curved lines there are blue shadows and a red face. The red and blue contrast nicely with each other, as explained above. But the red color choice for the sinister face really contrasts well with the pale skin and light background as well. The pale face looks more innocent and calm, while the red face looks more mysterious and devious. I really liked the contrasting theme there as well.

face2

Overall the design of this graphic is really fun and interesting, with a lot of good stylistic elements to make the design stand out and look professional. Implementing these types of design principles really elevate any type of graphic. Thinking outside the box and being creative elevates it even further.

Advertisements

The Key to Making a Good Icon Set

Awesome icon set example

This week I listened to an awesome interview by Kyle Adams, a famous icon designer, giving tips on why he is so successful with icon design. Some of his tips really resonated with me.

The main points I enjoyed were that before you even begin designing an icon you need to consider what the goals are behind the icons and then you need to think about who the audience is as well. Answering both of those questions will really improve the look and feel of your icons, and improve your overall design of the icons.

It was also discussed that there are a lot of established icons already and there needs to be a reason to change what is already established. A lot of times icons will be very similar, but they will have their own style on it depending on the target audience and what the goal is behind the icons. Designers can still put their own twist and style on already established icons, and get creative by setting their own set of rules to help keep the icons with continuity. These rules will vary and are established based on the goals and audience of the icon sets.

This educational icon set (below) uses already established icon designs, but uses different design principles and colors to create a new take on them.

Awesome icon set example

Contrast

Contrast is one of the strongest design principles and it is used in a lot of ways with these icons. First, there is contrast between the background shape and the light art board the icons are placed on to help emphasize the icons themselves. There is also contrast with the shadows in the the icons. The extreme light and dark portions of the design contrast well against, as well as the red and green contrasting color choices.

Repetition

Having repetitive design elements unify the overall design set. In this case, there are several repetitive elements for these icons. First, they are all placed within a circle shape. Secondly, they all have curved edges, even on the elements that are rectangular or square in shape. Another repetitive element is the distinctive diagonal shadows coming off all the icons. All of these ‘rules’ that are repeated really unify the design and help them look professional.

Color Scheme

The color scheme of these icons unify the design as well. The same few colors are repeated throughout the various icons and are another set rule this designer chose to use. The main color choices are green, blue-green, yellow, yellow-orange and red-orange. The colors are a mix between warm and cool colors, and they work well to bring in color contrast and interest. All the colors are in multiple icon selections, and the scheme really improves the unity of the design.

Having these design principles in mind can really elevate an icon set design. But more importantly, having a goal in mind when designing icons is the key to creating well designed icons that will be perfect for your client.

What Makes a Vector Illustration Look Professional?

There are some excellent vector illustrations out there, but there are major differences in novice vector graphics and professional looking vector graphics. Today, I want to point out some things that make a vector illustration look even better.

I found this beautiful artwork from artist Kaz Oomori, who partnered with Disney and Fandango to create beautiful posters for the movie Star Wars: The Force Awakens.

3_Kaz_oomori-Star_wars.png

The artwork shows numerous reasons why it works well as a vector illustration:

Leading Lines

finn leading lines.png

The illustration takes advantage of the design element of leading lines. Your eyes are naturally drawn to the image of Finn and Kylo Ren because of the use of leading lines. Not only are Finn and Kylo Ren drawn in a diagonal, action way, but the lines leading off behind them really emphasize that action. Movement, as shown above, really elevates the appearance of this poster.

Good Use of Value

finn value shadows

There is an excellent use of value to show dimension with the vector illustration in this poster. Through out the design there are examples of shadows on the two men, and also the different value shadows leading off of them. On the face alone there is several layers of different shades of color, some of them the same type of color scheme just lighter and darker, but the artist also takes advantage of the light saber color reflecting off his face as well. There is also dimension with the shading on his pants, and also on Kylo Ren’s clothing and mask as well.

Contrast

finn contrast

Contrast is prominent in this design in multiple ways. Firstly, the color scheme shows great use of contrast with the cool blue color with the hot red color. There’s also contrast with the vibrant red/pink color of Kylo’s light saber highlighting off of his dark black and grey costume. The contrast between the two characters is also noticeable here as well with Finn on the good side and Kylo Ren on the bad, so having those two perspectives is a fun play on contrast as well.

If you look at the other artwork in the series they all have these same elements with consistency and repetition between the different posters, and all of them show good use of good contrasting design principles.

1_Kaz_oomori-Star_wars kaz-oomori-star-wars.png

Having warm color verses cold colors, using a variety of shades and focusing on the value of the design, and also using diagonal action lines really helped elevate the look and appearance of these vector illustrations. I am definitely a fan.

 

Pedigree Ad Slideshow Project – The Final Project

The semester is coming to a close, and with it comes our final project – a Slideshow Design and Presentation. This was probably my favorite project – not just because it was the easiest for me to do but because it incorporated multiple programs. I was able to do most of my design for the slides within InDesign, and did my ad design in Photoshop. I had never placed a PSD file within InDesign before so that was fun to test out too.

Project Specifications:

For this project we were asked to find a well designed add with at least one sentence of written content on it, with a logo. Then we were asked to design a new ad in the same style as the original ad we found. They have to look the same with consistency with design, typography, layout and visuals, and needed to add the company logo. Once we finished our ad we created a presentation slide design to present to the company we chose. We needed to have 6+ consistently designed slides, we needed to talk about the design, color, and typography of the original and new ads, and we needed to keep the slides looking professional by keeping it to one idea per slide.

Target Audience Analysis:

Unlike other projects, my target audience was a specific company – in my case, the Pedegree Company. I feel specifically it would be the marketing and advertising teams of the company.

Pedigree Ad:


I looked for a well designed ad and I found this cute, creative ad by Pedigree. I talk more in the slide presentation about why it makes a good ad, but what stood out to me the most was it’s clean look and creative idea.

My Ad:

Here is my take on the ad.

I found this photo by Coffy on pixabay that showed a woman and a dog. I cropped the dog out of the photo using the content fill and clone stamp tools in photoshop, and designed the ad to look like the original ad the best of my abilities. I added the tagline and logo and

Presentation Slide Design:

I had a pretty rough version of my slideshow when I turned in my rough draft, but the more time I had to work on it the more fun I ended up having with it. I know that pedigree uses yellow so I ended up using different shades of yellow with a pretty light green as well on my slides. As you can see with the slides, I point out the different creative elements of both advertisements such as design, typography and color. On my actual slides I also made sure to be consistent with the design elements and color on them as well with the same type of shapes and angles, as well as similar typography.












Conclusion:

This was a nice project to end with. Using multiple programs for one assignment was a good review, and I feel like making a presentation slideshow is something business professionals will find themselves doing from time to time. Even online influencers who do webinars and things, this will be helpful for that as well. All-in-all a good experience.

Getting Nostalgic With Illustrator Icons

While I don’t particularly know much about bears, beets or Battlestar Galactica, I do know a bit about The Office. So when we got the fun assignment to come up with an idea and then design small icons related to that theme I knew somehow I had to incorporate my love of The Office characters.

Project Specifications

We had to use Adobe Illustrator to create 4-6 original icons to communicate a specific message. We couldn’t have any text, gradients, drop shadows, pixels, or raster effects. Other than that, we were free to create whatever we wanted.

My Theme

I decided that the theme of my icons was going to be The Office characters pretty early on. I found The Office TV show right after I graduated college, and I remember staying up in the middle of the night watching The Office over the years with multiple newborn babies. It kept me sane, and I still watch the show regularly today. I have a love for the show and it’s characters, and I thought it would be a fun challenge to try to recreate the characters into icons.

Target Audience

I wanted to target people who are fans of the Office, typically people age 16 and up who enjoy comedy and the fun characters on the fun TV show. This was actually an interesting challenge, since the target audience is very specific. In order to really appeal to my audience I needed to make my icons easily recognizable and communicate who they were through my design.

Color Scheme


I didn’t quite know how to choose colors for this particular assignment because I didn’t want to be limited in the colors I chose for the characters, but then I realized I could have complimentary and contrasting colors in the background that would bring in a nice repetitive element to the design. I chose soft pastels and then a more vibrant color in the same scheme for contrast. I think the colors contrasted each other nicely and made the design fun and colorful.

Design Analysis

I started my design by sketching out multiple sketches of the characters I wanted to do. I knew the most iconic characters were Michael Scott, Dwight, Pam, and Jim. The next few characters were a little more fluid.



When I was ready to start working in Illustrator I did not like how my first draft turned out. It looked too kiddish, it didn’t look very good. So I started from scratch and liked my second version much better. Here’s what I turned in for my rough draft.

After some feedback I realized I forgot to put in the line on Jim’s background, I swapped out Michael and Andy for Darryl (warehouse manager) and Kevin as character icons because they were more easily identifiable, and made Angela’s face more skinny because that’s a running joke in the show about how small she is.

Final Versions

Here are the final products of my design.







I am happy with how the final assignment turned out. I think all the characters work together, are identifiable, and there’s consistency with the color backgrounds, face shapes, eyes and basic profile layout.

I’ll leave with these wise words from Michael Scott.

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”

Perhaps that’s what I want to communicate with this design as well. Words to live by. Words to live by, my friends.

Creating a Magazine Spread With InDesign

Rough Draft Version 2

The past few weeks in class we have been studying InDesign and have been designing a magazine spread layout as one of our projects.

Project Specifications:

For this particular assignment we used Adobe InDesign to create a 3 page magazine spread, using at least a two column layout, with three subheadings or headings, a pull quote, at least two photos we’ve taken ourselves, and one word wrap. We were to be purposeful with our typography and photography choices. We each chose our own topic for our magazine spread from BYUI Scroll and LDS.Org.

We’ve already learned about design elements to help make a design look more professional, so though it wasn’t specifically outlined on the ‘requirements’ we knew if we wanted to do the best we needed to remember to keep things aligned, have contrast, have some repetitive design elements and keep things in proximity with the title and other important information.

For my assignment I chose the article Become As a Little Child by Jean A. Stevens. You can find the article HERE.

Determining My Target Audience

My target audience for this project is LDS adults ages eighteen and up, expanded across the globe. The author is targeting all adults, but I feel specifically it is targeted towards parents, grandparents, caregivers, teachers or anyone who is around children. The design appeals to this target audience because it is conservative design, draws attention with the photography of the children with good contrasting images, and has an overall softened appearance because of the script title and headings.

Main Communication Goal

The one thing I want to communicate with my design is the important role that children have in building up the Kingdom of God and that their divine attributes help us with our own spiritual journey and growth.

Photography

These photos are all taken by me of my children (aka my 4 little birdies) during our fall break trip out of State. Since my topic was becoming as a child, they were the perfect subjects.

Typography:

The typography I used for the main body copy was Arial, in the San Serif category. For the Title and headings I used Bernadette font, in the Script category, and Georgia in the Serif category. I chose Script to soften the appearance of the overall design, and felt serif contrasted nicely with it. Arial is a classic san serif font that is easy to read for body copy.

Color Scheme Choice:

Create a Color Scheme with Your Photos You Take to Give it a Nice Coordinated Design
I chose my color strategy based on the photos I took. I liked the idea of having cooler, calm colors for the spiritual message, but have a nice warm contrasting color, pink, with the design elements.

Design Analysis:

I started off my design journey by sketching it out on paper first. Here are a few of the ideas I had before I opened up inDesign.
sketch1
sketch 3
sketch 4
sketch 4
I’ll readily admit I didn’t stick to my sketches firmly once I started using InDesign (as evidence of my examples below), but I thought the sketches helped me come up with somewhere to start instead of just staring at a blank canvas and not knowing where to start. There were some things I tried out and instantly didn’t love, and other things I did like and eventually tweaked to work for my final submission.

Here are a few examples (of the seven rough drafts) I went through. I will note that the colors don’t coordinate quite yet because I hadn’t changed them yet, and you can tell I hadn’t lightened up the photos I had taken out of camera either (I had to resort to taking photos in dark shade since I took the photos at noon).
RD 1
Rough Draft Version 2
RD 3a

Rough Draft

Rough Draft Submission
RD Submission
For my rough draft submission I ended up deciding to do a two page spread on my title page, and a single page for my third page. I submitted my rough draft to get critiqued and got some feedback from others in the class and my accomplished college professor. I felt seeing things from their perspective was helpful in producing an even better design. I moved some things around and shortened my quote. I didn’t have too many corrections to do, so the rough draft isn’t drastically different than my final product.

Magazine Spread Final

Final Draft of InDesign Magazine Spread Project
indesign magazine spread example
This was the end product of my magazine spread. I moved the triangles so they weren’t covering any of the wording on the front page which was distracting, and I made my pull quote a little shorter as suggested. I also made the blue line on the third page a little narrower to fit with the lines in between the photographs, as instructed by my gifted professor.

The main design decisions I made was keeping things relatively conservative since it is a religious magazine. I also wanted to stick with the main elements of design by keeping things left aligned, making sure there was good proximity with the headings and the title information. I also wanted to add repetition with the design elements and color, including the triangles on bottom corners, the green bar on the bottom of the pages, and the blue lines near the photography. I wanted to add contrast in the design and felt I did that with the use of photo placement and how large the photo is on the first page. I feel there’s good contrast with the headings because of the color and typography, and added some contrast with the dark blue background and lighter font color for the title.

Final Thoughts

I enjoyed learning more about inDesign and how it works. I can see how helpful it can be when creating newsletters, brochures, and other handy items for print. I’ve never really used inDesign before, so I learned a lot and am happy with how my project turned out. It is a little less friendly than other Adobe programs I have worked with before, but it allowed me to make a nice magazine spread.

Boost Your Photography Portfolio With These Three Simple Rules

{Editor’s Note: I submitted this assignment before I knew that the personal photograph examples needed to be taken at the time of the assignment. Because of this I have decided to keep the original photos that were submitted as part of the PDF but have included photography examples with current photos from this semester underneath as well. Thanks.}

This week we learned rules and guidelines to produce quality, professional-looking photographs. There are several rules that make photography stand-out, but we’re going to talk about three: rule of thirds, leading lines, and Depth of Field. Below I have examples of each from professionals followed by my own interpretation of the rule as well.

Rule of Thirds


(Photo taken by the talented Angie Monson of Simplicity Photography.)

The rule of thirds is one of the most well-known photography rules. Basically you mentally divide your image into the rule of thirds with 2 horizontal lines and 2 vertical lines to break it up like I did in the image above. Angie does a nice job of placing her subject along one of the lines and placing her in the intersection as well. It creates a well-balanced photo that draws your eye to the woman and even to the house behind her.
Personal Example #1:

(Photo of my husband, Jim, and our beautiful daughters Lanie and Bella, taken by Michelle R. (personally taken).)

I used the rule of thirds with this photograph by placing my subjects (husband and daughters) off-center along the left lines of the rule of thirds and placing them in several intersecting points as well. I think that using the rule of thirds allowed this photograph to look well-balanced and natural. I also really enjoy the negative space around my subjects that I wouldn’t have gotten if I had centered the photograph.
Personal Example #2:

(Photo taken by Michelle R. (personally taken) of my sweet redhead, Bella.)

Leading Lines


(Photo taken by popular photographer Justin Hackworth)

This photo by Justin Hackworthy is a great example of using the leading lines technique. He used the roadway lines to give the photo a feeling of motion and the lines point inwards towards a vanishing point. The natural lines in the photograph lead you towards the subjects of the photo, which is intentional. I also think he did a good job with the composition of theme of the photo shoot because the leading lines naturally draw your eyes inward towards the couple who are getting married, or being drawn together as well.
Personal Example #1:

(Photo taken by Michelle R. (personally taken) of my friends Evelyn and Ian H.)

I tried to stretch myself by finding a different way to use leading lines than the typical road or path, and found this fun brick wall that used the leading lines rule. It’s a good example of leading lines because the angle of the wall automatically draw your attention towards the subjects of my photograph. I love how in this photo the lines lead in from the bottom of the frame and the top of the frame, and naturally guide your eyes towards the center where the subjects are located. The lines of this photograph give it a good dimension and depth that makes it unique, creative and fun.
Personal Example#2:

(Photo taken by Michelle R. (personally taken) of my handsome superhero son, Jaxson)

Depth of Field


(Photo by accomplished photographer Caralee Case)

Caralee Case does a great example using depth of field in her photo. The subjects in this photograph are crisp and in focus, while the background of the photograph are blurred and out-of-focus to show a narrow depth of field. Because of this narrowed depth of field it really draws your attention towards the subject instead of the business of the background. It also gives a good amount of contrast between the sharp subjects and the blurred background, and makes it look professional and pleasing to look at.
Personal Example #1:

(Photo taken by Michelle R. (personally taken) of my adorable niece Lydia W.)

I took this photo of my niece Lydia using a narrow depth of field that created a nice bokeh effect in the photograph. You can determine it is a narrowed depth of field because my niece’s face is in focus, while the background landscape appears blurred. I was able to create this narrowed depth of field bokeh effect by using the lowest aperture setting available on my camera lens, which was a f/1.8.
Personal Example #2:

(Photo taken by Michelle R. (personally taken) of my beautiful daughter, Elena and my niece Mia.)

Conclusion

Using photography rules such as placing your subjects within the rule of thirds, using leading lines to draw attention to your subjects, and creating a nice use of depth of field in your photographs give them creative dimension and contrast. These rules allow you to compose a nice arrangement in your photos to draw attention to the subjects of your photograph in a natural and creative way. If you haven’t tried out these photography rules before, give them a try!