My designs from 2016 to 2020 as a non-designer
Tags: webdev, design, winforms, tailwindcss
Published: 2020-12-19 02:11:34

---
title: My designs from 2016 to 2020 as a non-designer
published: true
description: 
tags: webdev, design, winforms, tailwindcss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qhurjvqjjtv8ti3b9h5p.png
---

I've been a developer for almost 9 years, but I always found designing to be tedious work. These are my application designs since 2016.

From text applications and Winforms to functional Vue + TailwindCSS components.

## 2016 - Migration from 4GL to Winforms

My dad has this legacy application written on 4GL that looks like this:

**4GL application**
![4GL application](https://i.ibb.co/1LRCprf/4gl.png)

I was still in college when we decided to migrate every .4gl program to desktop Winforms with C#. It was a bad decision, I know, we should've taken the web route. 

The first application concept looked like this:

**My ERP application v0.1** -  I know, ugly as hell:
![My ERP application v0.1](https://i.ibb.co/7Vf7CVW/1.png)

At least we knew the migration wouldn't be as difficult as we thought it'd be.

## 2017 - Improving the desktop home screen

There were about 450 forms that needed to be migrated, so I needed a useful sidebar.
I tested a few home screens before I was satisfied with it.

**v1.0** - Feature-based sidebar and a few links of most used forms/features:
![v1.0](https://i.ibb.co/b6X8D05/2.png)

**v1.5** - Module-based sidebar and section details of selected module:
![v1.5](https://i.ibb.co/q1jW4mC/3.png)

## 2018 - Added BI dashboards

**v2.0** -  Role-based instead and I added a business intelligence dashboard:
![v2.0](https://i.ibb.co/zGkQQ5M/4.png)

This is the desktop design that stayed, the sidebar menu and dashboards are generated based on the user's role.

## 2019 - My first attempt to design on the web

We had a few clients requesting the ability to place orders on their phones, so I prepare myself for web development.

I used [VueJS](https://vuejs.org) and [Bootstrap Vue](https://bootstrap-vue.org) to create a simpler version of the ERP we built on desktop.

**Web v1.0** Only for certain roles such as CEO, Supplier, Seller, and Customer
![v2.0](https://i.ibb.co/PZk93LR/web.png)

I had to look for something else, although I loved working with Vue.

## 2020 - Tailwind CSS motivated me to become a better designer

Since COVID started, I decided to start working on side projects. This SaaS idea came to mind and I wanted to develop it as quickly as possible. But I wanted to use a utility-first framework. 

So before I wrote any code, I bought [TailwindUI](https://tailwindui.com), copy-pasted the components I needed, and adapted them to my needs.

Once I was satisfied with this awesome framework, I started working on a project called NetcoreSaas, a boilerplate for SaaS application development with .NET, Vue (TypeScript), and Tailwind. I coded some common SaaS must-have features, such as authentication, multi-tenant, multi-language, multi-theme, multi-database, and more.

**Landing page** -  Marketing side:
![NetcoreSaas - Landing page, marketing side](https://i.ibb.co/q0c321R/6.png)

**Organization settings page** -  App side:
![NetcoreSaas - Organization settings page, app side](https://i.ibb.co/J7JRhHs/7.png)

## Desktop vs Web

I never got comfortable enough with my desktop designs. They felt forced.

![My Winforms app design](https://i.ibb.co/vx3GGsr/9.png)

I will still be maintaining and developing some features here and there for my current desktop ERP application, but all my next projects will be on Vue or React + Tailwind, with TypeScript, and .NET 5.

![My future SaaS app designs](https://i.ibb.co/SR0NB2C/8.png)

## Wrapping up

With TailwindCSS, now I feel I can build high-quality components so I won't ever feel stuck, design-wise, as I felt with Winforms controls.

--

If you'd like to see more of what I do, [follow me :)](https://twitter.com/alexandromtzg) or [visit my personal blog](http://alexandro.dev).