🍔
×
Menu
Try reaching out?
Write me an email
You can also find me on. . .
🐷2019 © jasonchee.me
Thanks for reading!
This website was built with Jekyll, stylesheets prepared by myself, and all articles are written in html(not markdown!), version controlled with Git, repository hosted privately on Github, site hosted on Netlify, SSL certificate provided by Let's Encrypt. Tools used include Sublime Text 3, iTerm, Sketch, Dokku. This site does not collect or track data. Anything you provide will never be shared with public eyes.

Apr 29, 2019

How I DesignApr 29, 2019

Recently, I applied for a part-time/contracted web design job. I was ecstatic to find out that they build most of their software in Rails and in Vue(something I am trying to get better at). In the end, it seems like things didn't work out for both of us. They seem like a great company to work for so I put in a lot of effort in the cover letter. This is something I've never done before, but I must say, I really enjoyed putting it together.

Below is part of that cover letter. The idea behind this was to show the CEO and co-founder how I currently work as a designer.

***

How I design

The conversation always starts with the client. What are we building? Once we define the core features and model our database, I'll start mapping out the software on pen and paper. I understand things always change, but we always try our best to stick to the original game plan.

  • I jot and list every page I believe will make up the software. Afterwards, I'll list out the necessary components that make up each page, and map out an input/output if need be. At this point I am designing tiny pieces of the UX & UI.
  • Ryan Singer, Lead Product Designer and one of Basecamp's original members is a person I really admire. He's well spoken, smart, and very passionate about his job. One of his methods of creating UI patterns for software is a practice I have adapted and overtime it has proven it's value.
  • I'll then start wireframing those pages. Always with a thick marker and paper. Below is a strict layout of an admin panel I designed earlier this year.
  • I hope one day to save enough money to purchase an iPad pro and Apple pencil to make sharing my wireframes a bit easier.
  • Then I'll make my way onto sketch always sticking to my paper and marker wireframes.
  • I'm not a Sketch expert, but I know enough, to show enough. I can use Figma as well and completely removed myself from using photoshop.
  • Time to hardcode my designs. My favorite part of the design cycle.
  • Lately, I've had a knack for writing my own SASS stylesheets. I do have experience with UI libraries in the past like Bootstrap, Bulma, and Tachyons. Using those libraries has helped me understand so much about HTML and CSS.
    I use partials, unfortunately not in this example.
  • I call this the right way to prototype.
  • Showing this to a client is proof of concept, developers work progression, and definitely a sure way to make someone smile.
    You can't tell, but it's responsive.
  • Thanks to Rails ActionView, I can help prepare static dummy data in the controller, which can be rendered in the view with ERB. The backend programmers I work with, really appreciate this kind of help. Below is an example of an instance variable I created for a project I've worked on in the past.
  •     @menu = {
          collection: [
            {
              type: "Cheese",
              ingredients: "Cheese, Tomato",
              slice: "20",
              med: "110",
              lg: "150",
              color: "#F4BD3A",
              letter: "C",
            },
            {
              type: "Garlic Mushroom",
              ingredients: "Mushroom, Cheese, Tomato",
              slice: "25",
              med: "130",
              lg: "190",
              color: "#299144",
              letter: "G",
            },
            {
              type: "Pepperoni",
              ingredients: "Pepperoni, Cheese, Tomato",
              slice: "25",
              med: "130",
              lg: "190",
              color: "#E96438",
              letter: "P",
            },
          ]
        }
    
  • And here is was it would look in the view.
  •     <% @menu[:collection].each do |pizza| %>
        <tr>
          <td id="dotted" style="background: #fff;">
            <div style="border-radius: 50%; width: 80px; height: 80px; background: <%= pizza[:color] %>; color: white; font-weight: 800; font-size: 48px; text-align: center; line-height: 1.63"><%= pizza[:letter] %></div>
          </td>
          <td id="dotted">
            <div><span style="font-weight: 800; background: #fff; padding-right: 0.5em; font-size: 32px;"><%= pizza[:type] %></span></div>
          </td>
          <td id="dotted" style="font-weight: 800; text-align: right; font-size: 28px;"><span style="background: #fff; padding: 0 8px 0 18px;"><%= pizza[:slice] %></span></td>
          <td id="dotted" style="font-weight: 800; text-align: center; background: #fff; font-size: 28px;"><%= pizza[:med] %></td>
          <td id="dotted" style="font-weight: 800; text-align: center; background: #fff; font-size: 28px;"><%= pizza[:lg] %></td>
        </tr>
        <tr>
          <td></td>
          <td><div style="width: 220%; font-weight: 200; margin-top: -20px; font-size: 28px;"><%= pizza[:ingredients] %></div></td>
        </tr>
        <% end %>
    
    Yup, that's in-line styling. See the example

    Thanks for reading!

    Back to top