Role
- Developer
Tags
- WordPress
- Advanced Custom Fields
- SVG
- SCSS
I have a deep appreciation for subtlety in design, finding joy in the hidden nods, stories, and Easter eggs that only the most observant eyes can detect. Holland, Michigan became my home when I was 16, and I have lived here for over twenty years. When the city approached our agency to create their new promotional website, I eagerly volunteered to take on the role of lead developer.
Live in Holland Michigan is a brochure site designed to serve as a tool for our local tourism department in promoting our unique town. The design for this project was entrusted to one of my favorite colleagues. When he handed over the design, he had one request: “Can you make it cooler though?”
The design files I received were in Photoshop format, providing a static representation of the design. This meant that there were no animations or micro interactions included in the initial design. The files did not offer a responsive view, and the design covered only three pages: Home, Enjoy Holland, and the Single Detail template. However, there were plenty of components designed to allow flexibility if new pages needed a design. Despite this limitation, I appreciated the trust placed in my abilities by the designer. I’ll touch on a few key details that I loved building.
Location, location, location
The Enjoy Holland page template served as our standard landing page design and acted as the parent to the detail pages. It was used for pages such as Schools, Holland Living, and Neighborhoods. During our UX testing phase, we received feedback that everything felt too similar. To address this concern, we decided to add an interactive map to the Neighborhoods page.
Given our budget limitations, designing and coding an elaborate map was not feasible. However, the city provided us with a map of the neighborhoods. We devised a simple and efficient solution: trace the neighborhoods as grouped SVG shapes and place them on the map image. This allowed us to create an interactive experience where users could hover over each area and be redirected to the correct neighborhood.
Since I had recently learned to animate SVGs with code, this straightforward approach felt clean and required minimal effort to implement.
Try spinning, that’s a good trick!
Holland is known for a couple things, tulips and windmills. Visiting the website (or the city) and you get it. Having a full screen navigation menu with the typical X to close was just begging to spin like a windmill. Also those staggered animations on the social links? Yes, please. Small animations like this make me smile. UI with tiny animations raise the quality level and they’re quick to turn around. I find that tiny animations are more pleasing than larger or longer animations. This is crucial for elements a user can interact with.
// Spin the wheel, make sure it starts as an X instead of + at 45deg
@keyframes windmill {
from {
transform: rotate(45deg);
}
to {
transform: rotate(405deg); }
}
// Iterate through children, delay animation to stagger
@for $i from 1 to 5 {
.social-nav a:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}
Check out the codepen:
See the Pen Untitled by Sang Kim (@somesang) on CodePen.
Seasonal activities
Depending on when you visit the site, you may notice my favorite part of the design. The color scheme changes for Spring, Summer, Winter, and Autumn. I wrote a PHP function to programmatically add the correct classes for the theme depending on what month it is. On top of that, admins are able to manually change it within the WordPress dashboard. I love a nice gradient, so it’s even nicer to have a full screen nav showcase the colors. It’s dark mode, but for seasons.
There’s a lot of easter eggs in this site (e.g. you can see my old office in the footer), and it was a blast to build. Being able to add your own flair to something just makes it hit closer to home.
See the full site here.