Style guide for landing page and email template
       
     
email template design for desktop and mobile versions
       
     
Visual design - spirit yoga - segment
       
     
Next fold segment
       
     
Next fold segment
       
     
Next fold segment
       
     
Mockup of Landing page, Visual and graphic design
       
     
       
     
Html5 web banners
       
     
Style guide for landing page and email template
       
     
Style guide for landing page and email template

Using a limited palette, this is the style guide for Spirit yoga’s email templates and corresponding landing pages.

email template design for desktop and mobile versions
       
     
email template design for desktop and mobile versions

Building in responsiveness to your email template designs is quickly becoming something that is expected

Visual design - spirit yoga - segment
       
     
Visual design - spirit yoga - segment

Full size screenshots of different segments of the landing page. The one above is the view above the fold.

Next fold segment
       
     
Next fold segment
Next fold segment
       
     
Next fold segment
Next fold segment
       
     
Next fold segment
Mockup of Landing page, Visual and graphic design
       
     
Mockup of Landing page, Visual and graphic design

Medium - High fidelity version of the landing page design side by side with the grid I created and used in layout. It's a hierarchical grid with some modular and multi-column elements. On the right of the desktop version is the mobile version of the page. Play the screen capture video below for a closer look at the elements on the page - the browser frames the different segments of the page so it gives a better view of how the user would be experiencing the page. There's a post on my blog related to this: How I came to love grids

       
     
Screen capture of landing page - Spirit Yoga
Html5 web banners
       
     
Html5 web banners

Pop up banner (720 x 300) This is an animated .gif version of the html5 and .swf versions (because my portfolio doesn’t support html5 canvas. I use Animate to create html5 animations.