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.

Twentieth Century

As the twentieth century rolled around, so did a new called “modern style”. The organic drawing became a thing of the past, something that a new generation of designers shied away from, as they embraced a culture with a more structural style. Interior spaces that were organized spatially, by the American architect Frank Lloyd Wright, was a main influencer to beginning this twentieth century design class. His idea of “completeness” by entity in order to create a true purpose and meaning was followed in his design spaces. He was taught from a young age while working at a printing press with a friend, that incorporating blank space into design, along with combining a variety of materials, should not be frowned upon. In the early 1890’s, a group of Scottish artists from the Glasgow School of Art came together to form a design group that embraced this more mechanical notion. They focused on simple bold lines and symmetry in order to create symbols in their imagery. Though many spectators frowned upon their posters, the editor of The Studio was quick to come to their aid by reminding his readers in an article that a poster’s main purpose was to attract, and lead interest. The Four lead inspiration to Jessie Marion King who then used medieval figures to display romantic compositions. Her illustrations are what influenced the movement of fiction and fantasy throughout twentieth century design.

In the meantime, there was a lot happening in Austria, such as the movement known as the Vienna Secession. Consisting of four artists and designers, a group was formed to revolt against the traditional art nouveau styles of the past. This group, much like The Four, embraced contour lines creating mystical shapes and they even included nude bodies, which of course, outraged the traditionalists. Ver Sarum, which was a beautiful design magazine in Vienna during this time, flourished with the new clean secession look and became very popular throughout this period. The magazine was different in everything from its sleek type, to its more minimal and structured layout, to the execution in its unique sort of production. Design became an important aspect to not only artists and those who were interested in stylistic techniques, but even to those trying to sell. It was so important that advertisers were required to pay for the designs they wanted for advertisting, which seems redundant today, but at the time was a new importance that was put on visual communication.

After looking at some of the monograms that were designed by the Secession artists in Vienna, I can’t help but think this is where the modern day logo’s stem most of their inspiration from. The fluid and consisted line weights, and shapes that are created within the negative spaces of the designs, not only draw visual interest but also give a mood and concise flow that goes along with the corresponding names. This symbolism is less abstract in some of the posters from this movement, though just as significant. For example, in a poster advertising “Fromme’s Kalender” in 1899, Koloman Moser executes a beautiful profile figure holding a snake ring and hourglass. The hourglass object represents the passing of time, and the ring, more abstractly, represents the circle of life. According to Meggs’s A History of Graphic Design, this poster was used for a good fifteen years, with only some color variations made. This time period may have drastically pushed away the floral intricate designs of the century prior, but it sure made a mark on the design world.

 

Print production and presentation

After reading the unit about print production and presentation in Dabner, Stewart, and Zempol’s Graphic Design School, I was having recollections of the many problems u have had with printing, color matching, cutting, and layout even after thinking the design was “complete”. After reading a little more about exporting and how important preparing files for print is (whether it be a PDF or an entire packaged document with links and fonts), I began to save myself a little more time when it came to figuring out that portion of the project. I also really appreciated how Graphic Design School discussed the craft of a design as another important production step. Often designers tend to think once their design is completed on the computer, and even printed correctly, that the cutting, assembling, folding, etc. is the easy part. Though some people may be more gifted in the presentation process, for some (like myself) shaky hands lead to crooked cuts and bloody fingers, which made reprinting frustrating. I have learned throughout the execution/craft process to be mindful of what the finishing product is meant to look like not only while you are designing, but also while you are putting it together at the end.

I stumbled upon an article written by Marco Kramer called “10 Pre-Press Tips For Perfect Print Publishing,” after reading the chapter on production in Graphic Design School, and came upon many similarities in tips for how to produce your printed designs. When it comes to color, the difference in RGB and CMYK is all I had really paid attention to, thinking, “one is for print, one is for web- how hard can it be?” However, from personal experience, I can say that color is much more complicated and harder to match to what exact shade/tone you were aiming for, than I thought. Though printers may sometimes be the problem, a lot of the color matching starts with the color mode you have set up in your document. In this article, I was made aware that you should always edit your Photoshop pictures in RGB rather than CMYK because RGB is created with light rather than darks, therefore your images appear brighter. To view how these images will look printed (when converted into CMYK mode in Indesign), you can select viewèproof colors, and make sure “working CMYK” is selected, and the proof of print material will show in photoshop.

RGB colors are known as “additive colors” because when they come together they make white, and are therefore created by light. RGB is what is left when you subtract CMYK, which is why CMYK colors are called “subtractive.” CMYK starts with all the colors, and then when subtracted, black is created.

(Tommy Perez business card design) – these carefully cut cards make for an interesting 3d design, but the thought process behind them is what made the execution able to be so consistent. The placement of color, lines, and type had to be exported correctly and carefully.

This books cutout methods also had to be carefully looked at, along with the what looks like, metallic overlay for the stars. The black paper that these colors seem to be printed on also had to be carefully considered so that the kind of paper was taken into account with the inks, coating, etc.

(found on designspiration) Another example of intricate cutting shown in this beautiful illustration creation, exemplifies the extreme on color and cutting planning . Though this illustration could have been fully created by hand, it shows us how thought out color and layout need to be in order to produce something that fits and completes the ides you have in your head (or on screen).

Arts and Crafts Movement

For some, the availability to reproducing in large quantities was not as exciting as it was to others. During the arts and crafts movement it became popular again to create things by hand, one at a time so that the book felt more real, more personal. During the industrial revolution, people who felt that artist morality and touch was being diffused, reacted by making book design less of a mass production process, and more like a handcrafted limited edition art piece.
William Morris, who grew up along the English countryside, was the son of a wine importer, who published his first volume of poems by the time he reached 24. During his time at Exeter College, he and a friend by the name of Edward Burne-Jones were intending on joining the ministry. Not long after graduating however, they both realized they wanted to become artists and because of the wealth of Morris’s father he was able to experiment as much as he desired. After Morris got married, he and his wife moved into a house that was built for them, and by helping to design and furnish the interior, Morris became inspired and joined a decorating firm in which anything from glass windows to furniture and fabrics were designed. Inspired by his firm and work, a group called the Century Guild consisting of a few young designers and artists, decided to create a magazine called The Century Guild Hobby Horse which consisted of many art pieces and articles relating to the arts and craft movement, along with the decadent movement and some art nouveau. Its paper was handmade, and included woodblock illustrations, which the served the arts and craft movement advocates well.

This movement not only encouraged the use of using human hands instead of machinery to create art, but it also encouraged beautiful thought out aesthesis in design compositions, rules, and materials so that art was able to become respected through its original form, once again. Though easy reproduction was great for advertising and the ability to share and communicate ideas, the arts and crafts movement emphasized the importance of art within printing. Mackmurndo, the one who started The Century Guild Hobby Horse, introduced how intricate and “art-like” design and typography can be, to William Morris. Morris quickly became passionate about margins, layout, typography, and all the possibilities of book design once Mackmurndo explained the techniques and processes that go into the design world, and how similar the techniques are to his idea of art. Spinning off of this explanation of art, an article called “On the Unity of Art” written in 1887, spoke about how all forms of visual expression should be considered art. Leaving us with the statement; “For when you begin to realize, that all kinds of invented Form, and Tone, and Coulour, are alike true and honorable aspects of Art, you see something very much like a revolution looming ahead of you.”

The Kelmscott press was the last piece that Morris leaves with us to ponder and appreciate as we study not only art, but also society and the artist’s mindset. Consisting of 556 pages of intricate ornamental letters, typefaces that Morris himself designed, and illustrations from Walter Crane along with many others, was the Works of Geoffrey Chaucer. It involved elaborate graphics and drawings made with woodblocks, and typefaces such as Chaucer, which Morris created for this book. The book consisted of writings by Morris himself, along with those of his favorite medieval authors. This work left us with so much handcrafted beautiful parts, that you could almost feel the sweat and tears put into it when you look at the individual pages themselves, and I believe that was probably his intention.

Meggs, Philip B. “The Prolouge to Graphic Design.” A History of Graphic Design. New York: John Wiley & Sons, 1998. 4+. Print.

 

 

The designers toolbox

The “tools” that graphic designers use can range in anything from exacto knives, to cameras, to paper. However, with the rapid development of technology the programs and applications used to create, complete and finesse design ideas are extremely helpful when used correctly. Photography and the use of a camera, is a very powerful tool in design, and can make or break the composition depending how you use the photo. Programs (such as Photoshop) come into handy when wanting to fix a mediocre picture you may have took, into consisting of more or less contrast, hierarchy, placement, cropping, fixing, etc. You can also use Photoshop to combine or manipulate images so that a new mood or composition is created all together. Though it is possible to add text in this program, InDesign is the most reliable and easy when it comes to layout and text formatting. Layout, publication, and package designs are most often made using InDesign, for its ability to create grids, and arrange text is most effective. When a designer wants to create vector images (those that wont be destroyed in pixels after enlargement), or simply make more clean and concise designs such as logos or complex illustrations, Illustrator is the go-to program. Its ability to help designers and artists bring their ideas to life on the computer is remarkable.

The discussion about what these design tools can do, led me to think about how technology has affected designs over the past 10 years of development, and how technology will continue to change future designs. Before these innovative programs were created, there was more limitation, and the ability to quickly create texture, overlay and combine elements, structure layouts, and create consistent style was extremely difficult to say the least. Once these programs were developed, designer’s creativity heights not only took off, but the expectations of the consumers were greater as well. In a blog on Bright Hub, written by Amber Neely, she states “Product packaging was simple but effective, but didn’t wow us. Today, when we look at a great website, we expect every element within it to fit into the overall design, to flow easily from one area to the other. Product packaging has become an art in itself, with dazzling arrays of colors and information that adds to the design, rather than detracts from it.” Not only do designers have more options and availability to create their ideas with these tools, but the pressure to become better and unlike anything that had been created in the past is much greater.

(Graphic Design School. By: Dabner, Stweart, and Zempol)
http://www.brighthub.com/multimedia/publishing/articles/121403.aspx#

 

Photoshop can be used to integrate two separate photos, or illustrations in order to create distortions of reality. The ability to change the color, light, and shadows in these new images also allows the overall mood to be either enhanced, or changed all together. (new media design – designspiration.net)

Photoshop not only allows you to change the color of your pictures and fix the lighting on ones that didn’t turn out as well as you hoped, but it allows for distortion, manipulation, and even the addition of text and different elements as well. Because of programs like photoshop, designers and artists have the ability to play with images like never before. (Bad_Romance_by_revuh.png)

Indesign is a program that people who love type, are addicted to. It’s ability to easily align bodies of text and images into a structured system, makes layouts like this flow and easy on the eyes. (Craft Victoria Annual Report 2012)

Illustrations are beautiful when done by hand, but when it comes to laying color where you want it, fixing mistakes, and creating crisp, flowing compositions, Adobe’s Illustrator program is extremely powerful. As shown in this recreation of Alice and Wonderland, though there is so much going on in the composition and colors, the neat line strokes and flow of the images make the characters look crisp and finished. (Reinvented Disney Posters by Mondo)

Victorian Beauty

I have always been intrigued by Victorian art. It may be because I love fashion and nostalgic things, but there is something about the beauty of what the introduction of color printing and photography did to this time in history. Before the Victorian era, creating both type and pictures was extremely desirable, but the two had yet to become completely successful in being integrated together, in my opinion. It seems along with the Victorian era came this sense of knowing how to combine beautiful pictures with not only set (metal) type but also extravagant handwritten lettering. Along with the strong moral and religious aspect Queen Victoria brought with her rule, came a sense of beauty and optimism that shows in the designs of this era. Painting, type, and graphic design were not the only art forms that this overall proper and piety mood was expressed in, of course. Women’s fashion involved beautiful (modest) dresses and bonnets that included lots of lace, color, bows, and puffy sleeves. Ornamental designs were popular in everything from tiles, color plates, and tapestries to the details in buildings, homes, and churches. The insides of Victorian churches were inspired from gothic architecture, consisting of extremely intricate details throughout not only the high painted ceilings and windows, but throughout the outside as well.

When it came to the printed work, the religious and newly rich has a major influence on the layouts and concepts. Puppies, kittens, children, flowers, and young women were consistently at the centers of the poster and produced designs of this era. The ability to reproduce these graceful looking paintings was enabled by the invention and development of lithography, which was invented by a Bavarian author by the name of Aloys Senefelder in 1796. This process is based on stone and oil based paints used for transferring the image. Separate color plates were a later addition to this system, which allowed for the beautiful Victorian designs to come to life, using chromolithography. This system did not only enhance the romantic paintings of the Victorian era, but also influenced the style. Luois Prang was a press printer who moved to America in 1850 and joined a printing firm, which he eventually took over. Because of Prang’s interest in collecting sweet, romanticized naturalistic pieces, he dramatically influenced the output of the printed material. He used his color printing presses to being so many different subjects, civil war maps, scenes, and album cards to life.  This style is what began the creation of holiday, greeting and birthday cards. Naturally, it all arose with Christmas, first publishing an English Christmas card in 1873. Following this, came the creation of cards with the sweet innocence this style demonstrated throughout. Advertising ate this concept up, and eventually this put Prangs creations behind in competition, pushing him more towards some magazine designs. Once his daughter was born, he concerned himself with the art education field and started to make materials suitable and safe for children to use (water colors/crayons.)

Patterns and pictures continued to be produced, and yet the people who were surprisingly just as inspired by the invention of chromolithography, were typographers who were now able to use unlimited color and reproduce their lettering without the restrictions of metal type. This resulted in the ornamental details of the Victorian era being integrated into the letterforms that could now easily be tied into the images in the compositions. This sweet and romantic era influenced graphic design to be pretty yes, but stylistic and collective as well.

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.

Capturing the world

The invention of photography took not only graphic design, but the way people perceive life to a completely different realm. Our minds perceive the world around us and we then immediately have this desire to capture it, to document it, and to share what we see. I think that as visual learners, both graphic designers and artists in general have this longing in them even more so than non-artists. This is why it does not come as a surprise that the invention of photography began with illustrators. The word photography itself came from the Greek words photos graphs, which literally means, “light drawing”.

Joseph Niepce, the inventor who first produced a photographic image, began as a lithographic printer. He originally made images with the help of his son’s drawing skills and transferring them on to paper. Once his son was drafted in the army, Niepce began to search for alternate ways to make a photograph by using light and transferring methods. He would expose images all day, and use lavender oil to create these hazy pictures. Once Niepce teamed up with a painter/performer, by the name of Louis Jacques Daguerre, more materials were added to the process and people lavished at the rich accuracy of the new images. While this progress was being made in France, William Henry Fox Talbot had the same desire to bring his sketches to life. He was incredibly frustrated by not being able to capture exactly what he saw in the landscapes and plants that he was attempting to re-create. Because of this, he began to use light, leaf paper, and glass to expose the images of leafs and flowers onto paper. Talbot later combined these micro-studies with the discoveries of Daguerre’s and began to release to the public the beginning of the “Art of Photogenic Drawing,” as he called it. Once the first developments of the camera had been made, a scientist (astronomer and chemist) came to rescue some of the technical issues and take the recreation of what we see, even further. Sir John Herschel used chemicals to halt the action of light, in order to fix the images. Herschel shared his discovery with Talbot, and together they took off with more improvements. By using negatives/positives and increased light sensitivity, Talbot was able to eventually make an unlimited number of prints, which because of their ability to be resized and reproduced were extremely desirable. However, because of Talbots methods were difficult to spread throughout without more contacts, Daguerre’s process, which created far sharper photos, became most popular.

The only thing that seemed to be missing from these discoveries at this point, was the lack of availability. A wet-plate method involving negatives and reflection, led to the discovery of the dry-plate system. This in turn was what led George Eastmen, an American dry-plate manufacturer, to create his Kodak camera.

The availability and development of pictures made people see life in a different light. One’s memory was captured not just by a thought, but by an image that could be shared to other’s memory. The perception of oneself, others, events, landscapes, etc. was engraved on this sheet of paper, and all of a sudden time was reborn. People adored this phenomenon, but the artists of this world were forever changed. Some flourished because they were now able to use this new concept as a way of art that never seemed plausible beforehand. But even so, some of the talented painters and drawers felt threatened by this invention because of what it took away from their previously so desperately needed talents. However you decide to look at photography, it dramatically changed history and the art world forever in more ways than many of us will ever understand.

Meggs, Philip B. “The Prolouge to Graphic Design.” A History of Graphic Design. New York: John Wiley & Sons, 1998. 4+. Print.