UI/UX

While researching color and type I was looking at my "competition". In many ways a portfolio is a statement of fashion, with different professional careers opting to express themselves in different ways. I browsed many award winning sites from the past few years and mocked up treatments by hand on a trusty dotted mini-sketchbook. This not only helped me determine content flow and layout, but also started the process of winnowing down what content I would want to display, and how. It also gave me a window into the why's of other professionals, as well as what was working and what wasn't.

There are limits to what can be blocked out by hand, animation and complex navigation styles that don't map 1:1 to a piece of paper exist, but they are fast and can really narrow down scope and provide a basis for further work. In the end I had mocked up 10 sites as well as my own, while notating what worked, what didn't, and what kinds of technologies and features I believed I could work into the process.

Rapid prototyping of designs is a big benefit of modern design software. For this project I used Adobe XD to do the early blocking. From there I was able to create clickable prototypes that helped me determine scale and flow, as well as figure out a bit of my navigation. There are limits to this kind of prototyping, whether its technical or structural. For instance XD is incapable of the kind of within-page links that I use on this site. But, much like the sketch mockups it helps to further clarify the final design as well as present weaknesses and strengths. With the prototype built I moved on to a semi-final treatment of the design itself, still using XD but featuring functional placeholder content and text.

The box below is a version of my early clickable prototype. Go ahead and try it out (It's interactive)!