“Ch-ch-ch-ch-changes…”

In the singing words of David Bowie, “Ch-ch-ch-ch-changes…”

Every developer can agree that their code is CONSTANTLY changing and updating. In the tech world, legacy code hardly exists for a long period of time. Change is inevitable. After learning an amazing framework, I knew the website I had built previously, Storto Productions, needed some awesome changes.

Approaching this, I wanted to accomplish a few goals:

1. Improve overall performance, accessibility and SEO
2. Clean up the overall design and flow of their website
3. Use more images and less text
4. Have more fluidity in the responsiveness
5. Add a blog page

After learning and using GatsbyJS on my own website, I knew this was the perfect framework to use. There are a plethora of options to host the website (even for FREE), apply different popular CMS’s (like WordPress), tons of fun plugins and you can use React! The biggest perk I think is GatsbyJS makes your website fast! Frankly, the website I initially built for them was sluggish (especially when it came to loading images). With this tech at hand, I knew this website will start to approach Road Runner speeds (meep meep).

First and foremost I wanted to change the website from a single page to multiple pages to reduce clutter, add a more fluid experience and keep the user on the site. While designing the pages, I wanted to place buttons that helped navigate the user from the initial page to the final “Contact us” page. Most buttons keep the user on the website. I kept all buttons stylistically distinguishable and even added a simple animation on hover.

In the original website, there was an embedded promotional video you can click to view at the top. I felt this took up too much space and can be placed more tastefully within the design without impeding the user’s experience. I decided to design the home page in a similar fashion to Google’s National Park’s website. Now the reel subtly plays in the background showing off their work while staying out of the user’s way.

Simplicity. Every design decision I made, I thought of this. I thought their first website made the user more distracted by the clutter.

Changes I made are:

• I eliminated all the gold leaves
• Reduced the color palette down to neutrals and the company’s pop blue color
• Less text and more images
• Used more sans-serif font instead of serif/script font

On the portfolio page, I decided to embed their work for the user to view. If the user doesn’t want to view the video, they can see screenshots from their work below. This keeps the user on the page, informs them about the company’s work, and reduces text clutter.

Lastly, I wanted the user interactions to be as clean and effortless as possible. all buttons are distinguishable and lead the user through the website. I changed the active highlight colors to match the theme to keep accessibility. I changed the menu slightly from their initial design. The hamburger icon is no longer in view and there’s a slight tint on the page when the menu is active. I utilized the react-burger-menu npm plugin instead of my coded one. This plugin has a myriad of options to animate the menu and change the design.

Overall, I found this redesign quite the adventure! Amidst it all there were bugs to fix (not surprising), lots of learning and the satisfaction of accomplishment. Seeing the improvement in my work continues to motivate me farther down the path in web development and design. I have no regrets starting this arduous journey, only more questions, more ideas and more improvements. Improvements can be made and changes will continuously come; however I’m not apprehensive about any of them. Like David Bowie sang, I’ll let “time change me” for the better.