The holiday season was a little hectic this year (when is it not?! lol) and of course 2020 was no exception, but I'm back on track. I felt compelled to work on my wireframe for my portfolio website design to keep this project going strong into the new year.
First I took a look at the sitemap I created at the end of November to refresh what I had wrote down. Check out my previous Planning My Site post for details on how I created this.
I settled on these sections:
Home
- catchy tagline (tbd)
- interesting img
Work
- code
- design
About
- picture of me
- short bio
Contact
- contact form
- social media links
I started with a hand drawn version that I made on my ipad pro and procreate. Ive seen a website before and I've designed a couple before too so this stage was relatively easy.
Next, I placed my hand drawn wireframe into Photoshop for some refinement. Once I got all the sections in place, I slapped a grid on that bad boy and was able to even it out a bit so it looks balanced.
Here are the three side by side for comparison:) On the left is the hand drawn, in the center is the non-gridded photoshop recreation, and on the right is the final wireframe spaced out proper with a grid.
My next step is to turn this solid wireframe into a properly organized design comp in photoshop with the proper use of color theory, typefaces, images, and spacing.
Stay tuned for more!
Top comments (0)