The Eclectic Encyclopedia is my vision of a digital, interactive, and creative approach to encyclopedic learning, inspired by the DK Eyewitness books and the whimsical I Spy books I grew up with. I wanted my Encyclopedia to present information from a more vibrant perspective, avoiding the overwhelming text-heavy design often seen in traditional formats.
To achieve this, I relied on vintage collage images to populate the main page of the site for two reasons: to intrigue visitors and to encourage exploration. By omitting headers and navigation, the simplicity invites users to click on an image, which then directs them to a secondary page filled with intriguing information they might not have discovered otherwise.
The goal is for people to learn a variety of random yet useful facts daily, about topics they might never have encountered. The Eclectic Encyclopedia serves as a stepping stone for deeper research into new subjects, offering a regenerative experience that cycles through and displays different information every 24 hours, providing an opportunity to learn something new every day.
This project is currently on pause but I will return to it to add features that will encourage users to retain the information they have learned through interactive quiz games.
Try it out:
WIREFRAMES & Testing
I used Figma to demonstrate on a surface level how my website would work; each image, when clicked, will take you to an information page. Although in the Lo-Fi Prototype all the images are linked to one page (done out of convenience), the actual concept will has individual HTML pages allocated to displaying a specific type of data. For example, there will be a page for displaying information on snakes, a page for frogs, and a page for plant life etc.
The elements on the main page were all intended to function the same way, so I had to test and fine-tune a single element before adding everything. The functionality was designed as follows: Images would load on the main page, users could click and drag images anywhere on the webpage, and clicking on an image would take them to its designated page.
Secondary pages would call data from an API, displaying information for 24 hours. Thanks to Interact.js, I was able to incorporate a dragging feature. However, I needed to tweak the code so that users were not redirected to the secondary pages when they stopped dragging an image.
During the initial testing phase, I experimented on a single image to implement the controls I had in mind
The API I selected, Ninja API, worked quite well. I added extra code so that instead of calling the API every time the page loaded, each call had a 24-hour time limit. Some API calls were generalised, so for example, if you searched "Snake," an entire array of snakes from A-Z would load. This was initially challenging until I figured it out.
Given an array for a simple search, I added extra lines of code to select a random number from the array every 24 hours, with each number corresponding to a species of snake. This made it easy for me to start selecting what to display on the main page. By designating each JavaScript file with the same code but with variations to the URL pulled and different queries, I had quite a database to start with.
PROTOTYPE (HTML, CSS & JS)
In the live prototype, you might notice that I've abandoned the drag-and-drop feature and replaced it with a hover-and-enlarge function instead. Unfortunately, I was unable to resolve the issues with the drag-and-drop, so I switched to the latter, which worked just as well.
Screenshot of the home page.
The initial idea for the information pages was to display the image that corresponds with the name of the animal. However, I scrapped this idea due to the inability to find an API that provided accurate images. For now, I'm using a looped video that is relevant to the entire topic.
Screenshot of the frog information page
Information on how to use the site can be found by clicking the question mark on the home screen.
