The Sweetener

The work we do stuff we love

March 11, 2014

New Project: Gryphon Groupe

The Gryphon Groupe Homepage

My latest project with the Gryphon Groupe launched last week and it’s making the rounds on them gal sites. Matter fact, one day left to vote for us on the Awwwards, so we’d love your support.

Gryphon Groupe

Gryphon Groupe is a new type of consultancy for the financial services industry, merging finance, tech and design with Voltronian awesomeness. Founder and managing director, Norbie Schickel, took flight from his cushy gig at Erst & Young to strike out and make something truly unique in the consultancy arena. He’s young, crazy smart, purpose driven, and holding down all those other leadership traits with a vengeance. I have no doubt that he’ll quickly grow the Gryphon Groupe into something amazing.

Gryphon Groupe Think Blod Homepage section

Proportional Fluid Grid System

This site is built on a mobile-first, proportional fluid grid – a holistic approach to RWD that creates a very meaningful relationship between grid system and typography. Essentially, you set all sizings to percentages and ems – fonts, columns and gutters, media queries, etc, then define a modular scale for the typography. Now everything can be globally controlled by applying a % font-size to the body, beginning with 100% on mobile and increasing as you move up.

Gryphon Groupe Thoughts page

Modular scale typography is proportionally maintained across all resolutions and the need for specifically targeted media queries is largely diminished. This technique fosters a super lean build that is truly resolution/device agnostic. Gone are the days where I had to write a boatload of media queries to tweak mobile layouts.

Gryphon Groupe Mobile Layouts

Defining Features

Other defining features of the site include big ole’ background images with a touch of subtle parallax, unique off-canvas navigation, full-width grid sections, sexy ass page transitions, and even a nifty canvas line chart animation.

Gryphon Groupe About page Canvas Graph animation

Go Give Gryphon Groupe a look:

GryphonGroupe.com

How I Did It

Or, if your interested in the design story, check the long form entry in our Folio

In The Wild

Gryphon Groupe is currently doing its thing on the major CSS galleries, including the Awwwards and Zurb’s Responsive Gallery. Here’s a current rundown:

Show Comments 0 +

Leave a Reply

Let's Make Contact

Ready to start your monocle dropping project?

Back

Build something awesome with us!

SoSweet! Creative is located at 65 Schley Ave. in sunny Pittsburgh, PA 15205. Our phone number is 412-506-7311 and you can reach us with the form below or by emailing directly to hello@sosweetcreative.com


9+8=?