Extended Practice Brief #1: Design development - Website High Fidelity Wireframe

Following my low fidelity wireframe I made I started to make the high fidelity version.

Homepage:

 

• Centred is the title 'Learning Baybayin', 'About' page on the left and 'Learn the Characters' page on the right.  They are also translated in Tagalog, providing a duo-lingual purpose for both speaking and Filipino users. 
• They will act as the main/ permanent bar on the website for navigation.
• 'Learning Baybayin' - can be clicked to go back to the homepage on ALL pages.
• 'About' - can be clicked to get more information about the History and Use of the script (the writing will be translated in both EN and FIL). 
• 'Learn the Characters' - can be clicked to go to the main characters page. Provides a clear and simple navigation system to learn each character in an efficient and quick way with minimal writing - focus on how each syllable is pronounced, used in terms of Tagalog and English and additional context. 
• The illustration on the bottom half is 'Baybayin' in its original script form. It's simplistic and fits the homepage well as it gives an intriguing look to how the script is written and look. 
• The information used is the final section of a Filipino poem called 'To My Fellow Youth" (Sa Aking Mga Kabata) which talks about loving the native language(s) of the Philippines  .
• The last stanza implies the use and lost of 'Baybayin', there I thought it was the most appropriate as gives the users an indication the the purpose of the website - which is to educate people who wants to learn the language, whilst giving linking back to traditional Filipino art and methods to promote the usage of the native language.

"Our language is like that of others,

With its own alphabet and its own characters,
But they vanished as if a sudden storm had come upon

A boat in a lake in an age long past."

"Ang salita nati'y huwad din sa iba
Na may alfabeto at sariling letra,
Na kaya nawalá'y dinatnan ng sigwâ
Ang lunday sa lawà noóng dakong una."

Learn the characters:

• The Main characters page which is intended to initially show all the characters/ punctuation in the alphabet. 
• Split in sections according to their kind e.g. Vowels/ Patinig or Consonants/ Katinig. 
• Slipt in three's for larger projection on the screen as well as scrolling function to see all the characters. 
• How the characters are pronounced are written in the Roman alphabet.
• The page or any characters can be clicked on in order to go to another page that show more details of each characters.  

More Details Page:

• Split into two sections showing the characters in smaller size and space for more details of each characters.
• When a character is clicked more info on the character is shown in the space and illustration showing it's definite character.  

Typeface:

• The title typeface used is Poppins Medium 15pt capitals - for it's simple and approachable sense of geometrical character which fits perfectly with the learning and educative aspect of the website.
• The body text used is Mazius Review 20.09 Italic 35pt/ 30pt - which contrasts well with the characters of Baybayin for it's modern sharp construction giving it a strong and contemporary feel and look. 
• The Baybayin typeface I used is 'Matatas One' 'Matatas' meaning fluent in Filipino. It is a modern approach to the traditional scriptive/calligraphic style of baybayin writing for it's more rounded and shortened curves and stems and modified strokes. I chose this typeface as it's easier to read than most calligraphic styles which helps with learning it as well as it's more legible and easier to remember and write. In addition unlike the traditional Baybayin alphabet, the 'd/da' and 'r/ra' are differentiated with a different character for better understanding when writing in words/sentences especially in Tagalog where a lot of words have both sounds/letters it helps it to be less confusing and easier to understand for beginner learners. 

Colour:

• I'm using a very limited colour palette of white, blue and yellow to use as a highlighting force for the characters in yellow rather than to overshadow it with various colour choices. The characters themselves evoke interest and a sense of playfulness and intrigue that it is helped with a colour which balances information, aesthetic, legibility and an 'educative' 'serious' mood that helps drive the informational purpose of the website. The colour choices aren't too much nor too dull but enough to keep the website looking fresh to the eyes. The three colours are also main colours of the Filipino flag, giving a subtle reference to another Filipino culture context, which users may see when viewing the website themselves. 

Thoughts & Reflection:

A good start to the website I think, but even though I have made the low fidelity wireframes there were still small functions that I didn't consider enough like the transitions and how they can be done in XD since there are lots of restrictions so having to get around them has slowed me down a bit. But, so far, I will continue to create the website and the illustrations for the about page and its content for me to continue designing the Characters page and hopefully refine the website after all contents have been made.