Supereight Studio Logo

Journal notes

We’re showcased in .net magazine!

Matt Hamm

Our website has been showcased in the responsive gallery of November’s edition of .net magazine. We’re pretty chuffed to get some recognition for the efforts to make the site fully responsive for different devices and screen sizes. We are humbled to be along side Paravel‘s Build Windows site too. You can download the page in pdf format from here to see the full article or read the transcript below.

 

Supereight Studio 

Supereight Studio (www.supereightstudio.com) is a small and friendly British design studio run by Matt Hamm and Peter Orme.

Its new site, which builds on a logo created by Brent Couchman (www.brentcouchman. com), features bold type and large photographic backdrops (which unfortunately contribute to the rather large page size). Each section name is set in the brilliantly chunky Stratum typeface, with the remaining copy dutifully offset by the more rounded Proxima Nova.

We ask Supereight creative director Matt Hamm about how the studio approaches the design of a responsive site.

“We’ve learnt that it’s totally unrealistic to make Photoshop visuals for every single breakpoint in the design,” is his response. “It’s better to have a strong idea of the direction you want to go in and then just design the break points in the CSS as you build. It’s all about tweaking until it feels right.”

Homepage requests/size: 36/1.95 MB mobile, 36/1.95 MB desktop

Comments via Twitter



Custom Google Maps API v3 Styles

Matt Hamm

We’ve had quite a few people comment about the Supereight contact page. Many folks want to know how we styled the Google map so that it looks desaturated with red roads. Okay! Here’s how we did it:

We used the Google Maps JavaScript API v3 Styles function and it’s pretty straight forward to implement if you have a basic understanding of the Google Maps API.

Styled maps allow you to customise the look of the standard Google base maps, changing the visual display of  roads, parks, and built-up areas. More detailed information can be found on the Google maps developer’s guide:
https://developers.google.com/maps/documentation/javascript/styling

There is also an easy to use Styled Maps Wizard:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Below is the snippet of code that we use to style the contact page map for the Supereight website:

Comments via Twitter