Designing an infographic to break down skateboarding fundamentals
January 01, 2005
Distilling some fundamentals of skateboarding into an infographic, published in Sarasota Herald-Tribune, was incredible fun, involving research, sketching, layout design, and later integrating of HTML and CSS.
On Deck
Skateboarders pride themselves on their ability to put personal flair in their performances. Their tricks are composed of fundamental moves. This infographic explains four fundamentals: ollie, grind, slide, and flip.
First: The Ollie
Modern skateboarding begins with an ollie. There have been other milestones, but this maneuver gives a skater his or her power to defy gravity. The following sketches break down a skater’s typical method.
1 He begins with the toes of his back foot on the rear edge of the skateboard; he places his front foot in the middle of the deck.
2 He slams the tail of the skateboard to the ground with his back foot.
3 At the same time, he raises his front foot and kicks it slightly forward, which levels the board in the air. He brings both feet up as high as possible.
4 He prepares mentally for landing; it takes confidence not to bail.
Alan Gelfand invented the ollie, which was a nickname given to Gelfand by a fellow skater. After the Oxford English Dictionary made “ollie” an official entry, Gelfand is reported to have commented: “I never realized how many people were affected by one little move an 80-pound kid from Hollywood, Fla., made in 1976.”
Two: The Slide
Besides rolling, skaters also slide across an object using the bottom of their boards. They may use any part of their decks for a slide. They should, however, carefully gauge the speed of their approach. For beginners, it can be a vivid lesson in inertia: they often fall backward when their skateboards start to slide because of traveling at too slow a speed.
Three: The Grind
When the metal axles, or trucks, of a skateboard scrape across the edge of an object, it’s appropriately called a grind. Skaters must approach the object they wish to grind at a fast speed. As their trucks grate against the edge, they adjust their balance to transfer more of their momentum downward and push their boards forward.
Four: The Kickflip
In the air, skaters also make their boards flip; the most well-known flip is the kickflip. The following series shows a skater’s steps in performing a kickflip.
1 He places his front foot a little closer to the side edge of the deck.
2 He ollies and drags his front foot off the deck’s side edge.
3 With a flick of the ankle, he sets the board spinning.
4 A solid landing requires patience and determination.
Skating legend Tony Hawk is among those who have struggled to learn how to do a kickflip. He wrote: “I started trying them right after Rodney Mullen invented them, and they seemed impossible.”
SOURCES:
Jacob Benison, "On Deck," Information Graphic, Sarasota Herald-Tribune, 1 January 2005 (Print Edition).
Responsive design with CSS grid template areas
Including this project in my portfolio, I converted it from the static realm of print design to a responsive web graphic. The responsive nature of this infographic is achieved through the use of CSS Grid Template Areas, ensuring that the content seamlessly adapts to different screen sizes, from mobile to larger desktop displays.
Here’s how the responsive CSS Grid Template Areas are utilized:
- On small screens, such as mobile devices, the layout is straightforward, providing a single-column view for easy readability.
- As the screen width increases to a minimum of 640 pixels, the infographic transitions to a grid layout with four areas.
- On larger screens with a minimum width of 768 pixels, the layout further evolves to accommodate the increasing screen real estate.
