Web Portfolio Development
Process of learning HTML & CSS to build my portfolio website
The Brief
We were given a brief to design and build a portfolio website to showcase four of our design projects using only HTML & CSS, which we learnt from scratch. The aim was to make the website appeal to creative professionals and to gain a deeper understanding of user experience.
Learning the basics
Apart from trying and failing to get the hang of code in first year, this project was my first proper attempt at learning CSS and HTML, and I wanted to ensure I fully understood the basics before attending any workshops or working with any templates. To do this, I completed the appropriate tasks from Free Code Camp's section on Responsive Web Design and read HTML & CSS: Design and Build Websites by Jon Duckett.
I found both resources really helpful to use as the foundations of this projects as they explained everything step by step, making coding seem much less overwhelming. For more specific things, I used websites such as W3Schools and CSS-Tricks to support my learning.
Structure and Wireframing
Before beginning to code my website, I needed to gain a deeper understanding of website structure and decide what content I wanted to include. I used Miro to map out how I wanted to structure my website, showing how each page links to one another.
Once this had been mapped out, we had a workshop where we created wireframes to see the functionality of our web pages and how the links worked. Similarly to making an animatic in motion design, I found making a wireframe was a good first step to take before complicating things with style decisions.
Visual Inspiration
When looking for visual inspiration, I looked at variety of inventive portfolio websites. I used the websites Awwards and Creative Bloq to find pages that were bold in terms of typography, as I wanted to make a website that reflected my usual design style. I also looked at examples of animated type and how I could use type on my landing page to give a good first impression.
Style
I chose to use Montserrat as it’s a variable font, which I thought could be useful if I wanted to make an animation using the weight variations. As I wanted to use an outline effect in my navigation bar which didn’t work with the variable font as multiple sections of each letter became outlined, I also had to use Montserrat Alternates.
I wanted the colours I used to complement my work, so I used previous projects for colour inspiration. I was torn between using the blue from my zine on a white background, or the orange from my process book on a black background, but I think the black makes my work stand out more from the page and reflects me more as a designer. I knew using black background can be controversial, so I did more research and found that although high contrast is needed for accessibility, the contrast of using white text on a pure black background can be harsh on the eye, which made me choose a dark grey instead.
CSS Grid
In a CSS grid workshop we learnt how to use grids to create the layouts of our pages. From a template of a section, I created a series of different section classes to make various layouts that would suit my content in the best way. This included sections with no images for the brief, sections with left and right images, sections for larger images, full-width sections, sections to show multiple images and sections that worked with audio. Having multiple layout options added variety to my website and allowed me to emphasise key images by making them larger, while keeping the less important content small.
The layout to the left shows the navigation bar, margins, container and grid. The container sets the maximum width of the content in the page, but I wanted my navigation bar to always sit in the corners of the page even on wide screens, so I excluded it from the container.
Navigation
From my research, I knew the importance of clear page navigation for a successful website. I used outlined type for my navigation bar, which fills in when you hover over it to show it’s a link. In order to help the user know where they are at any time while on my website, I kept the text of the page they’re on filled in. I think this was successful as it clearly highlights where they are and where else they can go.
I wanted to use a singular page as my home page and projects page, but for the page to scroll down past the introduction when ‘projects’ is clicked. Originally, I did this on the same page, using a smooth scroll effect to take you to my work, however I wanted projects to be filled in when you clicked it, which I achieved by duplicating the page, using IDs to scroll to the correct section, and filled in the type on the duplicated page. Although this isn’t the perfect solution, I wanted to find a way to give the same impression without using Javascript and I think it works well.
For further navigation, I included ‘next project’ buttons at the end of my pages to encourage users to work their way through my website. When I linked off to show more of my storyboard development, I added clear navigation to get back to the rest of the project, using IDs to take the user back to the same section of the page they were previously on.
Dynamic type
Hover!
For my landing page, I wanted to include a brief welcoming introduction before showing my work. Originally, I wanted to have a gif as the main feature, however I thought coding a type animation could be more interesting and would make my website more interactive as well as being a safer option for the loading time of the page. I created an animation that stretches when hovered over, adjusting the letter spacing on hover and adding a transition time of 0.3 seconds to make it move smoothly. Although it’s only a simple animation, I think it comes across as friendly and is fun to discover and interact with.
Collapsibles
I used collapsibles as I needed a way to hide longer content that may not be relevant or interesting to the people visiting my site. Although in some places I linked to another page to show extra content, I knew I wanted my critical reflections to stay on the same page but be hidden so that the user wouldn’t have to scroll past long sections of type to reach my footer and further navigation.
Although the concept of making a collapsible was simple, I struggled to work out how style it in a way that fit the rest of my website, but after fiddling with the code for a while I managed to make it look the same. Even though it’s only a minor change, I think having hidden content adds to the interactivity of the page.
Image Carousels
Figuring out how to code an image carousel was by far the most difficult part of this project, but instead of leaving the idea behind, I was set on how I wanted the pages of my zine and process book to be displayed. I achieved the two carousels by using wide image containers and multiple images in a row, which transitioned along to reveal new images. I used hover effects to add navigation to the carousels, and it allowed me to show five spreads without taking up too much space in my website.
Fixing Mobile View
Although I designed my website with the idea that it would ideally be viewed on laptops by other creatives, I wanted to also make it work on a mobile so I could link to it from my design Instagram account, and it would give a good first impression of my work.
Mark included a media query in the code that meant that when the screen width was narrower than 550px, the grid was no longer used, giving a mobile view, however many components of my website still didn’t look good, for example the clear background and alignment of the navigation bar and the way some text was too wide for the screen.
I made a series of adjustments to the code before the media query began, which allowed me to style things in two separate ways for mobiles and desktops. In the mobile view, I centred the navigation bar, removed the hover effects as they weren’t needed and changed the font sizes to fit the page. As my image carousels were a fixed size, they didn’t fit on a mobile view so I moved them into the media query. This meant that on a mobile they appeared as a list, which was much more successful.
Accessibility
I used W3C’s Web Accessibility Initiative to learn about how websites can be more accessible and how I could include this knowledge into my own website. I learnt about the importance of sufficient contrast, clear and consistent navigation, image alternatives and not relying solely on colour to identify something, which can be an issue for colour blind people.
From this research, I checked the contrast of my website using a contrast checker, added image alternatives using visual language to all of my images and made my in-text links italic so colour wasn’t their only identifying factor. I found it interesting to learn about how disabled people navigate websites and the barriers they can face when things aren’t designed or coded with accessibility in mind.
Final touches
Once the main part of my website was finished, I had the chance to make more small improvements, for example making the navigation bar translucent and using hover effects and opacity changes on the home page to reveal more information about the projects as the user hovers over. I added a 0.3 second transition to this hover effect as well as the hover effect in the navigation bar, which in my opinion makes everything seem smoother. As I became more confident with coding, I tweaked the padding of different sections to give each element enough breathing space and to lay things out as I wanted them.
In my final crit, I received tutor and peer feedback about minor changes I could make to improve the experience of my website. These included adding more image captions, including my email in the footer and about section and including whole descriptions as links, rather than just ‘click here’ as it can help with accessibility.
User Testing
Once I was happy with how my website looked, I uploaded it to Netlify to undertake user testing where I had peers navigate through my website and give feedback on the style and user experience. I was happy that everything worked as expected, and I received positive feedback about the clear navigation, legible font size and how it was fun to interact with and explore. I was also told that the images and figure captions give a good impression of the projects even when they’re not read in detail, which was something that was important to me.
Coding my website was the most challenging but rewarding project I’ve completed so far. In first year, I really struggled to get the hang of coding and ended up giving up early on. Taking a more thorough approach this time round really helped me to understand what I was doing and I feel like I’ve developed a much deeper understanding of code and a new confidence in fixing issues I run into along the way. Although at times it was frustrating and things seemed impossible, I stuck with it and took time to understand the problem, using problem-solving skills to fix things.
My process changed a lot throughout the project - I originally went into the project with a ‘more is more’ mindset and I wanted my website to be full of creative code and animations, however I realised after looking at portfolios that inspired me that I didn’t want to take away from the work I was showcasing. I wanted to show my projects in the best way possible and spend more time including useful pieces of code rather than overwhelming my site with buggy and complicated elements which weren’t functional.
From here I took a simpler approach, focusing on making a clear and easy to navigate website and letting the work speak for itself. I think I was successful in making my website a fun and interactive experience, with the hover effects, dynamic text, collapsibles and carousels all improving the websites interactivity.
If I had more time, I would consider adding extra marks, gifs or imagery throughout the site to give a stronger impression of personal branding and coherence. I am planning on developing my website further over the summer by adding more projects to show a wider skillset. Overall, I am proud of what I have achieved in this project and I am hoping to keep coding and continuing to develop these skills so I can become more confident in web design in the future.