Web Development for an information tool about Anne Frank

 
 
banner.jpg
 

Skills

  1. Front-End Development
  2. Illustration

Tools used

  1. Sketch
  2. Sublime Text

Duration

3 weeks

 
 

Try the Website!

 

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.

Link to Github

 

TARGET AUDIENCE

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.

 

 

IMPLEMENTATION

CODE

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.

Screen Shot 2018-03-31 at 11.06.50 PM.png

 

ILLUSTRATION

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.

Screen Shot 2018-03-31 at 11.14.02 PM.png

 

 

CHALLENGES

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

What looks very simple as an interaction can actually have a ton of Javascript running behind it. This was an important takeaway for my future. To get the room selection happening, I initially imagined I could do it only using css:hover, however that only allowed me to manipulate the element that was being hovered over, what I wanted was to influence all the other elements too when one element was being hovered on. This required me to write Javascript and add and remove active and inactive classes on the parents and sibling elements which I took a while to figure.

 

 

WHY I WANTED TO DO THIS

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