Opportunity
To showcase my understanding of graphic design for the web.
Action
Only use HTML and CSS to produce a website. By striping it back to basics I am able to show that I have a strong understanding of the basics of graphic design for the web. Using colour, fonts, typography and layout to express an abstract from a book I have enjoyed.
Impact
Using only colour, layout and typography I have produced a website that appears timeless. Without the distractions of any images, or special affects often created with JavaScript, the website loads very fast.
I particularly like the use of unconventional rules, such as lower case for titles.
In the planning stages I received criticism over the use of the font in the second paragraph. I did hear and agree with the potential faults of using such a strong and disjointing font, however in the context of the abstract of the text as well as its use amongst other choices which break typical typography rules the resulting affect is that these elements are crucial to the very simple design presenting an overall timeless and aesthetically pleasing website.
Tech
- CSS
- HTML
- Fileziller
- Whimsical
- Adobe Photoshop
Skill
- use of colour
- typography
- layout
Creating the Product
Content First
Content First – It is always important to start with content. The whole reason for a website to exist is to display content to the user. Once you have your content all ready to go then you can also make sure that you organise it effectively and efficiently.
I start all of my projects with a mindmap. I like to visualise all of my thoughts and ideas, for some people seeing everything all at once might be overwhelming, but I always want to explore all the parameters because this helps me to choose what my priorities are, in this scenario there is not much information needed and so this process did not take long and then it made sure that I could form the content. Which in this case was just copy.
In this project I would only have copy to collate and create. I did this by collecting this in a whimsical folder, the name of each file is the title of each static page, apart from extract, this will be the copy of the index page.
The next step is to think about the different types of content and how it should best be organised. In this instance because the scope of the website is limited I did not use any planning steps. The information Architecture is each text file of the copy is a static page, on the index page will be the extract. The menu will be the name of each static page.
Wireframes
In this project I have used whimsical to collate my ideas, and collect and create my content. So I have used whimsical wireframing tool.
Mark Up
Choosing Colour Palette
For this project I used a technique that I talk about in this blog post. You can see that the final version of this website it looks like a very direct interpretation of the cover of the original book. I was unsure on first on being this obvious with the colour palette, as I often like to use projects as an opportunity to express my creativity. However, once I had used this method to extract these colours, they were just too aesthetically pleasing to ignore.
Fonts
The purpose of the project was to use the fonts and the typography to express the book extract. I am currently very fond of using sans serif fonts so I started the process with using the title of the book as a phrase to search through the google fonts console. The font Jost had an amazing variety of weights. Using the boldest of Jost for the titles and a much lighter weight for the main text gave a great variation, it can be common to use a display font for a title, however I have instead used the layout and weight of the font to express the hierarchy of the main heading.
What is unusual about the font choices here is that the main copy and the headings are the same font, where as the content in some of the copy is different. This is unusual and goes against common practice. However instead of using CSS to highlight text or alternative colours like other people had done on this project I decided to use the font itself to express the different voices in the abstract. In this use case it works well as it matches the tone of the content, and by making sure I am careful about the over typography (line height, font weight and font sizes) it does not distract from the rest of the content.
Prototyping
Something that is different process for me with this project was how I prototyped the website. I usually do prototyping with HTML and CSS. However in this instance I used Adobe Photoshop to do some mock ups. In this instance because I was new to creating websites from scratch I think it was helpful as I could explore variations and receive feedback about the different versions.
However would I be doing this project now it makes sense to me to do this as a website as there aspects that might not work, and also I can test things like accessibility more effectively.
Final Project
the reason I use HTML and CSS to create prototypes instead of mock-ups is because I can make more accurate decisions about the typography and layout. For example in this project, on my landing page I have three different fonts, and the heading font and main copy font are the same, so I need to be able to play around with the font weights, sizes and line heights to make sure that I get the balance of these elements. As you can see from these mock ups, they are very similar to the final product, however there are crucial changes to the balance of these fonts in the final version of the website.