As the last assignment for year 1 of my design degree course, I was asked to create an online portfolio (designed to be a scrolling webpage) that includes and shows projects and works created in all the previous assignments during the past semester.
This website is made up of 4 main scrolling pages, 2 of which also have a parallax background (a 3D effect in which there is a fixed background image behind and the main content scrolling on top of that image).
The portfolio has first been designed in Figma, an online editing tool that allows users to design and wireframe each webpage and have a live preview of the user interface and navigation. Creating the first draft of my portfolio in Figma helped me to choose the best grids, fonts, colour palette and graphics of the website. Below are a few screenshots of the wireframing process and website preview in Figma.
The landing page of the website is a homepage which summarizes the content of the whole website, introducing and redirecting the viewers to the different pages.
The main projects shown in the portfolio are:
1) Digital Video (Assignment 1): basic video making and editing techniques to arrange a new video from pre-existing material
2) Digital Illustration (Assignment 2): designing a suite of flat design icons using Adobe Illustrator
3) 3D environment: designing a 3D interactive environment (including 3D sound design) using Unity 3D.
Each webpage has a minimal and clean design, with few but clear elements that briefly and effectively present to the viewer each design project. All pages have a main heading, some text (one or two paragraphs that summarize the creation process of the assignment) and then some interactive content that show and present the final result (for example slideshows, videos, buttons and links). To do so, I created an HTML document for each page, which is linked to its own CSS document, containing all the styling information (such as images sizes, codes for the animations, colours and fonts for the text and so on). I also used some external resources to design and better display the content inside the webpages:
- Animista: to choose the animations for text and images;
- W3schools: to code slideshows, grids and parallax effects;
- Google fonts: to choose the correct font for the website (Montserrat)
I created 4 HTML documents (one for each webpage to design the layout of the pages) linked to 4 separate CSS documents, to style the content (text, images, videos, menu...).
Below are some screenshots of these documents (Visual Studio Code).
All the webpages also have a curtain menu, which adapts to different screen sizes, computers as well as mobile phone size. All pages are adaptable to different screen sizes, thanks to the viewport element set in each HTML document. This allows the webpage to scale and change the size of the content when the width of the screen changes as well (for example when switching from a computer screen to a mobile phone, which is obviously smaller). The aim is to make the website responsive so that it can be easily viewed from different devices. once the size of the screen becomes less than 600 pixels, the website will automatically rearrange the layout and change the size/alignment of the elements when needed.
To make the pages more accessible, I also wrote alternate text for all the images, which will appear on the page when the internet connection is slow and the images don't load properly. This text will also be red out loud for blind users that need screen readers.
To make the portfolio more accessible, I also aimed at designing all contents with aa high resolution and high colour contrast (between the background and the text for example). Moreover, the text is easily readable as the minimum font size set for each paragraph is 20px and 25px for the headings.
ITERATIVE PROCESS
I changed the layout of the portfolio various times, trying to make it more clear, accessible and esthetically pleasant. The font used for the final version of the website is Montserrat (taken from Google Fonts). With regards to the colour palette, I chose bright and vivid colours, such as bright pink, blue and purple, as well as adding a colourful animated heading on the left side of the menu. To do so I created an animation loop which allows the text to gradually change colours in an infinite loop (the colours chosen are red, yellow, green, blue, pink, purple).
With regards to the menu, I initially made various changes with regards to the colours, style, size and position of the menu. In the end, I chose to design a curtain menu. The coloured hamburger menu icon on the top left of the webpage opens up a black background with white headings that become pink on mouse hover. This kind of menu adapts to the style of the website and directs the viewer through the various pages.
I also designed 2 slideshows (a manual slideshow to present the suite of icons and an automatic slideshow for the screenshot of the Unity environment. I took the lines of code from W3School.com
, then changed the images and their size, added a bit of padding and some text to adapt the slideshow to each project. I also created a grid of images to show the sketches, the flat design icons and the storyboard. For the latter, I created a grid that lets the users zoom in and out the selected image.
I also wanted my portfolio to have some interactions and animations, therefore I chose my favourite animations on Animista.com, copied them in the CSS documents and changed a bit the lines of code (loops, colours, shadow). The icons in the slideshow all have their own animations (vibrations and Ken-burns).
With regards to the background colour, I chose to use a white background for the homepage and for the flat icons page, to keep the viewers' attention focused on the text and images; on the other hand, I chose a black background for the 3D Design and Video Editing pages, as it looked better with the colours of those two works.
Last but not least, every page has a set of flat design social media icons (Instagram, Youtube, Gmail, Behance). All icons are blue, and stand out both on white and black background.
Comments