Click-by-click on how to start creating an experience
Welcome to our "How-To" series of tutorials written especially to make you a master of creating experiences!
We have chosen a few experiences and wrote a step by step "How-To" so you can get familiarize with our platform. You can find these tutorials in the same category of articles, right beneath this article. This specific tutorial is a click-by-click walk-through for your first steps in the platform, from logging in to start editing the first screen of your new desired experience.
Each experience includes the screens (textual and graphical assets) and the transitions. When you initially sign in our platform, you will come across the first screen which will indicate you have not created any experiences yet. This is how it would look like:
- Click on '+ Let's add one'.
- Enter the name you want to call the experience and choose the device to which you want to create the experience.
- Click the 'Next step' button in the top right corner.
On the next screen, you will be asked to choose between starting a blank experience, or a template from our templates gallery.
Note: If you will click on a specific experience in the gallery, the right side of the screen will be updated accordingly, and you will be able to watch a video of the experience. Just hover over the experience screens on the right side, and you will see the play button.
I chose a blank experience for this walk-through, but you can choose one of the templates if you want. In case you tapped 'Blank Experience'. Click 'Let's go '
Now, you will find yourself in the experience screens area. If you will mouse hover screen 1, you will be able to click ' Edit' and enter the screen's editorial area, which we call the Studio. You can also add a blank screen, but usually (not always) you will prefer duplicating the first screen after editing it.
Let's tap ' Edit' and start editing the first screen!
The upper bar (pointed by the red rectangle) include different features: such as navigating back to experience screens area by clicking the 'Experience Screen ' button, navigating between screens using the arrows or or the drop-down located between them, choosing the colors of the guideline, the background, and the iPhone mockup color. Also, you can set the zoom percentage to your convenience.
There are some more buttons like the 'Transition Inbound ' and 'Transition Outbound ' buttons which are used for setting the transactions between screens. The 'Reorder ' button in the right red circle and also the 'Elements bar' pointed by a big red circle.
As you can see in the above screenshot, next to the iPhone there is another section that was not mentioned in the previous paragraph. You can see it enlarged in the below screenshot. This is the 'Screen settings' section. In this section, you can set whether you want the 'Pagination' to appear or not by clicking the button pointed by a red circle. This action is reversible, just click the button again which now looks like that .
Below the settings will be the 'Swipe' and 'Canvas color' (which is the area "inside" the iPhone mockup). It can be set to a specific color, gradient or transparent.
|Note: The icon (pointed in the red circle in the screenshot above) may appear near a setting. This icon means that any change in this setting would apply to all screens. Like many other icons and symbols on our platform you just have to mouse hover the icon to have the explanation appear.|
Hope you found this walk-through very valuable,