When creating a portfolio website, you have absolute creative freedom over the design of the site. Before starting my site, I generally had an idea of what I wanted it to feel like – simple, bubbly and representational of my values (references to my old website made last year).
Below I will show the gradual evolution of the layout of my site through wireframing.
Crazy 8’s
When Kyle introduced us to this task I found it extremely interesting as sometimes the best way of gaining new ideas is to not be polluted with other existing ideas. I decided to follow up on this task as many of the wireframes I did in University didn’t really appeal to me. I decided to time myself with 1 minute on each. I came up with a few basic sketches some I didn’t like and some I saw the potential for. I did have to remind myself that I want my website as simple as possible and follow a one-column or two-column structure. This just doesn’t help my site match my values but also allows for me to design a less complicated website.
After completion of this small task, I really liked the wireframes of 3 and 6.
Basic Sketches
I decided to quickly sketch a few more wireframes exploring other aspects of my site such as the case studies and about section (following a two-structured layout). I eventually settled on a layout seen above. From the inspiration of doing the crazy 8 methods, I decided to combine both 3 and 6 together to create an overall better wireframe.
More In-Depth Sketches
Once I was contempt on the layout of my wireframes I decided to create more detailed ones labeling each aspect of my site. When sketching this wireframe I want my homepage to be the “star of the solar system” – this basically means that the homepage will consist of a small portion of all other content that is available on other pages such as the home screen having a small about section, portfolio showcase and social media section.
Conclusion
So far, I am pleased with the result of my wireframes and my ability to create an in-depth look at what my site may potentially look like. I feel like I’ve got a clear vision of the design for my site.
What’s next?
I will now begin digital wireframing my site to gain a more accurate result in terms of colour, layout, text, etc.