Ever look at something you’ve just created and hate it immediately? I call this little phenomenon “Designer’s Dilemma”. After looking at my previous portfolio for so long, I just found more things I can improve on. It was time for a redesign and this time I wanted to do it right.
By spending more time planning, the design and development process was much smoother. It can be daunting trying to come up with something that represents yourself. I am my own worst client. So I decided to treat this redesign as if it were for a client. I started out on pen and paper to get all the ideas out quickly and then started to refine them on the computer.
Stage 1: Gathering Requirements
There were so many directions that I could go with making a portfolio that it started to get overwhelming. It’s easy to get a designer’s block. One thing to keep in mind above all else is, “What do I need?” AKA requirements gathering. A portfolio is meant to display your work. You can incorporate all the fancy jQuery plugins you want but if starts to bury your portfolio pieces then it’s no longer a usable portfolio. My goal was to create a site that would prominently feature my work while allowing me to develop my skills.
My requirements for the project were:
- Clean and simple design
- Informative and personal
- Easy maintenance
- Responsive/Fluid layout
- Engaging
Next, I listed out which of my past work would be displayed. I had to be very selective and think about which features of each site would be highlighted. I wanted the user to understand why I developed a site they way I did and point out key features that could be easily missed.
Stage 2: User Experience Designing
Now that I had all the of the requirements and content written out, I needed to decide how I wanted to organize it. I created a simple site map.
Moving on to the layouts, I made wireframes for each page starting with pen and paper then moving on to Illustrator for a grid based layout.
The post-it represented click to toggle elements.
Instead of creating a high-resolution mock up, I opted to use a style tile to get a general feel for the design.
Stage 3: Development
There were a few tools I wanted to incorporate into this project to get more experience with them. I also decided to develop as much as I could from scratch.
WordPress is my CMS of choice especially since I planned to have a blog section where I’d document what I’ve learned and show off some of my web experiments. Sass is extremely powerful with variables and mixins. And Skeleton was a great minimal fluid grid system.
During this time, there were a lot of last minute changes. I had to compromise on certain features due to time constraints and push the site live.
