A brief summary of my Professional Practices course and its amazing experience.

Where to begin? We have spent the past three months on the project. The project, which I guess would be called the preparation for the AIGA Leadership Retreat in Chattanooga. I, along with Lillie, Kathryn, Emily, and Lyndsey, grouped up into the Screen & Press team. From the beginning, we planned out exactly what each of our responsibilities would be, and kept in touch by email, Basecamp, and phone to make sure we were progressing.

After having progressed (tremendously, if I don’t say so myself) in web design this semester, the whole team thought that it should fall to me and Kathryn to handle the building and designing of the website. Kathryn and I worked individually for two weeks to come up with ideas and designs for the site. It eventually fell to me alone to complete the website, but everyone else was still responsible for giving me good feedback.

The progression of the Engage website was astounding. We had written statements expressing our ideas with what to do for the site. Kathryn had a basic layout in mind with a top navigation that offered information. I had explored some javascripts online and came up with silly ideas like a circular navigation menu. We voted on sticking to simplicity for the website itself, because we had to remind ourselves that this website was for AIGA, not ourselves, and that people visiting the site would want nothing more than the information they had come to retrieve. We branched off with that in mind, and returned the next week with screenshots to get feedback. I do not remember what Kathryn’s rough looked like, but I remember creating a layout that was not too far from our final result. Our navigation menu was at the top of the content, and the Engage logo and the AIGA logo was at the right side of the page. Arguing that the site looked too plain and simple, the group wanted to push the site by placing the navigation menu on the right side, along with the logos. There was some clashing between the background of cascading dots and the Engage logo, but the layout looked nice. Unfortunately, right side navigation was odd by web standards, which could cause confusion or hesitation from viewers. This problem would go against our initial goal of keeping the site perfect in accessibility. After much regret, we reverted to a top navigation layout. At this point, due to the stage of the site, I was told to continue the website on my own, and have Kathryn tend to other jobs in the team. There were many adjustments made all around, but the layout stayed the same. The logo was pushed to the top of the page instead of the right, and the logo had also gone through resizing to get to a comfortable size. I decided to take the footer off of the bottom of the copy and place it under the AIGA and leadership logo to balance the space more evenly between the left and right column, and placed a dotted line to separate the two columns. After hearing some good feedback on the new site, I was told that it was time to make the site really stand out in a unique way: by changing the little things.

All of the fundamental functions of the website had been finished. I, however, was afraid the site was still a bit too dull. Fortunately, our teacher suggested that I add some small features that would not hinder the viewer’s needs. Since we wanted our design to be different from the previous AIGA leadership sites, the suggestion that I implement CSS3 was perfect. CSS3 is brand new! I immediately dove in to learning all about CSS3 online, and the process was a roller coaster ride of awesome – vomit included. The images on each page were given a rounded corner on the top right and bottom left. The navigation buttons would slightly enlarge when mousing over them. These little changes had made the site already stand out to be fun and exciting, but I was not satisfied quite yet. We had an idea to make the images colorize themselves upon hovering. I searched the internets forever trying to learn how to implement this, but could not find any. I did, however, learn how to change the opacity of an image through transition. So, I came up with an idea: to put two images in the same area, the top image being the uncolored image and the bottom image being the colored image, and then create a slow transition in opacity from visible to invisible on the top image. It was a successful experiment and was quickly implemented on every page, including the credits page. Everybody took a look at the finished page, and had no complaints. Amazingly, I had no complaints as well to my own work, which is rare.

After finishing the website, I began to work on the Chattanooga Guide Card. I had spent so much time on the site that I only had a handful of days to make the card. Thus, I wanted to make it simple, clean, but nice. I knew that typography would be my true friend in this experiment, and typography has never failed me in print. Since my guide card would be for the Chattanooga Market, my concept was to make my card suggestive to strawberries. I first had a perspective grid of light green over a strawberry red background. The result was too busy and the typography was terrible. Upon several tries, the concept did not work, but I really enjoyed the colors. The solution was actually simple: my card would be printed on Celery paper, a light green paper. I decided to just stick to typography completely, and change from a horizontal layout into a vertical one. I placed the words “Food. Art. Music.” over the word “LOCAL” to make it emphasize the focal point of the market. I changed the type to Helvetica to make the stacking and kerning of the type exactly the way I wanted it, and the result was great.

I’ve already put four pages into this synopsis, so I must conclude this soon before it becomes boring. The project was a blast, and I never had enough time to do anything else – not that I’m complaining. “Every experience is valuable” is one of the philosophies I live by, and I involved myself with so many things this semester that people actually confronted me and told me how much I’ve changed. I look back and see myself at the beginning of the semester and wonder about the change myself. I have become much closer to everybody in my class because of this project. How can I be complaining?

HTML5 and CSS3 with Chris Mills

On March 19th, Chris Mills of Opera Software came to the University of Tennessee at Chattanooga to talk about the new features of HTML5 and CSS3. I’ve always been interested in the HTML and CSS side of sites, but what he showed to us was shocking to me. Even as a frequent user of “View Source” and Google to get answers to CSS features that I browse for, most of what he showed was new to me.

Having used HTML4.01 for a while now, I know the effort it takes to complete certain tasks, such as finding the right doctype, embedding javascripts and flash, and adding little touches to the design. With the current CSS knowledge that I have, it would take at least two background images and several divs or classes to create rounded corners for sections. In HTML5 and CSS3, it takes one line: border-radius: 10px;

Other cool features that CSS3 offered were features that originally had to be reproduced through flash and javascript.

My biggest hype(next to transitions) was: @font-face

It does exactly what you’re probably thinking: allows users to download the custom font to display on your site.

Before this, there were many attempts to do the same thing, including Image Replacement, sIFR(Scalable Inman Flash Replacement), Cufón, and FLIR. (source)

The @font-face is the CSS3′s way of embedding fonts into your website and requires only a handful of code in the CSS file. The only issue, of course, is Copyright with that font, so make sure that it is permitted to allow downloads of the font you use.

Instead of listing all of the features he went over, I’d like to end the post by saying that what Chris Mills showed was jaw-droppingly awesome to me. Since then, I have already been experimenting with CSS3 and seeing what I can come up with.

For information on Chris Mill’s talk, as well as slides and samples, visit here.

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!