Portfolio Website: Header & Button Designs

22 Nov

For our other module which I’ve never really mention, Advanced Digital Interaction & Communication, we have been taught the basics of making a website using Dreamweaver. I for one am completely new to this sort of thing but it is quite simple for making a basic website. Gradually our tutor for this module is going to demonstrate the development and advancement of those techniques and more to produce a website based on us, showcasing our works from university for future employment after we graduate in 2013.

So far, we have been designing our header and button(s) for our website. I already discussed my header designs 1-4 already with my tutor who mentioned what to improve on and develop, with the other designs produced a few hours ago (5-10).

1.

I wanted to incorporate my surname somewhere into the website, so I thought for a bit and since I’m working in the design/art sector, it felt appropriate to call it “The Art Fox“. I tried to use the design from the fox on my blog’s header as a rough guide since I can not re-use something I have already done. But I added my main hair style to it to resemble me. My tutor however told me that the fox looked more like a Chipmunk. And from that, I can see what he meant. The whole thing does look like one, especially with that tummy!

2.

Using my surname still, I incorporated the fact I’m still a ‘Miss’ and joined it with what the title became: Arty Miss Fox. Personally, I didn’t like the name in the end. Something about it made it seem a bit…typical. Anyways, I drew myself in a fox costume with my face and hair sticking out so the viewer can distinguish my main features (pink glasses, long, brunette hair in plait). Along with it, I wanted it to seem more personal with a hand written but almost paint-style font, which I did by using the paint brush tool on Illustrator (also shown on design 1, above).

3.

I went back to ‘The Art Fox’ name again but this time change the image to design 2’s. I re-sized the paintbrush so it seemed like I was holding it and from what it looked like, I was walking away from doing a naughty thing :p

4.

I wanted to side-step from an illustration having to portray me all the time, so I attempted to do a header with just the typeface I chose, Plantagenet Cherokee and a sort of feather swish in the background. I chose the Plantagenet Cherokee typeface as 1) it was the only typeface I liked when looking through all of them that I felt was suitable and 2) I like the strength and almost sensitive look it portrays (to me). It isn’t bad, but my tutor says it’s too formal. So it was put to the Out Bin straight away.

From these first four designs, my tutor liked the paintbrush font, but change it to my name instead and use the mini me in a fox costume. And these are what I came out with:

5.

This is what I came out with. But I felt that something wasn’t right with it. So I just experimented more…

6 .

I then thought of incorporating the ‘o’ with fox ears and a tail…

7 .

I used design 6  but blocked colour into the ‘o’ and fox ears/tail for a silhouette effect…

8.

I took out my name and fox silhouette, and duplicated the image on each side and used the Pucker & Bloat from Effect > Distort & Transform > Pucker & Bloat on Illustrator to give the almost flower shape it has now. But the ‘flowers’ are really irrelevant and was just an experiment which I quite liked.

9.

With this one I just removed the images from either side to have a simple bold header…

10.

This one is similar to 9, but has pink glasses added, representing me. Kinda think the glasses destroy the whole effect the header is meant to give…

And that’s it for the final designs. Personally, I’m wavering between designs 5, 6, 7 and 9.

Button designs, here they come. All done in two different styles, opacity and visible version so when the mouse is over the opacity image, it rolls over to the visible version:

1.

   

2.

  

3.

   

4.

   

5.

   

My favourites are designs 4 and 5, but mainly 4. Designs of buttons may change gradually throughout the module for finalised outcome.

Advertisements

2 Responses to “Portfolio Website: Header & Button Designs”

  1. Mark Armstrong November 23, 2011 at 14:46 #

    Nice work, Sabine! Really cool to follow the progression of your thoughts here…

    FWIW: I like Header #6 the best (with the fox outline standing in for the ‘o’ in ‘fox’).

    My only suggestions: give your fox character a more pronounced mischievous smile (for having splashed out the graffiti), and have her looking directly at the viewer as if to say: Aren’t I a naughty little fox??

    Also: change the walking-away pawprints so they look more like they’re on a different plane (an invisible floor, so to speak).

    I like #4, the pawprint, for the button: simple, bold, funny, and easily understood.

    Working thru ideas is a messy business. You are very brave to share your process! : )

    Congrats again on some really fine work!!

    • Sabine November 23, 2011 at 15:50 #

      Thanks Mark! ^_^

      That has helped a lot. And I have made the alterations that you mentioned of. Must admit, it does certainly look better, especially the pawprints on the ground. I’ll post it up in a bit. I’m glad you like the pawprint button design, as that was my favourtie also =]

      It is definitely hectic dealing with it all. I don’t think I went through that many ideas before. Usually I just have four or five. I don’t know what went on in my head to make up that many…

      I’m always happy to share the ideas, even if it takes up a lot of room on the page! It’s the best way to show how your mind works.
      But since it will be viewed on the web world eventually, it’s best to see what is visually appealing for people.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: