Moqups

PSLab is a versatile device that can be used as a waveform signal generator, as it is capable of producing different types of waves. It provides a cheap and portable alternative as compared to the physical wave generators available in markets. The current UI of the Wave Generator present in the PSLab app as shown in Figure 1 is very basic and makes use of some basic UI components which are not able to properly expose all the functionalities of the wave generator. This affects the user experience negatively. In this blog, we will discuss creating a mockup for the PSLab wave generator using modern design to improve the UI/UX of the app. I will try to keep the layout simple enough so that users can easily understand it.  Understanding the Functionality of Waveform Generator We can observe from the image that PSLab provide: Two pins named W1 and W2 which are capable of producing two different sine or saw-tooth waves having different characteristics simultaneously. Four Pins named SQ1, SQ2, SQ3, SQ4 which are capable of producing Square Wave and Pulse Width modulation signals. It also allows us to change the properties of these waves such as frequency, phase, duty cycle. Before starting with the mockup a physical commodity Waveform Signal Generator as shown in Figure 3 was inspected. Most waveform generators in the market have a control panel with buttons and a monitor screen so that the user can view the changes while controlling the characteristics of the wave. I will try to create a layout similar to this in following steps by dividing it into two halves: Upper half containing monitor screens Lower half containing controlling panel having buttons Steps for creating the mockup Step 1: Choosing the Tool The tool that we will be using here to create a mockup is moqups[1]. I have chosen this software because:- It is an online tool and doesn’t require it to be set up first It is very efficient and powerful tool for creating mobile or web wireframes. It doesn't require any prior knowledge of programming language. It has a palette to drag & drop UI elements like Buttons, Textboxes, Checkboxes etc. on the left-hand side, allows modifying the features of each element (here on the right) and other options at the top related to prototyping, previewing etc as shown in figure 4. Step 2: Creating the base of the layout The mockup tool moqups[1] have a built-in template of Android screen which we can drag and drop from the palette and use it as our base. Step 3: Creating the Lower Half Now as discussed above I will create controlling panel containing buttons in the lower half of the screen, for this I will drag and drop buttons from the palette on the right-hand side and design them according to the theme of the app that is making their border round shape, changing their color to match the theme color and editing text in them. As the PSLab has…