My Digital Bliss

Chapter 7

1. What is texture as it applies to design?

Texture in terms of design is how the designer uses visual information to portray the physical feel of a surface. This is done because in the digital world (or even in paintings) the viewer cannot physically interact and feel the surface, so visual information must be used to help the viewer understand in more detail what is being viewed.

2. How can texture be used to show detail?

By showing the texture of an object you can allow the viewer to appreciate an object in its fullest. An example of this would be the following two images:

Both adequately portray the fact that they are guns, however the second image is goes into much more detail, thus allowing the viewer to gain a better understanding of how it might feel if help. Detail helps the viewer understand the image better, this relies on past experiences and leads into the next question.

3. How can texture be used to simulate a surface?

By using design elements that mimic surfaces found in the real world, a designer can create an image that projects a certain understanding of how the image would feel if touched. An example of this could be an online restaurant menu that is designed to look like old parchment paper. If the background is stained and wrinkly looking, the viewer can understand that even though the image is digital, if it could be touched it would feel like parchment paper.

Chapter 8

1. What is the difference between the additive and subtractive color method?

Additive color is how colors are created in the natural world, and also in digital media such as TVs and monitors. Colors are created by combining wavelengths of light. The three primary colors are red, green, and blue, with the secondary colors being yellow, cyan, and magenta.

On the other hand, the subtractive method is how things like paintings or printings are made. The paint or ink absorbs all the color but what is intend to be seen, which is reflected back to the viewer. For example, if I am seeing red ink, it is because the ink is absorbing all the other colors and reflecting back red wavelengths of light. The primary colors of the subtractive method are red, blue and yellow, with the secondary colors being purple, green, and orange.

2. Which color method is used for new media?

The additive method is used for new media because that is how things like monitors or TVs produce colors, they combine light wavelengths.

10. What is a web-safe pallet?

A web-safe pallet is one that is limited to the 216 generally accepted colors that all browsers can equally display. Using these colors helps ensure a website will have the same color scheme from system to system and browser to browser. I would imagine the need for things like are going to dwindle in the coming years as browsers and system become increasingly more sophisticated.

This week our assignment was to pick out three magazines from a news stand or similar place that caught our eye, and then analyze them. I took a slightly different approach, I just looked at magazine subscriptions on Amazon.com and picked out the three magazines that caught my eye the most. Here they are with analysis:

The first magazine I saw that really stood out to me was Country Living:

I have absolutely no desire whatsoever to read this magazine, but the big spider on the cake really caught my eye. I think the reason it caught my eye was almost an unconscious reaction to danger. It was more like a double-take, where I needed to check and make sure the spider was not real. This is a type of advertising I had never considered before, but it worked really well on me. I may start to look for other designs that play on unconscious or natural reactions.

To analyze the rest of the cover, I think the content is appropriately spaced on the cover to give a brief idea of what is in the magazine, yet not overwhelm a buyer. The color scheme is very appropriate for the upcoming Halloween season.

I think the Halloween theme may help promote an impulse buy, however I am not any part of the cover would help this magazine sell outside of its intended demographic. The spider image certainly is eye-catching though.

My second magazine was Newsweek:

This time I was drawn to the cover text. I found it utterly confusing as to how a baby could be racist. I tend to think of babies in the sense of tabula rasa or blank slate, where they are young and innocent and have not yet been exposed to things such as racism. Then when I read the sub-text that the article is on a study of whether things like racism are genetic I was really interested. I am still not sure I would purchase this magazine at news stand price, but if it was sitting out in a waiting room I would definitely read it.

In terms of actual design, I find this cover rather boring. I do think the black background and shadows really helps play into the dark take on infantile innocence. It is also difficult to determine the expression the child is making, it is a very neutral face. A lot of space is devoted to the picture with little additional text on the page.

I can see this cover making impulse sales at the news stand because the article on racism can easily be understood by anyone, including those not usually interested in the type of current news Newsweek generally covered. Along those same lines, I think this cover would make sales outside of the intended demographic. Again for the same reason, it is a topic numerous groups would be interested in, and that everyone can relate to on some level.

My third magazine was Your Big Backyard:

My reasoning behind choosing this cover is quite simple. I love tigers. I do not know what type of magazine this is, but I am guessing it is a children’s magazine. So I would probably not buy this magazine, but I would definitely look at the pictures of tigers in it.

To examine the design elements, this is a very simple cover. Big tiger picture, check. Name of magazine, check. Two-word explanation of what is in the magazine, check. And that is all. Obviously, a lot of space is reserved for the photo, unfortunately I feel they made the tiger too big. It is often difficult to find a decent color to go across a patterning similar to the tigers, where the text must show up over both light and dark colors, they did an acceptable job by using a border on the text and choosing a fairly neutral color, but I still think it may have been better to shrink the tiger so that a more uniform background could have been used for the text.

I can certainly see this being an impulse buy for a little child, or even potentially for someone who likes tigers as much as I do. So in that sense, I can see this magazine selling outside its normal demographic of children.

This week we discussed the ideas of line and shape.

Line at first glance is fairly obvious. However, there are some things I hadn’t considered to be a line, at least consciously. The main part I had not considered to be a line would be the invisible line created by either the edges of several objects in a row, or the line created by an arrow or perhaps the direction a person’s eyes are looking.

I cannot immediately think of any websites I have recently been to that employ an invisible line with an arrow or eyes, but I have certainly been to many sites that create lines with the edges of many boxes. Often times this is done with the buttons that compose a navigation menu.

Moving on the topic of shapes, we defined shape as a line and the area enclosed by that line. Then if a third dimension is added to the shape, volume, or imaginary space, is created. We discussed the many different ways you can present shapes and the effect that will have on the audience.

Things like making buttons on a website all the same shape will help the viewer understand that each shape represents a button, even if these buttons have different text or graphics on them. Another element we talked about was that humans generally prefer an image with the light source coming from the upper left portion of the picture. I found this particularly interesting as I remember reading an article a year or so ago talking about website layout and where to place “action” buttons.

Both of the lighting of an image, and placement of “action” buttons seem to stem from the way we read, left to right, top to bottom. These “action” buttons I am talking about refer to buttons that the designer would like the user to click. This could mean the user is purchasing an item, filling out a form, clicking a link to another website, or other things. The article I read that you should place these items in the lower-left portion of a webpage because that is where a readers eyes will naturally end up, and also the portion of the page they are most likely to read.

I feel the use of shape on a website is a very tricky topic, as too many unnatural shapes can easily overwhelm the viewer. A good example of a website that makes appropriate use of shape in my opinion is newegg.com. They keep a pretty straight forward design, but subtly work the “egg” into many places.

I cannot immediately think of a website I have recently been to that displayed an annoying amount of shapes, mainly because I do not stay at websites like that for long. The only thing that immediately comes to mind are the websites of the early 2000s, where animated FIFs and ridiculous word-art was displayed everywhere. Websites such as those try to use a variety of shapes and colors to impress the viewer, yet all that is created is confusion, whereas websites today that are much more complex can be presented in a much more pleasing way when design elements are kept constant throughout the pages and subtle accents are used.

That’s all I have to say this week.

One of our assignments this week was to create a line drawing and a shape drawing of a face.

Due to assignment requirements conflicting with width of my blog, I have only included links to the full size images.

I chose someone special to me for my drawings, here is the original image:

Here is the line drawing.

And the shape drawing.

Here are my answers to the following Chapter 5 and 6 review questions:
Chapter 5:

1. Shape can be thought of as a combination of what two design elements?

A line, and the area enclosed by that line.

2. What is the term for the shape of a three-dimensional object?

Volume.

Chapter 6:

4. What is chiaroscuro?

The word used in art and design to describe the use of value. It describes more than just the variation of light and dark between areas of an image, it also described how light influences the appearance of an object’s shape in a three-dimensional space.

6. What is the preferred direction of light in an image?

Most people prefer light to come from the upper-left corner of an image.

This week we focused on the use of space in design. Talking about both positive space and negative space. Negative space was stressed heavily, as many people do not consider negative space as much as positive space.

I think I have at least subconsciously been aware of negative as it relates to web design for quite some time. I always prefer to go to websites that are well organized and laid out well. This is one of key reasons google became my favorite search provider early on. Well before I used gmail, googledocs, etc… I used google simply because there was not an overwhelming amount of junk to annoy me.

Whenever I have been designing a website, I always try to keep this in mind. People like to keep things simple, so the simpler you can make a website the better. This is not to say websites cannot contain a large amount of information, they just simply must display that information in moderate amounts and with good organization.

A great example of this is two tech-related stores, newegg.com and tigerdirect.com. These sites offer nearly all the same products, at nearly the same prices, yet I never ever use tigerdirect because of how their website is laid out. To me it comes off as cluttered and annoys me to view, newegg on the other hand does not overwhelm the user on the homepage. In a world where you have a select few seconds to capture a viewer before they go to the next site, I think it is extremely important to have a welcoming homepage, and not one cluttered and confusing.

So while I think I have always been aware on some level of space as related to web design, this chapter really helped me solidify those thoughts.

Here are my answers to chapter 4 review questions 1, 3 and 4.

1. What is a contour drawing?

One that focuses mainly on the outside edges of an object, a silhouette is a good example.

3. What are the three types of lines in regard to composition?

• Actual Line – A drawn line, solid with a defined beginning and end.
• Implied Line – Composed of other elements than an actual line, such as the edge of several objects.
• Imaginary Line – Subtle, and often created without any part of a line at all, an example would be where a person is looking or pointing in a picture.

4. What is hatching?

The use of a series of lines, drawn close together, to create a darker area on an image or to imply volume through shading.

Here are my answers to chapter three review questions for our book Design Fundamentals for New Media by James Gordon Bennett:

2. What is positive space?

Elements that are understood to have an implied volume, such as an object.

3. What is negative space?

Everything else. Not what is leftover, but everything that is not positive space.

6. Would an object closer to a viewer normally appear lower or higher in an image?

Lower.

7. Would objects in the distance usually appear lighter or darker when compared to objects that are closer to the viewer?

Darker.

8. Would objects that are closer to the viewer appear to have sharper focus than those in the background?

Yes.

One of our assignments in class was to represent 6 emotions using only 3 black squares on a 300×300px white background. Here is what I came up with:

Anger:

Most of my images tried to simulate faces. I believe this one shows angry eyes in the top two boxes and then a screaming mouth for the third box.

Contentment:

This is my only image that doesn’t represent a face. I think this shows contentment because it shows equilibrium.

Excitement:

I believe this image shows big eyes and a big mouth, thus expressing excitement.

Fear:

This is similar to anger, but the way the eyes are positioned indicates distress to me. Again the mouth would indicate screaming.

Frustration:

The focus of this image is the mouth, which appears to be very wide open and screaming, thus showing the frustration.

Joy:

This image keeps with the face theme, but left out the eyes and instead only has a smile of joy.
Overall, this was sort of fun to try and express these emotions with such limitations, but at the same time I think the emotions could certainly have been expressed better with additional colors or shapes.