The Pleasure of Design

When I decided to go into graphic design, I had no idea what my future would be like. I knew that I liked Photoshopping, and that I liked art. So, three years later, I reflect on my decision, and wonder about what has kept me going. What is it about graphic design that keeps me up every night?

My first sign that this was where I belonged came to me in Visual Literacy back in the Fall of 2008. While I was still an amateur, I was able to easily connect my interest in psychology to the importance of visual clues around us. Then, everything, everywhere became a clue to a puzzle: Why is this sign yellow? Why did they put that in red? Why is this thing shaped like that?

And I like puzzles.

The second sign came to me in Photography. My father gave me his father’s camera, and I began to appreciate my surroundings. Any time I would see something that caught my attention, I would take a photograph. The shape of a tree, a sign, a building, an event. I would study my photographs and try to solve the mystery behind its importance.

Finally, perhaps most importantly, I found my love for design through Typography. My eyes had opened to the beauty of typography before I knew it. I’m not sure when it started, but I was creeping my friends out by telling them what typeface a particular sign or poster used, or how creative a certain logo looked with the type.

All my life, I have been interested in adventures and mysteries. When I realized that I could walk down a road and observe the creativity around me, I realized that there was always an adventure and a mystery waiting.

Hooah!

Spring semester has kicked up we are already back to business. In order to find some inspiration for our own web banners, we took a journey onto the web to find some clever banners. Note, we see many banners on the internet, but finding clever banners requires more attention.

I did manage to locate several banners that caught my attention the most.

I found this banner on stock.xchng. Like stock.xchng, the banner appears to advertise a site that deals with stock photography. Now, note that I say appear to because I am trying to base my opinions by the banner and not the site. This banner is clean, pretty, and visually stunning. It doesn’t confuse the viewer with too little or too much information. The logo on the left shares the color with the phrase on the other side, which keeps it together better. The shiny bubbly button shares the color with the photograph, so everything relates to each other. I wouldn’t have put that shine on the pink button. The logo is a nice, solid shape. Why not mimic it for consistency?

Another neat banner I encountered was this one: LimeDomains. (Click to see full animation.) A very visually pleasing banner with a lime green flavor. This color seems to blend very, very nicely with black without losing legibility, and as you can see by the other logos on the banner, it works with many other colors. The design may look simple at first, but by thinking about the possible design process behind making this banner, I would have to imagine that this banner took some work. Keeping a constant reminder to the viewer of what the banner is for while presenting the message in a pleasant way and mentioning other favored applications in such a message can’t be too easy to accomplish. Well, this banner did it. If the animation isn’t annoying, it tends to pop more than a static banner as well.

What Jessica, Katie, and I talked about after looking at each of our banners are characteristics that we find good and bad for web banners based on personal experience. The biggest issue we saw with how banners could be improved is by correcting the amount of information that a banner gives out. A few banners we looked at were visually pleasing but barely hinted at what the banner was about. A few other banners had tons of text on the banner and was an eye-full to look at. A banner that has a magical balance between aesthetics and information tend to be much more successful.

CSS Zen Garden Concept

CSS Zen Garden Synopsis

My original concept was to create a design that mimicked a desk of an artist. The interface would be placed through CSS on top of a photograph of a desktop. The desk would have had pictures, papers, and tools scattered around it with text placed on the papers and images placed on the photographs.

Anyway, after the change to the assignment to not require CSS, I thought it would be best to abandon the idea simply because the images would have not been difficult to place, and I had another concept in mind that would challenge my designing more. After studying several preexisting styles of the CSS Zen Garden, I thought I would try one that put the most emphasis on the left side in a rule of thirds. To go for a modern, minimalist approach, I built a gray box lay out that consisted of only three boxes: the heading, body, and links. All three of these gray boxes were adjusted to the left, fitting snugly inside either the left third of the composition or the left half.

After placing my gray boxes, I began to look at the color wheel to see what would compliment my minimal layout. Having used a lot of blue for my previous works, I decided to try a green shade, but a very dark, saturated one. I’ve had a lot of success this semester with saturated colors, so I stuck with it. The color I used ended up being more of a gray than a green to help give that modern feel, but enough green to look colorful.

To further build upon the modern minimalist style, I chose the typeface Eurostile. Eurostile was designed with technicality and functionality in mind, and its linear nature, squarish shapes, and rounded corners that mimic television screens made the typeface perfect for what I wanted.

To finish up the composition with some visual aesthetics, I added a stock picture of a Chinese dragon statue to the background and some brushwork to the blocks throughout the layout. To mimic the personality of the typeface Eurostile, I applied soft, rounded corners to these blocks.

Web Design is Fun

I’ve been getting ahead of myself in my Web Media I class, everything just clicks in my head and I just go with it. Using CSS references from places such as http://w3schools.com/ I can figure out how to do a decent amount of styling.

For Exercise 2.1, we had to apply an internal stylesheet into our markup. This is what I came up with: http://groundgear.comli.com/2_1_exercise.html

For Exercise 2.2, we had to make an external stylesheet and link our markup to it. I took this opportunity to apply a completely different style to the same site, just to see how amazingly flexible it is. This is what I came up with: http://groundgear.comli.com/2_2_exercise/index.html

Now I just need to figure out how to correctly center the entire layout so I can make my background fixed instead of looped.

Web in the Wild

I would like to start off by stating that Web in the Wild is not a very pleasant name to invent a logo out of. But, in a way, I am glad that we had to use such a terrible name. It really stirred the creativity inside me to constantly come up with ideas and experiment until I found a solution I couldn’t be happier with. My initial concept was that since the web was world wide (hence the World Wide Web), I wanted to use a hint of the sphere that represents the globe. As overdone as circles are for logos, I say if it works, it’s fine. For my logo, it didn’t work so well at first. I went through four rough designs before coming to a solution that was somewhat satisfying enough for critique…or so I thought. Changing the type to Gotham to reflect the geometric attitude of the site was a pleasant change, but the logo was too simple. It was still simply a white W inside a black circle. The idea was to play with the negative space and change the color of the separated shapes to green and have the rest of the circle blue to reflect the image of Earth. Unfortunately, it was too simple, and apparently resembled StumbleUpon too much.

Going back to the sketches, I decide to not make it so obvious. I keep the Gotham line, but change it to all caps to form a subtle baseline for my idea. Then, I take the circle and split it into three parts to represent the three events, in a way that subtly resembles a W. Not only do I make it resemble a W, it also represents a flower bulb and even a paw print – both relating to the “wild” nature of the brand. The tag line was originally Like a Breath of Fresh Air but was quickly shut down. Fresh is dead. The new tag line, A World Untouched, was considered after a brief fascination with the word “untouched.” It represented the nature of the web – a rapidly growing environment that is still being explored. It is a world that we are just stepping into. After the tagline was done, the next issue was color choice. After much consideration in color for the resolved logo, I have found that a red-orange logo with a warm purple background looks beautiful and geometric without having to be green. After much help from my classmates, the logo was finished.

So Long, and Thanks for Everything, Medium and Tubatomic

Josian Roe from Medium and Alex Ogle from Tubatomic came to give us one final lecture about designing on the web and its careers. They gave us insight on what it is like to actually have a job in web design, and noted that he is almost always working nonstop. They answered any of the questions that remained from our group, and one such question was what they looked for in a person if they wanted to hire someone. They simply answered that a knowledge of HTML and CSS, a drive to self-teach and self-motivate oneself through problems, having a good quality resume, and being a jerk were appealing ways for them to hire. They’ve continuously emphasized throughout the past week about using Google as a very reliable tool to face any web design issues and still stick to their guns on the subject. They’ve constantly repeated, “If there is a problem, Google it. There is a solution out there.”

After the brief Q&A, the two gave each of us an amazing list of resources that can be used to expand our knowledge of web design. The list included links to CSS Inspiration such as http://thefwa.com, Design Blogs such as http://www.smashingmagazine.com/, a lorem ipsum generator, Wireframing links, online type testers, online font creators, job boards, and online portfolio services. In fear of losing the sheet of paper, I will put the list here.

Inspiration

http://thefwa.com

http://www.thecssgallerylist.com

Design Blogs

http://www.smashingmagazine.com

http://net.tutsplus.com

http://wellmedicated.com

http://speckyboy.com

http://www.designshard.com

http://spystudios.com

http://www.noupe.com

http://www.instantshift.com

http://inspectelement.com

Greek

http://lipsum.com

Wireframing

http://www.mockflow.com

http://iplotz.com

http://www.flairbuilder.com

Online Type

http://www.typetester.org

http://www.typechart.com

http://csstypeset.com

Online Font Creator

http://fontstruct.fontshop.com

Job Boards

http://www.krop.com

http://jobs.37signals.com/jobs

http://jobs.smashingmagazine.com

Online Portfolio Services

http://www.flickr.com

http://www.krop.com/creativedatabase

http://www.behance.net

http://cargocollective.com

http://www.coroflot.com

Williams Visual Solutions

Despite the appearance of a very small business in a very small building, the crew was more than taken by surprise at the capacity of Williams Visual Solutions. Bubba, our guide, started off by giving us a brief history of the company, stating that it was run by his grand father and continuously expanded and evolved into what it is today. A fully Mac-based design team of six work at their desks for conceptual and visual work, while the majority of the space was for the many printing features of the company.

The first printer that we were guided to was the Hewlett-Packard Indigo 5000 Digital Press. Costing half a million dollars, this digital press was designed to use liquid ink that was safer for the environment. Another difference with this printer is that it is a 6-color press, capable of producing 818 dots per inch and up to 20 12×18 pages per minute. Besides its economically friendly nature, it is also a very easy device, capable of printing by uploading a PDF.

The next printer that we encountered was their large, offset printer in the Press Room. They have machines to create specific-colored plates for each of their six presses and these large offset printers produce many kinds of prints in very large quantities. They are proud to state that they can use these offset printers to produce multi-page catalogs, booklets, textbooks, brochures, pocket folders, rack cards, posters, counter cards, flyers, CD and DVD booklets, wraps, inserts, calendars, door hangers, self-mailers, letterheads, custom envelopes, hangtags, bumper stickers, postcards, greeting cards, and many more. You get the idea.

Afterwards, Williams Visual Solutions treated us to delicious pizza and showed us a quick presentation of their company’s aims. Politely concerned with our time remaining to stay, they did give us as much information as they could in the little time we had left over.

PHOTOS BY: T.J. Bowman

Diving into CSS

On Tuesday, Oct. 13, Medium and Tubatomic helped us jump straight into the coding process of web design. Since I tend to mess with code when I have the chance, I was not as overwhelmed as many of my colleagues seemed to have been, but I still did learn much about CSS. I’ve always believed that there is no better way to learn code than to jump into it, and that theory seems to have proved itself once again as we used Text Wrangler and Firebug to customize our own web pages. I even went ahead of the instructions and inserted several DIVs and my Web in the Wild logo just to see if I could do it. Unfortunately, we didn’t too far into CSS to be able to mess with positions of DIVs or anything that wasn’t body text. But, we did learn the basic behavior of HTML and CSS and several of its meanings. By the end of the class, everybody had their own website and a set of tools and links provided by Medium to help develop what we have learned. I think that in the near future, just to test myself, I will dive into my blog and try to spice it up a little with what I’ve learned!

Times Free Press and Its Complex Process

After a quiet morning, the Design Crew headed to the Chattanooga Times Free Press to learn all we can about the process behind the newspapers we see. We were allowed to go on a tour of the building, guided by Frank Anthony, the Vice President. He began the tour by showing us the historical printing presses that were used in the past and the process for using each machine. It was obvious that each improvement focused on increasing automation and speed dramatically.

Photo by Austin Reed

Along the way, Mr. Anthony showed us the digital part of printing, starting with the large room divided into many sections for specific topics such as the news, the weather, and the sports sections. He made a humorous comment about the sports section, but I’ll keep that to myself. We moved on to rooms full of large printers (He won’t call them printers. He calls them image setters because they are expensive.) and showed us the process of transferring the negatives onto plates that would print the papers. He also noted that every image setter has a “130 thousand dollar spare tire” just in case something went wrong, and the building contains six to seven million dollars in spare equipment.

The Design Crew weaved around and through the printing press, witnessing the paper being printed, and guided us into the mail room.

Photo by Austin Reed

The mail room is where the papers printed by the printing press are led to. In this room, the papers are then filled with inserts from other stores such as Sears and JC Penney, and then tagged and wrapped to be sent to a place where the papers are delivered. When I was nineteen, I worked in the mail room for Roane County News back home in Kingston, and so I was very familiar with everything I saw in this room. Frank Anthony said that a paper spends most of its time in the mail room, and I knew this was true. The process of printing the paper doesn’t take nearly as long as it does to make sure that each paper gets every insert, is tagged to be delivered to a specific address, wrapped into a bundle, and then sent off. This process took Roane County News five or more hours every day. Fortunately, unlike Roane County News with its workforce of eight mail room workers, Times Free Press has much, much more to handle the papers.

Overall, we were very satisfied and impressed with what we saw, and only regretted that a crew photo was not taken at the end.

Gadzooookz – Wet Yo Biscuit™

Today, we had special speakers George Baraktaurus and Alex Ogle from Tubatomic and M.A. Turner from Tubatomic and Tricycle Inc. speak to us about some of the benefits of web design, a comparison of a web career versus print, a brief history of spreading media through the web, the freedom and flexibility of the career, and also a brief history of Tubatomic.

They began by talking about the advantages and disadvantages of working in house or as a freelancer, noting that freelancers are generally experienced in dealing with sales, motivation, and organization. The speakers, especially Turner, expressed passion in explaining to us about the freedom that web designers are able to have in doing what they love to do. Turner’s example was that he could get up in the morning, pet his cat, and get to work on his computer at home. They expressed that the field of print is interesting in its own way, but they loved web for its interactive and dynamic potential. George talked about their interesting history of Tubatomic, and how it became a web design company from a simple, comic book inspiration. He explained that anybody, anywhere with the experience that we obtain, along with Google, (haha) can achieve big goals.

They moved on to talk about the growth of websites such as the popular web media pages Myspace and Facebook, and explained how things are always getting better on the web and replacing older pages. We even came up with our own social media page, thanks to Turner and Drew: Gadzooookz. Tag line: Wet Yo Biscuit™