Portfolio Website

Header of portfolio website

header

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.

Jquery roundabout

jquery roundabout

I used this jquery roundabout to section off different categories from one another. I feel that this is effective because it doesn’t group all of my work together and each section focuses on a specific aspect of design. I didn’t like the idea of having all of my designs on one page and the user having to scroll down the page to see different categories, so I created a separate page for each category and used the images in the roundabout as links. The download of the plugin contained css and javascript documents which I had to connect to in html in the head section. I customized the css and javascript pages to make the plugin fit into the ‘mainbody’ div in html. Elements I customised in css were the size of the images and the space in width and the amount of space they had in between one another, I also changed the opacity of the image in the background so it didn’t interfere with the image in the foreground. I had to alter the css until all the images were level with one another, this did take some time to make the plugin look right. In javascript I changed the ’tilt’ which altered the way in which the images moved, I also enabled the images to change automatically instead of having to click on the left or right images to make the roundabout move.

In the future I would like to write my own javascript code from scratch but this gave me a better understanding of what javascript and css can do and how they work together and what someone can do with jquery. This has helped me to come up with ideas that I would like to work on in the future, and has given me a better understanding of css javascript and jquery.

Portfolio Website

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.

Group Projects

Here are some examples of designs I have recently done. The designs were part of ideas which I and other members of the groups I was assigned to had to present. They were based around briefs in which we had to apply our ideas to.

Fire Dash

For this project we had to create a campaign that would promote fire safety. Someone in the group had an idea for a game, and upon agreeing that it was suitable we developed it from there. Our final idea was a game that promoted fire safety but also steered away from conventional fire safety awareness campaigns. Because our target audience was for young people aged 12-21 we decided an interactive way of understanding fire safety would be more suitable.

These are some example designs of what the game would have looked like.

Firedash Logo
firedash

Firedash Main Menu

firedashmainmenu

This would have been the menu for the game, I like the design because it reminds me of game menus from the 90’s era and is very basic.

I have only added my designs to the blog, but everyone contributed by creating well thought out designs and we communicated well as a group to come up with a decent idea.

YuleGuide

This shows my process of creating a front page for a website.

Yuleguide Front Page Design

homepagealt

My first idea was to create a tab like structure for the front page. My reasoning for this was that the website would be quite large and there were many different services involved, so it would be helpful if the page was easy to navigate through and the different services (i.e. events, shopping etc) were distinguishable from one another. As I wasn’t given the job of making a logo I made a quick one so there was something in its place. I then put some examples of possible links at the bottom as an option.

Even though this isn’t really a splash page I thought the idea of having different choices on the front page so that the customer could use the service quickly and be able to navigate through the pages easily and also be able to browse without having to go back to previous pages.  I also had the idea to have some slideshow banners in each section which showcased the products and services with a link which took the user to that specific part of the website. In reflection I think that the tabs idea wouldn’t have been as useful as I first thought for this particular project in relation to making the page easier to navigate.

Html and CSS

Html css

This is a screenshot of an attempt to design the page in html and css, I will possibly use the code for a future project, obviously changing the design but working on the markup and styles to see if it could be of use for anything. Although tabs aren’t used as much as they used to be I think they can still be useful in some cases and can still be worked into more modern websites.

Second Design

oldpage

After getting some feedback from the rest of the group I decided to scrap the tabs idea and use a jquery multi item slider (http://tympanus.net/Tutorials/ItemSlider/)   on the splash page. I thought that this would be more useful to showcase products and services than the idea of having tabs. The customer could also click on an image link and be taken directly to the product if they saw something that they wanted to purchase. I still kept the links at the top of the page because I thought it would be useful to be able to navigate to a specific part of the page directly from the front page, this would save the user time. One thing I forgot to add to the page which would be important would be a search bar, I think a search bar would have been useful for this site because the customer would be able to skip all the content to get to something they were specifically looking for.

Final Design 

yuleguide

After more feedback and input from the group this is the design we used for the presentation. I didn’t design the logo but I put the page together in photoshop. I think that the idea was a bit messy and could have been done better on my behalf, although I did like the circular links instead of the rounded rectangle buttons that I had previously used. I don’t think the location should have been on the front page and I agreed with the feedback which was given to us after the presentation.