Quick start

In this article, we'll guide you through the process of planning and designing your website with ease using Design Studio. Our Webstudio Studio is structured around six main features that will help you design, build, deploy, maintain, and scale your application.

Page creation Modes

The tools in Design Studio are segregated into two sections: the top and left toolbars. The left toolbar helps switch between different modes to create and design your pages. Here is a list of the modes available on the left toolbar:

Left tool bar modes are listed below:

Select Mode: This mode is used to select specific areas such as Artboards, sections, containers, and elements.
Zoom Mode: With this mode, you can zoom in and out on your workspace, making it larger or smaller.
Artboard Mode: This mode is used to create and design the pages of your website or application.
Elements Mode: In this mode, you can add elements or components to your design to make it more polished and customized to your needs.
Grid and Layout Mode: These modes are used to segment your page into different sections and parts for easy design and editing. With the use of layout, sections can be resized and rearranged as needed. Transition Mode: This mode allows you to create transitions between elements, sections, and Artboards with various events such as onclick, double-click, mouseover, and more. Code Editor Mode: This mode generates the code for selected tools such as elements, sections, and Artboards in the form of HTML, CSS, and JavaScript, which can be edited at any point and reflected in real-time.
Assets Mode: One of the most exciting features of Webstudio is the ability to use assets. These can be used for dynamic photo compositing or as backdrops for graphs, etc. External images can be used in any format supported by the browser, such as PNG, GIF, or JPEG. Workflow Mode: This feature plays a major role in the Webstudio structure, as it allows you to add various events, actions, and utilities to elements, sections, and Artboards.

Undo-Redo: With this feature, you can undo and redo your last action or multiple actions that have been undone.
Save and Retrieving: Saving your application allows you to retrieve it at any time for further editing and viewing.
Clearing Workspace: This feature allows you to clear your design at any point during the building process.
Preview: The preview feature allows you to check your design before making it live. Deploy: The deployment feature is used to make your application live on a server for operational use.

Elements

The Element Tool is situated on the left toolbar, where default elements are segregated into two sections: Desktop and Mobile. Each element has multiple variations, each with a different look and feel. Elements are the building blocks of your pages, they display images, text, and other information and enable users to interact with the app. Users can easily insert an element from the list onto the Artboard and Section by simply dragging and dropping, or by clicking on it. When an element is selected, its custom properties will be listed on the right toolbar along with styling properties. The Properties section is organized and has a conditional formatting feature that is tailored to each element's behavior. Additionally, you can also make custom changes to the element's properties and styles to make it unique and stand out. With this tool, you can easily create visually appealing and interactive pages that offer a great user experience.

Start the Design

et's create an Artboard using the select mode and start dragging Elements from the toolbar. For example, let's say we want to add a button to our Artboard. We can simply drag the button element from the toolbar and place it on the Artboard. Once the element is placed, we can resize it and set custom as well as styling properties for it to make our page more visually attractive.

In addition, we can also configure the Artboard or element to connect to a respective datasource, such as an external API or built-in data models from the DMV. This allows us to easily add dynamic content to our pages.

Now it's time to give some event and action for moving the page one step ahead as a functional design. We can use the UI workflow mode to access the Event and action list and make connections as a selection of component. For example, we can set the button to navigate to another page when clicked.

Finally, we can preview our design and see the beautiful outcome. This process allows us to easily create visually appealing and interactive pages that offer a great user experience.

Assigning Properties

Here, we will explore the various properties options available to us to enhance our design and make it more visually appealing. The Properties tool is a powerful feature that allows us to add different colors, font families, line styles, gradients, alignments, and shadows to our pages.

For example, let's say we are designing a weather app and we want to make the "Sunny" button stand out by giving it a unique color and adding a gradient effect. Using the Properties tool, we can easily change the color of the button to a bright yellow and add a gradient effect that blends from yellow to orange. We can also change the font family and size of the text, add a drop shadow to the button, and align it to the center of the page.

Similarly, we can apply Global properties like background color, font family and size, to selective properties like Buttons, Headings and Paragraphs.

The Properties section is vast, and there are many options to explore. By experimenting with different properties and styles, you can create a unique and visually appealing design that fits the theme of your application.

Test the Application

The Preview Feature, located in the top toolbar, allows you to run your design page and preview it at any point during the building of your application. This is a useful tool for testing out the page and seeing how it will look as a user interface with different responsive screen sizes. For example, you can use the Preview Feature to check how your page will appear on a desktop computer, a tablet, and a smartphone. This feature allows you to identify and address any issues with the layout, design, and functionality of your page, before launching the final version of your application. Additionally, the Preview Feature also allows you to see how your page will look on different devices, including iOS and Android devices, so you can ensure that your application will be compatible with a wide range of devices. With this feature, you can easily ensure that your application will provide a seamless and consistent user experience across different platforms and devices.