Sev to Dev: Portfolio Design Magic
Tags: design, portfolio, devjournal
Published: 2021-01-12 15:21:47

Okay, so it's not magic. It's a process and a practice. There isn't just one way to do this but I follow a set of steps that works for me and I'll try to break it down in this post. 
Every person gives off a vibe. So does every website. When creating this digital space of mine, I want it to be representative of who I am. 
I wireframed the basics of my website in my last post (which you can see [HERE](https://dev.to/sevrinn/sev-to-dev-website-wireframe-3kd4)) and that's where we're starting off. 

The first thing I did was think about what I want my personal brand to say about me. I would describe my brand (which is ultimately just describing me) as friendly, professional, fun and a little different.

![a screenshot of text document with my two font pairings](https://dev-to-uploads.s3.amazonaws.com/i/3x6p782jslmxxhwel6xs.png)
My next step was to think about what visual elements best communicate these vibes. I started by choosing a typeface pairing that I felt embodied fun, stylish, and professional. I decided on the bold-but-fun display-serif Shrikhand, with high contrast for my headers and nav. To compliment that, I decided to go with the thin and easy to read Raleway, for the copy text. Google Fonts actually suggested this as a pairing. The Google Fonts website is a great resource for developers and designers alike! 

![three squares on a white background. One is pink, one is blue, and one is yellow](https://dev-to-uploads.s3.amazonaws.com/i/r5812za8s12ghhvnckrf.png)
Color theory is just a set of guidelines to follow to achieve a visual effect by mixing and combining colors. Wanting to stick to my playful/fun aesthetic, I decided on a triadic primary color scheme using different values and tints. I ended up with these colors which I based on the background images I chose for my site.

Next came plugging in these choices into my wireframe that I made in Photoshop. I like to start by adding the fonts first. Then I'll add the base colors. Finally I put the images where they should be. 

I find it important to keep the Photoshop layers organized and properly labeled. I'm the only one coding this design but I decided to treat this like I would be handing it off to another developer. 

![pineapple icon](https://dev-to-uploads.s3.amazonaws.com/i/ger8we1ikqxik4gjfb28.png)
I created a little pineapple logo (which I'm still working on) in Illustrator. I will also be using this on my business cards so I made sure I designed it in a scalable vector so it stays crisp at any size.

![left: grey wireframe with fonts plugged in. middle: wireframe with base colors and fonts added. right: finsished design comp of website with colors, fonts, and images added.](https://dev-to-uploads.s3.amazonaws.com/i/oqdvnqt6dbr9qrsg35co.PNG)
Recap! I started off with my finished wireframe and first added the styles I chose to convey my message and vibe. First I plugged in the fonts, then the base colors and finally the images. When I was finally happy with the final version, I made sure to organize my files to get ready to code it up. 

This is just the Desktop version. I think my next steps will be to decide on how I want this to look on mobile as well as coding up the Desktop version. 

Stay cool and stay tuned!