Greatest Sign Maker one-page website

Filed under: interaction design, user experience / product design, visual / UI design, web

 

greatestsignmaker.com on a tablet

Starting back in 2012, one of my favorite hobbies is creating fan signs I bring to Oakland Athletics games. Since then, sign designs & requests have been ramping up. I needed a place online to showcase my work through a stand-alone site. I’ve created a responsive one-pager home for my sign designs to live at greatestsignmaker.com.

Visit greatestsignmaker.com »

Requirements

In my few years of sign making, I’ve been in scenarios that have prompted me to create a site. Usually, it’s one of these situations:

  • I’ve asked seatmates if they have a Twitter or Instagram account so I can suggest that they can follow me online. My social media handles are a bit tricky, so I wanted to give them an easy-to-remember URL that easily links them to my social media accounts.
  • Other fans that have seen my work would like to learn my backstory to how this passion started.
  • Interested fans will like to learn more about my signs & have asked if they’re posted online somewhere.
  • Other fans have awesome ideas for sign concepts & would like to reach out to me somehow.

From these, I was able to compile a list of requirements for my new site to accomplish:

  • This new site would likely be pulled up while at baseball games, so it should look good on handheld devices.
  • Each sign needed to have to have a unique URL so I can directly link to a design.
  • It needed to be built off WordPress so I can make my own edits since I’m familiar with the platform.
  • Links to my different social media accounts needed to be displayed prominently.
  • It would be easy to send messages to me for various sign requests or other general information.

Initial designs

Initial sketches for mobile layout

I’ve had the idea brewing in the back of my mind for more than a year. With a rare free evening, I sketched a few ideas, then took my best idea & Photoshopped it into a polished design. The hardest part of designing for yourself is the temptation to overdesign; restraint was exercised.

I hypothesized that my site would likely be viewed on a handheld device, I designed for a small screen first, then created a layout for tablet-sized screens. I designed desktop last because it doesn’t have as many limitations as mobile. My thought was that if I was able to iron out any layout issues on mobile, the translation to a desktop site would be easy (it was).

I output my full-sized mockups on InVision, a website that allows me to upload & share my mockups. Also a easy-to-use platform to collaborate & comment on my designs, too! I use it to write out my detailed specs & open discussions on parts of the design. Highly recommended for designers!

Building my idea

I found a developer who worked within my budget on Odesk.com. Prices are manageable as long as you can provide your own design, even better if you’re explicit in requirements. Nobody likes scope creep.

Since it’s a simple one-pager, I just mocked up the design in three different ways for the different view formats & other views to show what it would look like with the contact form & a thumbnail grid view.

Thumbnail view

I usually provide redlines in those situations where the developer may need more detail, but I usually provide the InVision mockup with some cursory specs first to gauge how much direction is required. Luckily, the developer was able to easily understand my screens with my directions that redlines weren’t required.

Detailed specifications sample

Also, it helps the developer when the design has detailed mockups & directions because it helps provide an accurate price quote early on in the project. I also implemented a bonus incentive for completing early or on time.

Here’s a link to my InVision screens (it will open a new window). Make sure to turn on comments to see my specifications & notes:

View my InVision screens »

Collaboration benefits

I enjoy working with my developers primarily because I have huge respect for those who are able to execute on my ideas. It always delights me to know what developers are able to create.

Many times, they always provide technical feedback. In this project, the developer mentioned possible issues with pre-loading all the signs, especially since I’m currently 50 signs & rapidly increasing. The solution was to pre-load all the thumbnails, but slow load the designs as they’re requested from the server.