Home Page
I decided I wanted to make a grid of images as my main home page with the nav bar along the top. I created a grid for a size guide so I could accurately lay in my images. I chose a simple sans serif font for my logo to make it clear and bold and legible.
Next I started to lay in the images. I cropped the images to fit into the shapes, but this won't matter because they user will be able to click through to a separate page if they want to see the full image.
This is the site with all the images layer in. I think this grid of images looks effective because it displays a wide range of my work in a small space so that users can immediately see my entire portfolio and if they want more information they will be able to get it by clicking on an image.
Next I added in the links on the nav bar. I decided to have three pages - portfolio (home), about, and contact. I also added in two social media links, and I made these into a similar style to the rest of the page by outlining them and keeping them in black and white. I underlined the text to give the links more impact. I also added a bar in the bottom to add in any extra things I would like to be on every page of the site as this will be something that doesn't change along with my nav bar.
I decided to add a search bar onto the footer because I didn't want to clutter the top and this is something id like to be available on every page. I created it in a similar black and white boxed in style to the rest of the site and used the same font for continuity and it's clear and has good legibility.
I wanted to add some more colour to the site to give it more warmth and personality so I chose this peach colour as it is subtle and compliments the images without overshadowing them.
I experimented with having all of the backgrounds peach for the icons and the search bar but I decided this was too much and they get a bit lost in the background and stand out less.
I changed the backgrounds back to white and I think this is a lot more effective because they now stand out more because they have a bold contrast. It also helps break up the peach a little so that it is easier on the eye and doesn't drown the website.
I wanted to have a hover overlay on my images so that the user could get the name and a brief description about each project without having to click through to each individual page if they only want an overview.
I used the same typeface for continuity and because it is clear and very legible.
I tried a couple of arrows but decided just to leave it in the end because although I thought this might make it clear to click through to another page it became quite cluttered and I think the dots are enough to show the text continues to another page when clicked on.
I then added in a white hover over the page links to add more interactivity for the user and clearly show the page they are on.
In-depth Portfolio Pages
Next I created the individual portfolio pages. I wanted to add these so that the user could see a more in depth explanation of each piece of work as well as full size and additional images. I experimented with various colour and stroke combinations to try and find the most effective.
Although I like this I think there is now too much peach on the page and the contrasts between white and peach is not very strong so there may be legibility issues.
I then made the text black to improve the contrast and added black outlines to break up the peach. I think this is better than the previous design but there is still too much peach and the peach and black is the same as the nav bar and this makes everything look too similar.
I then tried this in white combat it looking too much like the nav bar but again this just isn't a bold enough contrast and legibility is slightly lost.
I then went for a peach outline and black text. I think this looks very effective because the outline links it in with the rest of the site and the black text has a very high contrast against the white background so is very clear and legible. I tried a large title at first but because the text on the rest of the page has been kept small I think this is too overpowering and doesn't blend with the rest of the site.
I decided to box it in using the same styling as the box below but just bolded the title to make it clear and stand out against the body text. It think this looks really effective because it flows well with the rest of the page and is very clear and legible.
I then repeated this layout for the rest of the pages to keep continuity.
This project has multiple images so will need to be a slideshow. I represented this on the template by showing the additional images below the main one.
About Page
For my contact page I would like to make a working form where the user can type their details into a form and press send to send it off. I also chose to add in icons to go along with the email and phone number to add some images to the page. I did the text and boxes in the same style as the rest of the site to keep a cohesive style and design.
Contact Page
I chose to make my about page icon based and represented each category or piece of software with an icon. I matched the software icons with the same colour scheme that the actual program icons used and tried to music the fonts to make them easily recognisable so that extra text wasn't necessary. I chose to use text instead of images for the skills as some of them would be hard to put into images and may not be easy for everyone to understand. I kept them in circles to be in keeping with the style of the software icons. I chose to use the same colour scheme as my site for these to add some continuity and not clutter the page and make it too overpowering as the software icons are already very colourful.
No comments:
Post a Comment