For my web design, I had a few ideas in mind. However, there are a few things that I’m sure about, such as I want my website to have bright colours which reflects a lot of Jessica’s own work. Also, after reading her book and searching upon how much she likes and want to inspire the children of tomorrow( through her books), I want my website to have a more childish essence as if I’m designing the website for both young children and adults to enjoy.

The first step is that I quickly sketched some simple layout ideas onto paper;

Then I showed my ideas to the teachers and discussed what is possible in terms of coding. I understand that since my knowledge in coding is still at the beginner level, there will be designs that are still too advanced for me to recreate in code. Luckily my teachers will be there to support me if there is a feature too advanced for me to do in code, and I’ll also be doing lots of self-learning in areas that I haven’t learnt yet.

After their critique, I decided on a final design. Even Though I call it the final design, having done the “The streets of crocodiles” web project for IXD101, I know that the design might be twigged and changed once it gets coded. Below is the general layout of my final design on Figma;

While researching Jessica Hische to write my essay, I saw one particular picture of Jessica Hische and fell in love with it. The picture really portrays Jessica’s positivity and kindness. And so I knew it was the header image I wanted;

Since the header image is such an important part of my design, I eventually decided to choose my colours based on that image. In the image, I see that it is prominently orange, thus I decided that my major elements, such as the navigation tab, h1 and h2 were going to be orange as well. I also see bits of yellow and green on her shirt, will which be the colour of the more minor elements in my design.

Before I start coding, I tested a few different colour combinations on Figma;

After applying each colour combination to CSS and seeing it in action, I decided that the second combination (from the left) were the best.

One thing that I noticed was seeing the colour being layout in Figma is a little different from actually applying the colours to my website. On Figma, I’m able to see the whole webpage layout before me, but the online website is bigger and you only see one section at a time. This is why now I’m a fan of prototyping the colours on Figma and testing them out in CSS before I decide on the best colour combination, Figma lets you see how the colours work together in the big picture, testing them out on your website lest you focus on how the colour work on each section of your webpage.

The next thing I need to decide on was the font. Jessica Hische is a lettering artist specialising in fancy and decorative lettering art, so I had to make sure that an equally decorative font is used for the headings. To find a suitable font, I used Abode Font and created a web project. The Frist few fonts I tried out were good but not what I was looking for;

Casey made a close cut, but when I increased its’ font size and used it as my header the reliability was very poor.

Then I made another project and this time I found the perfect fonts;

Apart from the design aspect, I also learnt a few more usual things in coding such as;

How to add text-shadow to increase the reliability of decorative fonts

learning how to code for a collapsible element in HTML and CSS as I realised near the end of my project that I had away too many references to place in the footer. It made the footer look out of proportion(way too big), the collapsible element is a nice place to hide my references.