Makersquare Week 4, 12PM

The ‘mockathon’ had been talked up for several days. The thought of building a complete app seemed laughably unfeasible, kind of like someone who says they’re going to work out the morning follow a past-3AM pub crawl (see 1:20). Nick, our instructor, has gave us instruction to make a Rock, Paper, Scissors game using Sinatra with a SQL database, where we’ll be writing our own SQL queries.

After lunch with one of my classmates, Christine Oen, I was pretty sure we’d be great partners. Chris and I balance each other well, and we intuitively knew we would get along - although, to her credit, it’s majorly because she’s so easy-going. When I was a high school teacher with Teach for America I knew how important it was to have the right partner: teams with more diverse personalities make cooler shit. So we explicitly told others we wanted to work just with one another. (Side note, Dec 2015: It was isolating and clique-ish, I know. But now we work together at the same 8-person company, so I think it worked well for us.)

We started with planning and making an ERD:

image

I used OmniGraffle to create our ERD. It’s an amazing app that creates diagrams, wireframes, flowcharts - anything you’d need.

As Christine wrote the login/signup code, using the gem digest/sha1 to digest the passwords in our user database, I started fleshing out the design.

I started with a bunch of basic images on paper - my favorite way to do mockups:

image

image

image

After feeling disatisfied with my vision, I went to images.google.com and searched “Rock Paper Scissors” for some inspiration.

I found this beauty:

image

I like the simple, thick text with the contrasting line drawings of human hands of this gif. I think websites that really bring in human elements - like ovenbits’ new site or Inspire, viget’s design interaction blog - are onto something great. There’s something really amazing about showing the user the connection of the people and art behind development.

So I cut up and cleaned up my original design:

image

I started comparing sans-serif fonts on GoogleFonts for readability and sharpness. After reading Butterick’s Practical Typography I’m convinced the most important choices a front-end developer can make are font and word choice. So even though I love Raleway I added a 0.1rem letter-spacing to it when I used it.

image

I created a Style Til.es to look at the rendered colors. I chose simple colors that help underscore exactly what our app is: a simple, mildly competitive game.

image

white, gray, gold, black == paper, graphite, energy/gold metal scissors, black ink on paper.

I started making our page in Foundation, deciding against Bootstrap after my classmate Joe sent me this video intro on Foundation urging me to read the comment that answered the question: Is Foundation a prototyping tool? Is Bootstrap? It was helpful and convinced me to use Foundation, which at this point I’m more familiar with than Bootstrap.

I started making basic outlines of the divs and form elements.

image

I stayed late that night before we went to the Makersquare one-year anniversary party at the Brazos office sketching hand elements we would use throughout the whole design. By this point I was completely in the design zone, thinking about how the user would flow through the website.

image

image

All of the hands I drew for the game site were based on photos from mine and Chris’ hands. There is literally a representation of the makers on every page.

Originally I had a lot of gray in the main login, but it felt bland. The energetic gold we chose brightened up the screen. I felt an immediate difference, as if all of the rods and cones in my eyeballs were suddenly firing off thousands more impulses - and thus, more energy and connection with the rendered page. I was so excited I had a hard time thinking about anything else that evening at the celebration!