Stay Regular v3

As my design studio Stay Regular approached it's yearly anniversary, it became time for the regularly refreshing of the website's theme. This would be the third major revision of the site since it's (semi) static inception using the Kirby CMS.

The Goals

We set clear goals in the beginning to define the direction of our design:

  • Mobile friendly
  • Animation
  • WOW factor
  • Better understanding of brand/services

The Result

stayregular v3 frontpage

stayregular v3 iphone 8 mockup blog

Visit the live site

Animations & Microinteractions

Parallax

We wanted to bring our page to life with microinteractions and animated elements that enhanced the user experience beyond a static interface. Parallax was a quick, effective, and mobile friendly method to create a bold masthead for the frontpage. Combined with our vector illustrations and the Anime.JS animation library we were using before to create the randomized drawing effect, the parallax took everything to another level.

Accordion

Don't make them work for it, make them play for it. Accordions became an effective way to take the wall of text we had before for services and transform it into an elegant interface.

"Pop Out" Hovers

This animation was important to take our projects and literally lift them off the page as the user interacts with them, bringing them closer to the user.

Newsletter

To announce the release of the new website changes, I designed and coded a newsletter to transmit through MailChimp. A mockup was created in Sketch, and it was coded using the Foundation for Emails framework by ZURB. The result was a perfect email in a majority of popular email clients.

stayregular v3 newsletter