Part 05 - Mockup

Let's sketch it out together

Last updated by Red Cap Tom on June 24, 2020 at 12:31 +0300

This is no longer maintained

This tutorial series was cowardly abandoned by its creator mid-way due to (exciting!) circumstances. While I can't promise I'll ever finish it, I hope you found some of it useful. If you really-really-really-really want me to finish it, nag me at hey@redcaptom.com.

The Video (Scroll down for the article)

Coming soon!

But I Don't Want To Draw Pictures, Tom…

A note about this article vs. the video

The articles for parts 1-8 in this series were written after recording the videos. This means that in many cases, there are style (or actual) differences between what's in the video, and what's in the articles.

Also, If you're here while not all the articles are fully written - apologies! I am in the process of transcribing, editing and uploading them here and in dev.to.

Note that while I try to convey the same amount of information in both venues, I (more often than not) fail miserably. I generally prefer creating new content to refactoring old one, so this process irks me and in the process of just getting it done I'm cutting corners.

If the article doesn't feel “complete” enough - please watch the video. Oh, and tell me that I need to step up my game! We're all in this together, after all, aren't we?

All right, so we talked about getting set up with the tooling, the tech that we're going to use, how to get ideas, how to verify them and all the other nice things that come along with starting a Shopify app project. I think we're ready to dive into the coding, but before we actually write any lines of code, I think it's important to understand what we're going to build.

I, personally, never possessed the ability to actually jump right into the coding. I never could. I need to have some sort of visual aid to hold me responsible to the vision I wanted to build, or I make a mess of things. Really, really crappy spaghetti-unmaintainable-hellish-garbage code. The kind of code bad programmers - nay, bad people - write.

Solution? Mock it up! If I have a sketch of the screens in front of me in front-end projects (or a schema of the the flow in back-end projects) I tend to stay on track.

In the video I actually walk through the mental path of what I want to have on the page, and then build it piece by piece. Since I don't think the process translates well to the written medium (read: I'm lazy and doing this transcription after recording the video) I will just say a few words and show you the final product.

When thinking about a project, try to put yourself in the user's shoes. What buttons will they expect to see? Where on the page? What are they used to? What do they need to do? Remember that you are building a product for people who are intensely focused on creating more revenue and saving operations time. Is your app's value clear from the screens? Are they easy to understand, and easy to use?

Spend some time thinking before coding. It's surprisingly useful, and can save you literally hours in follow-up fixes. 100% would recommend.

Anyways, here's a view of the final sketch:

moqups-mockup

Wiring It Up

Having just a sketch is nice, but we will eventually need to output some sort of HTML to our users, right? JSX - the thing that we're going to actually output from our React app - is just HTML on steroids (which is actually a completely false statement from its implementation perspective, but we'll talk about that later).

Anyways, to come closer to the final codeneeded, I like to wire things out in plain HTML. This gives me the barebones feel of a page before having to actually do all the styling logic, and allows me to catch any possible interface bugs (for example, wanting to put too many buttons in a row, which looks fine in my sketch but bad in the HTML wireframe).

What I do, then, is create a preliminary sketch of how the HTML is going to look like, without any appended CSS. Here it is in all its glory:

base-html

And the final HTML:

<html>

<head>
    <title>
        Countries We Ship Button
    </title>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>Countries We Ship To Button</h1>
        </div>
        <div class="prompt">
            <p>Please select the type of button you'd like to create:</p>
        </div>
        <div class="typeContainer">
            <div class="singleButtonType">
                <div class="type1Example">
                </div>
                <input type="checkbox" value="type1">Type 1
            </div>
            <div class="singleButtonType">
                <div class="type2Example">
                </div>
                <input type="checkbox" value="type2">Type 2
            </div>
        </div>
        <div class="toggleButton">
            <button>Toggle</button>
        </div>
    </div>
</body>

</html>

And now we have a basic HTML wireframe of our application's main page.

In the next article, I'll deal with the CSS and making this resemble what the final, Polaris-based version will look like. In your own project, feel free to stop after this stage if you feel like you have enough inspiration to get coding!

An offer

If you're working on a Shopify app, and your app uses Polaris for the front-end, I want to hear from you. I am willing to sit down and run a debug session / add a new feature with you for your application, if you agree to stream it live with me (or record it and publish it later). It's not easy writing a full-stack JS app, doubly so when you're not from within the ecosystem. Let's do it together and help all the people! :)

E-Mail me at hey@redcaptom.com, and let's set it up.