You can access the full course here: CREATE A PYTHON APP WITH PYSIMPLEGUI
Table of contents
Introduction
Project design plays a crucial role in the success of software development. Its importance can’t be overstressed, especially when it comes to designing a user-friendly graphical user interface (GUI). Ensuring that the user experience is intuitive, engaging and error-free is paramount. But how do you bring your vision to life before coding? That’s where wireframing comes in. In this tutorial, we will be diving into the creation of wireframes for a medical program using digital wireframing tools.
For the purpose of understanding, we will be working with two screens of our proposed program: a table to display patient data and an intake form to register new patients. By the end of this tutorial, you should have an understanding of the rudiments of using wireframes in GUI design.
Project Files
To aid your practice, we have provided a downloadable version of the project assets used in this tutorial. Feel free to download and manipulate them to suit your style.
Download Project Files Here
Project Design – Part 1
Project design is an important part of software development. In this lesson, we will discuss how to design a graphical user interface (GUI) for our project. We will use wireframes to plan out how we want the screens of our medical program to look and use the tools available at drawio.zenva.com to build out these wireframes. You can use any wireframe program that you wish, however – even paper and pencil.
Creating a Wireframe
A wireframe is a non-functional version of the user interface. It helps us to better envision what our screen layouts are going to look like before we start writing any actual code, by allowing us to size and place the UI elements around until they fit our needs. We can use pen and paper, a whiteboard or a blackboard, or software tools to do this.
Here, we’re going to have two different screens in our program: one to display all patients’ data in a table and the other to present an intake form so we can add a new patient to our database.
Patients Table Screen
Let’s start by heading over to https://drawio.zenva.com/ and creating a new diagram for our patients table first:
Then create a blank diagram named “PatientsTableWireframe”:
We want to have 3 elements on this screen:
- Title
- Button to add a new patient
- Table for patients’ data
You can see that we have several options for UI elements on the left sidebar. Drag in the vertical container to represent the entire screen. We can call it “All Patient Information”:
Now, we’ll add a title to read “All Patients”:
We’ll also need a button to bring up the add a new patient screen. Drag first the rounded rectangle, then the text element on top of it, and write “Add new patient”:
Finally, insert a table with the patient’s information as the columns. And just like that, our first screen is all set up:
Patient Intake Form Screen
The next item on our docket is the patient intake form, which will have:
- Title
- Text inputs for first and last names, height, and weight
- Date picker for date of birth
- Checkbox for medical status
- Buttons to save or cancel
When the save button is pressed, we will gather the information and add the patient to the table. Otherwise, we will simply dismiss the screen in case the cancel button is pressed.
Challenge
Try building out the wireframe for the patient intake form screen yourself, and in the next lesson, we’ll go over a solution together. This will be great practice for you as many software development jobs (in case you’re interested) require the use of wireframe tools.
Project Design – Part 2
In this lesson, we’re going over a solution for the last lesson’s challenge. Hopefully, you could come up with a similar wireframe for the patient intake form. Remember that the form needs a title, text inputs for the patient’s first and last name, height and weight, a date picker for their date of birth, a checkbox for their medication status, and buttons for saving or canceling.
Patient Intake Form Screen
This is the second screen we’re creating at https://drawio.zenva.com/, so you can call it ” PatientIntakeFormWireframe”:
Overall, the final product will look like the wireframes we’ve just created as they give us a very good notion of what we will be building. Note that we’re pretty much using the same elements we’ve used for our first screen, namely rectangles and text elements. The date picker button should pull up a date picker when pressed, allowing the user to select a date which will then be displayed in the text box beside it.
This concludes our design phase and we’ll start our project’s implementation in the next lesson.
Conclusion
Congratulations on mastering the art of design in project implementation! You are now equipped with the knowledge and understanding required to map out and plan the user interface of your software development projects using wireframes. Remember this is a significant step before you delve into writing any code. We hope this tutorial has shed light on the process and protocols involved.
Building upon what you’ve learnt today, you can further strengthen your skills by practicing with other design options and wireframe tools to bring your software projects to life. Remember that learning and growth are continuous processes. So, keep practicing and never stop improving!
We are excited to see what amazing project designs you will come up with in the future!
Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it! FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.
Transcript – Project Design – Part 1
Hey, hello everyone and welcome to our tutorial on projects design. By this point we have gone over our project definition. We know what the project is and what we want it to be able to do.
Now we enter the design phase in which we discuss how we want our projects to look overall and how we want all the pieces to come together. So we want to build a GEI or gooey based program that just stands for graphical User Interface. Essentially what this means is that we want some kind of screen displayed to the user with which they can interact. So that means they’ll probably be buttons, text fields, text displays, check boxes, et cetera. Very interactive elements.
This is as opposed to something like say a text-based program that runs entirely within the console and is just text related. There’s no buttons or anything there. So we want to be able to display all of the patient’s data inside of a table. So this is a row column structure with probably each row being a new patient and each column being a piece of information.
We also want to be able to present a patient intake form to capture new patient information. Now this is two very distinct pieces of functionality. One is just storing and displaying and one is capturing inputs and adding a new item. So it’ll probably want a separate screen for each of these.
So we can use what are called wire frames to plan out how we want our screens to look. A wire frame is essentially a non-functional version of the UI. It’s a great way for us to plan our screen layouts for a graphical application and allows us to size and place UI elements and just generally plan what our screens are going to look like before we start writing any actual code. Now, there are lots of ways we can go about doing this. We could just use say pen and paper. We could use like a whiteboard or a blackboard and just kind of draw out how we want things to look. There are also many software tools to help us to do this.
It kind of looks like we’re building an application, but there’s no actual functionality there. It’s really just how things are gonna look. Shapes, sizes, colors, images, texts, et cetera, as if it was the actual, it looks like an actual application but it doesn’t really function like one.
So we are going to use this tool draw io.zver.com. It’s just a nice easy to use tool that allows us to build out our basic wire frames. Now we’re not gonna get too fancy, we just want the basics there.
Okay, so the first item on the agenda is the patient’s information table. In this screen will want a title a button that will take us to the patient intake form. And we also want a table that will display all of our patient’s data. So it will actually be pretty simple. We really just need these three elements. So building out the wire frames will be fairly easy. This is something that we can do together.
So let’s head over to that draw io program and get started building out our patients info screen wire frames. Okay, so this is the website here, draw io.zver.com. We want to start by creating a new diagram. I’m going to call this patient patient’s table wire frame. Okay? And this will be a blank diagram. Okay, let’s call this patient. We’ll call this patient’s table wire frame and we can save it to our desktop or wherever you’d else you’d like to save it.
Okay, so this is the interface and it’s grateful kind of building things one screen at a time. There are fairly generic elements here. There is other miscellaneous elements. There are more advanced, there’s stuff specific to, let’s say Android, or bootstrap, or iOS. So there’s lots of tools that allow us to build various UI components.
Now again, our goal is just to get something really simple out there on the screen to show you how to roughly speaking how to wire frame. So we’ll start with a vertical container. This will represent a single screen. Okay, so this is our patient. This is actually our patient’s table. So this can be something like all patient information.
Okay? And because this is the entire screen, we know we need a title. We’ll probably have a button up top and then the table underneath. So let’s get a title on screen and this will say something like all patients, okay, let’s make this a little bit smaller. I think this is, uh, this is pretty big, so let’s maybe bring it down to 20. Okay, we’ll select the element itself. We can just move it over a bit. Okay, next up we’ll want a button.
Now we could just represent buttons with this kind of rounded rectangle here. We want a button beside it. And this button is going to be used to bring up the add a new patient screen. I do want to try to make sure that these are aligned. There we go. And instead of a title, I’m just gonna put in some text like so.
Okay, this again pretty big. So let’s bring it down to 15. And this is add new patients or something like that. Okay, so this is a button when press. That will bring up the patient intake form. Okay, so the final item that we need is going to be a table.
Now, rather than having a table like this, I’m actually just going to have a grid and perhaps something like this seems kind of appropriate. Okay? We do a few more columns. So let’s see if we can add columns to this. Let’s see if we can do edit data. Okay, this is going to be a more complex process, so maybe we should choose something else.
Okay, cool. So let’s go ahead and save this. This is again our patient’s table screen wire frame. So we just want the title, the button, and our table. Okay, so if we go back to these slides, that’s our patient info table done.
The next item on our docket is the patient intake form. We’ll need a title. We’ll need text inputs for the first name, last name, height, and weight. We’ll need a date picker for the date of birth. That will just be a button that when pressed will pull up a date picker. We’ll want a checkbox for the medication status. So if it’s checked, they are taken medication. If it’s not checked, they aren’t. And finally, we want buttons to save or cancel. So when the safe button’s pressed, we’ll gather the information and create a patient. When the cancel button is pressed, that will simply dismiss the screen.
Now rather than implement it together here, I think I’m going to leave this as a challenge for all of you. We have been able to successfully create the wire frames for the previous screen. And so this one, although a bit more complex, shouldn’t be too difficult to create.
If you do want to go into application development or a lot of other software development jobs, you will need to learn how to use wire framing tools. So this will be great practice for you. And of course, don’t worry, we will go over a solution together at the end. But I do want to give you a chance to try this for yourself. Okay, so let’s end this here. Try building out the wire frames for this screen, and in the next section I’ll go over a solution with all of you. So thanks for watching. We’ll see you in the next one.
Transcript – Project Design – Part 2
Hello everyone and welcome back. This is the second half of our project’s design tutorial. In the first half, we introduced the concept of wire frames and created the wire frames for our patient’s table screen.
Now we are going to go over a solution for the wire frame for the patient intake form. Remember, it needs a title. It needs text inputs for the first name, last name, height, and weight. We’ll want a date picker for the date of birth, a checkbox for the medication status, so whether or not they are taking medication and then buttons for saving or canceling. So let’s see what we came up with. Let’s head over to draw io.
Okay, so this is kind of what I’ve come up with. Something fairly basic. We have a title, it’s the patient intake form. We have a first name label and then the text input, last name label text, input heights and weight. And then the text inputs here. Now, interestingly enough, the way with the way that Pie Symboli is going to work, we’ll have a date picker button. We press this button, it pulls up a date picker. We select a date, and then the date will display in this text box. That way the user has the option of either entering the date manually or pressing on the date picker and choosing a date that way.
We also have a checkbox here. It says, uh, it has a yes or no beside it for whether or not they are taking medication. And then we have our cancel and our save buttons, so all of our requirements are fulfilled. Hopefully you came up with something similar because this is what we are going to be building and this is actually very similar to what the final product will look like. Okay, so that’s it Fornell.
Thanks for watching and we’ll see you in the project Implementation phases coming right up.
Interested in continuing? Check out our all-access plan which includes 250+ courses, guided curriculums, new courses monthly, access to expert course mentors, and more!
