Working with Design Tools

---

The Design Phase

This lesson and the one immediately following are intended to work in tandem. As a student, you can expect to be in this phase of our 'sprint' for about a week. The more time and effort we front-load on this project, the easier the prototyping and development will be later on. During this phase, you can expect to:

• brainstorm with a small group
• give and receive feedback
• learn techniques for getting ideas out of your head and communicated to your team
• learn to use tools that make designing those ideas even easier

By the end of this phase, you'll have designed a representation of an app that you'll eventually prototype and pitch.

Early Stages and Brainstorming

Whether you're coming up with your own idea for an app, or you've been given a brief, or set of instructions, from a client, the first step in our design-development process will be brainstorming. What are we trying to brainstorm? Well, the first step would be to think of things you want to be true about the app. For example, "easy to use." Or, "warm interface."

We can achieve this by creating a mind map. While pen and paper, or a whiteboard, work well for this, a great tool with no barrier to entry is Excalidraw (it's what we use for all our illustrations in this text!).

A good first phase is just throwing everything out there and seeing what sticks. With your team, you can have one scribe documenting everything being said by the team; check out the first step's example below.

After you all have everything out, start to organize it. You can see how we go from step one to step two by categorizing the different sets of information.

At this point, you should have a pretty good idea of what your app is and, more importantly, what it isn't. From here, we'll take our base of ideas and start to map out what a user will experience from end-to-end when using our app.

Storyboarding

Storyboards are meant to create a simple prototype for the experience a user will have while using your app. When they first arrive, what will they see? What types of steps or sequences will they move through to get from their initial screen to the end? Is there an end?

This is really the first time we've begun to think about the user experience (UX). We want to check all the required boxes from our brief or our own ideas, but we also don't want to overwhelm the user to the point of rage-quitting our app and moving to a competitor. While aesthetics play a role in a user's experience, the feel for how the app is 'treating' them when they interact with it is vital.

We can storyboard something like what's below for an app to order food from a table at a restaurant.

Researching

A big portion of design is research. The twentieth-century artist Pablo Picasso is credited with saying, "Good artists copy, great artists steal." Your research should essentially be an exploration of what different designs and experiences you can find in the wild match your own ideas and give you inspiration. Like the way a nav looks? Take a screenshot and store it away for later. Love a particular typeface? Make a note and research where you can find it. A certain color scheme jumps out at you? Note the hex or hsla values and keep it in your back pocket.

In reality, we weren't meant to categorize and index all this information in just our heads. As we'll see in the next lesson, Figma is a great tool for the design and prototyping phase of our process; within it, you can create a stylescape that easily captures all the content that influences you.

Some Set-up

Figma does require an account. However, you can use existing Google accounts or simply enter your email address and a password to sign up. The easiest way to get up and running with Figma is to watch the video below. In our next lesson, we'll go into more detail and actually start creating a design system based upon our research and influences.

An Introduction to Figma

VIDEO

Figma's Docs

While we feel good about the above video, Figma's documentation and community are incredible! Check out the Figma Docs.

---

Previous and Next Lessons: