Design has options

I think the last unit of Dabner, Stewart, and Zempol’s graphic design school is most likely the section I will refer back to most upon graduating design school. Though graphic design is in general, becoming a more useful and versatile career path, the options that you can go about designing have particular skills required. Web design, as I discussed in my last post, is not only a very popular trend at the moment, but it is in high demand. This career can allow for more freelancing and remote circumstances, if working online is a desire that comes with your understanding of user experience, web interactivity, and of course, good design. Another approach to non-print design is motion graphics. This path allows you to explore 2D and 3D design, movement, and video-like story telling. Though the innovative, fast paced work in motion graphics is exciting, it can be very time consuming and require a quick turn around time. However, if web and interactive is not your style, print design is certainly not dead. Nonetheless, editorial design, branding, environmental, and information design are all also being converted to web’s online formats in addition to their print styles. For example, the branding you do for business cards, brochures, and t-shirts for a company, most likely will also need to be translated on their website.  Likewise, magazines now-days, most of the time also have an online publication to accompany the hard copy.
In an article by Joshua Johnson, titled “Career Options: 10+ Types of Graphic Design Jobs to Consider,” I thought it was most helpful that Johnson included the “level” categories designers fall into before discussing the different career paths. Though you may prefer package or print design over web for example, whether you are the Don Draper (as the Creative director) or lower on the totem pole (as an entry-level designer), can play a huge role in how enjoyable you find your job. Another point I pulled from Johnson’s article was the difference between marketing and advertising in design. Where advertising can relate more closely to identifying a brand (it’s message, goals, color, logos, type, etc.), marketing is more closely linked with promoting an existing brand, and adding additional advertisements that tie in with the company mood that is already created. Reading about the various career paths that designers are able to take, allows you to take a step back and look at what is important to you and where your skill lies. Once you establish your own creative abilities and future goals, you’re then able to narrow down the career options that best fit the way you think and design.

User experience doesn’t always necessarily mean online or web experience, it can be something as simple as allowing people to participate in your print design.

I love how this interactive mobile app incorporates real folds and movement, so that the real paper experience is still integrated.

This information design is a perfect explanation of how user experience goes beyond just the design aspect. The think and planning that goes into making sure the message is communicated and the consumer is engaged in the right way.

 

http://prix2014.aec.at/prixwinner/12662/

The above link is a motion graphics video. The transitions in the design are incredible, and though simple, the movement and detail is quite beautiful.

references:
Graphic Design School by Dabner, Stewart, and Zempol.
http://thesiteslinger.com/blog/career-options-10-types-of-graphic-design-jobs-to-consider/

Web and Interactivity

Interactive media is the fastest growing type of design out there today. From app building, to websites, to online/video gaming, design has been taken to a whole new level. For some, the idea of having to figure out how to use CSS and HTML coding on top of your design process, may seem ambiguous and even intimidating. However, because web presence is such a rapidly growing market, it seems to be standard to at least know the basics before getting into the design part. In Dabner, Stewart, and Zempols Graphic Design School, a great planning phase and flowchart is shown to get us designers thinking about these processes. Wireframing, can be very similar to the sketches print designers begin with. Done by hand, visualizing the dimensions of the website instead of the page, sign, package, etc. Then mockups can be brought into the computer and sometimes exporting these as jpegs copies to show your client, is helpful. The sites development (what happens when this gets click, or I move my mouse here, etc.) can either be done by hand coding, helpful host sites, or by working with a developer. The process and output can be just as much work or more than the printing processes, and yet the outcome tends to be much more experiential.

When researching a little more about what makes a website stand out, and how the web design process works, I came upon an article on HongKiat, by Poonam (she is a Product Manager at Harbinger with a degree in Computer Engineering). I found the analogy she used in the beginning of this post to be very helpful when thinking about interactive design in the eyes of the consumer. She compared websites to grocery stores, stating that though they both may have the same food and prices, one store could be chosen over the other almost always, simply because of the user experience (eg. costumer service, coupons, free samples, etc.). Website experience can be a lot like this in that your website may contain the same content as another, but because of the personal touches that allow for entertainment and interesting interaction and transitions, yours may be favored. Examples of these enhancements often include the shifts made between different sections off of the main page of your site, or three-dimensional “flip books”. Nowadays, really any interactive experience you can think of can usually be created, or if not, it will be able to be in the next few years. (http://www.hongkiat.com/blog/importance-of-web-interactivity-tips-and-examples/)

This sketched out wireframe is a perfect example of how the design of the website is not the only thing that needs to be thought out in the process. The interactivity (hence the arrows indicating what happens) is a very important attribute to the planning processes of interactive design.

This interesting and beautiful web design just goes to show that fluidity, movement, and interesting design components should not be left in the print world. These sort of elements attract the human eye on screen, just as much as they do off. And more importantly, they can also take on interactive roles as well.

This mobile app just goes to show that even the most miminal designs can work on web, as long as the experience is enough to draw the consumer in. The black on white consisting of the most simplistic symbols may not seem all that complicated, but the set up and display can be taken to the next level when a simple touch of one of those icons can bring the user to a whole different page and experience.

This weather app looks three dimensional, and therefor adds the desired look and feel of real interactive experiences to a flat non-dimensional surface. This desirable edge can be just what you or your client may need to set their online presence apart from others.

Lots of Color

Color has always intrigued me, mostly because of the dramatic effect it can have on how people feel. There are always elements of design that can make something look either beautiful or messy, but color is one element that can change from culture to culture or person to person. After reading Unit 4 of Graphic Design School, I was reminded of a few ideas relating to this concept. For example, the color red is viewed as cautionary in most western cultures, but is associated with good luck in China. Likewise, black is usually the color of mourning in the west, but represented by the color white in India and China. Another important aspect of using color when designing, is remembering what the hue, saturation, and value can do to not only affect the mood of your piece, but the readability and flow. For example, two complementary colors of similar hue next to each other may create too much of a “vibrating edge” which is unpleasant to the eye. However, high contrast between colors (the differentiation between two or more elements) can increase the legibility. Layering different values of colors can also make for interesting textures and can oftentimes help the relationship between color and your typography/image to better suit your composition.

(Graphic Design School. By: Dabner, Stweart, and Zempol)

When reading this unit from Dabner, Stewart, and Zempol’s Graphic Design School, most of the information had seemed familiar from a color theory class I took earlier this year. However, one idea that I found unfamiliar was the fact that cooler colors (blues and greens) can seem further away in a composition that also includes warm colors, since those will appear to be in the foreground. In a blog written by Steven Bradley, he comments further on this phenomenon and suggests ways to use color in order to enhance your designs. Because the warmer colors tend to advance, it is useful to use those in the foreground of your images, and the cooler colors for creating depth in the background. Bradley uses a Van Gogh painting to demonstrate how the use of color alone can dramatically affect the desirable depth in an image. Though it may seem obvious to use blue in the sky, and brown or red in the earth tones of a landscape, you would be surprised what bringing this method into your own abstract or even type designs can accomplish. Keep in mind, as Bradley states in his blog, that darker colors carry more visual weight and may be seen first, but that highly saturated colors attract a lot of attention, and are perceived as energetic.

(http://www.vanseodesign.com/web-design/color-meaning/)

(FOALS ‘MY NUMBER’ Leif Podhajsky) This design uses lots of bright saturated colors against a dark background, creating a lot of contrast. Naturally, the warmer colors pop out to the human eye, and the cooler and darker blues and greens recede into the background. There is a sense of depth that pulls you into this beautiful patterned image.

The dull colors in this piece, and lack of saturation make it seem old and dated, yet the sharpness of the shapes and the small amount of warm colors against the overall cooler colors allow for direction, movement, and interest.

(Designspiration.net) This overall warm picture, gives off a soothing and inviting mood. The darker colors contrasted against that lighter background make the subject easily distinguishable and in focus. The change in tone adds movement in the background as well.

(Iv Orlov | Allan Peters’ Blog) By using Complementary colors in this image (both the turquoise against the burnt-orange and the white against black), the shapes are easily distinguished, and therefore the readability and contrast is increased significantly. This piece uses color to make for an interesting and dynamic composition.

Speak with your Type

Typography is something that all designers use to help communicate ideas in not only a legible and approachable manner, but also to help convey meaning. Whether it is the typeface that communicates that feeling, or even the small details such as spaces, punctuation, placement, and character choice. Designers have more control that someone may realize over the voice of a piece of work, simply through the typography. Display fonts are usually used for headings and may consist of more personality. However, these fonts can sometimes be less readable, and may not pertain to all the type rules. This does not mean they should not be used, since they can easily bring the desired meaning into your work, just in small doses. When it comes to body text however, justification (how paragraphs are aligned), leading (horizontal spacing between lines of type), kerning (the adjustment of space between letters), tracking (the space between words), and other variables, are all very important in making sure the text flows and reads well. The general rules that designers go by started in the 1700’s when the first typefaces were beginning to be created. Whether the typeface chosen is humanistic old-style, transitional, modern, slab serif, or a sans serif can make the world of a difference when readers are interpreting the piece of writing being presented. Minor details may seem small enough to be easily forgotten in the overall read of one’s typography, but in reality: every space, punctuation mark, capital letter, and font choice can lead to a new read.

(Graphic Design School. By: Dabner, Stweart, and Zempol)

In an article in Smashing Magazine called “What Font Should I Us?: Five Principles for Choosing and Using Typefaces, Dan Mayer compares choosing fonts to choosing clothes. I love this comparison because it allows you to take the characters of the letter and understand them in a more humanized manner. When Mayer spoke about how a nice pair of your favorite jeans can be dressed up or down, it made understanding fonts much easier. A font is just a different style of particular typeface— bold, italic, light, condensed, etc. These options make it much easier to develop hierarchy and contrast while still allowing there to be room for cohesiveness within the writing. I also love the way Mayer chose to decipher different kinds of typefaces by relating them to feeling. A geometric typeface is “like a beautifully designed airport: it’s impressive, modern and useful, but we have to think twice about whether or not we’d like to live there.” Whereas humanistic typefaces can give a more empathetic feel, Old Styles are well, old style, Modern and transitional types are stylish, and Slab Serifs are expressive (in many different ways).

 

(http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/)

This geometric typeface adds a bit of an impression and some structure to the very mystical dreamy photograph it lies on top of. The lack of serifs allows the piece to look more clean and strong. 

(Designspiration.net)

This slab serif font is used in an elegant and almost romantic manner. The placement of the R makes this look more like lettering rather than a full typeface. Nevertheless, its combination of character and structure make for a beautiful display type. 

(Designspiration.net)

This combination of letterforms (or number forms in this case) create a lot of visual interest. Particularly in the negative space, the shapes that are made in the spaces between the numbers, is quite beautiful, and gives off a swift, modern, elegant feeling.

(Designspiration.net)

The distortion of this type, especially on a sans serif font, allows for a sense of movement and interest. I love that the paper makes the type look as if its waving and yet you gain a sense of sturdiness because of the thickness of the lines. 

(Designspiration.net)

Fundamentals of Composition

In Graphic Design School by David Dabner, Sandra Stewart and Eric Zempol, the fundamentals of composition are discussed in a detailed manner. Though I had heard about the basic composition elements before (balance, consistency, contrast, proximity, repetition and white space), it was interesting to see how these things played into the photography, illustration, symbolism, grids, and overall layout of various arrangements. Because there are so many different ways you can use different elements to represent different moods or ideas that you want your piece to represent, you need to consider what forms will influence those choices. In this unit of Graphic Design School, I certainly appreciated how instead of just explaining what symmetry, contrast, etc. are, the mood and reasoning behind using these techniques is expanded on. For example, when discussing symmetry, the book suggests “a symmetrical composition makes for a calmer more peaceful work, while something more dynamic can be achieved if the elements are arranged asymmetrically.” These sort of tips for using the techniques in diverse layouts and various compositions, along with the picture examples that are given are very helpful. I also really enjoyed reading about pace and contrast in this chapter. The explanation helped me differentiate between rhythm and pace, and added to the understanding of capturing and keeping the reader’s attention in my design. (Graphic Design School. By: Dabner, Stweart, and Zempol)

In a blog written by William Bleachy, all of the design principles are explained, and composition is used as the last step. However, Bleachy even states in his last post on composition, that it is the first thing you should be thinking about. Making everything come together to create a visually interesting piece does entail contrast, hierarchy, balance, repetition, movement, etc. However, before any of these ideas can come together, the overall idea usually has to be understood first. In this blog post, I found it helpful to hear that the research part of the composition had to do with the branding and budget which was touched on in Graphic Design School, but not talked about in the perspective of a designer with perhaps, a low budget client. I liked how Bleachy showed that his process could sometimes be something as simple as sketching out an idea, using his composition and layout rules as he goes, but making sure his research is relative to the clients previous style or work. Bleachy also mentions looking at the history of the project/idea, which related back to the mention of style interpretation in unit two of Graphic Design School. (http://www.gomediazine.com/tutorials/rule-composition-putting/)

 

(Castle Cafe- found on desginworklife.com)
This image shows symbolism at it’s finest. Though the imagery may be sort of repetitive of the name, each icon is placed inside a grid so that your eye flows easily around the page. The contrast in the color choice allows for a dynamic and interesting composition.

(Reed Danziger, Works on Paper) The balance, symmetry, and movement in this image is simply intriguing. The overall composition includes a large amount of negative space, but this I believe, makes the focus and movement of the painting even more prevalent.

(http://www.underconsideration.com/fpo/archives/2013/03/winters-wedding-invitation.php) The branding of this wedding invitation has a constant style. The colors and line weight in the different elements make for an interesting and dynamic layout, that still has a very elegant and distinct brand.

(http://www.underconsideration.com/fpo/archives/2013/10/yearbook-of-type-i.php) The symmetry in this piece is slightly off center, but the balance of the thick and thin line weight type, along with the flow that the gradient gives, makes this composition draw you in, and want more.

Research & Concepts

The fact that this reading starts out encouraging diversity in learning about design was refreshing. I have always found drawing and planning out my ideas before executing them to be so much more helpful in the long run, and that is just what this book suggests. Exploring different ways to sharpen your creative abilities is crucial in expanding your knowledge in not only creating, but also in general global learning. I also found the concept of “drawing to document” vs. “non-observational” drawing very stimulating.   I find myself using the design techniques that I have been taught to decipher almost every piece I either view or create. However, I miss the non-observational/abstract filter that I use to have, and that my non-design/art friends use when viewing and making art.

This concept of drawing out ideas and recognizing form first in order to solve design problems encourages me to keep my initial thoughts on paper. I so appreciate that this book starts out talking about the importance of drawing by hand and what segments of the creative process are important to do digitally vs. on paper. The research process is also so important in your making sure your audience, concept, and mood are addressed in a strategic matter. (Graphic Design School. By: Dabner, Stweart, and Zempol)

After reading the first chapter of Graphic Design School, I watched several videos on not only the creative process of designers and artists, but of other the progressions other creative individuals take. I watched one video in particular which went behind the scenes of the creative process students went through in making video called “16^th street,” which paired music and dance. It was so fascinating to me how similar the processes of design were to the steps these students took in creating the mood and feeling of their dance video. They talked about how the history and space of the building they chose gave a certain mood to the video, and how it was inspiring enough to shoot their dance in. They also talked about wanting melody and rhythm in the same ways designers crave those things in their work. The movement and collaboration of their “characters” in this video are things that designers and artists think about in their creative developments as well. The students discuss how acts 1,2, 3, etc. are planned out beforehand, but how the video really unfolds as its being shot. I find this to be so true in all aspects of design, and it is encouraging and overall inspiring to see how artists in all form take on creation in this way. (https://www.youtube.com/watch?v=YFtHAHARbJA)

 

 

 

(by Ramotion from dribbble.com) These concept sketches show the process of creating what looks like an icon system. These ideas are illustrated in different lights, giving a variation of moods and positions.

(Danish brand designed by DDB Denmark (thedieline.com)) This “tempt” packaging not only makes you curious, but it makes an impression on its viewer. The naked woman around the illustration cleverly implies the “tempt” name.

This image is incredibly poetic. The lines imitate each other and bring you around the page, so that your eye understands the mood that is set along with the imagery itself. – “Sunset” Erika Pochybova-Johnson (found on pinterest)

( tauron nowa muzyka | posters by Dawid Ryski, via Behance) This poster, in terms of mood and matter, uses proportion sizes to suggest importance and balance. Of course, the spotlights create some initial emphasis, but the size of the woman’s coat in relation to her body and the objects is an interesting scaling technique.