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:
- Figma was surprisingly easy.
- 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.