MSI Site Design and STFU Tak Illustration

Today I have a Web Design project for you and a new illustration!

This project involved choosing a band with at least four releases and redesigning their logo, then creating a discography and merchandise page for them. I chose Mindless Self Indulgence because they are my favorite band and their site is okay but rather disjointed design-wise.

MSI uses a lot of Nintendo chipset music in their work, as well as having lots of bright, neon techno elements in their design aesthetic. I wanted to stick to that, while making it a little more slick since they've been sort of entering mainstream music.



I tried playing with Impact and layering colors to see how they'd interact. (The "MSI" logo is intentionally vulgar, haha! MSI is a bit of a vulgar band. Don't hate!) I also had my prerequisite hand-drawn font. I downloaded a nice font from Blambot and played a lot with its serifs. We all ended up liking that logo the best.

Once the logo was straightened out, I went about designing the pages. I stuck with my techno vibe in my sketches.



I really liked the circuit board and microchip ideas I'd come up with, but trying to integrate them practically didn't really work. I did end up using the sort of "electrical current" vibe in my final design, though.



For my first draft, Dave didn't quite dig the way I had laid out my navigation links. My classmates also pointed out that the gradient was a little ugly looking. It's supposed to fade from green to pink, but I intended for the page to extend beyond this "preview" window, so I didn't adjust the length of the gradient.

So I fixed those things! Made the nav links smaller and separated them with the fonts neato "asterisk." The way the page is supposed to work is that when you scroll over each thumbnail, it increases in size. If you click on it, additional info and order links will appear. MSI doesn't quite have their own storefront for a lot of their music; you are taken to other sites to order.



Then came the merchandise page! This one operated on the same basic premise, except I also added a shopping cart and size menus and the like.



I'm pretty pleased with this but I ended up getting a "B." Horrors! Dave said that the lack of a grid might be confusing... Which confused me, because I am sort of operating on a grid. *sobs!*

Next is an illustration I did for a good friend of mine. She gave me a hand with something when I was in a bind! This features her character Bianca and my versions of two characters from the old TV show Invader Zim. Bianca and the alien don't get along very well, and the poor hairy guy is caught in the middle. Love triangle!

By clicking on the thumb you can see my pencils, inks and the final version. :)

Conbook

Of the projects I did this semester, this one is probably my favorite. It combines two of my most favoritest things: Illustration and Magazine layout. (Both things that are going out of vogue in today's high-tech times, eh? I've always been on the cutting edge of trends that way)

So anyway, we were tasked with creating a four-page magazine layout focusing on a subject from a list we were given. One of the subjects was "Social Networking and Privacy," with a link to this news article. I took the assignment pretty literally and assumed we were supposed to actually sort of lay out the ARTICLE.

First, of course, were sketches.



My first idea was for a sad man to be tethered by the neck to a computer monitor. Then I thought about having a pair of hands coming from behind bars, typing on a keyboard... Next I thought of going for a more "Facebook-esque" layout... And then came the "mouse turning to handcuffs" idea. Everyone seemed to like the mousecuffs, so I went ahead with that one.

Funny (or perhaps sad) story: I actually went and looked at photos of mice on Google when I drew the mouse. And yet I still managed to draw it monumentally WRONG. The buttons were on the bottom with the scroll wheel floating somewhere up in space.



The drawings I did made it through, like, two critiques and several instances of my instructor looking at the image while giving me feedback... As well as, of course, my own eyes staring at the thing... And nobody noticed my mistake until the final critique. And I'll probably never live it down, either!

But that's ok, I fixed it.



I think everything turned out pretty nicely. I wonder if I should have justified the text, though. Yet again I misunderstood some conversation about the whole thing and thought it should all be left-aligned.





Now this is mounted and hanging up in the Visual Communications hallway. Hooray!

Dash Dash Dash...

Dot Dot Dot Dot Dash Dash Dash. Or is it the other way around? I don't know morse code.

So anyway! Gonna get caught up on my projects, here! This is the first site design Dave had us do for Web Design I. The project entailed taking a box from home and turning every side of it into a site! A much taller order than I suspected it would be, probably because I picked a box with a lot of redundant information on it.

But I picked the box I did because it had cute graphics on it.



(S.O.S is a marvelous product, by the way. I just recently started living by myself and cooking, and this makes cleaning up so crazy easy...)

Of course, the first thing we had to do was sketch out our plans...



I pretty much knew what I wanted as far as layout goes. I thought it would be neat to use the tab as a navigation button of sorts. I pretty much knew what graphics I wanted for the main page as well. I think perhaps Dave suggested some lavender in the background to make it more interesting.

Originally I tried a photo of some lavender fields, vector traced to better match the illustrations. Nobody really liked it, and looking at it myself I thought it kinda looked like somebody's head... Braided into purple corn rows. SO instead I headed on over to the Old Stock Exchange and found me a nice photograph of some lavender flowers. Everything started to come together after that!



I redid the logo and left out the bevels and the lens flare. I think most people would agree it's an improvement... And then I redrew the lavender in Illustrator, which was fun.

Next was the "Uses" page, which took up the back of the box. That had the neato graphics that I liked so much. I tried reproducing them in Illustrator but they just didn't look right... Instead I cleaned up the box scans I did in Photoshop and just plopped them in. The effect I wanted on the page was for the user to be able to scroll over an image and cause it to roll to the side, revealing the uses for that area.



Last came the "Green" page... The only other page I could really glean out of the content on the box. It's a pretty minimalistic design, haha! Nothing much to say about this one.



And there you have it! My first website design (for a grade)!

Survey of Web Design Employment Opportunities in my Area

I searched Indeed, Courier and Press, Monster, Authenticjobs and Ivy Tech's own Jobzone... And the answer is "not much is available in my area." Even freelance opportunities in other areas seemed to be scarce. That doesn't surprise me considering the fact that our economy is probably doing better than in many other states. The only job that would even remotely interest me is for a Web Content Specialist position at Courier and Press itself. Everything else was the typical "WORK FROM HOME AND MAKE $$$" listings you tend to find in every classified section.

From Graphic Design job listings I've seen in the past, I know that pretty much any creative job these days requires you to have some web design experience... Which is why I enrolled in this class. I can't help but wonder about the general conditions around this phenomenon, however. How many companies have completely dedicated web design professionals? I imagine many of them either contract out that kind of work or make some poor sap with another job description attend to it. With the Internet environment as it is today, so many companies still seem to put their sites in the hands of third parties or nonprofessionals.

What is SEO?

SEO is short for "Search Engine Optimization." At the very root, it would appear to be something invaluable to a business. Using SEO a website, theoretically, can manipulate its place in search engine rankings. Unfortunately, abuse of SEO by unscrupulous businesses over the years has caused it to go out of vogue.

In the past, a web designer could use meta tags in his code to show search bots exactly what his web site deals with. Abuse of these tags by inserting popular search terms (like "sex") to boost search engine ranking has led most search engines to ignore meta tagging. Instead, A List Apart suggests coming up with the keywords most relevant to your audience and being sure to insert them into your body copy. Insuring that your site usage and search results come organically is the best way to secure your space on search pages. Be subtle! If you're too aggressive, search engines will consider you a threat and bump you from their results pages.

These days, the most popular search engines, such as Yahoo! and Google, don't shed much light on their search algorithms to ensure that there is no abuse. Google itself makes it quite clear that there is no magic way to make your site appear as the number one search result. Overall, SEO is tied into accessibility. If you ensure that your website is clear, concise, and relevant, your users will both thank you and be able to find you easily. Their traffic will be what ensures your search engine standing.

Evansville Bowl for the Cure 2010

Two posts in one day, I know! But this one is shorter, ok?

One of the coordinators for Evansville's "Susan G. Komen - Bowl for the Cure" works in our school's fitness center. They're trying to get more college students to participate, I guess... So they're looking to have some colleges students design their new logo. Because she works at our school she allowed us to have a crack before any other area colleges :) I think, currently, our class's logos are being looked over by the folks down in Dallas. Maybe one of us will get picked, eh?

This one needed a quicker turnaround than any other project we've done so far, so I didn't go for any sort of amazing innovation. Our client mentioned that this was their 11th year for this event they possibly wanted to play off of that. Other than that we had free reign.



I just stuck with my typical hand-wrought style when it came to my final designs. (Yes, the font is made by moi) I figured that if they were aiming for a younger audience, it might work. Right?







I think I finished this assignment with maybe 15 minutes to spare. Whew!

The Ageless Aesthetic Institute

For this assignment we had to redesign the logo of an existing company, and then create a stationery package for it. I knew I wanted to do The Ageless Aesthetic Institute because it was girly and I can do girly, lol.

First, I did about a million sketches. I really had no idea what sort of logo I wanted to go for. Just a simple mark would've been best since I wanted to communicate a dignified and clean aesthetic... But what about a neat logomark?


Click to visit the sketch page

Eventually I settled on five logos that I felt somewhat successfully communicated what I wanted:



I was hung up on using these geometric shapes to represent the first letter of each word, and trying to organize them in an interesting way.



I really liked the little sundial logomark I came up with, so I introduced that. It's the only hand-drawn logo out of my solutions.



I really liked this little "hourglass" too. Another play on the "Ageless" thing. But one of my classmates thought the top of the glass looked like an asscrack. Or perhaps the crack in front XD So I definitely didn't feel like pursuing that one.



The "eyelash" mark was simple but effective, I thought. Here I present it with a more dignified font.



I ended up settling on this one, which has a bit more "modern" font. I used a system font and just made it super-thin by messing around with the strokes.

Now that I had my logo, it was time to design the stationery. I wanted to keep the teal and brown theme they had going on their site, I thought it was effective. I tried to go simpler than I tend to do on these things, so I basically just used the "eyelash" in different permutations. I liked the idea of making it sort of "go off" the paper and come back into it.

In the case of the envelope, you can see where my line of thinking was going. This template is off of Designer's Toolbox. A really neat site that a classmate pointed out to us. It looks super neat when it's printed out and nicely folded.



On the back of the business card, you can see the connection between the two "lashes," which I carried over into the brown blocks of color on the thank you cards. The dotted lines around the corners of the business card indicate that I wanted it to be a round die-cut. There is a design on the back of the letterhead, too.



Here's a photo of the real deal!

Web Design Tutorial Critiques

Today we were tasked with critiquing a few of the 27 Best Web Design Tutorials. I scrolled through and picked the sites that appealed the most to be aesthetically.

First on the list is the Funky Web Design Layout. Butterflies! This is a very easy to follow tutorial that provides screencaptures of each step. Being a visual learner, I appreciate this a great deal. There are some neat little tricks in here, like warping the dashes to create dividers, that I never thought of. There is also a downloadable PSD file to go along with it that includes some of the brushes used. ...if you're willing to shell out for it! It doesn't explain how to install the brushes so if you're not familiar, you'll have to find another tutorial for that!

Next I decided to learn How to create a Dark Themed Web Design from Scratch. This one has a higher text to photo ratio and my eyes started glazing over a bit as I went through. That being said, it explains some useful things the last tutorial didn't, such as where your viewer's eyes will go the moment they hit your page, and the prudence of grouping similar elements in Photoshop. In the end I'm not too sure about all those gradienty boxy things, I think they just clutter up the layout, the way they were used. This is another tutorial that provides a download if you're willing to register with them.

Last was an Urban Layout Perfect for a Web Design Company (though one thinks they might be in the wrong business if they need a tutorial to create their site...). As complicated as the design looks at first glance, you find that it is actually very simple and created with only a handfull of brushes. The screencaps do much of the talking in this one, as I don't think the writer's first language is English. That's just fine with me! I feel I could easily recreate this design just by glancing through. The download available with this one was free, with lots of links to free brushes.

Paul Rand

I admit that I am a little ashamed of myself for not knowing about Paul Rand until last year. He is an incredibly influential designer who remained relevant and productive from the beginning of his career. In the 60s he created some of the world's most recognizable logos, many of which are still in use today... If not in their original form, then in some variant of it. His design philosophy was one of elegant simplicity and bold color. His many treatises about design seem to have earned him a reputation as a grumpy old man who didn't like change... but I don't necessarily fault him for that. The staying power of his work is a testament to the effectiveness of his philosophies. His work is incredibly important to the profession of graphic design, especially in modern times when computers and fancy filters have taken over a lot of the common designer's sensibilities. He drives the point home that complicating your designs too much will ensure that the public forgets about them very quickly.

My favorite works of his are, of course, his children's book illustrations. He developed a simplistic style using paper cut-outs: bold blocks of color paired with loose but expressive lineart. In a way the illustrations show their age, due to the amount of similar work that can be found from the 50s on to as late as the 80s, but similar illustration methods can be found today.

D, U, and A

What do those letters stand for? Design, Usability and Accessibility, the three most important words to a web designer. Design is a natural, but some people don't realize how important the other two are when integrated with Design. In this article Emmanuel King Turner makes the case that information architecture works best when integrated naturally with good design. A flashy package must go with an organized presentation in order to be successful.

A good design without Usability is nothing. Something as simple as site navigation affects usability. Derek Powazek argues that at any given time, a user should be able to glance at a page and tell where exactly he is. From there, one should be able to click and navigate easily to where he wants to go and not be, for instance, sent back to the same page he was on.

Accessibility is the most elusive and, I imagine, most neglected part of web design. When creating a page, all smart designers consider the demographic that they will be appealing to, don't they? But they likely consider that demographic to be comprised of computer users without disabilities. Unfortunately, many websites don't take into account that they might have readers who are blind, paralyzed, or suffering from a learning disability such as dyslexia. Those readers have to use secondary programs such as text readers or move their cursors with means other than a mouse. Accessibility issues can also occur for those using alternative browsing methods, such as a cell phone. Making your site accessible to everyone means capturing the almighty dollar that other companies, like Target, will not get to see.