Carnivore Website

Title: Carnivore, Carnivorous Plants Website
Art Director: Sean Brodbeck
Category: Web Design, HTML/CSS

This website features information about the different types of carnivorous plants. These plants are interesting because they derive their nutrients from insects and small animals rather than soil. To accompany the information I created many assets such as icons and edited photographs. After protoyping the site in Adobe Xd I coded the site with HTML/CSS. The website is comprised of the home page and four subpages that are each about a different type of carnivorous plant.

#B6DA9A

#db6c79

#CE84AE

#27474e

Logo & Icon Set

This website features many pictures and line drawings of various carnivorous plants. To go along with different information and facts I designed an icon set in a similar style to the freeform line drawings.

The logo is a wordmark with the dot of the ā€œiā€ in carnivore flying into the ā€œvā€. This is meant to represent what carnivorous plants are famous for, eating small creatures and insects.

Mockup of a webpage with the title at the top reading 'how do snap traps work' with icons and text below.
mockup of flypaper trap page
mockup of pitfall trap page

Micro-Interactions

This website features many micro-interactions, one of these is featured here where the navbar items snap open much like the movement of a venus fly trap. I kept these interactions in the same linework style as my illustrations and icons.

Another micro-interaction that appears on this site is the overlayed images on the other pages of this site. When the user clicks on a term next to the plant's illustration they will see a photograph appear.

Gif of navigation micro-interaction.Mockup of web page on an ipad and an iphone.
Gif of snap trap picture overlays.
Gif of flypaper trap picture overlays.
Gif of pitfall trap picture overlays.
Gif of bladder trap picture overlays.