Here’s the design process for my website pages. I designed how the individual widgets and components of each page will (hopefully) look.
For each page, there will be an icon representing it underneath the menu tabs. I got these great icons from www.thenounproject.com and credited the appropriate artists at the footer of the website.
I had to change the resolution of the actual icon.png because when I’ll use it later in my actual website, it needs to be the correct dimension. Resizing it in the design document won’t change the original image dimensions.
For the homepage, I wanted to have an example of my art featured as well as an introductory line to briefly let viewers know what this website has to offer, and who I am. I also put a link to my deviantART at the bottom.
I made the banner in Photoshop as well using the Rectangular Marquee Tool and the and the Polygonal Lasso Tool and then filled in the selections with the bucket tool. I edited the deviantART logo to white so that it would stand out against the red banner and fit with the clouds background.
On my portfolio page, I wanted to organise my artwork into various folders so that the presentation was organised. I also took this opportunity to add interactive elements to my website.
The most difficult part of my portfolio page design was definitely coming up with a gallery widget that worked well. I tried many designs and worked my way until I found something that I was happy with. The first draft of my portfolio was a simple slide-show-like gallery, with the main image there with navigational arrows on either side of it. Below would be a row of small thumbnails and either a scroll bar or more arrows to slide through the thumbnails. However, this didn’t include any folder options, so I tried a different method. I changed the design to a grid format, with each piece of art being shown as a thumbnail and placed little folder tabs at the top. I thought that this design would function better than the previous one, but I then realised that the tabs along the top of the grid were limited to the width of the grid. This wouldn’t work if I couldn’t fit all of the folder tabs that I wanted on the top.
I used a couple of example works to see how the artwork would fit in with the gallery.
Eventually I thought up a gallery design that would meet all my requirements and still fit the style of the website. I decided that since I wanted my gallery folders so badly, I would base the design around that first, then worry about my images. It ended up like this:
Each row represents a gallery, and if you wanted to see more than you would click on the arrows to slide along the to the next thumbnail. The ribbon-like banners on the end also fit with my red banner on the homepage to add a sense of consistency. I changed the colour of the banner to fit the colour scheme by adjusting the Hue and Saturation.
I also thought a lot about how the user would interact and navigate with the gallery. I decided to add elements of animation into this design to reveal more information about the gallery to the viewer.
The banner will extend and reveal the name of the folder. It will stay there so long as the mouse is on the arrows. I also considered having a rotating animation for the icon so that it spins when the mouse rolls over it.
If the viewer wanted to view the image in full screen, then they would click on the thumbnail. The screen will dim and the full version of he image will appear in the centre like so:
To exit this view, the viewer will simply hit ‘Esc’ on their keyboard or just click outside the area of the image. The footer text remains unaffected because it is important to keep the copyright and credits clearly presented in every part of the website.
I also considered navigation in this view as well. So when the viewer’s mouse rolls onto the image, navigation arrows will slide in. I also included a name and description of the piece too.
This gallery was a lot more complex than my original idea, but in order to accommodate the requirements that I wanted, I had to play around and develop the idea.
I drew in the rectangles with the Rectangle Tool and then lowered the opacity so that they weren’t obstructing the entire image beneath it. I also used the same arrow icons and the same font as the rest of the website to keep consistency.
For my About page, I simply had a paragraph of who I am and some information on what programs I use.
On the Contact page, I had my e-mail address and deviantART link. I made it so that when the mouse rolled over any linked text, the text would turn red. I copied the text layer by selecting it and pressing cmd + j (Ctrl + j on Windows,) to duplicate the layer and then changed the text colour.
To return to the homepage, the viewer can simply click on the header and the page will navigate to it.