KnowGlobe is an interactive web application and game created for two classes in my second term of the D3 program at BCIT. The two classes were my second level design class and my Dynamic Content Design class in which we learned advanced JavaScript.
KnowGlobe
Educational Geography Game
Languages Used
JavaScript, HTML, CSS
Software Used
Brackets, Adobe Illustrator
Date Created
May 2018
Specifications
The requirements of the web application was that it was to be focused on desktop usability, have a focus on intuitive interactive features, and it educates the user on the topic of our choice. I decided to go with a simple geography game which teaches the user about the flags and locations of countries from around the world. The quiz and learning sections also teach the user about the culture and history of a few select countries.
The entire app was made using HTML and CSS with many interactive elements using JavaScript. The SVG game elements were created in Illustrator and translated into code.
Process
Styleguide
The first step before any coding was done was to create a styleguide which covered the theme of the webapp and created a recognizable brand. The styleguide covered the logo, the graphics, and the typography that would be featured on the app.
Prototyping
Using Balsamiq, the user interface was sketched out and tested to find potential problems with the planned sitemap. This process helped in creating a final layout for the application.
Creating Game Elements
The maps for both Europe and Asia were made using a free world map SVG which was then edited and masked to include the flags within each country. The SVG was then translated using Illustrator to make it readable code in the application.
Usability Testing
After coding a large portion of KnowGlobe, there was a class wide testing session. Each student tested each other’s applications. This step helped in any potential UI errors and crucial feedback in finalizing the application.
