1st Portfolio Development Idea: Photographer's Portfolio Website Layout

1st idea: Photography Portfolio.

Purpose of a Photography Portfolio Website.

• Provides ‘evidence’ to employers of your work.• Requires you to publicize yourself as a

photographer.• It contains the quality of your experience and

training.• An organized collection of photos that presents both

personal and professional achievements in a definite way.

Reasons why designing a Photography Portfolio?

• Designing a portfolio website can greatly change the user’s reaction to the showcased work.

• The goal is to give credentials and personal information in a way that is practical, user friendly and pleasing enough.

Things to consider / add in a Photography Portfolio

website

1) Target Audience

• Narrowing down the choice of target audience because one cannot make all people happy most of the time.

• Have to think of the user or the customer that I want to target and then try to design according to their needs.

2) Number of images

• Layout with minimal number of images will look good.

• However, the same layout will not look good when there are countless images in it.

3) Making the images more prominent

• The background should play a useful role in making the images look more prominent and not the other way round.

• Try to use some images against different backgrounds and find out which one actually look good.

4) What matters the most: Quality

• Images should load without any lagging and the images must be loaded with full size when clicking on the thumbnails.

• Images have to be in good and high quality because it will give user a different sense if there are 2 versions of images. (High and low quality)

Problems that I faced when visiting the original photography websites.

• Photos are not categorized.• Loading of the website is slow due to the amount of

graphics / animations used in the website.• Some images posted are not big enough for user

satisfaction.

Examples of problems I had encountered.

1) Photos are not categorized.Website Link:

http://www.fredrikclement.com/#/home

This is the Home Page.

Clicking on one of the links. (‘Dirt Track’)

After clicking the link.

When you are in the page above.

Move your mouse over to the arrow.

And you will be led to this sliding gallery.

The above sliding gallery.

• Able to use mouse to hover it so that it will slide.• A lot of photos in the gallery.• Not categorized because there are so many photos

that will need you to go through them one by one to get the feeling of what type of the photos the photographer takes.

Examples of problems I had encountered.

2) Photos can be slightly bigger.Website Link:

http://www.jaapvliegenthart.nl/

This is the Home Page.

Click on one of the links at the bottom. (Personal)

And you will be led to this light box gallery

The above light box gallery.

• One photo per page.• The photo shown above can be considered big

enough.• However, it can be slightly big enough and can be

of a better quality for user’s satisfaction.

Problems that I am going to tackle on.

• Categorization of the photos.– Give the visitors a kind of feeling of what types of photos the

photographer is taking.

• Loading of the page when you first visit the website (slow / fast)– It takes some time to load when there are a lot of animations

going on in the website.

• Images posted on the website can be a bigger.– Some images posted on the website is not big enough for user

satisfaction.

Design Considerations

Photographer’s Portfolio• Requirements of the website.

– Short description of the photographer.

– Contact (email, facebook, twitter?)

– Logo / name of the website (able to link it back to the home page)

– Categorized works presented.– Color used for the website.– Fonts used in the website.

• Research.– Websites / Tutorials.– Site visits – original

photographer’s portfolio website.

Photographer’s Portfolio• Target Audience.– People who are interested

in ‘Nature’ and also a ‘Calm’ person.

– People who are ‘wildlife’ photographers.

• Website Editing.– Simple layout.

• Requirements for the users.• Images must be big

enough for user satisfaction.

• Website must not have slow loading speed.

• Information / images posted must be categorized.

Sketches.

First sketch

Second sketch

Site Map

1st layout of the Photographer’s Portfolio website.

2nd layout of the Photographer’s Portfolio website.

Pros and Cons found in the 2 layouts.

Pros found in 1st layout.

Background Color

•The 4 categories (FRUITS, LANDSCAPE, PORTRAIT & OBJECTS) can be seen very well.

•Eyes will not feel pain because the dark blue background matches well with the bright pictures.

4 Categories.

Pros found in 2nd layout.

•There is a focus at the viewing gallery.

•Navigation bar is clear.

•Categories at the bottom are nice.

Navigation Bar

Cons no. 1 found in 1st layout.

Navigational bar (put as footer)

•4 links: Portfolio, Biography, Works & Contact.

•Navigational bar is not very clear as it is placed at the bottom (placed as footer). Therefore, it is not visible enough.

Cons no. 2 found in 1st layout.•The 4 pictures are too cramped.

Cons no.1 found in 2nd layout.

Background Color •The background color is

bright.

•Photos used are also very bright.

•Thus, when bright background and bright photos are being put together, it will cause discomfort for the eyes.

Bright Photos

Cons no.2 found in 2nd layout.•There is a viewing gallery.

•There are different categories at the bottom

•Thus, it might cause confusion to people. (go to viewing gallery or to see the photos from the different categories below?)

Viewing gallery

Different Categories

Sketch of the final layout

Sketch of final layout

‘Final’ Layout

Improvements made.

• Combined elements from 2 layouts together as one.• Blue background remained.• Viewing gallery added at in the center.• ‘Footer’ remained.

Before

After

Digital Prototype

Digital Prototype (Home Page)

Digital Prototype (About Page)

Digital Prototype (Portfolio Page)•There is a drop down list under the Portfolio page. They are ‘Calm Ocean’ & ‘Calm Before the Storm’.

•Photos are being categorized using the drop down list.

•When click on one of the links in the drop down list, it will lead you to the gallery of the link that you have clicked.

Digital Prototype (Contact Page)

Link to the website prototype.

• photofolio.businesscatalyst.com

Further Development.

Click Click

Explanation

Home Page

Thumbnails will be placed at the home page so as to keep it simple to let the users to focus.

When user clicked on one of the thumbnails, ‘Nature’…

Click

Nature themeThis is the page that will lead the user to when the user clicked on one of the thumbnails at the home page. In this case, the user clicked on ‘Nature’.

Over at this page, there will also be thumbnails of the photos.

When user clicked on one of the thumbnails in the ‘Nature Theme’

page, ‘1st thumbnail’…

1st Nature Picture ThumbnailAfter clicking on one of the thumbnails in the ‘Nature Theme’ page, the above picture will become a pop-up page on the website and show the number of LIKES below the photo, and user itself can also like the photo if he or she likes it.

What is the difference between a normal photo sharing website and the current design?

• The current design does not act as just a portfolio website. It can also allow user to LIKE the photos that they have viewed.

• A normal photo sharing website has to sign up. However, this current design, users do not need to sign up as a member just to LIKE the photo. It is a balance between a normal portfolio website and a photo sharing website.

• At the same time, the photographer is able to gain his popularity without people signing up to LIKE his or her photos.

A walkthrough.

Home page

About page

Portfolio Page; when image is clicked, it will pop out a larger version of the image.

Portfolio Page; when image is clicked, it will pop out a larger version of the image.

Portfolio Page; when image is clicked, it will pop out a larger version of the image.

Portfolio Page; when image is clicked, it will pop out a larger version of the image.

Portfolio Page; when image is clicked, it will pop out a larger version of the image.

Portfolio Page; when image is clicked, it will pop out a larger version of the image.

Contact page