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) 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.
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!
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.
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.
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!
Top comments (0)