Planning Punk
By: Alex Walker
Tags: Punk Rock, Web Design, UX Design, Graphic Design

I assembled the site using a mixture of Adobe Illustrator, Sketch 3, and Tumult Hype. I would export vector assets and concept drafts from Illustrator, do layout in Sketch, and export the assets into Hype in the end. It was later uploaded to Bluehost through Cyberduck. I decided to skip wireframing the site as Andy had provided some solid sketches of what he was looking for and so I knew what I would be putting on each page. After I made a quick concept of the website front page in Adobe Illustrator, I took low-resolution screenshots and sent them to Andy.

Concept art for the front page

Andy loved it. The logo was not symmetrical so I had to do some work to balance the visual weight of both sides of the page. It had a bit too much visual weight on the right due to the high contrast of the “TV” and the bulbous part of the orange area, so I added in a darker teal background (with the Japanese symbols Andy had provided) to balance it. I knew that this would be a work in progress until the end, the page had to feel visually balanced while remaining technically asymmetrical.

The balancing act wasn’t quite done. But it was getting better.

Moving to Sketch, I exported my assets, lined them up (making sure the sides had equal padding), and assembled a sketch for the mobile view. The mobile site was going to be the same as the desktop site, with the same amount of features and layouts.

The front page of the website is the first thing the user sees, and I wanted to immediately show an example of Andy’s filmography. I had the idea to build a “window” through the logo, showing off some of his work in a moving video loop. So I made a transparent .png “frame”, with a background that was the same hex number black of the site’s background and put a video behind it.

I dropped the assets into Hype and set the png to scale with the top three sides of the internet browser window. I set up 3 different layouts in Hype so that the design could be responsive.

At this point I realized that embedding a video was going to be an issue, the size was too large for the load time to be acceptable, so I made it into a .gif using GIPHY and placed it behind the frame. The resolution suffered, but the loading time was much faster, and the roughness of the gif added to the punk aesthetic.

The main page with the gif frame is my favorite part of the site. I like the weird shapes and the motion inside of the frame. The text is aligned with the right edge instead of the left. It’s weird, but not too abrasive to scare off his clients. It kept the unconventional ideals of Famous Friends alive, but it was much more usable than that early concept. It was just the sweet spot of interesting design and function.

Up to this point, it had been going smoothly, but I hit an issue that set me back.

In the first sketches for this site, just beneath the large centerpiece logo was the navigation bar. Booking was placed in the center so users would be drawn to that tab first. It looked different, and Andy loved it.

-image?

When I began constructing the website, I realized that having free-floating centered elements like in the prototype was going to be a problem. The elements did not stay aligned with the top title text or with each other. I tried grouping them into more of a single element so that they would stay together, but at this point, I realized why the navigation bar gets placed where it is on so many websites. Navigation bars are usually aligned along the top of the webpage. It scales responsively to the size of the window, justified to the top left corner. This way, the top left corner will always be in view so the user can navigate through the website no matter the size of the window. When elements scale to the lower right corner, it tends to overlap or obscure the content in the middle of the page.

Trying to get the navigation menu bar to stay aligned with the rest of the content on the page took enough time that I knew I would not be making the 7 to 8-hour estimate if the design was not changed. I tried to sell Andy on another layout since but he liked the unorthodox bottom screen navigation bar design too much.

A top-left justified navigation bar would be much easier to construct

Andy decided the centered navigation bar feature was worth a time extension. So I went back to attempting to keep everything aligned and out of the way of the content in the middle of the page.

I figured out a solution, albeit a time-consuming one. To solve the problem of the navigation bar hiding important content as the page resized, I manually scaled it for each different breakpoint and left a lot of space for the navigation bar to move up and down without getting in the way of the content except at extreme window sizes. This solution was not ideal, and the result was a semi-responsive website. But the site looked good at most sizes, and despite the strange placement of the navigation bar, it was functional. Andy was happy with the result, and so I moved on to filling out the other pages.

All final except for the legal information.

There were three pages to construct: the “About” page, “Booking” page, and the “Reel” page. I programmed java to set the navigation buttons to change colors to one of the three colors of the scheme when you were on that page. The “About” page was easy enough. I just used Andy’s handwriting font and applied it to the text he gave me. The text contained some brackets and symbols that were not included in Andy’s handwriting font so I talked him through some different ways to say what he wanted to get across.

The “About” page

Next, I moved on to the booking page. I asked Andy which booking package he sold the most because I wanted to give it the most attention. He told me it was the Solo package, so I made sure it had the highest contrast of the three against the black background.

The “Reel” page had examples of his music videos and it was, unfortunately, shoe-horned in. With all the time spent on the main page and getting the navbar working, I couldn’t justify any more time on the project for what I was getting paid. I was able to insert the videos as Vimeo links. I encountered a problem where the videos would continue to play when you left the tab or went to another page. To fix it, I wrote in some javascript to stop the video when the user clicked on the arrow button or any of the navigation elements. This solution worked semi-reliably, and with all the videos in a row, I was able to finish up the desktop site.

As I went, I updated all the mobile layouts with the same content as the desktop site. I think the mobile site actually turned out better than the desktop since it did not have the alignment issues that plagued the desktop development.