medium bookmark / Raindrop.io |

In today’s quick tip I’m going to introduce you to “Studio”, a design tool for digital products. Let’s see how it can help speed up your design process!

studio.design

Over the years we’ve all become familiar with using tools like Photoshop, Adobe XD, or Sketch, to design layouts and interfaces. Studio takes a slightly different approach to the design process.

It’s a web-based tool, currently free to use, so if you’d like to sign up or sign in head over to https://studio.design/ and enter your credentials.

You’ll be greeted with a Projects page, ready and waiting for your first project if you’ve just signed up. When starting a new project you’ll be given the option of designing a web project, or an iPhone app.

The Tools

Once you kick off a project you’ll see a page (similar to an artboard in other design applications), some zoom and view controls, and to the left you’ll see that you can add boxes, images, text, and icons. Those are pretty much all you can add, so there’s immediately a difference between Studio and other UI design apps you might be used to!

Studio’s interface

This apparent lack of flexibility is soon quashed however, when you see that the left hand sidebar also gives access to a range of pre-built elements (UI kits). The UI kits contain common elements and patterns, such as nav bars, hero sections, forms, and so on. You’ll also find embed blocks, through which you can also drag and drop Google Maps, videos etc. onto your page.

Crucially, all of Studio’s layout elements are responsive; they alter in size and arrangement depending on the size of the page you’re designing. This is key in how Studio works and how it can alter the way you design interfaces.

Take a look at the video above for more details on how to use Studio, its tools, and its resources. Let us know what you think of Studio in the comments!