A Developer's First Try at a Design Tool

Today I decided to work on redesigning my portfolio site. I decided that I wanted to make a mock-up before coding it. I don't normally do this. I have recently learned about a tool called Figma that will help with this process. It is a competitor to Sketch. I would use Sketch, but I do not have a Mac and Figma is free.

I started the day by watching a (fantastic) youtube video on designing a landing page in Sketch, because I could not find any good tutorials using Figma. It turned out okay, as the tools are quite similar (for a beginner). Much of the knowledge transferred perfectly.

I spent all of ten minutes building less than half of the page before I wanted to move on to building the real thing. I did learn a lot, but I did not feel like exploring the mock-up was going to help me any more.

I had decided that I wanted an illustration on my portfolio, so I started a new file in Figma. My idea was to illustrate a man (stick-figure) at a desk — representing the majority of how I spend my days.

I started pretty rough.

This is Deskman:

Honestly, it was better than I thought it was going to be, but I still did not like it.

Next is Deskman 2. This was the first solid foundation.

I fixed the shoulders. I made the character thicker. I rounded all the right corners.

My real goal was to add a screen glow. I could not figure out how to do this without changing the background color.

Deskman 3:

Not the worst, but I can do better. I am going to skip Deskman 4 (sorry, man).

The last iteration is Deskman 5...

I widened the screen glow. Tried to fix some proportions like making the thighs of deskman a bit shorter. I also lightened the background.

I put this on my site and realized that I did not like the off-white background. I was sharing all of these illustrations with my designer friend Katie Jundt and she had previously suggested adding color to the glow, so I decided to try that out.

I liked the color. I was originally going to add an animation of screen-flickering, but I had the brilliant idea of shifting the color, slowly, of the screen glow instead. At this point, I was at maximum excitement.

I wrote some mock content and threw together some CSS for animating the color of the glow. I put it all on a webpage and this is the result:

It is neat, but I do not love it. Combined with featuring it as prominently as I planned, it was beginning to feel amateurish. Too playful, not professional. I could not imagine opening a portfolio site and being greeted with nothing but this illustration and a block of text. Would I even scroll down?

So, now I am thinking about coming up with another design. If I am going to include an illustration, it will not be one that I made myself. Digital illustration is not my strong suit. Maybe some day...

If there is anything to gain from this:

1. Figma was surprisingly easy.
2. Do not try to prominently feature a weak skill in your portfolio.

I really should have seen this coming. Oh well. I learned something and I enjoyed the process.