So I've seen a job posting on this site and wanted to apply for it but before I can do that I need to make a sample. So here it is.

Just another thing to add in before you carry on. This is more of a rough first draft. A prove of concept.

So lets start with what's wanted from me. I needed to make a UI interface for a workflow engine on a web application.

I'll put screen shots that explain what's on the page and what it does,

So I decided to put a side navbar because I think that would be more suitable for a web app. The tabs them selves are pretty simple. Just the name with the icon. I placed a nice gradient on the tab that's showing the user where they are and I changed the fonts colour to make it more readable.

So this page would be the workplace, where the workflow engine would reside. The top of the page has the file name. underneath it is the file path. This is to show the user what file is open and its path. underneath that are the different tabs that would be available in a file.

Now there is something that I do need to talk about here. I am making this up as I'm making this. I have no clue at the moment how their workflow engine will work. Now with that out the way lets carry on.

These here are the function boxes. These are made in mind to be drag and drop boxes. So with that in mind, I made the design of these as simple as possible and at the same time hold enough detail so the user know what they are doing. Its made to be as intuitive as possible my adding universal icons. Such as having a plus icon to show where to the user where you can add the out put to and having the play icon on the start function.

On top of all that I've made designed it to connect to other boxes by clicking on the plus icon, on any output section, and dragging it to the plus icon on any box, on the input section.

By now you have noticed that there is a condition section in the boxes. This is where the user would write down what ever conditions they would want or, if you decided that there are set functions, they would describe the function. Further helping the user understand what they are doing and working with.

This colourful bunch were made with the intention of making it even easier for the user experience. The idea here is to separate different classes form each other by assigning them unique and different colours. I was also planning in adding different shapes too but I just left that for now.