Let's Talk About UI
Phase 2 GSoC @CircuitVerse
About me
Hello Everyone, I am Abhishek R. Zade, currently an undergrad student in Information Technology at All India Shree Shivaji Memorial Society Pune.Savitri Bai Phule Pune University. I am in my third year. Currently, I am working with an open-source organization name CircuitVerse in this year’s GSoC.
About my project
My project is on Touch Compatibility with CircuitVerse Website. The current situation of the CircuitVerse website is, it supports only desktop browsers i.e mouse, it does not have any touch support. So I aim to bring out a website for touch devices, so more users can enjoy making circuits on their smartphones.
So let’s start with blog 3 this blog is mostly about my phase 2 UI part in the next blog I will discuss the working of my UI, for now, I will start with UI. When you are migrating software from desktop level to small phone level UI will be an Obvious thing to get changes because there is a huge difference between desktop screen Size and mobile screen size.
Also, the user uses touch on small screens mostly. Before explaining my UI I will explain the main components of the circuitVerse simulator
- Circuit element panel
- module property panel
- time diagram
- quick menu panel
- Navbar
My Earlier idea was to merge very thing into one thing something like a small screen game I started designing in Adobe XD and come up with this idea
I know What you are thinking what the heck Is this but I was happy for two reasons.
I. learn to use Adobe XD.
II. I have designed something.
Using my brain like something Creative 😀 shared this same photo with my mentors in the proposal to mentor the review of mentor was like this is not the UI they were expecting they gave me a link to some open-source software that was designed for the small screens. Then I realized where I was wrong in fact I was 80% wrong about my project UI. As we see our project’s main feature is a simulator According to the old Desktop UI and my new UI both cover some amount of screen which is a lot in small screen devices. I started researching more ideas about UI After some days Finally came up with using the button. The idea was to click on the button menu will appear and the menu will disappear if clicked again. Again I open adobe xD and Started designing and came up with this design.
As you see I have used a button for the menu and Also add a quick menu tool. The reason behind the quick menu tool is that we cannot use the right-click in touch as we use on desktop and that part is as necessary as other menus. After the design, I have sent the design to the mentor with a proposal this time they were Okay with it but still not the exact one they want. When the second phase starts I created a UI prototype and send a video to a mentor. We had met I was told few changes on the quick menu I have done changes Here is the final output.
After that, I start working with the most important part ie Navbar. Now Initially, my idea was to use the old Navbar as it is but soon realize that this is not the solution for small screens because it covers all 20–25% of the screen, which is sometimes disturbing. After all, font size is also small.
Now my idea is to add a Separate section for Navbar I call it Navmenu .when the user press button a big menu appears over the Simulator with proper Animation. Inside the there is a menu with a big size button so the user can easily access the option. Here are some photos Of the nav menu and changes I have gone through.
After that, I have started adding a theme to the design and add few animations, and completed UI.
Video Demo of New UI
So this was my Journey and experience for UI development of the CircuitVerse website on mobile devices next blog I will explain the working of the UI until then……wait for the next blog.
