Last Touches To My Website

From the final crit earlier today there was only one issue that arose. The logo in the top right corner seemed to be superfluous to the design, a random element of useless vector, floating meaninglessly in the gale force of the world wide web. So I removed it from all pages and simply moved the title of each page across to the top right corner to fill the gap in. 

The only other problem that I had was with my contact form which was sending messages to my email that just said "submit:submit". So I've replaced the entire form with a different one which worked perfectly first time. It also has a captcha which will make the form more secure.

Fav Icon And Finish

Uploaded everything to the server. I'm Online. The last thing to check was that my favIcon would work... and there it is, right in front of my name on the tab, and on the adress bar. Nice. I chose to use the logo I created as that seemed to fit with the branding/style of the website, is consistent throughout and also is simple enough to be reduced to a 16px by 16px square. I've also run this through a few different browsers to make sure it works. It's a little different depending on browser, but only so that the text on the bio page moves down by a line so it's working consistently and effectively. So I guess that means I'm done for now until I create more artwork to upload. Overall I'm really pleased with the outcome of my site, I've managed to follow my plans from the beginning, making a few minor changes to get around the difficulties of java script but it definitely still resembles the original design. The layout is simple yet effective and works well with the imagery as it serves to emphasise the work. I feel that the work I chose to display on the index page was a good choice. It has a variety of styles and media which contrast well with each other but fit together through the use of a common colour: green. The colours on the index page really pop out aswell due to the plain background. The imagery on the bio and contact pages I feel also works well, I selected pieces which could be made to float in the space provided so that they wouldn't be in a box format and could fit more naturally into the layout. I'm also really happy with the typeface and how that works within the confines of the page and in conjunction with the imagery and layout. The whole thing really portrays my work/style/personality well. In particular I'm happy with how the gallerys work, the categories are well thought out, and the rollover on the selection screen adds an extra element. Then the actual gallerys themselves have an enlarge function which makes the site a little more interesting than just a basic click and replace. All my links work, all the functions work. Website: done.

Design Gallery and Finishing Touches

So I finally got round to sorting out the design gallery. This presented a few problems in the form of missing loads of formating on pictures and then having to go back and change loads of CMYK to RGB and stuff like that. But I got it done in the end and there it is. I also added a few more photos and illustrations to their appropriate gallerys since I found a couple of extra bits, double checked my code, live viewed everything and as far as I can see it's all ready to go live. So tommorow I will upload. And then we shall see the results.

Rollover Images in Dreamweaver

Today was mainly filled with sorting out/adjusting some small niggles again. Little things like aligning text in the right place and editing my bio a little bit. Then at the tutorial I got good feedback. It was agreed that my website has a good design, is reflective of me and my work and is pretty much finished other than the design gallery which is yet to be filled. The only other issue that came up was that the front page was really bold and colourful, and all of the other pages had some element of colour in there as well apart from the gallery category page. So I've added in some rollover imagery. The page appears exactly as it did until the mouse rolls over one of the pictures when it turns to colour. I've also added a favicon to my pages. That's that little bespoke image that displays at the start of the url in the address bar but since that will only work when the website is live I can't screen shot it yet.

More Weaving

More web design today. 

Bio page. Think this has worked really well. I like having an image to one side of the page and then the white space and text on the other side, this fits in really well with the whole feel of my site. I wasn't too sure what to write in my bio so I've left it a little generic and chatty for now. It works. I might change it at a later date if I decide I don't like it but I think it describes me pretty well. I think the text align right works well here as it sits against the imagery and leaves the space on the left

Contact page. I went with the image to the side, content on the other to keep the theme going throughout.  Although I've switched the sides over because I wanted the lion facing inwards like the masked man is on the other page. I think the imagery works well but there's not a lot I could really do with the form as it needs to be pretty standard for people to be able to use it effectively. I might align the text to the left though. It looks a little disjointed in the middle. There were a few other little niggles that needed working out today, finally got my email link at the bottom working. Added the copyright line to the bottom of each page with the © symbol (alt g on a mac, new found hot key). The main problem though was that I discovered that on my gallery pages when you click a thumbnail the image was stretched across the entire main image box regardless of size. This was solved by removing all height/width measurements from the placeholder image as this was effecting all the other images. Then hooked up all my links at the bottom of the page. The only thing left to do now is create my 'design' gallery and then upload and check everything works.

Back To Weaving The Dreams

So now that 2010 is done and dusted and all of my drawingly requirements are also done for now I had time to get back to what I supposed to be doing with my time: building my website. Filling up my gallerys was priority one. It took a long time to format 100 or so images and make thumbnails of them as well but it got done. It then also took a long time to insert aformentioned imagery into said gallerys in the requisite fashion and a pleasant order. Yes. That's right. Requisite. I chose a dead pigeon to be the fron of my illustration one because I like it. And that is the best reason to do anything and everything.

The next step was to input an animation into my website. Since I've only ever made one animation to date this was exceedingly easy. I simply clicked on a backing box and hit insert - media - swf - browse - file. Then resized it appropriately. At some point I'm sure that I will make some more animations in which case I will be forced to integrate them into a gallery system similar to that of my illustration gallery. But as it stands I have no need of such a system and this will be updated when necessary.

As you can see here, it works.

Then I realised that I hadn't actually put any imagery on my front page yet and It was in essence, a white box with a few bits of text sitting in it. It took me a while to decide what images to use. I didn't want to go for just one image as I think that this would narrow the field down too much and visitors to the site might think this is the only type of work that you do. So I went for a mixture of styles and disciples, focusing on illustration as this is my fortay. So I've got a colour illustration, a bold black and white one, a painted one and a line work one alongside a book cover design and a black and white photograph. I chose to focus the images in on a small detail as the larger images are available for viewing through the galleries. I think this works well as it creates an interesting composition, and a small insight into the variety of work that I produce. I chose to arrange them as below due to the fact that 3 of the images I chose to use were predominately green. So I split them up as much as possible.

Gallery Is Taking Shape

This has taken me about three whole days to work out how to make this jQuery work properly. I've tried many different versions and then gone for this one. It's basically a gallery where you have the thumbnails on the left and the main image on the right which changes according to which thumbnail you click. It has no images in this version but I have run a test version with some dummy images and it does definitely work. Above we have design view. Fascinating. 

Live view. I added a scroll bar to the thumbs gallery and shrunk it down so that I could leave space at the bottom to add text about the main image. I also resized the thumbs, changed the paddings and margins, both of the thumbs and the whole container. Overall there was a lot of jiggling code about to make it to how I wanted it but in the end I think I've made it work well.

Example of the roll-over function which enlarges the thumbnails when you scroll over them. All that remains now is to add content to this page. And then to copy it to the other categories of my gallery and then fill them up as well. Onwards.

Gallery Nav Page For Website

I couldn't decide what large image to add to my home page, so I decided to leave that one to stew for a while and move onto the next bit. Most of the pages are all going to be pretty straight forward so I wanted to do the most awkward one first, the gallery set, and get it out of the way. This page was also the only one that I knew exactly what I was putting on it, for all the others I have to make imagery decisions. Made myself up some nice live traced buttons, same style as the normal navigation.

Drew myself up some icons for the different categories within my gallery.

Set it into the dreamweaver, fiddle with the layout and sizes a bit. Then preview it in IE. At the moment i'm going to leave it as is and see what gets said at the crit on Thursday. But i'm thinking maybe grab the whole set and shrink them down into the middle a bit more, theyr'e a bit dominating at the moment.

Also you may have noticed that my twitter button doesn't seem to work properly in IE. Issue needs to be sorted.

Website Design Moves To Dreamweaver

So I took my Photoshop file, sliced it up with the slice tool and then opened it up in Dreamweaver and I've started adding bits of code and extra elements. I've managed to get it to stay centered in the middle of the browser whatever size you make it. Here's what I've got so far.

 

Design view of home page.

 

Preview in browser

 

CSS rules for text.

Super exciting stuff. Think it's looking good so far. I'm just having a little trouble getting the email link to follow the centering of the rest of the page. More code is needed it seems.

Screen Based Communication: Website Portfolio

The new unit started last week but I didn't really have anything to post as it was all just doing research, doing some scamps and general idea generation. The new unit is about designing and creating an effective, original & interesting portfolio website. As such I've been having dreamweaver tutorials which are going swimmingly. So after the first section which involved a lot of writing, it was time to do some design. The first thing I chose to do was to create a header of my name to go at the top of my site. I wanted it to be hand rendered (suprise) so that it was reflective of my work & my personality. Secondly I wanted it to be quite simple and natural, not overly complex or intricate, certainly nothing decorative.

After writing my name about 100 times in different ways I chose four, scanned them, cleaned them up and then live traced them, and then messed about with the threshold & min area for ages. I got these four. The first and second are done in a Faber Castell brush pen. Number 3 is done with a paint brush and ink. While option 4 is a 08 unipin. I didn't like the third one outright so that was gone, it was too much like the second one, but not as good because it didn't flow well enough. The second one itself I do really like but I though it looked a little bit graffiti style (feel free to correct me) which really isn't anything to do with my work so I cut that on out. Number 4 I really like, so simple and niave, very reflective of my work, so I tried out that & number 1 out and found that number 4 simply didn't have enough punch to be a header. So after about an hour of faffing I managed to cut it down to the top option there. Which was roughly the third or second one I wrote. Out of 100. In my normal hand writing. Time well spent. The 'B' at the bottom I just picked out of one of the times I was writing it because I really liked the way it looks, how curly and flowing it is so I though I'd make it a vector and use it as an ident.

Seeing as how I liked the other option so much but it was cut due to weight issues, I decided to use that style as the option for my buttons within the page, which don't need to be so weighted. I think the two styles fit well together, one is very flowing whilst the other is quite stunted and jagged, but both very loose & clearly hand rendered even though they've been vectorised (I'm not sure that's a word... made into vectors anyway).

I have a logo now.

Heres the first basic page of my website. It doesn't quite work as it should when it's shown here as it's a white box with a drop shadow, sat on a white background. Which is obviously whats happened... but it's supposed to sit within & take up an entire browser, not be left to float in the middle of a blog post. I'll try and make a photoshop mock up or something for the next post. I think this has worked really well. Simple, effective design. Interesting typography. Good layout. The name of the page is going to sit between my name and the logo at the top, and then the content evidently will be in the middle section. I'm not so sure about the lines though. I may remove those and just have whole thing very open and basic, I think they might be a little jaring once the content has been added. More to follow.