1.26.2010

The Web Design Process and My Role

The construction of any given website has many steps. It starts with conception; either by defining your own goals for the site or by meeting with the client. Once one decides what he wants to represent, there is a great deal of research, just like any graphic design project. Then you create thumbnails and decide upon the information structure. In larger web development firms, a specialist would likely design the intricate pathways required to keep the information flow going in a large site. Finally, the content for the site such as graphics and body copy are created. After the site is put together, it is tested (hopefully rigorously) in various browsers and operating systems to ensure it works well. If so, then it can finally go live! After which time periodic upkeep (testing, redesign, etc.) must occur.

Of course, the most interesting portion of web design to me is the design and content creation. I want to make the site look pretty! I want everything to fit together nicely and have visual flow. To me, if a site looks nice, I might be more tolerant of small usability issues. If a site looks terrible I might not even bother to explore its contents. Of course, I know that programming is the most important part of website creation, without which the pretty pictures would never display correctly.

1.19.2010

The Web: A History

Tim Berners-Lee is credited with the creation of the Internet as we know it. In truth, he created the skeleton that allowed us to insert our own meat. Since 1945, academia has discussed the concept of inserting "links" within informational documents to allow a reader to surf to other information. Others before Tim began to make prototypes for such a program, but it wasn't until 1989 that he finally finished the "WorldWideWeb," which allowed widespread usage of a single, universal programming language. Adoption of this language steadily rose, and soon browsers were created to help make it more palatable. The "Mosaic" browser was the first to display images along with the available text, making web usage more attractive to the layperson.

These steps made the Internet what it is today; a network of user-created content, infinitely linked by other user-created pages in a delicate "web." Without people to communicate with, the web would be empty and have no meaning. Berners-Lee revolutionized the way we communicate not only by creating a universal programming language, but also by pushing everyone he possibly could to adopt and share this language. From the very beginning, the Internet was about communication. File and information sharing through e-mail and then BBS made the Internet more attractive to academia than ever before.

1.13.2010

His Shadow is Light

Dave encouraged me to continue with the blog thing even after Graphic Design was over. I think it's a good idea! So here I am detailing my final project for that class. We were to redesign packaging for an existing product, doing our best to be innovative.

I chose to redesign the packaging for the CD His Shadow is Light by Jay Tholen. He is one of my favorite musicians and I had been listening to tracks 2 through 4 quite a bit at the time!

So first off, I needed to do a ton of sketches. Most of these actually came very easily to me, which is encouraging. Do I have a future designing packages?

The album has a very heavy religious vibe, but there are also creepy undertones. So I went with a lot of imagery involving the cross, along with some "He's watching you" touches here and there.


Click


Click


Click

The one below was inspired by this CD package design that I found on Google. By this point I had met my sketch quota and was just brainstorming with extra time.

Click


Click

After viewing my sketches, we all decided that the "eyeball" sketch would be the best. I then went about creating a mockup at about 1/3rd scale. I didn't think I needed to spend as much time on that and instead concentrated on the package decoration. I regret this now, as my flimsy paper mockup LOOKED just fine... but if I had really spent time examining it I would have found that my measurements were completely off!

But I did not. And so I went ahead with my design. I used lettering I'd created for a typography project on the package. I thought that the whimsical look I was going for was captured well by that text.


Click

After that, it was time to make the actual packaging! Finding the right materials that would work with my printer proved challenging. First, I tried to run card stock through my printer but it refused. A friend gave me some nice glossy paper I tried to use instead, but my inkjet printer hated it. The lettering came out all fuzzy. I ended up having to use plain printer paper and spray tack it onto poster board.

I managed to get through the cutting phase mostly unscathed, but once I began constructing the package I ran into a host of problems. As I said before, my measurements were somehow off. One flap of the front cover was too short, and the other flap was too long by just as much! Eek! So... I doubled up the magnets I had procured on one side so that it would even out. As I folded up the sides and began to glue them, I found that rubber cement, the best thing I had available, just wasn't going to hold it. I guess I should invest in a glue gun. After a great deal of grunting and pinching, I finally got it to stay in place.


Look at my beautiful package! (yeah, I know, not that beautiful)

If I had enough time to refine and redo this thing... Perhaps, an extra week, I am confident that I could have made it fantastic. As it stands, it is just... mediocre. But I learned a great deal!


At least I now have an actual CD case for this lovely CD I downloaded :) (feel free to examine this image and question my tastes in music/games)

1.12.2010

My Goals for this Class and Domain Choices

My goals for Web Design are ultimately pretty simple: I want to be able to design a simple but attractive website. I have had a site of my own for seven years now, but I haven't actively updated it since 2006. That is mostly because Netscape stopped offering its browser package, which included the program I used to design my sites! I know a little HTML but there is no way that I can create a site by hand in notepad like some people do. I also admit to getting easily frustrated. If something doesn't come to me naturally, and I have to expend a lot of trial and error to get it to work, I usually throw up my hands and walk away. For this reason I have not had a lot of luck teaching myself how to do this stuff.

I see a lot of beautiful site designs like Bara-chan's and feel envious. I want to learn how to do mouse-over effects and have my art pop up in a little window or frame instead of making the viewer load a new page as I had to do in the past.

Oh yeah, and there is also the fact that almost all the graphic design jobs I've seen posted in the area also deal with web design. It seems impossible to be successful unless you can accomplish both.

So, as I mentioned, I already had a website. The host that I have used from the very beginning is Dreamhost. They have always had competitive pricing, great support and reliable service. In the 7 years I've had my site, it has only been down perhaps twice, and that was early on. I admit that I did not select the service myself. My ex-boyfriend did. In the beginning we had a joint site, but I took it over rather quickly because he rarely updated his half. At the time, I believe affordability and space were our main concerns.

One thing I did procure recently was a new domain name. My old name was really geeky and I will not tell you what it was! Back when we first created the site, it was meant for all our cartoon art and not meant to be a professional design presence. Now that I am trying to become a professional I decided I needed a new domain. I chose my name because it is a fairly unique one. I actually wanted something even more unique but that domain had a photo of a horse and a youtube video on it. ...and that's all. Can you believe the nerve?? ;)

So that is how jennlantrip.net came about. :)

Also, a note: If anyone reads further back in this journal, you will notice that some links are dead. That is because I used to put the images for my entries on my old domain. I will have to correct this error sometime in the future, haha.

12.01.2009

Four Magazine Ads

This time around we were tasked with creating four print magazine ads: Two for Newsweek, two for Rolling Stone, of the same product. We had to adapt the ads for each market. The first thing I had to come up with was the product. Something I actually knew about that would appeal to both audiences. I ended up selecting "A CAR!" because, well, everyone drives them. And I came up with the tagline "0 to 60 in under $20,000" which I thought was pretty clever (nobody correct me ;P).

In class we looked through the magazines in question, and Newsweek had an ad for the Ford Fusion. I believe Tony suggested I go with that particular car and I ended up doing so, because I don't really know much about cars (okay, in the last paragraph I said "knew about," not "knew about"...). They make a hybrid version of the vehicle which I felt was a nice jumping-off point.

So then, I did sketches! First, I had to make my rad "0 to 60" idea come to life...

The lights on the Ford Fusion have this neat little honeycomb thing going on, so I considered integrating that into the design. (As you can see, I also can't draw cars, which is another reason why I chose this subject: to challenge myself a bit.) So that was my first Rolling Stone ad.

Then, I thought about something else that would appeal to that audience. Customization!

I thought I could cut the car up into pieces and that would be pretty cool.

Next came the Newsweek readers. What would appeal to them? Well, the environmental and socially responsible aspect of the hybrid probably would.

So here I have vines coming out of the gas tank, hilighting some of the more positive aspects of the vehicle and the company that makes it.

Then I thought about the most important things to Newsweek readers: Money and family. So then the (incredibly unoriginal) tagline "Do the Math" came to mind.

As you can probably see, I was taking a bit more of an illustrative, "kiddy" angle in my original sketches.


I don't know what this was going to be. I think I was going for a hippie vibe at some point but I discarded it.

I started on my final images before the next class, because I planned to perhaps make live traces of the cars and slap lineart over them, as I did in another class for another project.





During the critique it was decided that my text for 0 to 60 was just to cute and kiddy for Rolling Stone... and my "Do the Math" concept was just... altogether not working. So I came up with some grittier text and started working on 0 to 60...


In the second critique we decided that the live trace thing wasn't working out in the slightest. Sooo I had to find some good photos of the cars and do lots and lots of pen tool work. Most of the cars I used were from Ford's own promotional/storefront sites. Apologies for lack of credit if I slipped up and didn't include something I should have, though.


I actually attempted some of this one before everyone was all, "Giant adding machine? Jennifer please."


Ah, there we go. I also got rid of the honeycombs because they just weren't necessary at all.


I did not draw the vines by hand because those just would not work for my audience. Instead I made selections in Photoshop and applied gradients. If I had Illustrator at the time I would have probably attempted gradient meshes to make them look a little more 3D...


The parts I used in this were taken from various searches on Google... So I do not have photo credits :( The cars themselves are from Ford, though. It was determined after the fact that this one would've been better suited for Newsweek... I should've made it look edgier, darn it.


DO THE MATH. Nothing I tried to put together for this worked out. I finally copped out and made it look like a chalkboard. Original as hell, I know. but it gets the point across, doesn't it? Yes, it does. It is so bright because it was originally configured for print.

Now leave me alone. It's past my bedtime. Three minutes past, to be exact.

11.23.2009

Brochure Design Process

The first time that I was tasked with designing a brochure, I admit to being intimidated. By this point, I feel that I am much more able to make my ideas come together in a cohesive fashion. From the list of clients we were given, I automatically gravitated toward the option of designing for myself. For me, being able to promote myself and focus on my strengths is a challenge. I also felt that I needed something that I could hand out to potential clients, something a little beefier than a business card.

The option to give the brochure a die-cut was attractive to me, and I got the idea to make a cartoony version of myself, with my eyes peeking over the front of the brochure.


(click for image)


(click for image)

As I worked on the brochure itself, Joe suggested that I do a bifold instead. Since I had already done trifolds in the past, I thought it would be an interesting route to take. I had to adjust my plans so that my caricature would still show on the cover. My aim was to include examples of all the different types of work I'd created, from illustration to straight graphic design. As I started plugging the images in, however, I realized that I didn't have room for all of that! So instead I used one "fun" illustration, one graphic design element, and my big ol' head.

The first version of the brochure featured a full color illustration and all computer-based fonts. I downloaded a font from Blambot, which makes fonts for comics. I thought that would go well with the comic-y look I was going for. Critique on the piece led me to believe that a hand-drawn font would look better with my mostly hand-drawn art. I also felt that the illustration didn't jive well with my mostly monochrome color scheme, so I switched it out with some lineart from another project I had been working on.


(click for image)

In the end, I still feel that this is incomplete. Instead of going for the "one of each type" route, I should have found a way of showcasing a lot of different pieces of work. I guess that's what websites are for, though!

10.19.2009

What is Graphic Design?

Is Graphic Design "art"? Like true art, it is definitely misunderstood by the general public. A view of this (very entertaining) video gives one a glimpse of what the layman considers graphic design to be. What many don't realize is that Graphic Design is an integral part of thousands of activities they go through every day. Paul Rand is quoted here as saying, "Everything is design. Everything!" The food you buy, the television you watch, the magazines you read, the buses you ride... Graphic design influenced your decisions to partake in all of these.

You might be asking yourself, "Who in the world is Paul Rand?" I did. Go ahead and Google him. You will see that he has created logos that have been in use by nationally-recognized companies for as long as you've likely been alive. You've never thought about who created those logos, have you? That is Graphic Design. Joshua Porter of Bokardo explains it best. Good graphic design is design that you don't think about. It just appeals to your sensibilities, it compels you to partake in the gifts you are offered without thought.

A gentleman in the linked video stated that anyone with a computer can create design. But we all know that is not true. While laypeople believe that design is as simple as plugging a logo into a web page, we know the amount of thought that goes into each piece that we create. We must identify our target audience, we must create that logo that will please them. We must choose colors that will please them. We must please our clients and our superiors, and we must (hopefully) create a unique idea that nobody in the history of the world has thought of before us.

Whatever Graphic Design is... it is difficult to do it well!

10.08.2009

Homage to David Carson

For this project, we were given a choice between creating an homage to David Carson or Stefan Sagmeister. I chose David Carson because I find his aesthetic to be intriguing. What I find most interesting about David Carson is his apparent disregard for the traditional "rules" of graphic design and typography. I have always had a problem with operating outside of a strict set of rules. He takes a lot of risks with type legibility and color.

I also like the way he integrates photographs into his designs, making them an integrated part of his layouts rather than completely separate entities. Since I am more of an illustrator I appreciate the ability to make a photograph more of a design element than just slapping it on the page. I want to play with coloring over and placing lineart on top of photographs.

Based on the two paragraphs above, I worked on formulating my poster design. I created three thumbnails, though I honestly loved the first from the beginning and I think everyone agreed that it was the best option.


(click for full size)

The other two explored illustrating his use of puns in his work and also the fact that he helped usher in the "grunge" era with his convention-defying, dirty aesthetic.


(click for full size)

I really like how this one came together. All of the techniques I used were observed in Carson's work (photograph integration, coloring/drawing over low quality photographs, making layout guides apparent), but I tried to put my own spin on it. I also used a couple of letters from that hand-drawn font I created :) Dave suggested I offset the lineart a bit from the photo when I was drawing over it, and make it more sketchy. I think both suggestions worked very well.

9.26.2009

How I Designed a T-shirt

For this assignment, we were presented with three possibilities of client. I chose Burger Bank because it's an establishment I've had experience with. As well, it's suffered from some difficulties in the past and needs a bit of an image overhaul.


(click for full image)

The one thing I remembered from my childhood is their mini burgers, and how you could get four for a dollar back in the day. I thought that was pretty neat, and focused on that when I brainstormed for graphic ideas. I also thought they needed a logo of some sort, though I wasn't sure where I wanted to go with the design. I ultimately chose to stick closely to the original logo they'd established for themselves, leaving it to my own design to add interest.

I also played around with the idea of equating the Burger Bank to a blood bank, though that is admittedly not the most appetizing route to travel. There was also the really obvious idea of equating it to a bank that stores money.


(click for full image)

Feedback from my sketches led me to stick with the "bag of burgers" concept, though I added the mouth from another design to it to see how the two would go together. I played around with colors, though I mostly stuck with the earth tones and blue together. I wanted colors that would be fairly gender neutral. I decided to make my third design go down my other avenue, just to see if I could use a simple logo to communicate the point. I think that design is pretty boring and a standard shirt design you would see for businesses around here.

The final round of critiques helped me settle on the solid fill, since the sort of "deco" design wasn't quite clear enough. Someone also suggested that a hand-drawn logo would look best with my drawn art, and I fully agreed. I went back to my design and played with the colors a bit. I changed the lineart to a dark brown so that it didn't contrast quite so much with the other colors.



And here we are!

9.16.2009

Critique of Various Illustrator Tutorials

The first tutorial I viewed was How to Design a Logotype from Conception to Completion. The title makes one believe the tutorial will be more indepth than it is. I do like how every concept of creation is covered, from sketching to management of the "corporate identity," and how a logo must be created for use in many mediums, as well as look good in simple black. However, all of these elements are simply touched on. The step by step instructions for Illustrator, along with the screenshots, are also very helpful. If one is looking for a quick and easy reference, this is the tutorial for you. If you don't have quite enough Illustrator knowledge or need to have more detailed directions, this one might be difficult for you.

The second was Design a Grungy Circular Logo. This one delivers exactly what it promises. Each step is simple and clearly illustrated with screenshots. It also very clearly explains a technique that seems easy to veterans of Illustrator, but completely stumps newbies. The only downsides in the tutorial are the links to stock sites. While those are very helpful, I feel that in logo design, one should be able to create their own graphics for the company identity. Right?

Lastly I explored Create a Silhouette Logo for a Steakhouse in Illustrator. I was immediately pleased with this tutorial because he expresses the fact that you should use your own material! See, I was totally right in my last paragraph, this guy says so. He explains how to use real reference materials to create pleasing logos in Illustrator. Each step is spelled out in clear and concise wording. However, being a visual person I would have liked a little more screenshot action on this one.