As part of project 8, we had to set up a portfolio website in order to market ourselves as designers, researchers, and product developers. <\/p>\n\n\n\n
I went through a lot of different designs when it came to my website. I wanted something colourful but also meaningful to me, something that was really bold and drew people in but displayed the work well enough to keep them there. I knew I wanted to use the typeface DM Display serif, because it was bold but had a playful kick via the serif elements of it, which are curved and could be adapted to join any other secondary typeface. For the next type I chose Montserrat. It\u2019s simple and it\u2019s never failed me before so why should it start now was what I was thinking. It pairs well with the main font and doesn\u2019t overpower or downplay it (it also comes in about 20 different weights). <\/p>\n\n\n\n
Finally, I chose Caveat to add a playful swing to my design. I knew I wanted to be impressionable, and if I\u2019m being honest I don\u2019t actually enjoy website design as much as I do the research behind it, and I am pretty sure I would like to be an account manager, and so I wanted to express my character within the site and make it interactive. Caveat was used to do this, a handwritten script font that plays against the bold of DM display serif. Then I moved onto colours. I knew I wanted the colours to be bright, but in the end I decided to stick with just one contrasting colour to use within caveat. This was a red\/pink mix that was vibrant and held well against both black and white. More colours could be devised later, however right now I am happy with this choice.\u00a0<\/p>\n\n\n\n
The background is not pure white, as it felt criminal to place such vibrant colours against it, and instead is a slightly deeper off white that contrasts the other pages well. <\/p>\n\n\n\n
I then had to decide on the main landing page and how it would express what I have mentioned prior. To do this I thought about making multiple pages with different elements, possibly adding a light box to change the elements colours around. However in the end I wanted to make it simple. I wanted my work to be displayed on one page, with the option to then go back and follow on the journey of relatively poor work to getting better (not that I think my work was ever poor, but I think it has definitely improved). I removed the navigation bar, and put project links in large boxes at the bottom, with hover states clearly labelling them, as well as a contact section.<\/p>\n\n\n\n
However, I did add back a navigation bar in order to scroll to section, which doesn’t take the user off of the homepage, but keeps them on track and adds some error tolerance. <\/p>\n\n\n\n
I then added a clickable button that brought up a light box with my \u2018about me section\u2019 detailing the things I enjoy using as well as a little bit about who I am. I thought this was fun and added to my idea of being personable as opposed to just putting it all at the top and having someone click through them. <\/p>\n\n\n\n
I had a few different ideas for concepts of the cover page. <\/p>\n\n\n\n
I printed off some of my favourite photos from some of my favourite memories and tore them up, collating them onto a page and then scanning that in to use as my background! I thought this worked with my copy writing, as it asks the viewer (hopefully a client) the question of who they are and what (user) experiences make up their brand. It added personality but also kept to the point, which was what I had wanted.\u00a0<\/p>\n\n\n\n
Another idea I had was a colourful background that moved around as the user stayed on the page. This gave the page character, as I also wanted to make it clear that my designs catered towards people, not just ‘users.’ <\/p>\n\n\n\n
I did this using an after effects motion tile and gradient, using the colour scheme to work within itself and build on the brand identity!<\/p>\n\n\n\n
I organised the different projects using a divider system, and a hover state that highlights where the user is, as well as an animated photo reel that moves through highlighted images from the projects. <\/p>\n\n\n\n
In the future I hope to link these up, however, for right now – this was all I managed to do!<\/p>\n","protected":false},"excerpt":{"rendered":"
As part of project 8, we had to set up a portfolio website in order to market ourselves as designers, researchers, and product developers. The Main Needs I went through a lot of different designs when it came to my website. I wanted something colourful but also meaningful to me, something that was really bold … <\/p>\n