Making of TSR Part 3: The Aesthetics

In what is essentially the second iteration of this website, I’ve made sweeping visual changes that were precipitated by malaise surrounding the original visual concept. I wanted a website that looked unique and reflected my personality. With Version 1, I was achieving that feeling to some extent, but the design felt clunky, forced, and unrefined. I followed my artistic instincts, and I’m very happy with the result, which reflects more than 300 revisions on the main page alone. Here are a list of visual improvements that I’ve made to the site:

• Changed the body font to Source Sans Pro Light and unified it across all pages. This gives a more modern and refined feel than the previous body font, Cuprum.

• Changed the relative sizes of the heading font, Monserrat, across all pages.

• Changed the menu bar to Source Sans.

• Created a gradient background behind the new home page logo. This achieves an interesting visual effect when the page is scrolled, in that the header seems to appear out of thin air. I inversely carried this gradient effect into the footer.

• Added quotes to the “Listen” and “Follow” page for both visual conformity and conceptual strengthening.

• Added a dark blue textured background to most pages along with a parallax effect. This background adds visual interest and personality. It also adds a small degree of asymmetry.

• Created custom graphics for the top of each page that flow, or disappear into the text, both creating a continuous feel to the header of each page and commenting on the original concept of circles from the home page.

• Created a textured “Contact” background graphic and placed it at the bottom of each page. With the Divi them, this section only needed to be programmed once before it tracks throughout all pages. The inclusion of this section solved 2 problems:

1. It allowed me to place the news feed somewhere other than in the middle of the page. This previous location felt cheap and tacky and violated the “trinity” design idea (mentioned below).

2. The addition of a slick graphic in this section gave it weight, importance, and grit. As such, it no longer looked or felt like an unfinished section dangling aimlessly at the bottom of each page.

I’ve found that circles or semi-circles create a sense of continuity to the eye. I want the viewer to draw parallels between this continuity and the continuity of my work and my personality.

I’ve also found that in many cases, groups of three seem to promote visual balance in a sort of “trinity”. I wanted this to parallel a balance in my personality. The original logo endeavored to achieve this, but it fell flat in the grand scheme of the site. I’ve fostered the following “3s”:

• 3 major partitions (Home Page)
• 3 primary columns and icons (Home Page)
• 3 forms field in the contact section
• 3 empty spaces between most page headers
• 3 rows of film content (“Play” page)
• 3 columns of blog content (“Follow” page)

Divi 2.6 was a fantastic update released just recently. The most important part of this update was the ability to scale every single element to desktop, tablet, and mobile using independently-entered values. I did just this, and I feel that the page translates to tablet and mobile almost flawlessly. This feature is a must, as I cannot tolerate sloppiness in translating the site to mobile platforms.

More to come!