After initially sketching out my wireframes I have quickly moved to digitising them on Adobe Illustator to get a better and more in-depth understanding of the visual design as well as validate the concept of my portfolio website.
I’ve decided to colour code all of the elements in my wireframe. The formula is shown below:
Purple – Images/Videos, hyperlinks, tags, buttons
Black – Headings
Dark Grey – Sub-Headings
Light Grey – Paragraphs/text
Desktop
For the desktop version of my portfolio website, I have included the original layout that I initially conceptualized. So far I really like the look of the case study showcases and have additionally implemented a ‘tag’ feature under the main heading.
Mobile
Another important thing I have to acknowledge is to not just design for the desktop version but also the mobile/tablet versions too. This means I have to create an adaptable and responsive version of my website for handheld devices. If I remember correctly, this can be done using custom-made breakpoints.
One notable feature I handheld website to have is the one-column structure as keeping a two-way structure can potentially cram up screen size and cause sizing issues.
*Revision* — Instead of having the normal nav bar on the mobile version it will be more suitable to have a hamburger menu instead.
Why is this useful?
- Adds more validation to my design.
- Allows for more of an accurate understanding of my website.
- Can be modified at any time if I change my mind.
What’s next?
Firstly, I must finish the last few sections of content for my website. After that, I will begin to start creating the Portfolio.