#caportfolio

[creativecraig]

Final Outcome

Above is the final version of my Portfolio website.

Some other changes that I have made and been suggested to make have also been added such as the opening paragraph. Previous there was just the monogram and wordmark. When at the critique it was mentioned that you should open a website like a conversation. Previous it seemed that I was shouting my brand at the user, however by adding an introduction underneath the monogram and wordmark give a more inviting and friendly opening, like the start of a conversation.

Overall I very happy with the outcome of my website. I think it fits my brand and style well without being overpowering. I think the image and content balance is fairly even with the colours and svgs creating a consistent flow throughout.

[creativecraig]

Image Slider Added

After sketching ideas I then decided to add an images slider to my website. I thought a automatic three image slider would work the best as it is a set time therefore buttons are not required for navigation. I felt that adding buttons would disrupt the flow of the page. Having three images gives a quick fire insight into the final outcome without being too long for the user to view.

All images with in the image slider will be displayed on a white background as I believe it fits the flow much better and other clothered backgrounds.

[creativecraig]

Image Slider Sketches

Having researched the different types of image sliders, I decided to sketch out some possible images sliders that could be used for my outcome section.

[creativecraig]

The Image Slider

At the end of each case study I currently have an overall outcome image. I feel that this could be presented in a better way than currently. The input of an image slider would be a better option as users would be able to view a series of images from the out come rather than just one still image. Above are some of the image sliders that I came across when researching about image sliders ands the different ways in which they can be presented.

[creativecraig]

Buttons and Hover States

Having created a moodboard on the different buttons I then decided to refine my existing ones from my website. I decided that they should be obvious that they are buttons but still fit the flow. I then decided to use the main colour of my brand with the negative space for text. I also added the rounding of corners to make the button seem less aggressive to the eye.

For the hover state I followed the same principles as before except I switched to the darker main colour rather than the complimentary as I gives more of a feel that the button is being pressed down. This call combined together gives a more dynamic style to the buttons as well as fits the flow of the website.

[creativecraig]

Button Moodboard

Having looked at hover states and micro-interactions, I then started to think about my buttons and how they looked. I remember a talk I attended at Allstate which one of the designers talked about the about of different ways a search bar can be displayed. I then decided to do the same for buttons and compare the different ways in which buttons can be displayed and the purposes for them. Above is the mood board I created and it gave me a clearly thought process of what my buttons should look like and where to be used.

[creativecraig]

Hover State Added

Having looked at the the importance of hover states as well as the best colour to use, I then added the hover state to my website. The complementary hex colour along with a slight shadow is perfect for the the user to clearly see the hover state without affecting any other content or alignment.

[creativecraig]

Change is Colour

One of the best and most effective ways to create a successful hover state is through the use of colour. I went on top Adobe Colour in which I entered my brand main colour to get the exact complimentary hex colour. I then decided that this will be the colour to use for my hover states.