Tag Archives: Portfolio

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).


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!


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).


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


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:


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…


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.


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


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:











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