At the beginning of the project, we had a workshop with Mark on website layout and structure. In small groups we had the task of navigating and analysing existing websites for design agencies to see what makes them successful. We broke down the structure of the websites and laid out the basic layout with post-it notes on the wall in the studio.

I found this a particularly useful task because it helped me to get an idea of how most successful websites are navigated and this inspired me when thinking about my own website layout.

After the first workshop, I started to think about the content for my website. I had to figure out how much of each project to include to ensure that it shows enough of the process but also isn’t too long-winded that the viewer could get bored of scrolling. I made some notes of what I planned on including from each project and in what rough order they would be.

Click here to see more of my website sketches and planning.

Once I had a rough idea of what to include on my website, I decided to plan out the structure for my website, to figure out how the user could navigate it. I decided to do this task based on the initial studio workshop. I knew that I wanted the structure to be fairly simple so it wouldn’t get too confusing and the main focus could be on my design work. I wanted my website to keep the user engaged the whole time, making them feel welcomed to scroll through my work with a conversational feel to the whole website.

Another workshop we had was the wireframe workshop. We were given the template for a basic website so we could begin to see how our websites could actually work. My wireframe was quite simple with only four projects, all connecting to the index page, I decided that I wanted my main projects menu to be on the home page of my website, so they are always easily accessible. Thinking about this made me excited to get designing my actual website.

Before deciding on an overall design style for my website, I did some research into design styles that interested me. I looked at styles which incorporated some of my favourite colours and I found some cool and modern logo designs that I wanted to take inspiration from for my own logo designs.

I hadn’t designed a personal logo before, so I was excited to begin this process for the project. I thought by having my own logo, it would really bring the whole website together. I started off by doing some sketches of my initials in a variety of ways, inspired by my style research and some existing ‘JD’ monograms that I had seen before.

Based on some of my sketches, I started producing some logos in Illustrator. I started off by experimenting with different fonts, seeing what the letters looked like next to each other. Some logos appeared more playful than others and although I quite liked this feel, I felt that it almost looked too childish. I particularly liked the fonts that were broken down into different shapes, I thought this could have a lot of potential for a brand identity so I decided to play with this idea further, having different shapes to form the letters ‘JD’.

Once I had planned out what content I was going to put on the website, I used Adobe XD to plan out the layout, starting to think about the design of each page. I hadn’t used Adobe XD before this project but I found it incredibly useful to plan out the layout in full detail to see how it would look visually.

I knew that I wouldn’t be able to design the actual website on XD but I used my layout on there as a guide when building the actual website and it helped me to ensure that I hadn’t forgotten any important parts of each project. When producing the layout on there, I wasn’t sure how well I’d be able to produce it with HTML and CSS, as I wasn’t sure how hard it would be. But luckily I feel that I managed to get the hang of the coding and I followed my initial design on XD pretty well with the final website, obviously making a few changes as I went along with building it.

When choosing the colour palette, I wanted to pick colours that best represented me and my personality, so the best way to do this was to use my favourite colours- pinks and purples. I knew that I wanted the background to always be white to keep it looking clean and professional so that all the images stood out against it.

For the font choices, I used two different fonts. I used ‘Quicksand’ for all the headers and titles. I like the playful appearance of this font but also how it still looks professional and consistent on each page. I didn’t think that ‘Quicksand’ worked too well for the body text, so I found another font; ‘Hind’. This font compliments the headers really well. It’s not too heavy for the body and I think it looks really neat.

I used web inspector on safari a lot throughout this project to check where errors in my code were and this helped me to resolve them pretty quickly. To the right is a screenshot of my four-column grid over my website. This was the main grid that I used for my website.

When experimenting with various styling options for my website, I had the idea of having an animated typewriter effect for the title of my motion graphics project. I had this idea because we have a type-writer style effect in our actual animation so I thought it could link really well together. I liked how the animated type looked however I decided to not go forward with using it since I felt that it wouldn’t match well with the titles of the other projects, as if I was to use the typewriter effect for them, it would seem a little random.

Here is a photo of my feedback that I got during the user testing crit. There were only a few minor changes that were given to me which were thankfully pretty easy to work on and didn't take too long. I got a lot of positive verbal feedback from all my peers and tutor which made me feel happy with where my website was heading.

Even though it wasn't required in the brief, towards the end of the project I was curious to see how my website worked on a phone. I knew that it wasn’t going to work on all devices perfectly seeing as I had only focussed on designing it for a laptop/computer screen as that was my main priority for the four weeks. However, when I searched my website on my phone, I surprised myself. It worked pretty well, and there were only a few minor issues that needed fixing. I haven’t been able to fix all of these issues in time for the deadline as I wanted to make sure everything was how I wanted it to be on a laptop and computer screen. However, I intend to keep progressing and improving my website and hopefully I’ll eventually have a website that will work perfectly on all devices.

Overall, I am really happy with my website. From having no idea about anything coding related to having a fully functioning website which showcases my design work in only four weeks, I am very proud of what I have achieved. I aim to keep further improving and updating my website in future in the hope of showing my future employers.