Game of Thrones interactive infographics
Illustrations not mine. I was commissioned to create interactive infographic websites featuring custom Game of Thrones / A Song of Ice & Fire art, done in different themes.
Responsive Design
The biggest challenge was making these designs responsive, especially the pin-up calendar that had to conform to different screen orientations and sizes.
Social Sharing and Embeds
Each character needed to be shareable with their own custom thumbnail and blurb. Visitors can either post a link on their social networks or embed them on their website with iframes.
Pin-Up Calendar
The shapes used in the design are all unicode characters displayed with pseudo-elements :before and :after. The circles are also CSS border styles and transforms. Social icons are SVG. The pages flip up with 3D transforms.
Embeddable iframes for each character
Custom link previews for each character when shared on Twitter
Dungeons & Dragons Alignments
Character alignment is revealed on hover while the SVG background morphs into a different shape.
Custom link previews for each character when shared on Facebook
Embeddable iframes for each character
