For my Website Design class, I’ll be making a personal website with a portfolio of my art. This will be very useful for when I apply to any Universities or jobs in the future, and it will be a great way to show my work. Recently I’ve been sketching up some wire-framing and maps for my website.
I first created a brainstorming page in my sketchbook to note and jot down my thoughts and ideas. It probably could have been done more neatly, but at the time I was still trying to figure out what I wanted on my website and what I didn’t. I would organise and modify my initial designs and go into more detail later on.
After brainstorming, I turned to a new page and developed my site map. The idea was to have four pages including the homepage. I wrote down the content and widgets that each page would have, as well as navigational buttons.
The portfolio page was inspired by OMOCAT‘s portfolio page, but after some drafting I realised that the spacing of the gallery widget wasn’t very effective unless it took up the width of the page. So I decided to redesign the page.
Here’s my final design for the homepage and portfolio page. I’ve changed the gallery widget to just a thumbnail grid format. To enlarge the thumbnails, the user will click on the icons and the icon will expand into the full size image on the page, with navigational buttons on the side to go to the next or previous image.
The About and Contact page remained pretty much the same. I just cleared and neatened up the overall layouts of the header, background and footer to the pages as a whole to make sure that it was all consistent, neat and easy to understand.