I redesigned my portfolio after its initial conception in 2017, in 2019. However, because I'm always striving to evolve and apply new skills, I have redesigned my portfolio. Yet again. Here is the preface to my previous case study (which I have since removed):
When I first designed my portfolio in October 2017 I was finishing up Designation and had a limited amount of time to dedicate to the design because I was looking for a job. Now that I've had more time and design experience I thought it was time to reevaluate what was and wasn't successful about my initial design.
While attending the School of the Art Institute of Chicago for my Graphic Design Certificate, I attained valuable design skills. I took classes in Adobe Illustrator, InDesign, Photoshop, Typography, HTML / CSS, Color Theory, and Product Design. I utilized these classes and my design knowledge to redesign and greatly improve on my original portfolio.
The class that assisted me the most with this undertaking was HTML / CSS. Before I took that class I had zero knowledge of how to code. This was a detriment because while Webflow (the site I use to design my portfolio) is largely drag and drop, it relies on HTML principles (div blocks, containers, etc). Taking this class gave me the ability to create a more responsive and better organized site.
As I was reevaluating my portfolio, I felt like it didn't quite capture what I was going for. So, I went back to the drawing board and looked through all of the random color palettes I collected over time and discarded logos until I came up with this new concept. Because of its complexity and multitude of features, I learn something new every time I design something in Webflow. I'm sure this won't be my last redesign, but I'm rather pleased with the result. Please enjoy!
Below are the logos I have used to represent my brand over the past few years, including my new logo.
Following are the main screens from my previous design. One of the main differences besides the layout in the color of the nav and typography. I've included the screens from my original design to accentuate the evolution of my portfolio and tastes.
The background chosen was a poor decision on my part because the writing in it partially obscures the subtitle. It also causes the icons to blend in too much.
Having all of the tiles the same size meant that focus was being drawn to all of them at the same time. The images also resized poorly and also took up a lot of space on the page.
I think having such a large image at the beginning of the case study was a little overwhelming, even though it showed off the final product. It also meant that it was just one more thing to scroll past to get to the crucial information.
This page saw the same background issues as the home page. The user was also greeted with a large block of text after (hopefully) reading a case study or two. This page saw the same background issues as the home page. The user was also greeted with a large block of text after (hopefully) reading a case study or two.
There were also a couple issues with visibility and accessibility.
My goal for the redesign was to create a more stripped back and subtle design. I also added "shri" accent color to compliment the blue and create more apparent calls-to actions. I think this version more accurately portrays my taste and skills as a designer. The shrimp color came from a previous design decision I made but later abandonded.
The background chosen was a poor decision on my part because the writing in it partially obscures the subtitle. It also causes the icons to blend in too much.
I removed the My Work page and instead included all of my projects on the homepage. After this redesign I will recreate this page so the home doesn't get too cluttered. It didn't make much sense to have one when I only had a couple case studies up. I will use the varying tile sizes to emphasize certain projects. Once I have more projects I will add the My Work page back in.
The main difference is the removal of the huge hero image. In its place I decided to isolate the top level information about the project with a smaller image. I did this to visually open up the page to make it less overwhelming upon loading.
I decided to put my about and contact information at the bottom of the home page to make it so users won't have to click back to the homepage to see my case studies. I also took out bio and only included the most relevant information.
My next step is create type guide, which I will add here later. I also want to go back through projects and update them now that I know more about accessibility. My primary goal is to make my portfolio 100% responsive. Because of my limited timeframe, I only focused on getting up the desktop version.