Here are my final web design pages put into a laptop template.
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.
Here are my annotations on various websites and their web design.
*Please note that some of these websites may have been updated or changed since I wrote these.
Here’s my design process for my website. I used Photoshop to create the various assets and components. I started by creating a 1280 x 1024 canvas and applied a grid and template to the document that I downloaded.
I organised the drafts into one folder and added a centre grid line by dragging one from the ruler on the side. (To show the rulers, press cmd + r/Ctrl + r)
I moved onto my background graphics and created a new folder to put all of my background related elements in it. The visuals that I wanted were night time themed with clouds, so I filled the background with a navy blue and added a gradient to the top and bottom. I used one of the template brushes and edited in custom brush mode to make it resemble tiny stars. Then, on a new layer, I painted some stars in white at the top.
Then, using the draft layers as a rough outline as to where my header and body went, I created a new layer for my clouds.
Using the circle tool, I drew a row of circles to act as the outline for my clouds.
I then merged the layers, rasterized them and renamed them “clouds”. I then selected the area underneath the clouds and filled it in white with the bucket tool, making sure that the selection was tight-knit and didn’t have any gaps.
Because the outline looked a little to harsh and crisp for clouds, I went to Filter, Blur, Gaussian Blur and adjusted the blur so that the outline looked softer. Lastly, I added a straight gradient to the end of the clouds, making sure that it was completely horizontal by holding down Shift when drawing it so that the bottom of the clouds would completely fade out into a navy blue.
I then wanted to create a tile for my clouds that would run horizontally so that it could go on continuously on the webpage no matter how much you zoomed in or out. This was more for my website coding that I will be starting after the new year. It was very difficult to make accurately, but after many attempts I managed to get it to work.
Using the Rectangular Marquee Tool I selected an area of the clouds that finished neatly at both ends and cut and pasted it onto a new layer. I had to make sure that the end of one side would run smoothly into the beginning of the other side when it looped, so it took me a while to do it right.
I used the arrow keys to move the new layer around accurately, fitting it next to the original layer. To match it up properly, the gradients at the bottom of both layers had to be seamless.
Once I was happy that the tiles worked, I kept the tile layers separate so that I could use it when creating my actual website.
I then moved onto creating the header. Since the header section has already been sectioned out by the clouds, all I did was add the title and logo.
For the menu text, I created both the normal text as well as the text when the cursor hovers over it.
Finally I added footer text to credit the art and copyright.
Every page will have this over-arching page design in it to create a sense of consistency and to distinguish my style.
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.