2016

Filter Beds

▶︎ http://filterbeds.com
Filter Beds Logo

HTML5 — CSS3 — JQuery — JavaScript — Page Design — Responsive Design — Logo Design — UX / UI Design — Information Architecture

01 / The Brief

An online platform for the band Filter Beds. The band wanted an engaging and memorable website that avoided the prevalent blog-style of many band websites.

Filter Beds Responsive Mobile View

▲︎ Social Media Links: Mobile View

02 / Design

The logo plays both a display and navigational role across a horizontal parallax page. As the user scrolls, text at differing depths fragments and unites with the aid of sticky scrolling.

Filter Beds Responsive Monitor View

▲︎ Portfolio Link: Monitor View

03 / Development

For succinct CSS and responsive design with maximum accuracy, I used Javascript to resize all elements based on viewport aspect ratio breakpoints rather than CSS media queries.

The parallax effect itself was implemented using just CSS as I found the effect smoother than with Javascript — as well as less verbose and easier to manipulate if required.