Website Design Progress – The Page Designs

Computer, design, Digital Art, Photoshop, User Interface Design, web design, Website Design

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.

Example of the Homepage icon. The text underneath it is called Lorem Ipsum and is often used in design to represent an area of text.

Example of the Homepage icon. The text underneath it is called Lorem Ipsum and is often used in design as example text.

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.

website template homepage

I hadn’t decided on what art I would display on the homepage, so I left it blank for now.

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.

Screen Shot 2015-01-08 at 16.20.02

My first design for my gallery. It was very simple and basic, but was limited to only a certain amount of images and had no folders.

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:

Screen Shot 2015-01-08 at 16.20.18

Here’s my final gallery design.

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.

Screen Shot 2015-01-08 at 16.20.42

Here’s what happens when the mouse rolls over a tab on either arrows on a particular group.

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:

gallery full view 1

This is what the full screen mode will look like when the viewer clicks on a thumbnail preview.

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.

gallery full view 2

Here’s what it will look like when the mouse rolls over the image.

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.

Screen Shot 2015-01-08 at 16.42.33

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.

CONTACT 1

This is how the Contact page would look like normally.

CONTACT 2

This is what it will look like when the mouse rolls over the deviantART link.

To return to the homepage, the viewer can simply click on the header and the page will navigate to it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s