Coloring The World Through Media

After reading article after article on color and the psychology of it, I found myself really enjoying the infoplease.com page detailing the meaning of colors - particularly when it comes to fashion, but in my research I stumbled upon an article looking at the symbolism in the movie Pleasantville and what the contrast of black and white against color meant. The movie had a real interesting take on looking at race relations and used color to simulate the segregation of the 1950's and 1960's well. Going even further, the movie decided that when a character would have some type of pleasure (usually sexual pleasure) or enlightening and growth experience, they would change from being portrayed in black and white to then being seen in color. It was a very interesting way to look at the evolution of society as it grows and learns new things: changing from a monochrome and boring black and white to an exciting and colorful new being.

It was really interesting seeing how influential color can be not only in the clothes we wear, but the houses we live in, the rooms in which we work and learn, the websites we view, and even the movies and television shows we watch.

Color and the World

After writing and researching color and its physiological meaning, I now understand the importance that color has in our every day life and in web design. Color is vital to set a mood and feeling on a website. Knowing your audience can help you identify what colors to use on a web site. Different people can interpret colors in many ways so knowing your audience plays a strong role on developing an effective site.

In college, I took a flag studies class where I learned the true meaning behind the colors of Latin American and European flags. Many had similar descriptions to the colors of red and white however, there were few with total opposite description to these colors. I learned to respect and understand the natives of these countries simply by what they chose as a nation to identify these colors.

The most interesting thing to me in the readings was the “what the color means” article we read. I knew the majority of the colors meanings but I found shocking how in other countries a color could mean something totally different. Lets take China for example, many countries describe red as the color of blood, danger, labor but in china red means prosperity, happiness, and thriving life. The total opposite from the negative implication it has in many countries. Chinese brides wear a red dress to bring in a positive marriage and life to their journey when marrying.

This reading motivated me to continue to search the meaning of colors and its physiological impact around the world. Very interesting.

The Confinement of Color Theory

I will make a bold admission that I did not enjoy the required reading as much as the rest of you, with the exception of one essay - The Red Queen Color Theory by Bob Stein. I wanted to cheer as he told web designers everywhere that they need not be constrained by color theory, color wheels and color surveys. As he gave designers permission to use their skills and artistry to lead public perception of color rather than follow, he was also giving me permission to take with a grain of salt everything else I read.

I then went in search of examples in support of The Red Queen. I found the ammunition I needed at Tiffany's and the pre-K Montessori class that my daughter teaches.

Tiffany's and Co. picked an unusual color over a century ago that was called Robin Egg Blue. The color is now commonly called Tiffany Blue and is copyrighted by the jewelry company. It was not the obvious choice in the late 1800s, but it was the right choice. Instead of the designer being led by the Psychology of Color, he or she blazed a new trail and in doing so, changed the psychology. Tiffany Blue now stirs emotions of romance, quality and elegance.

Pink is the favorite color of two year old boy's in my daughter's pre-K class. But it is not the favorite color of the 3 and 4 year old boys. She has witnessed this phenomena over the past six years. As they grow, they learn an aversion for pink from their parents and their peers. It is not innate, it was pushed for marketing purposes by Department stores in the early 1900's. Before that time, most department stores sold pink clothing as the dominant color for boys.

Here is a chart from a 1927 Time Magazine showing what color the major department stores in the country were selling as the dominant color for boys and girls.

So if something as so deeply ingrained in our psyche as "pink is for girls and blue is for boys" can be changed.  It is proof that marketing and design, when done right, can change the psychology of color.  So Bob Stein and the Red Queen are right.  The designer should not be led by color theory based on the prevalent psychology of the day.  A powerful design can change that philosophy.

The designer should not be led.  He or she should lead.  He or she should be The Red Queen and create the next Tiffany blue.

Global Color

Like everyone else, I really enjoyed the reading and assignments this week. My favorite being the history of color throughout the world; the different cultural meanings and how they have changed over the years. And how the meanings vary from culture to culture! In Asia, for example, orange is seen as a positive, spiritually enlightening color, while here in the US we associate it with road signs indicating hazards, traffic delays and inconvenience.

I did take one of the color psychology quizzes, and the results were a bit mixed. While it was on target for a few ("Creative and emotional, looking for ways to further expand those qualities.Seeking adventure and new and unusual activities."), other results weren't quite as accurate ("He is being forced to put happiness and pleasure on hold due to his limiting circumstances."). 

Psychology of Color

What a wonderful lesson this past week learning about colors and how each color blends with one another. It certainly has opened my eyes. You have a better understanding of what colors will work well together and what colors will not look as good. The higher level of chroma or saturation will equal a brighter color. The lower amount of chroma or saturation will make the color darker or neutral. When designing a website you have to consider what colors will work better than other colors. If your entire site is yellow that probably won't be a very balanced site as far a color because it will be too bright for your eyes. If you have a tertiary color to compliment the yellow, like blue-green it will help to balance out the site better. I also was able to research about color measurement "colorimetry" Where the wave length of color is measured by the amount of light each color takes in. The spectral colors are measured in nanometers. Here's a diagram at the top I thought I would share. I found it by searching color on Wikipedia.

As I was typing this I was watching NBC. Everyone should know what NBC logo has been the past 55 years. That's right the peacock! John J. Graham created the peacock in 1956. Several other animals were thought of even the butterfly. NBC choose the peacock because people knew what it meant to be "proud as a peacock". NBC wanted to let people know that new programs were going to air in color. In order to help promote NBC's television programming what better way to promote through a colorful peacock. Here's a link below that will tell you the whole story.

http://www.big13.net/NBC%20Peacock/NBCPeacock1.htm

So Many Colors. So Many Wonders.

Learning how humans interact with colors on a daily basis, all around the world, really opened my eyes. Even though as a society we can associate a specific emotion to a color, everyone's reaction and experience is going to be different. I've searched the internet for various readings and research done on this topic, and a lot offered much more than I expected.

I have to admit that the first link I opened to start preparing myself for this assignment was the "Colour Assignment" study. It went through the experimental process of gathering data, presenting it and delving into the science behind colors. It gave me a really good representation of color across the metrics of gender, age and language. The graphs easily depicted the data and conveyed the messages within.

What I learned from this assignment was that there is more to just knowing red, blue and green. The colors within, the colors that are formed and the way we interact with them on a daily basis is what matters. The psychology of color association and perception can be explained much more in detail than my 3,000 word essay. I've only touched the surface and dived a bit into the studies. From what I learned is that from society to society, our understanding of what color is, changes. Knowing how to adapt color into everyday design, and knowing the emotion it will produce is crucial in designing a solid piece of work.

A wave of light is powerful than we can ever imagine. Learning how to work with it is the real goal.

The meaning of package colors at the grocery store

During my reading for how the human response to color is used in design I came across this article http://www.chow.com/food-news/81044/the-food-package-color-secret-decoder/

Along with our other reading on what colors mean, this article was a bit more specific with some colors and why they are chosen. I found the fact that red and blue play off of each other so well and that like Pepsi and Coco Cola competitors will choose colors based on what their competitors colors are.

In the Color Psychology article by David Johnson, I found it really interesting that blue was not a top food package color for him. He said "While blue is one of the most popular colors it is one of the least appetizing." When I was at the grocery store I looked around and was alarmed at how many blue packages covered the shelves. I think when the blue is used correctly it is not offensive or implies the food is bad. Also I think the color of blue chosen makes or breaks the consumers emotions on the package.

Overall I enjoyed learning about the means of colors, specially outside of the United States. It is important to have an understanding of the color scheme your market will get the most positive attention from.

Psychology of Color- Heather Kick

The selection of reading were a great portrayal of how differing the ideas and reactions of color truly are. And it's not just about personal opinion, but about upbringing, cultural influences, and perception. The first reading, "Color Assignment," showed the results of color surveys contradicting the conclusions of Birren's color psychology studies. And in the "What Color Means" article you can see that depending on your culture different colors could mean mourning, courage, or jealousy.

Beyond the symbolism, cultural influences on the perception of color come from the history of that color. A fantastic book on that very history is Color: A Natural History of the Palette by Victoria Finlay. I read this about a year ago. It really makes you appreciate color in a raw way.

There is certainly a lot to be said about color. It can bring emotion in to any visual. Even the lack of color can mean something. What makes this truly artistic is that the effect can mean different things to different people. Being aware of this, you may be able to create a new influence of your work depending on the color palette as designed for different groups.

Regardless, color should not be overlooked or under estimated in your design.

Color Discussion

I throughly enjoyed all of the readings on color. I often found myself reading something that reminded me of why a friend chooses the colors he or she does, which resulted in me having to text them to let them know.

The reading that stuck with me the most was the "What Color Means." It is incredible how much the meaning of a color changes when moving through different cultures and different countries. I think what shocked me the most is that black is not the universal color for mourning. For example, the color of mourning in South Africa is red. We grow up with such large influences on how we perceive color it is sometimes hard to comprehend that others don't view the colors in the same way.

I also enjoyed reading how we associate colors with certain things. For example, blue is the symbol of love which is why a bride wears something blue on her wedding day. All the meanings of phrases with colors in them begin to make sense! Colors have been fun to explore and learn the meaning of.

Color Scheme Designer

I came across this Color Scheme Designer and thought you guys might like having a few clicks with it, and could possibly find it useful.

First Grade on Steroids

While reading through our assignment on Color last week, I couldn't help but think about finger painting - mixing colors to make new ones, experimenting with different shades, adding white to lighten colors, etc. This thought was triggered specifically by the sections we read about color wheels. Color wheels are something that we've all grown up with. We're taught from an early age that primary colors are red, blue and yellow...and then next come secondary colors, and so on.

One thing that I never thought while learning my colors in elementary school, was how important they really are. I thought he most interesting section of reading was focused on the meaning of each color across cultures (thinking that yellow can stimulate metabolism did make me laugh though - only because there is a lot of yellow in my house). Throughout the reading, I realized how important color is to all aspects of design - architectural, web-design, fashion to name a few.

Adding color to the display type assignment was also fun and eye opening. I personally, edited my originals by adding color to see the difference between the 1st and 2nd batches. It was incredible that an addition of color could change the emotion that came from looking at each piece so dramatically. For example; adding a very light gray background and changing font color to light pink can truly evoke the sense of a whisper.

Balance and Symmetry Example

This example, from Bob Hagh, jumped out at me as having very solid, unambiguous decisions about which types of layouts are in each website.

https://docs.google.com/open?id=0B9rASny4nCbjOWM2ZjM3YjQtODI0Mi00ZThmLWIyNzctMWIzNWZmMzA2ZGFm

Check out some examples from Module 4 typography

New site tracks "terrible mobile web design"

On a side note, I have not used Blogger in over a year, and I must say it's become a far richer experience even in that short time; a bit like Tumblr (low-calorie Wordpress). I might start a new blog(ger) just to use to more Googley interface. Anyway, to that end here's another article that raises topics we've discussed in class, this one from Wired and has some nice linkage too.

module 5 thoughts on color

It's interesting to learn about Primary color, Second colors, Tertiary colors. etc. How some colors work better with other colors. There doesn't seem to be that much difference in a printer's color wheel vs. a painter color wheel. It looks like it has to do with the brightness of the color or chroma. Colors that compliment each other are at there best when they are fully saturated. Red and green is opposite of each other if you put them together graphically it doesn't look that good because of the brightness of the colors together. There is more light when viewing on a computer. Color saturation is very important to know in order to gain the right blend of colors. Whenever you are putting together a site. You will want to use colors that will be appealing to your eyes. You will not want to use anything that will be to bright.

In T.V. production before any event or show that goes on the air we have to check color bars so the program has the correct video levels. The colors displayed on color bars are; magenta, cyan, red, green, blue, and yellow. In order to get the proper video levels we use equipment called the waveform monitor and vector scope. Both the waveform monitor and vector scope help with the brightness or luminance of the video. Does anyone know of any tools/equipment you can use when creating a site to help with color. I know you can read online at various site to find out what will work for color and what won't. I was wondering if there is anything out there similar to a validator when checking for HTML errors on your site, but for color only.

color combination module 5

Here are some of my color combinations. 1) Itten's contrast 2) overlap 3) monochromatic

Designer/Architect Collaboration Strategy

Here's an article on Mashable written by an "information architect" conveying some user-tested (himself, really) strategy for allaying artistic differences between architects and designers of web based content, specifically websites. Whether you're wrapping up or cramming this Friday, have a little break and enjoy the article :]

song titles

Here are my song types 1)playful 2)shy 3)character 4) aggressive

The Illusion of Transparency

I started to get a little frustrated on the WORQX site because I could not find an example or even any reference to the the second part of the Palette Picker test.  We are asked to "create the illusion of overlapping/transparent hues" with no guide on how to do that or even what it is.

I did a little research which I will share with you in case you are having the same dilemma. It is a difficult concept to explain, but when you see it you know exactly what it is and what to do.  Here is great example:

 

So you need to choose two colors that appear to overlap, but they really are not. You just choose a third color to put in the place where the you want the illusion to be. If you choose the right blend it will appear that you can see through the lighter color and that changes the color underneath, but not of that is really happening. You just created the "Illusion of Transparency."

Here is my attempt at it:

It would appear that a yellow band crossed over the blue band creating a green tint through the yellow's "transparency.' But it was just the color green I chose that created the illusion.

I hope this helps. If not, here are a couiple of links I found:

Color Theory 101
Color Theory 101a
Illusion of Transparency

And at Understanding Transparency Using Solids there is actually a PDF showing you step by step how to do it.

I found a couple of these sites after I was already finished the assignment. So, you'll be ahead of me. Good luck!

Module 4 - Interested in feedback

I thought module 4 was really interesting and especially likes the display text section. This section really opened my eyes to the uses of text to evoke emotion. I found that this was a great exercise to do to learn how different words, when mixed with font, shading and spacing, impact the viewer.

I'm not great with Photoshop but do have some experience in it and just wanted to share what I put together. Feel free to provide any feedback!

typography - module 3

The typography assignment was a interesting in the fact of making letters, words have a different spacing, font, making it oblique, having an over-line, or underline. One thing I did do was make some of my words blink. I don't know if anyone else made there words blink, but its a unique property within CSS to do. By changing the site from its original form it gives the form more of a unique look. This unique look can allow people to read more. That's what you want to accomplish when people come to your site. You want people to stay on you site and keep coming back. What things can you do to keep people reading articles on your site. You can make the form unique by modifying the CSS. However you don't want to modify it so much that people will lose interest. It will be hard for them to read etc. The original site Forgotten Inventors was very plan. There wasn't much form other than words with the original site. By modifying the CSS you are creating more form for the site.

Stripped Away Form Cruise

The sites I used to strip away the form was Silversea Cruise and American Cruise Lines. When I removed the CSS from the Silversea website everything was shifted to the left of the page and the page turned white. The background color was grey before taking away the CSS. When I removed the images of the page. It didn't remove all images because the main page had a rotating image. When I tried to do the small rendering on the Silversea site it didn't do anything more than likely due to the rotating image on the home page. There isn't a way of condensing that image down to view on your iphone or Android. The other site I chose the look at was American Cruise Lines. This site wasn't as creative as the other site. It was very plain because it had a background color of white. When I removed the CSS from this site all the links shifted to the left. After I removed the images the image at the top of the page was no longer there and the links did not display. This site was able to to the small screen rendering.

Website Nakedness

Looking at Disney’s and Carnival’s cruise websites was an interesting study in functionality. While it is clear that Carnival’s site is more fun and probably exemplifies what the cruise line stands for with a fun website, Disney’s site translates better across multiple platforms with its blog-like setup. Without CSS, images, or colors, Carnival’s website was relegated to a simple HTML site with tons of links. The page became more cumbersome to view when stripping it down – to the point where it takes several seconds to scroll all the way to the bottom of the page. When Carnival’s site is viewed as if on a smaller device, the site becomes even more cumbersome and several important links are covered by pictures. 

On the contrary, Disney’s cruise website is much simpler, using almost no CSS. When eliminating pictures and colors, the site is still very usable and experiences almost no change and the same goes for viewing the site on a smaller screen. Disney has made its website like a blog so that the functionality and primary uses of the site (learning about their cruise experience and purchasing tickets) aren’t hindered by any circumstance. 

Building sites like this seem to be a better way of business to me because it allows customers/visitors to focus on the site’s content without distraction and it forces the website to use and display content that is worthwhile to visitors.

Let Me See You Stripped..

This was my first experience with the Web Developer plugin and it was quite an interesting experience. Stripping away the various layers of the sites form helped me better understand the carious elements that make a site cohesive and visually appealing. Color, images and layout all have a role in making a site truly work.

The site I used in my example was Norwegian Cruise Line. When I began taking the images away, there was clearly a visual void in the center of the site. Nothing really made sense. It no longer grabbed your attention, nor did it have that ‘wow’ factor. I realized how the image of a Macaw made the site exciting and colorful. Without one, it was boring. It looked unfinished and sloppy. Next I disabled the color. It didn’t have the same dramatic effect that removing the images did; that is, if I did not know it was missing, I probably wouldn’t have noticed. It did make the site look better when it was enabled, and there was a noticeable difference, but nothing too severe.

The biggest surprise and most striking change was when the CSS styles were disabled. Here, you could definitely notice the importance of layout and CSS on this site. All the information was placed along the left side of the site. Photographs & font were all different sizes and not at all cohesive. It was dull, boring and difficult to navigate. If you were looking for any information on a cruise, or the cruise line, good luck!

I think from this exercise, I definitely feel there should be some type of CSS standard, like with the Zen Garden page. Having a flashy, exciting site is wonderful and visually stunning, having a site that functions and people can properly navigate is even more wonderful. A site should be created so as to be user-friendly on a variety of browsers.  For a site to fulfill it’s purpose, the design must work.

stripping_away-form-r.adriel

Colors, layout and images function on a web page much like they do in "meat space" where we in everyday life assess our knowledge, comfort and behavior appropriate for a given setting. Colors have a subtle cognitive effect as certain colors activate particular parts of the brain which produce neural responses, and if that were not enough there are cultural apprehensions of color. On the Viking Yacht site there is the maritime blue and white (water and sky) as well as the red and orange (life rings and safety supplies); the red and orange being more understated than the white and blue as vice versa there would be a strong sense of potential danger.

Layout also has cognitive effects. Interface designers speak of "cognitive resistance" being a matter of the time required to learn how to use, navigate and create results in a given environment; the longer a user spends learning, feeling their way around, the less time the user is committed to committing or responding in a constructive loop. In web design, similarly, how information is laid out—and what information is placed where—has a lot to do with the accessibility of the information no matter what exactly the information is relaying. From the moment a user appears on your site, the cognitive resistance can be 100% but well-conceived layout can diminish that resistance before you can say "sold".

In this pool of neural affects of course images play a role. As in everyday life the images—and colors present in images—can make us feel alarmed, intimidated, or at ease and even evoke memories or imaginatively placing ourselves in the world of the image. In the right setting our senses can be activated; images can bring back familiar smells and sounds, or even emotional responses. In web design, this works no less profoundly. But designers must be curators—images or images' sake is a considerable error when we consider the potential that carefully selected images (and colors and tones and active or passive appearances) can be rather seductive.

Of course, only in few cases can color, layout and image stand alone. More often they work in concert, and web designers must be in touch with not only the technical aspects of their craft but also have at least a level of familiarity with user behavior and cognition.

CSS supports both ends—it allows designers greater flexibility with more creative control and less complex documents, and this in turn unlocks greater consideration for perfecting function disguised in forms.

Stripped Away

It was definitely an experience playing around with CSS on the Web sites of Carnival and Viking Yacht Cruises. This tool really showed the power, usefulness and usability of these sites. All these sites are only really comprised of HTML, XHTML, HTML-5 code and so on. It's just a splatter of text and links. CSS really helps the end user experience by polishing it up, making it more enjoyable to visit.

I really like Carnival's blue and white theme. Not only does it have that "ocean feel," but blue tends to be more calmer and relaxed. It doesn't hurt the eyes, and the colorful pictures make it more exciting and fun when shopping around for a cruise. And that's what CSS does. It helps with form and function. CSS creates the form that encompasses the function beneath. Stripping everything away, and leaving just the function visible makes for a much different experience.

Viking Yacht Cruises felt more like a blog than a professional Web site. Even after stripping away CSS, the general layout of the page remained. This told me that not much was done to present the Web site in a more attractive manner. It seemed like form never even existed here.

What I learned is that even though function is important, form and presentation is what sometimes drives a user to explore the site page after page. Having compatible formats for different platforms (browsers, mobile devices) will enable users to be delivered the same content in a more efficient away. The look and feel, from colors to pictures and to text size, all set the mood.

For better or for worse? Stripping away Form.

When beginning to strip away form from the Royal Caribbean website, I wasn't sure what to expect. I knew the site would look boring and a little messy but I soon realized that I underestimated what it would truly turn out to look like.

Stripping away the color changed the entire background to white and all of the words and links changed to bright blue. This was a little sore on the eyes but manageable. Stripping away the images didn't make too much of a difference but did leave the site looking a little empty. The image on the homepage (which is also the main focal point of the page) was removed and replaced with a gray box. This took away a lot of the sites initial appeal. Next, stripping away the CSS had a large impact on the site. This just left the site boring and difficult to navigate. All the the text (primarily links) were pushed to the left side of the page and organized in one very long list. The image on the main page was also added to this long list, but closer to the bottom than to the top. One technique that really affected the site was linearizing the page. This moved everything on the site to the left and created a jumbled, unorganized mess. Finally, the small screen rendering option wasn't too terrible although, the site wasn't entirely viewable without scrolling to the right and down.

Overall, form plays a very important role in a websites functionality, appeal, appearance, and ease of use but we have learned that a site is able to function (though not well) without it.

Stripping Carnival.com and Kristinacruises.com

After stripping both sites of its color, layout, and images I noticed the importance of adhering to CSS standards. Different browsers and computers display websites differently causing your content or images to be distorted or lost due to its inability to support the website design. But if you follow the CSS standards you can at least expect to have your content read legibly despite what a computer can processor and support.

The Carnival website, after disabling its color and layout, was still functional and pleasing to look at. The purpose of the website was still delivered for it did not depend solely on its design. The Content carried the website. On the contrary, Kristinacruise’s website was difficult to look at when stripping out its web presentation elements. When disabling all styles of CSS on the site, it showed a photo display of places to visit (taking up half of the page), and all the content was cramped up on the far bottom left column. It felt more like a blog instead of a cruise website.

Color, layout, and images are important on a cruise line website but content and function is essential for it is you main purpose for creating the site. A cruise website is intended to bring up revenue and inform customers on their services. If you cant deliver a website that is compatible or closely capable to providing content on all browsers, than you might as well stick to advertising on a newspaper.

cruises sites form/function a good balance

I have looked at two of the listed cruise webs sites. The two I'am going to pursue and write about more is the Silver Sea Cruises and the American Cruise Lines.

The Silver Sea Cruise line site offers a good balance of form and function. It shows off some really nice pictures. The layout of topics I can look into on the site is well organized. It seems that whom ever crested this site seems took a lot of time and effort. I'm sure they have a full staff that caters to the site development.

The other site I was looking at is American Cruise Lines. After looking at this site it doesn't have enough form or function to make it worth coming back a visiting again. The site doesn't have any interactive with the social media networks like the Silver Sea site. They can add that to their site to allow more functionality. There also isn't enough color to attract the eye.

Stripping Away the Form

Stripping away elements from different websites truly opened my eyes on how sites are built. This lesson definitely showed me that form really does follow function. When designing a website the form becomes extremely important determining the functionality and essence of the website. When we began stripping away different aspects of the form is when I realized that the function seems to lose its own importance in the matter.

When you strip away the color in the Norwegian Cruise Line website you lose the pop but it is still functional. The blue background is no longer there and I felt that, that really helped bring out the beautiful colors in the site. The white background, although slightly boring, is still functional.

It was astonishing looking at the Norwegian website with no pictures. The main page wasn’t eye catching and there was nothing to look at that would make you want to explore the website further. Some of the mains tabs, such as the ship layouts, became useless because the images no longer existed. Well stripping away this part of the website I realized how important images are to all of us. We sometimes look at the pictures before even reading anything. If the picture isn’t exciting we assume the information isn’t exciting either.

The biggest difference in the form of the website came when we stripped the CSS. I was furious at this point. I felt like I was looking at the website on an old cell phone. Stripping away the CSS results in the website being boring, hard to navigate through, and a true pain to look at.

After performing all these tasks I realized that the standard form of CSS doesn’t work for all websites. Some websites rely heavily on their images, color, background and so forth. Without these specific aspects the websites wouldn’t have the same impact on us as they do. Sure some websites still function great when removing the CSS but others struggle to keep their visitors on the page.