Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

Giant Robots Smashing Into Other Giant Robots | Ali Aas
Pablo Picasso famously said that “good artists borrow, great artists steal”. The
same can be said for interface design. The building blocks for your product are
already out there, you just have to find them. Looking at similar products will
provide context and highlight knowledge gaps, but it won’t push you to think
outside the box. Instead, try to determine the key aspects of your product that
are addressed by solutions in other spaces. Gather your blocks, then remix them
into something ownable.
In Boston, we just kicked off a collaborative side project with
Fore Design. Our goal is to build a baseball scoring
app that helps engage the casual fan. We started the project with a
design sprint and began
the diverge phase
by searching for building blocks.
Apps or websites that you already know and love can be an easy jumping off point
for this activity. A more structured approach is to identify the potential needs
of your interface and then scope your search to those needs. For our app, we
honed in on the following:
Gestures & Drawing: Scoring a baseball game is a hand-drawn, creative
process. When you’re done scoring a game, you feel like you’ve created
something unique to you. We looked to apps heavy with gestures and drawing to
determine how their interactions feel more human.
Game Mechanics & Game UI: Scoring a baseball game feels like a game in
itself. We looked at our favorite games to help us understand how custom
interfaces tackle complex interactions.
Education: Learning to score a baseball game is difficult because the
terminology is esoteric. We looked to education apps and app tutorials to help
us understand how learning can be fun, simple, and consumable.
For our baseball app, we found 10 different apps that inspired us. We documented
each building block on the whiteboard with a hand-drawn “screenshot” and a
descriptive explanation.
Traditional baseball scoring is a manual process that uses a paper scorecard
and a pencil. While our app should leverage the benefits of digital, we also
don’t want it to lose the feeling that you made it yourself.
Paper
strikes the balance between analog and digital by allowing users to draw shapes
with their finger that magically snap to ideal proportions. In our app, we need
a way to document that a batter made it to base. The analog version of this
notation is to fill in the lines of a diamond. The concept of shape snapping
could be useful in translating the pencil drawn diamond to digital without
losing the tangible quality of the analog version.
All the current baseball scoring apps use tables that drill down to more tables,
which make them feel like a chore. We want to avoid this by using animations to
nudge the user into action.
Tall Chess
takes the same approach and uses a quirky wiggle to show that a move hasn’t been
confirmed. In our app, if a batter hits and other batters are already on base,
we want to let the user know they should update the location of the other
batters. This wiggle animation could be an easy way to encourage that behavior.
Learning to score a baseball game can be difficult because it relies on jargon.
For example, a double play could be a 6-4-3 in which the shortstop (6) throws it
to the second baseman (4), who then throws it to the first basemen (3). We want
our app to be able to teach the traditional way of scoring while also making it
fun. We’ve considered some form of inline tutorial to help the user understand
how plays are recorded.
Lake,
a drawing app, has a nice tutorial that introduces the user to the UI. While it
could be argued that effective UI doesn’t need to be explained, a tutorial with
the right touch of fun can introduce concepts in a way that doesn’t make it feel
like an instruction manual.
Once you’ve collected your blocks, it’s time to remix them into something new.
For our sprint, we used our remaining diverge activities to remix. We started
with Crazy Eights
and then moved onto
Storyboarding.
In the end, we didn’t use all of the blocks we gathered. Instead we found that
the most effective blocks organically entered our solutions and elevated them.
We are now working on our final solution and we welcome you to follow along
on Dribbble to see for yourself how sourcing
the right inspiration can lead to unique, ownable solutions.
AI-driven updates, curated by humans and hand-edited for the Prototypr community