Striking Insights

Gaining foundation in HTML & CSS through the storytelling of English folklore

What’s a better way to know more about a country than reading about their folklore? Similar to when people on holiday pop by the local museum to soak in the history. From Witches to Kings, there’s wealth of stories and underlying meanings to be told.

Using the timeless stories of 4 English folklore, I challenged myself in familiarising with the fundamentals of HTML and CSS to create an accessible website using a selection of industry-standard web development tools.


Roles

I assumed the following role designing this app:

  • User Experience (UX) Designer

  • User Interface (UI) Designer

  • Back end developer


Deliverables

UX/UI Design:

  • Competitive analysis

  • Styleguide

  • Personas

  • Site map

  • Low-fidelity wireframes

  • Mid-fidelity wireframes

  • HTML & CSS files


Project Specification

Duration: 6 weeks

Tools:

  • Photoshop

  • Bootstrap

  • GitHub

  • Visual Studio Code

The Challenge

“Create a factual narrative website with 5 linked pages using Bootstrap, HTML, and CSS, incorporating elements like embedded images, video or audio, maps, colour schemes, fonts, and code snippets while ensuring accessibility and SEO considerations”

Research

My research started with the collection of folklore stories and elements that will fill the webpages. Deciding the style of storytelling led me to research on who would best benefit/interest and lastly analysing the layouts of existing educational sites that are engaging and enticing.

Findings

  1. Teenagers are a segment of people we want to target as it is during these formative years that they shape themselves using the knowledge and teachings from their surroundings.

  2. Majority of similar sites uses geometric shape and bright colours to distinguish and establish relations with their target audience.

Visualizing a User-Centric Experience

This is where the fun begins. Using Bootstrap snippets as our web developer, there are predetermined templates at our disposal. This allowed me to try something new in exploring the flow of information each page will display. Using ripped up pieces of paper with small annotations increased the fluidity and flexibility to change as and when I wanted. I found it was also a great way to interact with prospects during the consultation process.

Investigating site structure

Creating this site map helped me keep in check that each page had the integral segments needed to be conveyed. Adding additional attention to the cadence of how each story is laid out so as not to bore the readers as they go through the site.

Keeping accessibility in check

This project introduced me to various online validators and industrial standard of accessibility. Namely validator.w3.org and chrome’s inbuilt lighthouse checker. This helped me as a designer to be thoughtful towards those who are less adapt to screens and improve my understanding of code.

Check out the flow

Check out the flow

Lessons learnt

  1. A site’s initial load time is crucial, using images with the smallest file size possible without compromising on the composition and intended display should be something web developers work towards.

  2. Much more can be done for we are only scratching the surface when implementing alternative text to images and colour contrast. Per accessibility test, extra steps such as synchronised text for video and keyboard accessibility can be added. Distortion in certain image when viewed on different web browsers indicated further adaptability can be added to the code to ensure a synonymous experience regardless of platform. Similarly, when inspected in mobile dimensions, certain text size can be altered for improved readability.