Cherry Hau
Selecting the colours, font, layout and designing some responsive elements.
I began designing my website by drawing many wireframe sketches, starting with designs for mobile 1.1. I added elements that I knew that I wanted on the website, such as a slideshow, a collapsible menu, and a list of projects with images and text.
I also expanded on my wireframes, creating desktop equivalents 1.2. After testing my website on desktop, I added margins to either side of the page to create a narrow area for text content. This makes it easier to read large bodies of text as the line end and the next starting is not as far apart.
One issue I faced was with wide images, which looked very small on portrait screens. I used two solutions for this.
For images made up of separate sections, I divided into two halves which would be split and moved into a single column once the screen width was low enough.
For others that could not be easily split, I added a link to open the image in full screen, where the user could zoom in and pan around the image freely.
I also planned out how I wanted my menus to look 1.3. After drawing different designs, such as fixed sidebars and headers with links, I chose to go with a dropdown with large full-width links.
As I had a specific idea of how I wanted my website to look, I chose not to use a CSS stylesheet and instead wrote the CSS myself. This enabled me to tailor the website entirely to my design.
For the colours of my website, I decided to go with a dark themed colour palette to be softer on the eyes. I chose a dark, low-saturation blue for my main dark colour, and pure white for the light elements, with a couple in-between 2.1. I also chose three bright colours to use for highlights and accents 2.2, a pink, blue and orange.
To make sure that colours were consistent across the website, I chose to use variables in the root section of my CSS file 2.3.
This allows me to reference the colours throughout the CSS as variables rather than absolute colours as seen in the CSS under the body tag. This means that if I update the colours I the root section, every instance that I used that colour would update to match.
I used the dark blue with white text for the main body of content, with the colours reversed in the footer. I alternated between pink and blue highlights for header tags and used the orange highlight for links. These colours are used consistently throughout the website.
To make it obvious when a link was hovered over, I chose to give the link an underline.
I had tried different methods, such as adding a “ > “ before the link text or making the text bold. I found that adding the greater-than symbol before the link made it difficult to read, as the text would move to the right instantly when hovered over. By making the text bold, it also made the width of the text container larger which caused problems in some places.
I tried giving the text a background colour, but that did not look very good as there was no padding around the text. The transition from no background also looked too sudden when instant, and any transition time to make it smoother removed the instant feedback when quickly hovering over links.
A simple underline solved all these problems as it had instant feedback, and as it is commonly used on mouse over links, users should be used to it representing links.
I chose to use the font Rubik, which is a modern looking sans-serif font with rounded corners. It has good readability and is available in many different styles and weights. I used a CDN from Google Fonts to import the font family, and as it is from Google Fonts, it could potentially already be downloaded on the user’s browser as it is a very commonly used CDN.
Font Types