Exam – Interactive

I chose to redesign the web page for Bjoerneparken, a local zoo. I wanted to add a brand design and interactive elements.

I decided to go for a mixture of photos and illustrations. People want to see actual images of the park and the animals, but the illustrations will enhance the appeal, especially to a younger audience. My main target group is children. I want the images to be children friendly.

The look I aim for will be a cut out design.

Logo:

I thought about having a sihuette bear with other wild animals within its shape. I also thought of using the paw print. Then I had this idea of the paw print with a children’s hand print within the shape. This could represent the parks intentions, bringing the wilderness closer and forming a bond between humans and wildlife.

I want a cut out design and the front page should have a striking design, drawin the audience to it. It should be interactive and the image should be the navigation.

Maybe it could be some sort of map and the elements being interactive

Maybe it could be a collage of graphics and images.

It could have the shape of a bear and the park elements inside of it

Could it start off as a spot on a globe, then with a click show the park, then with further clicks show the different pages?

I love this one. I would love to have the navigation pop up around a wheel

I want this type of colour sceme

I have made a logo:

I had the idea of pulling the human and the wild life together into the design of the logo. I want the whole brand design to be childen friendly and went for a font to go with that.

I need iconic art at the front page for my cut out design. I gathered some icons and images for inspiration.

• 

• 

• 

• 

• 

• 

Moodboard:

Research:

https://www.dyreparken.no/

https://www.edinburghzoo.org.uk/

https://bronxzoo.com/

Sketches:

• 

• 

• 

• 

• 

I had this idea that I could make a navigation wheel for the front page. I did eventually abondon this, as I didn’t find a way to use it throughout the pages. A fancy, but useless idea for site full of text.

The rest of the page I designed in Illustrator and as I went along coding.

Coding:

I coded using Bootstrap 4 and Visual Studio Code software.

These pages was very helpful:

https://www.linkedin.com/learning/bootstrap-4-essential-training/welcome?u=43268076

https://www.w3schools.com/

https://getbootstrap.com/docs/4.0/getting-started/introduction/

I also tried all kinds of ways to learn JavaScript to a level where I could make my interactive animations. I tried using Animate as well, but couldn’t get around the flash issue. Using html5 was an option, but I just couldn’t bring the javascript into html properly. I would love to make that work, though, as I really liked the idea.

Conclusion:

I managed to make a child and family friendly page with interactive elements, but I did not succedd at making an interactive map and animations. I do however think the overall design works really well for the target group and all screen sizes.

Note that I haven’t added all the animals, but you get the overall idea.

Web page adress:

http://hedviglien.com/bjorneparken/bjorneparken.html