I decided to start by looking at some different layout options on paper, before moving onto Figma for create a higher fidelity mock-up
I started by creating two potential layouts on paper, I used paper because I wanted to concentrate solely on layout. Before moving on to thinking about typography, colour or images. I developed two layouts, both with navigation at the top and a header/hero image. On the first layout I then moved on and used images stretching the whole width of the page to separate the different sections of the text. I liked the idea of using an image as a clear, visual break between the sections, and felt this was a strong layout to explore, as a mock-up in Figma.
My second layout used images down the left-hand side of the page, using a third of width of the page, with the rest of the page dedicated to text. The height of the image would equate to the length of the section of text, again denoting each separate section. I thought this layout had some strong points, but that the full width header image and header section didn’t fit with the one-third image, two-thirds text split for the rest of the page. Therefore, I decided when creating a mock-up in Figma to divide the whole page and see whether that was a better solution.
You can see both layouts in the image below:
As I moved to Figma to create high-fidelity mock-ups, I needed to decide on a colour palette. From reading the text, it spoke a lot about warm weather and luscious fruits, so I decided I wanted a palette that included warm hues. I used the colour palette generator website coolors.co, and came up with the colour palette below, an off white and not fully black for the background and body text. A claret as an accent colour for the navigation, footer and headings, as well as my blockquote. I used the yellow for my links in the navigation and also the footer text. I would have liked to include the pink as my header text colour, but it didn’t meet web accessibility guidelines for contrast with the background so I had to use the claret as it was AAA rated for contrast.
Now, I needed images to go with the text, for this I used the free stock image site unsplash.com. I read the text and took my inspiration in image selection from it, the descriptions in the text made me think of a old, Mediterranean style location in the summer. The first piece also mentioned sitting in a room with books, so this became my main header image. A description of a fruit basket, a square and gardens, led to my other image choices to link in with the following text.
For my typographic choices, I knew I wanted a serif typeface for my headings, this text was written in the forties, so I decided I wanted a classical style of typeface. I used Google Fonts and found the typeface Playfair Display, which had different weight choices so I could differentiate my h1 heading from my h2 sub-headings. I also found it easily legible at these larger sizes so perfect for my needs.
For my body copy, I wanted a sans-serif typeface, again found on Google Fonts called Raleway. I wanted a sans-serif typeface for my body copy as research has shown sans-serif type to be more legible at smaller sizes and preferable for accessibility, and as someone who is dyslexic myself this is an important factor for me. I found Raleway to be a perfect typeface as it is legible but also has a light font-weight which I feel suits the text and pairs well with Playfair Display.
Using the typefaces, colours and images I had now decided upon, I created the two layouts below using my paper wireframes as a guide. I made the changes I described above to the second layout and I feel both layouts have merit. For me, I think using images to separate each section is my preferred option, although I think I would like to shorten my line length to help with readability. The second layout works, and the shorter line length helps readability, but for me the distinction from section to section isn’t as clear. There fore with minor alterations the first layout is the one I would like to develop to be my final webpage.
This week’s task for our final deliverable was to convert the design of our Street of Crocodiles webpage from Figma into HTML and CSS. As we already had the design in Figma with the layout and colours selected, this task was all about marking up the HTML and creating the CSS to replicate the design.
I started the week by creating this webpage with the text marked up in HTML and some very basic CSS, just adding some colour. I also have no navigation or images at this point. You can see this version below.
