Which software is similar to justinmind com

Tutorial. Prototype. Short tutorial for the software "Prototyper" from the company "justinmind" using the Android app from the University of Pforzheim.

Transcript

1 Tutorial Prototyper Short tutorial for the software "Prototyper" from the company "justinmind" using the Android app from the University of Pforzheim Lecture GUI design Prof. Blankenbach Written by Matthias Müller Matr.Nr

2 2 Contents Creating a new project ... 3 The interface ... 4 Let's go ... 5 Adding elements ... 6 Editing elements ... 7 Interactions: Overview ... 9 Interactions: Links Interaction: Navigation with variables Interactions: Tabs Interactions: Effects and animations Interactions: RadioButtons Interactions: Password strength Publish prototypes Export as picture Test on device Variables Current date and time Dynamic Data Lists Expressions on Data Lists Searching lists (1st criterion) Searching lists (several Criteria) Import real data Expand and collapse content Adaptive Layouts ... 32

3 3 Creating a new project When starting Prototyper for the first time, the user is shown the following start screen. The options for creating or opening a project are available here. There is also a short tutorial from Justinmind. But let's get started and create a new project first. To do this, we simply click on the "Create a New Prototype" button in the "New" section, see the following picture. Figure 1: Prototype start screen Then we go one step further and select a device for which we want to create a "prototype". Here we simply select "Android" and then click on "Next", as shown in the image on the left. In the next step we can configure the layout. Here are some functions, such as an example Prototype etc. In this tutorial we want to build a prototype from scratch and therefore select the "Empty" item. Here you have the option to set the resolution of the prototype. We simply set this to 360x640 (basic setting). That's it for the time being for the creation of a new prototype and we finish the creation wizard by clicking on "Finish". Info: If "Prototyper" is started for the first time, there is the possibility of a short tour through the GUI. This takes less than 1 minute and gives a brief overview of the program. Figure 2: Select project

4 4 The user interface The user interface of "Prototyper" is very clearly structured. The most important thing is the layout of the device in the middle. On the left side 1 there are all graphic elements such as icons, text fields or input fields that can be added to the layout. These can simply be dragged and dropped into the layout. Once inside, the size can be changed and placed in the desired position. Moving can be done either with the mouse or with the arrow keys (this is faster if you hold down the SHIFT key). The right column shows, on the one hand, the various "screens" 2, ie the various functions for a potential app. An example would be a start screen ("MainActivity") with a button. If this is pressed, the second screen ("ActivityNotes") opens. Additional "screens" can be added using the "+" button. The screen can be renamed with a right click -> Edit. Deleting a screen via right-click-> Delete Prototyper offers the usual shortcuts for copying and pasting elements (Ctrl + C and Ctrl + V). If an element is to be duplicated, this can be done using the shortcut Ctrl + D. Figure 3: Prototyper interface. Area 3 directly below shows the configuration options for the individual graphic elements in the layout. the hierarchy, size, spacing and much more can be changed. But more on that later.

5 5 Let's go In the following, the functions of Prototyper will largely be explained using an example app like the one from Pforzheim University. Have fun

6 6 Adding elements Adding elements is very easy with drag-n-drop. All you have to do is select the desired element in the list and drag it to the desired position in the layout. This is demonstrated in the following picture using a so-called toolbar (Android). Figure 4: Adding elements After the toolbar has been successfully placed in the layout, the corresponding element can be found in the right column ("Title-bar-color"). This element contains the individual icons ("Label_xx"), as shown in the graphic above. These can of course be renamed for better differentiation, which I strongly recommend. For the renaming, you only have to select the element and switch from the "Outline" tab to "Properties" and enter a new ID 1 ("toolbar"). 1 Figure 5: Editing IDs

7 7 Editing elements Prototyper provides a decent amount of configuration options for elements. These range from color to size and position. Since most apps have a toolbar, menu ribbon in the upper part of the screen, and are also used in the Pforzheim University app, we want to edit this in the following section. One of the main colors of the Pforzheim University is a certain shade of yellow (HEX: "# FED001"). To change the color, the toolbar must be selected with a double click. In the right window under "Properties" you will find the option "Background". The following steps are self-explanatory. Figure 6: Example toolbar To change a text field, the element must be selected by double-clicking. With the help of another double click on the text, it can be changed ("HS Pforzheim"). The "News & Events" section of the HS app should serve as an example for adding another element. This is divided into two segments ("tabs"). To get this subdivision, drag the "Tabs bar color" component from the "Widgets" window under "Bars" into the layout. Here, too, we adjust the colors and name the segments so that we then get the following view. Figure 7: Toolbar and tabs

8 8 Now we can simulate the app once to test the GUI we have created so far. This is done using the green button labeled "Simulate" at the top of the screen. So far, you can only switch back and forth between the two tabs. Since the tabs do not yet have any content, we now want to create one here. The content should only consist of a card that contains a picture, title and a short text excerpt of the article. To do this, we drag the "Travel card" element from the widgets under Cards into the layout. Here we want to insert our own picture instead of the given. The properties are displayed by clicking on the image. The inserted image can be found under the item "General". This can be exchanged for a local image by clicking on the three dots. We adapt the text fields according to our wishes with a text. The result should look similar to the following. Figure 8: Toolbar, tabs and content Since the text on this card is limited, we want to start a new screen that shows the entire article. But this is part of the next chapter.

9 9 Interactions: Overview Prototyper offers the possibility of defining interactions. The "Events" tab is required for this. In order to create an event, it must first be determined by what an event should be triggered. Press the "Add event" button and select the user action in the top left menu. Note that several actions can be defined for a component. An example would be a button that triggers an action by clicking and moving the mouse over it. The following list shows an overview of the available actions. Their function is explained using short examples. These again relate to the Pforzheim University app. Link to changing the screen. The user is requested to enter the login data by clicking a button. A new screen is displayed for this. Change Style Change the design of e.g. a component such as color, background, etc. in a screen at runtime. Show / Hide Changes the visibility of components. Example: The button for the login is only displayed when all login data have been entered. Set active panel To change the active panel (example: tabs). The order of tabs in a screen with "News" and "Events" is defined. The second tab can be selected by setting this action. Set Value Changes the value of a label. Here, for example, the credit of the student ID card can be assigned to a text field. Select Value Selects the value entered by the user. Entered login data can be processed here. Pause Delay actions Move Moves a widget to a specific position. Resize Changes the "height" or "width" attributes of an element

10 10 Insert into Widget Add another container Data Master Action Dynamic data in lists and functional forms Set focus on Can e.g. can be used to put the focus on an EditText. Scroll to Scrolls the screen to a certain element. Here, for example, a scrollbar can be scrolled to the end. Enable / Disable widget selectable or not. Can e.g. can be used to determine whether an EditText can be filled or not. Pagination Paginates a list of data. Once an action is selected, click OK. The defined action then appears in the event tab. A single user action can trigger several actions in succession. For example an action that should be carried out after a previous one. This can be done by clicking the wheel symbol at an event.

11 11 Interactions: Links As already described in the previous chapter, we want to display the entire article in a new screen. Opening additional screens is very easy in Prototyper. For this we create a new screen by clicking on the "+" icon in the right window under "Screens". We call this "ActivityNewsDetail". Now we return to our "MainActivity" and link the button with the label "More". To do this, we select it and drag it to the "ActivityNewsDetail" screen with the left mouse button pressed. Alternatively, this can also be done by right-clicking on the button and then selecting "Add link". Figure 9: Interaction with links

12 12 Interaction: Navigation with variables Of course, Prototyper can also be used to implement navigation with variables instead of links. This chapter explains how saved variables can be used to define what is to be displayed in the next screen. Here we could also choose the example with the news used in the previous chapter. However, the function described in this way should be explained using a simpler example. 1. Creating the Screens Let's start with a blank screen. First we navigate to the tab labeled "Screens" and create 4 new ones here (see Fig. 10). The first one ("Home") identifies our start page, from which we want to jump to the other screens (A-C). Figure 10: Creating the screens Next we select the item "Variables" in the "Outline" panel, click on the "+" and create a new variable called "previous_screen". Figure 11: Setting the variable

13 13 Now we should first concentrate on the home screen and carry out the other configurations. As a simple layout we simply select two rectangles ("Rectangles") and label them with "Screen A" or "Screen B". The layout could look like this. Figure 12: Layout of the home screen As soon as we have completed this step, we create a layout for every other screen (A-C). I have chosen a simple layout that is well suited for demonstration purposes (see point 2). 2. Configure screen A and B So far we have not made any configurations for the layout of screen A and B, we want to change this in this step. To do this, we select two rectangles again and drag them into the layout. We label one with "You are on Screen B", the other with "Go to Screen C" so that the layout could look like Figure 13. Of course, we also choose a different label for the other screen in relation to the name of the screen you are currently on. Figure 13: Layout screen A or B

14 14 3. Configure screen C The third and last screen in "C". This screen shows you which was the previous screen you selected. For example, if you click on screen A on the home screen, it will be displayed. Another click on "Go to screen C" takes you to the above and the previous screen, in this example screen B, will be displayed. In order to create the last screen and to enable this display, we choose a layout as shown in Figure 14. This layout also consists of two rectangles that are intended to indicate the screens. A third rectangle labeled "Start over" lets us start again from the home screen. Figure 14: Layout screen C 4. Add interactions for screen A and B To enable the necessary interactions for navigating to the individual screen, we use the link method, as already learned in the previous chapter. We would like to jump to the respective screen with a click event on "Screen A" or "Screen B". As a result, we create a click event for each rectangle and select (as Fig. 15 shows) the corresponding screen under the item "Link to". Figure 15: Creation of interaction between the screens

15 15 5. Interactions in screen A and B For each of the two screens we must first of all define the event "on page load". This event triggers the "set Value" action, which is required to save the value of an element. In our case the "set value" method is used to define the variable "precious_screen". So we proceed as follows for each of the two screens: In the Outline Panel we select the respective screen with one. In the Events tab we add a new event by clicking on "+". The dialog that now opens enables the "on Page Load" event to be defined. Here we select the action "Set value" in the interaction menu. Here we set the value in the field ("value") to A or B and also select the option "Fixed" (see Fig. 16). Next, we switch to Variables tab and select the "previous_screen" variable. Finally, we create a link event from the rectangle labeled "Go to Screen C" to Screen C. These steps are necessary so that when Screen A or B is loaded, the respective variable is saved, which indexes the screen Figure 16: Definition of the "on page load" event

16 16 6. Configure screen C In the last screen several conditions are used. First, however, we have to activate the "Hide component" property in the Outline panel for both rectangles for Screen A and B so that both elements are not displayed during the simulation. In the next step we now create an event that is again based on the variable "previous_screen". Using this variable, this screen shows which one was selected in the previous screen. To create this event, the following steps are necessary: ​​We select screen C in the outline panel and open the event dialog. In this dialog we now have to create an event that combines "on page load" and the "show / hide" action. Next we open the dialog in which we create a condition as follows: "If variable 'previous_screen' equals 'A'. By pressing Ok twice we complete this step. If the variable is" previous_screen "at the time when the event" on page load "is triggered, equal to A, then the rectangle with the label" Screen A "is displayed. A graphic representation of this condition can be found in Figure 17. In the last step, we have to extend this condition for screen B. To do this, extend it We simply add an "else" branch to the condition created in the previous step. Figure 17: Condition for Screen C To be able to start again from the beginning, the last thing we do is to link the rectangle with the label "start over" to the home screen Now we can start the simulation.

17 17 Interactions: Tabs Tabs allow a layout to contain different categories. An example of this would be the News and Events section in the Pforzheim University app. Logically, the information about news is displayed in the first tab and the events in the second. In Prototyper, simulating such a view is very easy. All you have to do is drag a "Dynamic Panel" component into the layout. As soon as the component has been placed, additional tabs can be added using the "+" icon. The content of a tab can be edited by selecting it and right-clicking as well as "Edit content". Alternatively, this can also be done by double-clicking within the tab. In order to be able to add components now, you drag components into the layout as usual.In order to be able to edit the appearance of a tab, it must be selected and the appearance can now be edited via the "Properties" tab. Here, for example, the border changed, the rounding changed. The tab created from a previous chapter should serve as an illustration. Figure 18: Created tab

18 18 Interactions: Effects and Animations In Prototyper, many animations can be simulated with the "pause" action. An example would be a progress bar that shows the status of a download. This bar is just a rectangle that gradually fills up. The steps for the creation are as follows: Drag the rectangle into the layout and set the size as when the animation starts Select the rectangle and add a "Page load" event Select the "Pause" action and click OK Select the "wheel" icon next to the word "do" and adding an enlargement action to make the rectangle grow. Repeat the last two steps until the rectangle has the desired length. Effects "Hide / Show" and "Set active panel" actions can be improved by using effects. These include fade in / fade out and transition effects. In order to be able to assign an effect to a component, it must first be selected and then the action selected when the event is triggered. The desired effect can be selected via the drop-down menu. Overview of all effects: Fade Gradual change in the transparency of an element until it disappears. The length of the effect can be set in milliseconds. If it is a "hide" action, it will be a fade-out, otherwise a fade-in. Slide The slide effect animates the height and width of a selected element. The duration can also be set here in milliseconds. Logically, higher values ​​show slower animation. Blind Hides the element or bounces it Bounce the element up and down several times Clip Clips the element in and out Drop The element falls into the layout Explode A kind of explosion animation Fold Folds the element like a paper Highlight animation with a colored background Puff Fade -Out animation with a "puff" effect. Pulsate Pulsates the light transmission several times. Shake-shaking animation

19 19 Interactions: RadioButtons The following example is intended to demonstrate how to use RadioButtons. All you have to do is drag the elements shown in the image below into the layout. Figure 19: Layout with radio buttons First, drag the check boxes, labels and radio buttons into the layout as shown. So that only one of the radio buttons can be selected, they must be grouped. All you have to do is highlight both and right-click to select the "Group" option. Then drag a "dynamic panel" widget into the layout and create two panels. Add the input field and a drop-down list to the first panel. Set the "editable" property of the two elements to "disabled". Create the same elements again in the second panel, making sure that they look activated. Then select the lower radio button and the event tab on the right. Select "set active panel" and the second panel (with active input fields) and confirm with OK. Now select the radio button above and go to the event tab again to add a new event. Select "set active panel" and enter the first panel. Finished!

20 20 Interactions: Password Strength Prototyper also offers a pretty useful feature for checking the strength of passwords. Such a function cannot be found in the university's app, as only the password is validated on the server. Nevertheless, I would like to briefly address this, as some logic in the Expression Builder is necessary here, which can be quite helpful for later projects. Before we start, the first thing to do is to build the GUI for a simulation. For this we need an input field, which is required for the password, as well as a progress bar (keyword: "Dynamic panel"), which shows the strength of the password. The GUI should then look something like the following graphic. The information on the right is only intended to indicate what makes a strong password. Figure 20: GUI password strength Checking the strength of the password is divided into three steps. It starts with the length of the password ("First level protection"). By pressing "add event", then selecting the event type "on key up" and "add condition", the Expesstion Builder opens and we define the following statement (see Fig. 21), finish with "Ok" and select as Action type "set active panel". Figure 21: Expression Builder 1st condition

21 21 But now two more conditions are necessary for a strong password. In the Events tab we find an "else" link for the next step, which now appears under the first event. Here, too, we add a condition for the password by pressing "add condition". Now we define the expression, as can be seen in Fig. 22. Figure 22: Expression Builder 2. Condition As soon as we have created the condition, we continue as with the first condition. If, after completing the second condition, we turn back to the Event tab, we will find the new option "case", underneath the option "case" appears again. But let's continue with the last condition. Here, too, we proceed as in the previous step and click on the "else" link in the event tab to add another condition that checks the password for capital letters (see Fig. 23). Figure 23: Expression Builder 3. Condition By pressing Ok, selecting the active panel and the last remaining panel, the check is completed and the GUI can be simulated.

22 22 Publish prototypes Prototyper offers several options for publishing the prototype that has been created. Simulate button: By clicking on "Simulate" or alternatively by pressing the F5 key, the created prototype is started in a separate window and can be tested, among other things, with the created links. Export as HTML: Prorotyper offers the possibility to export the created layout as HTML and to display it in any browser (File-> Export to HTML). Attention: This option is not included in the free version of Prototyper! Exporting as an image As soon as you have completed a layout, you can of course also export it as an image. To do this, simply click on "File-> Save as images" in the upper menu ribbon. In the subsequent dialog we can choose what we want to export. We select the item "Screens" and click on ok. Test on device Of course, Prototyper also offers the possibility to test our created layout on a real device. To do this, we first have to download the app from the app store. Now we return to Prototyper and click on the blue button labeled "View on device" in the interface. Prototyper automatically creates a prototype in your account here. If we now open the app and have entered our access data for the account, Prototyper will automatically download the simulation to your device.

23 23 Variables Prototyper also offers the possibility of working with variables. An example here would be e.g. the login data is also available on another screen. To demonstrate this function, we will create the login screen of the Pforzheim University and then start the activity for the grades. The designed layout should have two text fields for username and password and a button for login, see the following picture. Figure 24: Layout for example with variables Next we want to create a new variable. To do this, we click on "Variables" on the right-hand side of the window and create a new variable by clicking on the "+" icon and call it "username". In order to assign the variable to the "Username" text field, we drag it onto the variable with the left mouse button pressed. These are then linked to one another. We use the same procedure for the password of the login screen. We then link the button labeled "Login" with the new activity, which is to display the grades. In the new screen, which should display the grades, we create a text field in the toolbar. Then we click on the "Variables" tab again and drag the text field from the toolbar to the "username" variable. If we then simulate the login process, enter a name and then click on "Login", the new view for the grades opens and we see the entered user name in the toolbar. Attention: Working with variables is not available in the free version of Prototyper!

24 24 Current date and time It is often necessary to display the current date and time in GUIs in order to show that data is up-to-date. Prototyper also offers an option to simulate this. All you have to do is drag a label to the desired location in the layout. You then simply select the label, navigate to the event tab, press the "add event" button and select the "onpageload" option. Then choose the action "set value", choose the label and press the button with the calculator in the input field. In the Expression Builder, which then opens, drag the constant "System date" into it and press ok. The same procedure applies to the time. Here, instead of the constant "System date", select "System time".

25 25 Dynamic Data Lists With Prototyper you can also create dynamic lists. In this way, GUIs can be filled with "dummy" data, which the "real" GUI will later also have on the client, and then simulated on a device. For demonstration purposes we now want to simply recreate the GUI for the grade view of the Pforzheim University. To do this, we select the "Data Master Tab" at the bottom left of the screen. In the following dialog we have to create a data object that is to contain the data and name it. We select "Exams" as the designation and add all the properties that are important for the representation of a grade to this object by clicking on "+". Of course, a significantly higher number of attributes is used in the app. In order to save time, however, we will minimize these attributes to the most important ones in our example. Some important properties for this would be: "uniqueid", "name", "mark", "semester", "credits" "date" "link" "status" attempts "" background "In addition, the data type for an attribute can be selected by selecting the field "type", right next to it. In Prototyper, the data types are defined by default as the type "Text". We now simply insert a few sample data. The "uniqueid" is simply a sequential number, starting with 0. Um To be able to use the image for the attribute "background", there is the option of uploading an image saved locally on the PC. All you have to do is select the attribute and select the item "File upload" in the drop-down menu. For "name" , "credits", "semester" and the rest of the information about the grade, we add further data that create a realistic overall picture. Of course, "real" data can also be imported from a database, but more on that in a later chapter. The field "link" could be an indicator here, for example ator, which forwards the user to another screen, which shows the grade distribution of all exam participants, as known from the app.

26 26 After we have inserted some data, we naturally want to display them in the GUI. To do this, we drag the "Data List Widget" from the tab with the widgets into the layout. In the subsequent dialog we set an ID and select the ones to be displayed, in our case "Exams". To make sure that we did everything right, we simulate the GUI once by clicking on "Simulate". The GUI should then look similar to the following. Figure 25: Layout for example data lists Useful information: A double click on the data master "Exams" opens a dialog in which we can view or edit the example data for the grades. Real data can also be imported from a database or Microsoft Excel

27 27 Expressions on Data Lists Of course you can do more with the created "dummy" data than just visualize it in the GUI. This chapter "Expressions on Data Lists" will be described using the music database that we created in the previous chapter. The prerequisite for this is the availability of at least three data records in the Data Master "Exams". Because we want to display the total number of grades as well as the average of them. To display the average for the total number of grades (here three), we pull two labels from the list on the right edge of the screen and place them under the toolbar of our GUI (see image at the end of the page). Now we select the first label that shows the cut of the notes, then click in the "Events" tab on the "Add event" button and consequently on "Set value" and the calculator button. We now create the expression as shown in Figure 26. Figure 26: Expression 1 Since we also want to display the total number of exams displayed in the list, we repeat the process with the second label for which we create the expression, as shown in Figure 27. Figure 27: Expression 2 Our simulated GUI should then look similar to the following. The section of the exams and their total number are displayed at the top of the layout. Figure 28: Layout for conditions in data lists

28 28 Searching through lists (1st criterion) This chapter describes how searching through a list can be simulated. A good example of this is the grade view of the university's app and its search function to specifically search for individual grades. For this we need a label and text field as well as a button in our list. For the latter element, as we have already learned in a previous chapter, we need a "Click-Event" (Event-TabAdd eventset value). Then we select the complete data list and continue with a click on the "Calculator" button. In the "Expression Builder" we select the data tab and drag the filter function up. Here we get two columns for this function. The left column is for the data that we want to filter. The right column for the filter rule. So we drag the "Exams" list into the left column and the text field. Finally, confirm twice with Ok and the filter function can then be simulated. The following view visualizes this example again graphically. Searching Lists (Multiple Criteria) In the previous chapter we learned how to search a list using a simple criterion. Of course, a search can also be carried out in a much more complex manner with several search criteria. Since such a search is not used in the university's app, it will not be discussed in more detail here. If you are still interested, you can find more information under the following link:

29 29 Importing Real Data For some simulations it is necessary to use real data. Since it is too time-consuming to create it within Prototyper, it is possible to import real data. For this purpose, real grades can be imported for the university app, for example. However, the data must be created beforehand. However, in order to use existing data, all you have to do is open the "Data master" and select the "edit" option. By selecting the "View and edit records" tab (see Fig. 29) and the "Import" button, another dialog opens. Figure 29: Import real data The path to the file containing the real data can now be selected here (see Fig. 30). The data must be available in csv format for this. How the data is in the file can also be specified via the dialog. Figure 30: Path to real data

30 30 Expand and collapse content The university's app also has an area for laboratories for the technical faculty and the associated courses of study. The respective laboratory can be "opened" here to reveal details such as appointments or the upcoming laboratory topic. In order to simulate this unfolding of the elements, Prototyper offers a so-called fluid flow of subordinate objects. This means that subordinate objects can be dynamically linked to one another. If an element is expanded, all objects below it are shifted downwards. If the element is closed again, all subordinate objects are pushed back to their original position. Figure 31 shows how the layout should look. To simulate this GUI now, let's drag a dynamic panel into the layout. In its properties, we expand the "Layout" item and select a vertical alignment (type "vertical"). This property is used to ensure that all elements are placed one below the other in the layout.By right-clicking on the created panel and selecting the "Edit content" item, we can now simply drag elements into it. We select dynamic panels as elements for this, and drag two of them into the panel that has already been created. In the first panel we will now create the view for a laboratory. To expand the content, we place a label on the right-hand side with the inscription "Appointments. The left label element with the inscription" Labor -Regelungstechnik "only contains the name, but is of no importance for further use. On the first panel Then we set the height so that the image and the text of the two labels are just visible. Then we select the second panel we created and set its height to be significantly larger than that of the first label with the Image and text. In addition, we place a label in it that will later display the laboratory appointment. Figure 31: Collapsed layout We then continue with the behavior of the label "Appointment", which is to display the laboratory appointment with a click we select the label, click in the "event tab" on "add event" and select the option "set active panel." With the selection of the first panel (image + text) we white the event to. With the selection of the label with the inscription "Laboratory Control Technology" we continue, as with the first panel and the creation of an event, but select the second with the laboratory appointment as the active panel.

31 31 The creation of the layout and its behavior is now complete. In order to be able to simulate the behavior, we mark all the components that have been created and insert two or three more into the layout using copy & paste. The layout should then look like the illustration on the next page. By clicking on "Appointments" the second panel is activated and the other laboratory elements below are moved further down. By clicking on "Appointments" again, the panel is set to inactive again and the moved elements move back to their original position. Figure 32: Expanded layout The dynamic panel controls the height of the elements automatically. If the height of an element is changed, all elements below it are shifted. This shift can of course also be carried out with a horizontal layout. All you have to do is set the orientation of the layout specified at the beginning to "horizontal". However, such a horizontal layout is not recommended on smartphones.

32 32 Adaptive Layouts Since the university's app should not only be used for smartphones but should also cut a good figure in terms of layout on tablets and larger devices such as all-in-one devices, the design must be optimized accordingly. Important factors are the size of the device and the resolution. Adaptive layouts are used for optimization. Prototyper also offers useful tools here to simulate the created prototype on devices of different sizes. On the one hand, an event can be created here that reacts to the size of the screen ("on window resize"), on the other hand, two constants in the Expression Builder can check the length and width of the screen. Using the university as an example, we want to use the devices smartphones and tablets here. Of course, a separate layout with the same content must be created for each of the two device sizes. In order to determine which layout should be used for smartphones or tablets, we select the background in the layout and click on "add event". By selecting "on window resize" and then "add condition" we can set the condition as follows. Figure 33: Condition layout smartphone / tablet As soon as we have defined the condition, we continue by clicking on "Ok". Of course, an assignment must also be made for the condition. To do this, we select the layout for smartphones using the "link to" button. We repeat the same process for the tablet layout, but select a different device size as a condition (e.g. larger than 320 pixels). Now we can simulate the layout for smartphones and tablets.