Creating a Showcasing of My Work in WRA210

January 2019 – May 2019

Quick description

This was a semester long project I took on in my Introduction to Web Authoring course. This course has pushed me to become an independent student whether it be from researching for hours on how to code, to finding a source out of class to help me during my free time. Overall, I ended up obtaining most of the information I needed to, to pull off a good-looking site.
Going onward, I plan on having this sort of independence applied to all of the work that I do for the rest of my life. If I don’t know how to do something, I will be sure to save time and effort by researching and asking around before trying and probably failing to understand how to do it by myself.

The Challenge

Finding recent pictures of me that would size properly to the dimensions I needed to work with
Finding designs that would fit the characteristics of being clean, minimalistic, user-friendly and professional
Picking a layout that worked for me and sticking with it.
Finding colors that complement each other.

Our Approach

Getting rid of outdated pictures and replacing them with fresh relevant ones.
Researching what types of colors work best with the eyes including users that may have a sight impediment.
Researching what types of layouts employers want to see in a portfolio
Dialing back my creativity and putting myself in someone else shoes when it comes to practical fonts, heading sizes and coloring.

First Iterations

After considering employers and having a small understanding of what someone like myself would want to see on a webpage I went about creating my first lofi mockup.

This is where my one of my first mistakes was. I put myself in the shoes of a user when I was quite unexperienced about how this all should look, rather than taking the time to ask around what people actually wanted to see.

Second Iterations

Once It came down to my digital design, I quickly realized there was hardly any whitespace. My navigation bar was really close to the rest of the information on my screen. It was really hard to fit everything on one page. Also, nothing was aligned and none of the fonts or headers were the same size as one another.

Third Iterations

By the time the 3^rd iteration came around I thought I could take into consideration everything I saw wrong with my prior design. I focused on sizing and trying to make things fit in a way that was easy to read.

The issue was not only was I unexperienced, but I did minimal research on colors, fonts and designs. I just picked 5+ colors I thought went together and some random headers, fonts sizes and layouts.

This time around not only was there hardly any whitespace, it was super hard to fit everything on the page, but now it looks like a rainbow took a seat on my design as I made it even harder for most users to read.

Final Solution

At this point I scrapped everything I had done and started fresh. Except for this time with the help of a mentor of mine that has been a UX/UI designer for 5+ years. If there was anyone I knew that created simplistic and easy to read designs it was him. He taught me a lot about what users want to see on different interfaces. We had conversations further expanding my understanding on why certain sizes of headers and fonts were important to use, which colors go with one another, and alignment of text.

He introduced me to a plugin that he enjoys to use when he designs his interfaces called “Anema”. Together we crafted my new portfolio going into detail about every last bit of code and made sure to understand every aspect along the way.