Iconography: A brief case study

Iconography is popularly associated with things like Egyptian hieroglyphs, Illuminati logos, the eye on the top of the pyramid at the back of all the one dollar bills. I do not wish to delve into the secret and supposed conspiracy theories behind these arcane inscriptions, but rather the aesthetics of iconography through the modern period and it's relation to modern design.

Icons as described can mean an religious figure of ardent devotion, it can also be used to denote important figures or it can mean a symbolic representation of some concept. In context of modern design, icons is a superset of logos and other representative symbolism. Specifically, I want to focus on the modern relation of logos to ancient iconography.

Before the conception of corporations, existed different entities of worship. The earliest known usage of icons in the English language existed for figures of divine descent. These icons were represented in altar form as a means of representation of it's brand. A woman with a baby with halos behind them was the signature of Mary and baby Jesus. This was a colloquial representation, a form popularly known across Christian Europe. Compared to Roman Denarii, with their portraits of Roman emperors, those were known as a relief, a representation of the emperor's likeness. It wasn't called an icon, it wasn't created to proliferate knowledge of the current emperor; word of mouth already conveyed that information. Icons are representative of not just some figure or concept, it was integral to the spirituality of nascent Christianity.

The term icon in relation to important people or landmark events wasn't termed explicitly, but rather interchangeably. After the desolation of idol worship, the term icon came to represent more secular concepts in  the English lexicography. Phrases like iconic inventions or an icon of the Gilded Age was used more frequently. Perhaps because the proliferation of railroads decreased communication latency, the successful have reached a from of cult status from their contribution to the Industrial Revolution. The Industrial Revolution is often remembered by history in relation to their icons - the notable individuals and events that shape the brand of the Industrial Revolution. Because the Industrial Revolution would so heavily impact politics and economics in the coming century, these innovators and their inventions have garnered worldwide relevance. The light bulb, the steam engine are all hallmarks, or icons of the Industrial Revolution. Thomas Edison, James Watt are similarly considered icons of their age.

There is an argument to be made for those that preceded the Industrial Age. To modern observers, Leonardo Da Vinci is admired and hailed as an icon of art and engineering. This is because we have more sophisticated intercommunications that allow us to all objectively espouse Da Vinci's legacy. While it's true that those in the West during the Industrial Revolution might share the same sentiment, the still limited communications and cultural interactions between these countries prevent Da Vinci from being an icon in Industrial Europe. The lack of cultural interactions is attributed to the rising ideology of nationalism. It is only today, with the eyes of the whole world, do people universally applaud Da Vinci's work and immortalize him through the widespread admiration of the Mona Lisa.

Therefore, the existence of icons being applied to important people or events is purely a matter of modern perspective. It does mean that the people in the 19th century necessarily agree with modern citizens.

The icon of Leonardo Da Vinci

The shift in nomenclature appellation of icons to scientists and inventors shifted during the meteoric rise of Elvis Presley, who ushered in the liberation of music through saucy gyrations. His upbeat music set him as an icon of the fifties, albeit one of the entertainment industry. Despite being part of the entertainment industry, the fifties was the period of youthful expression, spearheaded by Elvis. He became the face of not only the music, but also the changing political atmosphere of the baby boom generation.

iconic figure and social icon of the fifties

It was during this period that saw many of the modern juggernauts of the modern age. Wal-Mart, McDonalds saw it's origins in the 1940s. Along with the new economic boom saw a need for brand recognition. McDonald's original logo signaled a new epoch in the meaning of icons. Gradually, icons became cornerstones of a business, becoming the front-line in brand recognition. Quaker Oats, for example also saw an increased role in solidifying their Quaker by simplifying their mascot from a random, 18th century political cartoon style character to the friendly Quaker that we come to recognize with the Quaker name. This period saw an increased use and importance in the creation of icons.

Original McDonald's logo

Original Quaker Oats logo

It was soon clear in the new market dynamics, virtually every business would need an icon to represent themselves. Apple's logo went through many revisions because they realize that an icon by itself can convey a huge amount of information to consumers. Or, it was when IBM shifted towards it's famous stripped letters logo so that people can identify with IBM quality. While our history books refer to the past successes as "icons", we synonymously associate icons with both historical icons and corporate/individual icons. 

The advent of the Internet Age witnessed increased abstraction in logos, particularly in the are of virtual logos. While past logos may involve a certain degree of skeumorphism or less saturated colors  or even an anthropopathic mascot. Overall, the logo design today tend to be more balanced in terms of color, less complex, but more formless in an attempt to stay original. The twitter, Facebook, Google, instagram, etc. logos are all symbolic of their respective companies, but very iconic. They are icons of the internet age. The Facebook like icon follows their blue and white color schemes. This stands in contrast to the colorful cacophony of the second Apple logo or even the boring black and white overtones of the original Apple logo or original Sherwin Williams ones. Design for websites and digital contents have less apt to be artistic and detailed, because people's attention span aren't draw to black and white pictures. This is also in direct proportion to number of skilled digital artists and advancements in other form of design. The Post-modernist Architecture movement also required the evolution of logos in order to synthesize an aesthetically pleasing environment. These include a deconstruction of traditional building elements to throwing together traditional shapes into a work of streamlined design. These same concepts carried over to design, where icons was made to attract customers and make it recognizable. Icons by today's time have received such prominent emphasis that sometimes people make purchasing decision based solely on brand recognition. 

Original logo is black and white

Also in black and white. This is Sherwin William's first logo.

Good Design isn't marred by bad concepts

Recently, I've started to chirp. I mean, I've started to use Twitter a lot. I'm going to base this blog post on this tweet:

Basically, the concept I wanted to convey is the notion that good design doesn't have to be symbolic of good products or purpose. Good design is what we perceive ourselves, through objective examination of colors, shapes, angle, depth, font and spacing. Our eyes do not judge the merit of the purpose in these designs. I think that this quote here sort of extends my idea further out:

Because design is ingrained in our psyche to serve purpose, it becomes difficult to separate it apart when it we need to look at a design objectively. Even still, by designing something to serve an unjust purpose is to also try to utilize design to spread the unpopular message. Design is for a purpose, but it's also possible to design something good for a bad idea without explicitly having the aim of promoting the bad concepts. For example, the overall design for Breaking Bad, a hit show about a high school chemistry teacher turned meth lord is based around the green chalkboard and the periodic table. It's a very respectable logo and it is extremely symbolic of everything the show is about. Along with the promotional covers for the show, the usage of green white shows an example of purposeful color combination and an overall aesthetic that's respectable. The creators of these logos could simply create some other arbitrary logo or overall design, but they went with a very respectable design. While the show apparently garnered widespread acclaim,  there are a group of people that argue that the premise of such a show (about drugs) contributes to the stereotype of popular media as glorifying America's drug and gang culture. In this aspect, the attention to design, promotional artwork seems to some people as a ruse for the immoral content of the show. It's not the best example of a good design being used to promote something bad, but I think that this example rings true to my case. In fact, the very design of the latin alphabet is but what we append the meaning to; they can also be mere scribblings that have no logical explanation for their form. I make such a deal out of the logo of the show because the logo has commercial value; the unique design is what attracts the viewers to the show and allow them to identify with it. It is on the front line of the marketing efforts of the producers of this show. It would be analogous to compare this kind of promotional work to somebody creating a brilliant logo for the devil, though this example is rather extreme.

The overall statement is that, even with the context of drugs, the Breaking bad logo and related merchandises succeed in representing what it seemed to represent and the overall aesthetics reveal a careful and refined approach to design that makes it appealing to us. The design aspect isn't marred by what it represents. However, in everyday life, it's not practical to apply these distinctions because it's easy to simply permanently bind the design and the concept together because of society's conventions.

Website Review Inaugural Series I

Hello, I'm here to embark on a new series which I hope to take a look at many different websites. To start off this series, I'd like to introduce the website, or the front page of somebody I'm following on Twitter, Una Kravets, who currently works with IBM Design. I thought her front page displayed a keen sense of design acumen. Her front page consists of scrolling elements that describe her various projects and aspects of her personality.

Una's website header starts first and foremost with a simple, quirky font that describes herself as a front end developer and design-nerd, complete with a smiley. The front and the "Hi, I'm Una!" gives us an immediate impression of her personality; bright and colorful. True to form, the white text is set against a black background with a pop-up menu icon to the right hand corner of her website. This is important because the rest of her front page uses a lot of white elements that turn into different color backgrounds. The black banner at the top allows for a natural contrast between black and white. The banner doesn't take too much space and it makes it clear whose website it belongs to. The popup menu is set against a gray background with information about her credentials and contact information. It's simple, but it gets the important information in a compact location. I think that instead of having contact information at the bottom, like most people do, Una keeps the important information at the top makes it more accessible especially when her website is based vertically. In other words, the user doesn't have to scroll all the way down to access her contact information.

The second element on her front-page, featured a change to yellow background effect that compliments the quirkier "proofessor" that forms the basis for the banner link to her first project. The yellow color doesn't just work well as a transition color, but it also works against the black header. Scrolling down, we come across something titled "edible arrangements" which is stylized in bright red cursive and print form on the second line. The fruits that accompany the logo consists of green, yellow, orange, purple, red, green and purple. This is important because there are no conflicting colors when these colors are placed against the white background (before hover). The purple grapes are split into two groups and flanked the strawberry allows for a more diverse feel than simple clumping them together. Even after the mouse hovers over this section, the background turns into a faux orange that still perfectly compliments the "professor" banner before it as well as the existing elements within the "edible arrangements" banner. Because green, yellow, purple and red stand out against orange, everything is still legible. I liked this banner.

After the delicious arrangements, we come to a banner dedicated to the boy who lived, Harry Potter. Rather than the classic lighting bolt and possible copyright infringement by using the actual logo, Una decided to try her hand at a pleasant, symmetrical cursive that makes it clear what it's about. It excludes a sense of elegance. The best part of the slide are the different logos that represent the different parts of the Harry Potter series, such as Harry's glasses or his lightning scar. each of these are in colors that again, don't conflict with each other. They are all using the light variants of each color to compliment with the white (pre hover) background. It's also notable that there are seven different symbols, one for each year in the Harry Potter novels. When the background changes to something akin to savoy blue, the outlines of the symbols begin to "fill" in the white spaces between the lines to produce a blue effect, allowing the symbols to highlight itself when the background changes. This produces a nice effect. Following the Harry Potter slide, Una introduces her skill in manipulating fonts and decoration. In this slide, she utilizes three different font styles to produce a distinct logo for E-travel more. Not only do each font uses different serif styles, but it also uses different patterns within each letter. To accentuate the aspect of traveling, Una decorated the logo with what appears to be water drops. This signifies the beaches and traveling in general. It is also this slide that reintroduces the yellow background used in "proofessor". There may be a pattern emerging on this website.

Una doesn't stop right there though; she follows up her understanding of fonts with one that demonstrates her visual interpretation of music in the form of stylized "fannotate" that speaks of musical notation and fans. While the application in question isn't about fans and notations, it is about fans and a new dynamic way to rate music. In contrast to the previous stylized words, this one is done in italics and block cursive; it doesn't convey elegance, but it conveys speed and dignity. The usage of the stylized f is meant to incur images of the musical clefs. The text is done in purple and the background changes to red once the mouse hovers over it. With the use of yellow in the previous slide, Una follows up with an orange slide once more to continue her color scheme.

Her next slide is about something Inaugural Meet up. True to form, by using visual contexts, Una is able to lead the user into knowing exactly what kind of Inaugural it was referring to. Using the American blue on white stars against orange (same background orange as previous section), Una is clear that it has to do with American inaugural, political in nature or not. The use of white letters embedded in orange stripes prove to be useful when the background changes to the "savoy" blue used in the Harry Potter slide. Rather than allowing transparency through the letters like the previous sections do, the letters retain their white color against orange strips.

The final section of Una's website involved "Fruit Story". The font of "Fruit Story" is nothing unique, using two sided serifs in pure orange color. There is a picture of a comical fly right next to it. The fly uses green predominately, but the orange highlights on the binoculars tie it in with the "Fruit Story" font. When you hover over the background, it changes to the same yellow tone. Unsurprisingly, the yellow background works well with the font and the fly. Throughout these sections, I am abel to establish blue, yellow and reddish-orange as key colors on her front page. Had Una used more, it would have compromised on the establishment of a visual theme for her website.

Overall, I like Una's website because it stood out to me the moment I saw it. While the overall website design isn't overly complicated, it shows a decent sense of organization and most of all, colorful design that allow Una's qualities to shine through.

Photoshop CC Feedback I

Hello guys! I've recently taken the liberty of beginning my journey through the Photoshop illusions. Well, basically I'm going to be interested in learning how to utilize Photoshop and other Adobe programs to create digital designs of my own. So I subscribed to Adobe Creative Cloud CC and I started the first Adobe tutorial. Basically, I took this image:

and I turned it into this one:

Along the way, I learned different techniques I feel like I will utilize more in the future. The first skill is called Straighten, which allows me to take that first picture and adjust the picture so that the horizon is parallel to the bottom edge of the picture. This is essential for photos where you just happened to snap it at an angle. This effect can also be duplicated with a rotated crop tool, but it would require more effort. Straighten was the first nice technique that these Photoshop tutorials showed me.

Next up was the Spot Healing Brush and the Quick Selection Tool. The Spot Healing Brush allows me to remove unwanted parts of the picture and blur it with an algorithm that makes it look like the imperfection was never there. The Quick Selection allowed me to selected logical parts of a picture (like the lighthouse) so that I wouldn't have to do it manually. Together, this has allowed me to remove many imperfections from the first picture and even move islands!

Adjustment layers was a practice in how important layers are because it's very difficult to add effects to a picture and not affect the entire thing; so adjustment layers are important. I added a Black and White adjustment layer, so that the picture looks black and white. Then, I used the Quick Selection Tool and the Brush Tool to color in the the parts of the picture that I want it to look like the original picture (the lighthouse). This allowed me to achieve that desired effect above. Also, I learned there are different forms of placing external images within the project; There was Place Embedded and Place Linked. I used placed embedded because I wanted to edit that picture directly. Furthermore, The simple text tool allowed me to add that simple title underneath the logo.

Overall I enjoyed the project because it allowed me to learn some relatively obscure techniques that will prove useful to me in editing pictures. For now, I will be focusing on learning how to edit pictures, and then later on create digital art through Adobe Illustrator and then editing them through Photoshop. Editing photos using photoshop shouldn't be limited to just brushing up a picture; Photoshop is also a very versatile tool to create digital collages that can be combined to create an entirely new picture as with that pizza to woman example that I've shared earlier. Thank you for reading!

A Recipe to Live the 2011 Winner of the International University Architectural Competition

Three students from Waseda University designed a fabulous eco-friendly straw house inspired by farm aesthetics. The straw house won the 2011 International University Architectural Competition and the completed building stands in Japan's Hokkaido Prefecture in a town where the dairy business is predominant. The title of the project is "A Recipe to Live" and the changing aesthetics also follow the change in the diary season.

During the summer months, the addition of wet hay bales along the sides allows for a effect where when the bale dries, it releases cool moisture into the house, allowing for a natural cooling effect. It also doubles as a form of storage for these hay bales as well, showing the absolute functional abilities of this house. During the winter months, the microbes in these hay bales form a sort of air bubble stop and allows it serve as a form of ventilation. Because this house is located in a dairy farm, the hay bales for this type of operation is plenty. This is an cost-efficienct form of heating the house during the harsh Hokkaido winter.

This image shows the man changing the hay bales; these transparent windows also makes different window placement create different lighting over the year, creating a dynamic interior lighting. This picture shows a man changing the bales in the house.

The hay bales don't just line outside; they also line the interior of the house. Because this meant to be an eco-friendly house; the interior is lined with plywood that highlight three colors; dark brown, white and light brown to form a balanced color combination that shows the sophistication of this design. Because of these three combinations, the build cost of this simple combination is also kept to an minimum.

By examining this floor plan, it's a single family house with ample space for the family life. These bare necessities are what keeps the ratio of hay bales to interior surface area consistent and what allows this design to be cost-efficient and comfortable. Even still, the occupants of this building are likely to be farmers or someone involved in the dairy business. The aesthetics, functionality and interior design combine together to create a trifecta of intelligent architectural design. I can understand why these Waseda architectural students are able to win the competition. I really like this project, and I hope to see more examples of this kind of fusion of architecture and engineering together.

Adobe Cloud: An Overview

I've decided to pick up Adobe Cloud to further my interests in design; it would provide a great asset in assessing the role of color, contrast and depth in my exploration of design concepts. I've used Photoshop before, but I haven't even scratched the depth of what it's capable of. Instead, I've been mostly a user of layers and transparency to achieve the effects that I want. However Photoshop isn't just about design; it's also about having the ability to manipulate photos; not only real-life ones. Of course, Photoshop is also notable for being used a tool for stunts like this:

Joking aside, I'm not trying to learn Photoshop to do cool things like that, but rather some serious material. I will be focusing on how to use the different tools in the Adobe Cloud suite. Adobe Cloud is Adobe's attempt at reducing the costs of Photoshop so that more people can access the versatility of the Photoshop suite. I will outline the different kinds of tools that are available with the Adobe Creative Cloud suite.

Adobe Photoshop CC:

This is the main program that is used to dynamically edit photos. The use of layers is one of Photoshop's great abilities because it allows the user to edit photos on one layer without affect the entire picture. These layers can also include special effects such as contrast, transparency and other modifiers that increase the complexity of a photo.

Adobe Illustrator CC:

This is Adobe's line of illustrating software with enhanced capability that allows digital artists to create complex digital illustrations with dynamic tools like 3D perspective drawing or even Windows 8 touchscreen support.

Adobe Indesign CC:

This is Adobe's page design suite which allows designers to design different page layouts for things like brochures and other types of printed documentation including features such as precise font management features, dynamic hyperlinks and instant font previews on the working document. 

Adobe Dreamweaver CC:

This is Adobe's Dreamweaver software which allows the user to incorporate dynamic webpages and the design for them. Enhanced CSS designer allows seamless CSS functionality for richer styles. Despite being design focused, it also includes support for all of HTML, CSS and Javascript to form the triple most essential elements of a webpage.

Adobe Premiere Pro:

The video production suite by Adobe, which includes dual functionality between it and Adobe SpeedGrade CC for correct color calibrations when viewing videos. It also features advanced support for increased video formats and up to 4K compatible formats, allowing for hi-resolution video editing. It even includes multiple camera editing and precise audio controls. Furthermore, Adobe Premiere Pro is designed to take advantage of GPU-processing such as Nvidia CUDA for faster video processing.

Adobe AfterEffects:

This adds cinematic effects to an otherwise mundane project; lighting and gamma can be adjusted through this program. AfterEffects can also be used to add effects to 3D rendering, giving users the ability to apply manual anti-aliasing, anisotropic filtering, reduced blur to create additional effects that the 3D rendering software doesn't provide. This only affects static 3D images, as the 3D renderer and hardware would have to provide dynamic anti-aliasing.

Adobe Muse:

This is the companion tool for Dreamweaver, which attempts to create dynamic websites without the explicit use of code. 

These are the different Adobe programs that I hope to using in the following months as I learn how they work together. I am excited to use Adobe Creative Cloud and I hope to use it to a fuller extent.

The Crystal Palace: A Contest Part I

The Crystal Palace was an engineering wonder when it was conceived for the 1851 World Fair. It was the embodiment of new industrial processes that have made such an structure possible. Before, it was inconceivable for a structure to be made almost entirely out of glass. The Crystal Palace thus earned the distinction. It wasn't merely just for show, however, because the Crystal Palace was also massive too; easily fielding enough space for the World Fair. The design of the building inspired the design of many modern buildings today; from office buildings to malls. The emphasis on balance was central to it's design specifications as it stands on the forefront of the new industrial age. It was also important because it showcased the latest technologies, many which would become influential drivers of industrial powers in the coming decades. From an aesthetic standpoint, the opulence of the Crystal Palace also contrasted sharply with the drab, brown and dark architecture in the industrial age. Therefore I believe that the name Crystal Palace is appropriate for it's time even though it was made mostly out of glass panels. What's striking about the Crystal Palace is that it's materials and purpose wasn't permanent; it was designated as a temporary housing for the Great Exhibition. These facts only accentuate how impressive the Crystal Palace was for it's time.

Fast forward 163 years and we have a modern day contest to rebuild the Crystal Palace from an modern architectural standpoint. The reasons for this project can be attributed to the need for nostalgia as well as to restore the historic tradition of the Hyde Park area. The designs for each submission much pay homage to the original structure, so they will all be glass structures. The contest is undoing and there have been many submissions. There were two notable inclusions in the requirements for the competition. One of them is that instead of the original Crystal Palace, the new modern one will be conceived as a permanent structure and will include environmentally friendly materials as a signal for the new environmentalism. Submissions haven't been officially publicized yet, but I will update when those submissions come rolling in!