A brand new website layout for Photographer's Portfolio.

1. 1st idea: Photography Portfolio.

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

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

4. Things to consider / add
in a Photography Portfolio
website

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

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

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

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

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

10. Examples of problems I had
encountered.
1) Photos are not categorized.
Website Link:
http://www.fredrikclement.com/#/home

11. This is the Home Page.

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

13. After clicking the link.

14. When you are in the page above.
Move your mouse
over to the arrow.

15. And you will be led to this sliding
gallery.

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

17. Examples of problems I had
encountered.
2) Photos can be slightly bigger.
Website Link:
http://www.jaapvliegenthart.nl/

18. This is the Home Page.

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

20. And you will be led to this light box
gallery

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

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

23. Design Considerations

24. Photographer’s Portfolio
• Requirements of the website. • Research.
– Short description of the – Websites / Tutorials.
photographer.
– Site visits – original
– Contact (email, facebook, photographer’s portfolio
twitter?) website.
– 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.

25. Photographer’s Portfolio
• Target Audience. • Website Editing.
– People who are interested – Simple layout.
in ‘Nature’ and also a ‘Calm’ • Requirements for the users.
person.
• Images must be big
– People who are ‘wildlife’ enough for user
photographers. satisfaction.
• Website must not have
slow loading speed.
• Information / images
posted must be
categorized.

26. Sketches.

27. First sketch

28. Second sketch

29. Site Map

30. 1st layout of the Photographer’s
Portfolio website.

32. 2nd layout of the Photographer’s
Portfolio website.

34. Pros and Cons found in the 2 layouts.

35. Pros found in 1st layout.
•The 4 categories
(FRUITS, LANDSCAPE,
PORTRAIT & OBJECTS)
Background Color can be seen very well.
4 Categories. •Eyes will not feel pain
because the dark blue
background matches well
with the bright pictures.

36. Pros found in 2 layout.
nd
Navigation
Bar
•There is a focus at the
viewing gallery.
•Navigation bar is clear.
•Categories at the
bottom are nice.

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

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

39. Cons no.1 found in 2nd layout.
Background
Color •The background color is
bright.
Bright
Photos •Photos used are also very
bright.
•Thus, when bright
background and bright
photos are being put
together, it will cause
discomfort for the eyes.

40. Cons no.2 found in 2nd layout.
•There is a viewing
gallery.
•There are different
categories at the bottom
Viewing gallery •Thus, it might cause
confusion to people. (go
to viewing gallery or to
Different Categories
see the photos from the
different categories
below?)

41. Sketch of the final layout

42. Sketch of final layout

43. ‘Final’ Layout

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

46. Before
After

47. Digital Prototype

48. Digital Prototype (Home Page)

49. Digital Prototype (About Page)

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

51. Digital Prototype (Contact Page)

52. Link to the website prototype.
• photofolio.businesscatalyst.com

53. Further Development.

54. Click Click

55. Explanation

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

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

58. Click

59. Nature theme
This 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.

60. When user clicked on one of the
thumbnails in the ‘Nature Theme’
page, ‘1 thumbnail’…
st

61. 1st Nature Picture Thumbnail
After 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.

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

63. A walkthrough.

64. Home page

65. About page

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

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

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

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

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

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

72. Contact page