Web Development for an information tool about Anne Frank
- Front-End Development
- Sublime Text
Out of the interest to learn HTML, CSS and Jquery, I decided to create a website based on a book that left the most lasting impression on me as a teenager, " The Diary of Anne Frank". The website is a glimpse of the house, how it used to used to be, who lived in which room and what happened to them.
The target audience is anyone who is interested to learn more about Anne Frank. It can be used in addition to the book in order to get a visual feel of what the space was like.
I wanted people to see the house go into the “exploded view” when they clicked on the roof themselves. A lot of people found that very fascinating. Also being able to “select the rooms” added a playfulness to the interaction.
The entire project has been implemented using HTML, CSS and Jquery. I used the anime.js library to animate the exploded view and css animations for fading in the modals and the entire house when it loads for the first time.
The entire artwork for the project has been created by me using Sketch. I wanted the website to have a sad feel and hence the choice of dark and muted color palette.
The main challenges I faced during the implementation of this project were
Adding a zoom effect
I wanted the entire page to zoom -in when an element is clicked on, I tried implementing this using the zoomooz library, unfortunately the library has bugs ( mentioned in it’s documentation) that get triggered if the elements it is being added on has margins.
Selecting the rooms
WHY I WANTED TO DO THIS
- Even though this website was only my first big coding project, I feel I now understand the work flow used by developers. I consider this will be extremely valuable when designs have to be handed off for development in a job.
- I also feel I now understand some of the basic terminology and concepts to have a conversation with developers incase the design has some technical problems that need changes.