The purpose of the internet and it’s services is to make our lives easier, whether it’s sending a message to a friend or co-worker through platforms like Facebook, or LinkedIn or more complicated tasks like organizing and analyzing data through programs like Excel or Google Sheets. Their interfaces are intelligent and intuitive and (I think) they shouldn’t take too much training to get started. For example, I’m writing this blog right now on Grammarly (hence, no spelling or grammatical errors). This is my first time using the service, and I didn’t need a walk-through to get started.

You can follow a lot of the same tactics and techniques employed by these big software companies when designing for SaaS at any scale. Below are a few things I try to keep in mind when tackling a new project or feature.

First off, let’s search the world-wide-web to see if the feature, concept, or service you’re designing already exists. After scouring Dribbble, Behance and Product Hunt for hidden gems, screenshot all your favourites, see what they do well, how they do it and if you think could be done better. Research is a super important phase of interface design and can be a great way to get the ball moving.

Now, let’s move onto the most exciting part of the design process: wireframing. Wireframing is the foundation that illustrates where elements (like buttons, images, copy, etc.) will exist on the page. Wireframes should have a white background, no images, a legible typeface, minimal copy, and no colour. That means, keep your pencil crayons in your backpack and “keep it simple, stupid.” I use Balsamiq to wireframe because of the limitations of the program. The reason for keeping wireframes very rudimentary (design-wise) is to not get hung up on colours or style and to keep the focus on functionality.

Before opening Photoshop or Sketch, it’s crucial to get your copy squared away. Copy is essential to the way the user will interact with software. It sets expectations and tells the user what effects their actions will have. Many of our interactions with computers have consequences; clicking a button could mean ordering a pizza, sending an email, or deleting an important file. Setting the users expectation can be done with clear button copy, directional copy or confirmations, and warnings.

Once we have our wireframes and copy all squared away, we can roll up our sleeves and start designing the interface (adding colours, style, typefaces, etc.). I begin by bringing my approved wireframes into Photoshop, then I place elements on top and add brand colours and typefaces. To ensure you don’t stray too far away from the wireframes, it’s always a good idea to keep referring back. Playing around in Photoshop or Sketch is the part design process that actually feels like your designing, but it’s important not to over-design. Great interface design is usually subtle and understated.

As we have already uncovered at the beginning of this process, there’s an endless collection of successful services and app interface designs. There are regular interactions, like filling out a form, scrolling, and clicking. You don’t need to reinvent the wheel. For the most part, users are smart and don’t need their hands held.

If you keep these things in mind when designing interfaces, I guarantee you will be a very successful Web/Interface Designer, get a raise, and never lose an argument or a bet.