Designing and Mocking Up Your Site: AKA Step 1 in Building My Personal Site
Remember in high school and college, when you were assigned a massive term paper to complete over a couple weeks. But in reality, the true writing began only days ahead of the due date? All nighters were had, coffee was consumed by the ton and your blurry vision was pushed to its limits just to slam a few (vaguely coherent) sentences together.
Welcome back to that feeling! And that “term paper” has now transformed into the assignment of creating your personal website. And to make matters worse, you’re the person who assigned this goal for yourself. Sure, you don’t have to have a personal site, but man, it’s pretty helpful if you do, especially if you’re in the developer space.
Now that I’ve given you sweaty palms and heart palpitations, you get the joy of watching me panic about my own process, because at this current moment, I have only purchased my domain and haven’t written a single line of code. BUT my guide is to help you AVOID this feeling, and instead watch me panic and fill you in on the tips, tricks and things NOT to do.
Where do we start?
A little something I learned from a SkillCrush course I took is to design a style tile, or two or three! What’s a style tile you ask? It’s a faster and easier way to create the “look and feel” of your site without actually developing an entire mock-up. But why is this helpful? What if, on Monday, you love using a scheme of cool-toned colors or you love using all serif fonts and you applied these to your huge mockup. But then Tuesday, you wake up, the sun is shining and you realize that you actually want all warm tones and a site completely made of san-serifs. GAH! What do you do?
Well, that’s the problem that style tiles look to solve. They’re quick little frames that line up all typography you seek to use, the color scheme you plan to apply and all the buttons, iconography and imagery you plan to use. Take a look at mine (these are currently missing my portfolio pics)

Don’t have Adobe Illustrator or Photoshop? Gimp and Pixlr are pretty solid alternatives, but if you find yourself designing more and more (or looking to edit out pimples for that perfect insta) you should look into the monthly Adobe membership.
Also, if you’re struggling to build a good color scheme, play around with https://coolors.co/ it’s a fun color scheme generator, and you can lock individual favorites and the generator will match up other colors with the one you’ve locked.
Back to Style Tiles, this is my final choice for my site design. I created roughly three drafts, slept on it and woke up the next day verifying that I loved this one!
Great! So we picked our style tile, time to code, right? WRONG.
Time to Mock-Up Our Site
Okay, so we have our styles picked out, we know the look and feel that we want. Let’s see what it will look like with a full mockup.
Now, normally, you mockup when all content and images have been brought your way. But since I am doing this for just ME, I get the luxury (slash painful process) of changing my mind whenever I want and not having to wait for all of that content and those images to arrive.
So, with my usual perfection nature, I have changed things multiple times and have YET to get my photo taken for my portfolio but those images will come soon. Also, it’s nothing that an emoji can’t cover for the time being (see my profile pic, for example).

So now that we have our mockups done, next is to the get to coding!!!
But you’ll find that in Step 2!
