Header of portfolio website
The Header of my website contains the main logo of the site, which I created in photoshop, using a custom typeface which I also used for the splash page menu. I added the bevel and emboss effect and a gradient overlay to give it a metallic look. I like the blue tint and it fits in well with the space themed background and the overall design of the page.
My portfolio site is quite a basic design, I wanted the site to be easy to navigate and not overcrowded with information. I also wanted to make sure that each page was consistent design-wise. This is why the links in the header are green, blue, red and yellow, because this fits in with my splash page where I re-created the Simon game on photoshop and used the coloured sections as links. The colours I chose are mainly grey and black for the background. The website is also space themed with a background of Earth on the splash page and stars and a comet behind the ‘Luke Monet Designs’ Logo which I also created in Photoshop. Although I personally like the design it is quite dark and this doesn’t really fit in with the modern standard of design where white is the preferred background colour.
Since starting this project i have learnt many new skills, especially in css. I have also got a better understanding to how websites work as a whole. ultimately this has made me do things differently to previous website building attempts. One of the things I have learnt to do much more efficiently is to make sure to leave notes in my code in my html and css. This is so I can understand what I have done if I want to change the website at a later date. I have also organised my folders better and instead of making css pages for each html page, which I did previously, I have one style page for the entire site which makes it easier to work with and edit.
Looking back on the website there were things I could have done better. My design has a very outdated look to it and I could have made it more modern. For example, instead of using overflow on some of my pages which made a scroll bar appear in the div I could have came up with a more interesting way of showing the examples, as overflow is slightly boring.
However, the reason my design has an outdated look is also because I wanted it to have a retro feel to it. As it was my own personal portfolio and that’s the sort of design that I personally like it seemed that the portfolio was reflecting my taste in design. I concentrated on this too much though and it would have been better if the site showed more of what I can offer as a web designer and less of what my personal tastes are. It would have been better if I had found a middle ground where although the website kept an aspect of individuality it also showed that it was up to a standard that most clients would require.
What I like about the website is it’s easy to navigate. This is because I kept it small and didn’t add too many links so it’s very easy for a user to find the information they need. When creating the design I decided that I would only need four links and my splash page is built around that. This might have been a problem if I wanted to grow the site because it would mean I’d have to change the design to fit more links in on the splash page, though it seemed that as it wasn’t a site that would need to be larger, it would work for this project.
I have used two plugins for my site, firstly I used Roundabout by Fred LeBlanc (http://fredhq.com/projects/roundabout/) to showcase the different categories of my portfolio. I liked this plugin because it was easy to personalise and fun to mess about with.
The other plugin I used was the Jquery lightbox ‘fancybox’ (http://fancybox.net/). This serves two functions on the site, firstly it enlarges my portfolio images and secondly the lightbox allows the user to look through every piece of work like a gallery so they can browse images by pressing left or right on the keyboard and looking at large examples of my work instead of having to scroll down the page and look at small pictures.
I had to connect to a number of sources in my html including css pages (link href=) and jquery and other javascrit document (script src=).