Hard work!

So last week, I holed myself up in my room and worked on my C.V., as well as followed internet tutorials to help me learn new techniques to build my portfolio.

I'm nervous about internships because I feel that, if I go abroad again on a multimedia internship this time, I won't know enough about web design and graphics to perform at the level they expect. This could all be paranoia, by the way. For all I know, I could be exactly what they're looking for. But I'm a perfectionist (sometimes to my own detriment) and I will not stop learning and preparing until I think I'm ready. So there.

In the U.S., I'm aiming for TOMS and Pixar.

This is a random selection of stuff I'm working on:

Logos to build my own form of corporate identity, as suggested by Nubby Twiglet:

The 'more professional' one.

The 'cooler' one.

Character design (esp. thinking about Pixar here), following tutorials by Vector Tuts:

Hell, I've even been working on images for my soon to be established clothing line, which I'll def. be including in my portfolio (See first pic above).

So yeah, lots still to be done. I think this is becoming my motto. Not sure if I'm happy about that.

Building a website using wireframing

Can you believe that this is the THIRD time I am writing this? I always have a bajillion tabs open at once and when I'm closing some of them, I always accidentally close the one I'm working on. SIGH!

Anyway, in class we learnt about attention-mapping and wire-framing. Both are techniques which are used to assist in laying out a page effectively to achieve particular goals, namely usability, and in the case that the site is used to market a good or service, the purchasing of the product!

In class, we used attention-mapping in order to rank each element of a fictional dog grooming site in terms of what would 'best help to put food for grandma on the table' (love my multimedia class), and then we used this website, Go Mockingbird, to assist in wire-framing, which is the actual physical process of laying out each element on a page and deciding where each should go, how big each should be, etc etc.

I'll admit that when planning my version of the dog site, I worked backwards. I'd already envisioned the way I'd like it to look based on some sites I frequent that sell goods/services that I think are already very well-designed. Examples of these are 3rd Ward (awesome art facility in Brooklyn that hosts the best events, like Wednesday's Drink n Draw), and the clothing sites Nasty Gal Vintage, Style Stalker and Shop Cuffs (see? shopping can be educational too).

What I noticed for all these sites is for the homepage, there's always a really huge attention-grabbing picture as the main focus, which advertises the site by showing which promotions or events are currently happening to grab potential customers. Our class rated sales/current events as pretty low on the list of information to be displayed, but I disagree, as even before a person knows much about a product, he/she'd like to know whether it's affordable, or what events the company is having that he/she can go to that are possibly free, before they click further on into the site to only waste their time.

Something we didn't talk about in class that I learnt during my internship at BurdaStyle is how much internet businesses value the user's clicking habits. They use programs like google stats to see whether a user 'bounces' off the first page, or which pages they continue to on the site before they lose interest. This is especially important if the site is going to earn you revenue (through google adsense, for example).

A homepage is tricky business, therefore, as it plays special importance. You want enough information there in order to pique interest, but you don't want too much so that the reader will glance and become overwhelmed, or won't be tempted to navigate through the site and be convinced by doing so to purchase the service. Usability is also super important, otherwise the potential customer will become frustrated and decide to go with another service.

In the end, I decided that if I were building a site, I'd go with 3rd Ward's idea of using a flash banner to display any exciting promotions/events which are ongoing or coming up to first lure the potential customer. I'd make the first frame a picture with a very brief (2 lines at most!) description of what the dog grooming service is, exactly, and it would be clickable so that the other pages lead to the exciting sales/promotions offered on the site. I'd have clear instructions for how to use it, "click on the arrows to see more events!", because it would make the site more user-friendly.

Woo this post was long, that's it for now!

Back to School- Back to doing Web Stuff

So I'm back to Mr. Bain's class again and we're customizing navigation toolbars. This process isn't really that fun, but it will be useful when we're designing websites and blogs. So I'm trying to pay attention and absorb as much knowledge as I can.

I started by designing tabs for a horizontal menu for my personal blog, Muthafuk. I used a pretty basic template I got online and customized a bit leaving it intentionally minimal, but I figure it could use some sprucing up with some pretty buttons.

We started out by trying the 'sliding doors' technique of menu bars. Exploding Boy gives some good examples as well as A List Apart.

I created my own tabs in Illustrator following Exploding Boy's examples:

I don't really like drop shadows, but I experimented just to see how it would turn out. I'm a really huge fan of the font I used, the sleek, simple Bebas. So the whole point of using 'sliding doors' is that the CSS code pushes the top about tab beyond some invisible border when he mouse hovers over it, so it looks as though the black about tab is morphing into the pink one. Or at least, that's the hope.

After copying and pasting code from Exploding Boy's blog, and especially with the padding (also with a lot of Mr. Bain's help), I finally got something that looks like this.


Lots of corrections to be made, but it's a start. (Click on the pic for the bigger version).