Final website homepage in web browser

Computer, design, laptop, PC, User Interface Design, web design, Website Design

Screen Shot 2015-05-22 at 12.20.12 Screen Shot 2015-05-22 at 12.20.17Screen Shot 2015-05-22 at 12.22.20Screen Shot 2015-05-22 at 12.22.10


Final Web Design Pages

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

Here are my final web design pages put into a laptop template.

Laptop render HOMEPAGE

The homepage. This is just to present the design of the web pages, so I’m leaving some of the undecided images and text out for now.

Laptop render GALLERY 1

This is hopefully what the gallery page will look like.

Laptop render GALLERY 2

Here’s what the folder tab will look like when the cursor hovers over it. I’m thinking of adding an animation to the arrow icons too if I can get good enough at the coding part.

Laptop render GALLERY 3

This is what the full-view mode will look like.

Laptop render GALLERY 4

When the cursor hovers over the image, these functions will slide/fade in.

Laptop render ABOUT

This is the About page.

Laptop render CONTACT

This is the Contact page, with the cursor over the deviantART link.

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 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.


This is how the Contact page would look like normally.


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.

Web Heaven/Web Hell

Photoshop, Research, User Interface Design, U_5, web design, Website Design

Here are my annotations on various websites and their web design.

Retail website 1:

Retail website 1:

News/Blog website 1:

News/Blog website 1:

Artist/Studio/Portfolio 1:

Artist/Studio/Portfolio 1:

Artist/Studio/Portfolio 2:

Artist/Studio/Portfolio 2:

Galleries/Museums 1:

Galleries/Museums 1:

Railway Museum

Galleries/Museums 2:

*Please note that some of these websites may have been updated or changed since I wrote these.

Website Design Progress – The Overall Web Design

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

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.

Screen Shot 2014-12-12 at 09.42.29

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.

Screen Shot 2014-12-12 at 09.58.39

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.

Screen Shot 2014-12-12 at 10.05.34

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 FilterBlurGaussian 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.

Screen Shot 2014-12-12 at 10.13.58

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.

Screen Shot 2014-12-12 at 10.27.30

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.

Screen Shot 2014-12-12 at 11.20.04

For the menu text, I created both the normal text as well as the text when the cursor hovers over it.

Screen Shot 2014-12-12 at 11.43.12

Screen Shot 2014-12-12 at 11.48.11

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.

Website Wire-framing and Mapping – Design drafts and sketches

User Interface Design, web design, Website Design

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.

Here's my brainstorming page for my website.

Here’s my brainstorming page 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.

An in-depth site map.

A redrafted version of my site map.

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.

Scan 1

Here are the second designs for my pages, excluding my homepage design.

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.

These are my third designs of my webpages. They're more detailed and in-depth.

These are my third designs of my webpages. They’re more detailed and in-depth.

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.

Scan 5

About and Contact page designs.

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.

User Interface Design links!

Computer, design, laptop, mobile, PC, tablet, U_5, Website Design

Here are some useful links that I found to various articles and websites on User Interface for web designs and mobile displays: