Allison Zadrozny

designer | Student @Makersquare | developer

MKS C8 1st Hackathon Pt 2

Recap:

This was our finished Rock, Paper, Scissors App from Makersquare Week 4. Today marks the beginning of week 6, and this project feels so ancient! I’m still really proud of all the attention to detail that went into this project.

Thinking back on what my teammate Chris and I accomplished, the most important thing about our project was our communication as a team. We organized ourselves efficiently (using Trello), made goals for everyday we were hacking together, and were clear about what we needed from each other.

One night, I was working on how to populate the tables we were using with the correct information from our database using embedded ruby. I leaned over Chris’ shoulder, talking about how a method should be written in our database file in a pseudo-paired-programming style. At this point, it was a late night and we were both tired. Chris took her hands from the keyboard, placing them on the table, and said: “Just tell me what you need as a data structure. Then I can write a method to return it to you as an object from the DBI.”

With that goal in hand, we both got back to working.

Lesson: it is never helpful to micromanage your teammates. However important it is to challenge the people you are working with, you must trust them so that you both grow. Work towards a specific goal, and the stuff you’re wasting time on will naturally fall away.

I loved this project. Though I didn’t do all of the back-end with Chris, I was able to write a few back-end methods for creating, storing, and sorting data as well as the majority of the front-end.

The ability to switch from front to back end helps a project tremendously. I was able to communicate exactly what I needed from Chris to make our front-end work, and hack on the back-end as needed. This project was an excellent encouragement of my goal at Makersquare: becoming a front-end developer and designer, with a strong understanding of the engine under the hood.

You can also see this project on my Behance.

O Captain! My Captain! our fearful trip is done;
The ship has weather’d every rack, the prize we sought is won;
The port is near, the bells I hear, the people all exulting,
While follow eyes the steady keel, the vessel grim and daring:

But O heart! heart! heart!
O the bleeding drops of red,
Where on the deck my Captain lies,
Fallen cold and dead.

O Captain! My Captain! rise up and hear the bells;
Rise up—for you the flag is flung—for you the bugle trills;
For you bouquets and ribbon’d wreaths—for you the shores a-crowding;
For you they call, the swaying mass, their eager faces turning;

Here captain! dear father!
This arm beneath your head;
It is some dream that on the deck,
You’ve fallen cold and dead.

My Captain does not answer, his lips are pale and still;
My father does not feel my arm, he has no pulse nor will;
The ship is anchor’d safe and sound, its voyage closed and done;
From fearful trip, the victor ship, comes in with object won;

Exult, O shores, and ring, O bells!
But I, with mournful tread,
Walk the deck my captain lies,
Fallen cold and dead.

—Walt Whitman

MKS C8 First Mockathon: Part 1

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).

After lunch with one of my classmates, Christine Oen, I was pretty sure we’d be great partners. I’m an ENFJ  and she’s an INTJ. Chris and I balance each other well, and we intuitively knew we would get along. 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 people we didn’t want a third person to throw off our groove.

Our goal: Make a Rock, Paper, Scissors app.

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 a developer.

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 party!

Work in progress. Huzzah for early mornings! #watercolor #illustration #design #wip #watercolour #panther

Work in progress. Huzzah for early mornings! #watercolor #illustration #design #wip #watercolour #panther

Got up super early this morning before #makersquare to enjoy a slow breakfast, coffee, and some creative time. Getting back into my #watercolor habit.  (at Starbucks)

Got up super early this morning before #makersquare to enjoy a slow breakfast, coffee, and some creative time. Getting back into my #watercolor habit. (at Starbucks)

How to Use Foundation for your Website

1. Stare at the Grid documentation page for an hour or so, doing this:

3. Know who your users are and why they come to your site.

4. Make a mockup. Not a fancy one, but crank out the ol’ pen and paper.

5. Build your page for several hours, doing this:

6. ¡Voilá!

7. And then you realize how many hours of work good design demands.

This is Makersquare.

Re-design of a theatrical awards website in Austin, TX for Makersquare week 1. Since the website is more an informational archive, the design focused on readability and simplicity. It would benefit from a search box!

I took a Girl Develop It course on Intro to Responsive Web Design the weekend I wrapped up this project. I took a lot of what I learned that weekend and designed the site for mobile-first.

I used FitText, Style Tiles, HexColor, simple media queries, and a quick redesign of their logo using Photoshop. It was a fun project!

Nice and cozy on a Saturday night with an Old Fashioned and my dear friend Sublime Text.
This is Makersquare.

Nice and cozy on a Saturday night with an Old Fashioned and my dear friend Sublime Text.

This is Makersquare.

Writing ruby rspecs for a Rock, Paper, Scissors game where I loose to my dog. Now I know I’m into the 3PM coding delirium.

Writing ruby rspecs for a Rock, Paper, Scissors game where I loose to my dog. Now I know I’m into the 3PM coding delirium.

It’s a fluke, really.

It’s a fluke, really.