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
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.
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
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.
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.