Portfolio Website

HTML & CSS

Wireframe and Content

I began by drawing out the simple wireframe for my portfolio website. Before starting to get my content together i wanted to think about what content will go in which pages and in what order. This helped me when putting content into the HTML as it made it less over whelming and complicated. It also allowed me to think about and sub-navigations I'd want for workshops or development. I decided to pick four level 5 project but I will eventually add additional work I'd like to show.

Website Layout

To help me code my website I created a simple mockup of where im planning to put my content. This helped me focus when I started to add my content. It helped to refer back to the layout and wireframe plans as I could refer back to it.

Colour

This is the colour palette I ended up picking for my website. I felt the colours looked fresh, youthful, bright and exciting which is how I view myself as a designer.

Layout

For my final layout it was important to have my images big enough. This is why I went for a simpler grid as I wanted my pictures and writing to compliment each-other.

Learning The Basics On Codepen

Starting to learn code for the first time was overwhelming at the beginning. However, the more codepen workshops I attended and the more I played around with It the more sense It started to make. After the workshops I was confident about how to handle typography with css and html. It also helped me make sense of creating a grid for when I began to code my website.

A Little Bit About Me

Initially, I found talking about myself hard but after the workshop it helped me come up with words that describe me as well as adding a personal touch of about what I enjoy.

Portfolio Inspiration

I felt at this point It would be a good idea to look at previous student and designers portfolio websites. This helped me feel inspired and understand the features that make a successful website.

Using a Grid

Figuring out how to code my grid into css was a good start to placing my images and context in. I decided to keep my grid as simple as possible to keep the legibility at its best by not over complicating or cramming in my images.

The higher archery of my text is very important as it will help whoever views my website to navigate their way round.

Choosing a Colour Palette and Typeface

When choosing a visual identity colour and font are really important. My main aim for the type was legibility, it was important to make sure I used a font and font sizes which people could easily read. I wanted bold colours that would work well together. I ended up going with the first colour palette as it looked most fresh, youthful and exciting as well as being clear.

Buddy System

I found having a person that could test my website extremely helpful as Jared could see any mistakes or errors that I might have over looked. It showed me how people would navigate through my website. As well as the good feedback it was helpful to see how he found minor improvements I could make in my work.

Plenty of User Testing

Living with another graphic designer was a great help as when one of us was stuck we could problem solve together. If one of us was stuck It was likely the other person could work it out. I was able to go to Izzy to user test my website to spot any errors, which there where quite a few which is why user testing was a crucial part of the process.

Clear Navigation

Creating clear navigation for my site was really important. However, I didn't want to add too many different navigations as I felt It could over complicate the site.

Changing My Index Page

I decided to change the navigation of my index page to make it my projects page also the index. I preferred how it looked ascetically.

Changing The Background Colour

Changing the background colour helped bring my images out much more. I found having a completely white background didn't work as images would look like there floating and not in a grid

Staying Organised

In order to keep developing my work It was important to listen to feedback and write down things that need doing. I found organisation was key to this project. It was also very satisfying when finishing a to-do list.

Changing My Process Book

When presenting my process book on my Our Museum project I struggled with how to put it in to HTML. I found a website called 'pubhtml5', I liked how it worked, however, the adverts and the top bar ruined the professionalism of the site and I felt I should change it. I decided to present my process book by putting the spreads all in one photo.

A Pure CSS Collapsible

After adding my content I wanted to look at more tools I could add into my code. I felt I needed to work on my navigation. I found the coding for this very overwhelming and there where a lot of errors at first. However, I kept playing around with It and It turned out to be very successful. The navigation going back to the projects and to the top of the page makes the navigation a lot easier for viewers of my website. I also preferred having my evaluation and bibliography collapse as they where huge chunks of text before which didn't look too ascetically pleasing on my page.