Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:5Length:41 minutes

Next lesson playing in 5 seconds


Free Preview: Introduction to Studio 2.0

Welcome to the Course

  • Overview
  • Transcript

Studio is a web design tool that allows you to design, build, and publish responsive websites without writing a single line of code. All this is possible thanks to a very well-thought-out visual editor.

Studio was recently updated to version 2.0, so in this course you’ll learn what’s new and improved, how to use the tool to build a simple web page, and also how the collaboration features work.

1. Introduction

1.1 Welcome to the Course

Hello and welcome to an Envato Tuts+ course. I'm Adi Purdila, and in this, course you'll learn how to use the latest version of Studio. If you don't know, Studio is a web design tool for creating responsive websites from scratch without writing a single line of code. It was recently updated to version 2, which brings a more refined UI and some cool new features. Now, here's what we'll cover in this course. First, we'll take a quick look at what you can do with Studio, why it's different from its competitors, and how much it costs. Then we'll see what's new in version 2. In lesson three, we'll explore the user interface, and find out what all the bits and bobs are for. And finally, we'll build and publish a very simple web page. So without further ado, let's jump straight into lesson number one, and take a closer look at Studio.

2. Meet Studio 2.0

2.1 A Quick Look at Studio

Before we get started, I want to make a quick mention. The Studio that we're covering in this course has nothing to do with InVision Studio, they are two two different tools. They're similar, sure, but they're different tools. Now, this Studio is a pretty amazing tool that doesn't really get the same hype or the same publicity that other players in this field get. And that's partly because Studio is unique in its own way, and not a lot of people know about it. It has a visual editor that's similar to other apps like Sketch or XD. But it's different in a lot of ways, right? You can build entire websites with it, like you would with your typical website builder. But this process is also different. Now I think what separates studio from the rest is the fact that it can design your product just the way you want, without having to rely on pre-made templates, and without having to write a single line of code. Now to show you an example this is a Web page that I built with Studio, starting from one of their pre-made templates. But I've changed a couple of things to it. And this took me maybe, I don't know, about 15, 20 minutes. But it looks like this. It's a very minimal page. And this is a natural map embed from Google, and that's pretty cool. And this also is responsive. So it goes from your typical desktop style to mobile style. And I even have mobile navigation in here, how cool is that? And as I said, it's responsive. Everything, all the components resize and rearrange according to the screen size you're viewing this on. Now of course, as I said, this is based on a template. But the beauty of Studio is that you can design your website from scratch. You don't have to rely on any kind of template. You just start designing, and you'll get your finished product right in the browser, right where other people can access it. And for a long time, we have searched for tools that would allow us to design a Web page in the browser directly. There is Figma which is a browser based, even though it has a desktop app. But at its core, it's browser based, right? But Figma, in the end, it just generates a static design. Whereas Studio will generate a fully working website. I mean that's just mind boggling, sure. It doesn't have all the bells and whistles that you can do with CSS and with JavaScript, right? So if you're trying to build a very complex project with a lot of animations, with a lot of JavaScript involved, you can't really do that in Studio. But for the more simple projects like I showed you here, this is a very simple presentation Web page, right, and it's responsive. For this kind of thing, Studio is just really, really awesome. Now let's talk about pricing for a little bit. And pricing in Studio is actually very simple to understand. By default, it's free, right? The software is free. You can design in the browser, as many projects as you want. You have unlimited projects, and you have unlimited team members, pages. And by default, any project that you publish with Studio is gonna be published on a subdomain of studio.design. And also you'll get this Studio label on your website. Now if you want to get rid of this label and you wanna host your website on your own domain, then you can purchase the Publish package for $9 a month. And you get, of course, all the features from Free, but also as I was saying, without this label. You can connect your custom domain, and you also get third party service integrations like Google Analytics and such. As we can see here, something else is in the works, a higher tier, which also includes CMS, some analytics, and version control. That's not here just yet. So in this course, we'll be using the free version, because it gives us all the tools we need to learn how to work in Studio. Now, as I was saying in the introduction video, Studio has now reached version two. Which comes with a few new features, a redesigned UI and such. So let's discuss more about these changes in the next lesson. See you there.