Antlers and Acorns

Brief

Problem

The client wanted a more custom, personal portfolio website built from scratch. She needed to showcase her artwork and requested I design and build her website.

Solution

Design and build a new portfolio website that captures the client's artistic aesthetics and displays her work in an easily accessible manner.

Why take on this project?

I knew this would be a great opportunity to work in tandem with a client to acquire assets and incorporate an overall design reflecting her aesthetic.

Goal

Something I wanted to keep in mind for this project was to make the client’s personal aesthetic come through in the overall design of the website itself. Even the name of the website, Antlers and Acorns, reflects her style and subject matter. The client’s work has an emphasis on woodsy forest creatures. She provided her own work for main backgrounds of the site, as well as the log that separates the header from the rest of the page. It was my job to then develop the site, incorporating these assets in a way that was responsive.

Challenges

Site Responsiveness

With phone usage so prevalent today, it’s imperative for websites to work on any size screen. One of the most difficult parts of this project was making the site responsive. Respecting the client’s time, I needed to find ways to work with the backgrounds provided and not have her create different background assets for each screen size. To do this, I used media queries that captured the best parts of the background at different screen sizes. This consisted of focusing on the middle of the screen, then shifting the background to the left, and changing font sizes and colors for smaller screens.

Frog Animation

Another challenge was editing the client’s animated frog to feel more like it belonged in the background in which it was placed. The dancing frog (front and center of the heading) initially didn’t have a shadow that made it feel part of the provided background. Using free software I found through googling, I was able to take her gif file and split it into its original, separate still images. With Photoshop, I then recolored the frog’s shadow in each frame to be a dark green, instead of the original grey. Using additional free software from googling, I found a gif maker and put all the individual frames back together. The end result makes the frog look more like he belongs in the background he’s been placed on.

I will continue to work with the client to update her portfolio with new content, always ensuring the site follows her aesthetic and modern conventions.