1st idea: Photography Portfolio.
Purpose of a Photography Portfolio                  Website.• Provides ‘evidence’ to employers of your work.• Requires you...
Reasons why designing a Photography               Portfolio?• Designing a portfolio website can greatly change  the user’s...
Things to consider / addin a Photography Portfolio         website
1) Target Audience• Narrowing down the choice of target audience  because one cannot make all people happy most of  the ti...
2) Number of images• Layout with minimal number of images will look  good.• However, the same layout will not look good wh...
3) Making the images more prominent• The background should play a useful role in making  the images look more prominent an...
4) What matters the most: Quality• Images should load without any lagging and the  images must be loaded with full size wh...
Problems that I faced when visiting the   original photography websites.• Photos are not categorized.• Loading of the webs...
Examples of problems I had       encountered.1) Photos are not categorized.       Website Link:http://www.fredrikclement.c...
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 cat...
Examples of problems I had        encountered.2) Photos can be slightly bigger.        Website Link:    http://www.jaapvli...
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 b...
Problems that I am going to tackle on.• Categorization of the photos.   – Give the visitors a kind of feeling of what type...
Design Considerations
Photographer’s Portfolio• Requirements of the website.      • Research.   – Short description of the          – Websites /...
Photographer’s Portfolio• Target Audience.                  • Website Editing.   – People who are interested         – Sim...
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.                             •The 4 categories                             (FRUITS, LANDSCAPE,   ...
Pros found in 2 layout.              nd                            Navigation                            Bar              ...
Cons no. 1 found in 1st layout.                                   Navigational bar (put as                                ...
Cons no. 2 found in 1 layout.                    st                          •The 4 pictures                          are ...
Cons no.1 found in 2nd layout.         Background            Color     •The background color is                      brigh...
Cons no.2 found in 2nd layout.                             •There is a viewing                             gallery.       ...
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 ad...
Before         After
Digital Prototype
Digital Prototype (Home Page)
Digital Prototype (About Page)
Digital Prototype (Portfolio Page)                       •There is a drop down list                       under the Portfo...
Digital Prototype (Contact Page)
Link to the website prototype.• photofolio.businesscatalyst.com
Further Development.
Click   Click
Explanation
Home PageThumbnails will be placed at the home page so as tokeep 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 thethumbnails at the home page. In...
When user clicked on one of thethumbnails in the ‘Nature Theme’    page, ‘1 thumbnail’…             st
1st Nature Picture ThumbnailAfter clicking on one of the thumbnails in the ‘Nature Theme’ page, the abovepicture will beco...
What is the difference between a normal photo   sharing website and the current design?• The current design does not act a...
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
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
Upcoming SlideShare
Loading in...5
×

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

843

Published on

A brand new website layout for Photographer's Portfolio.

Published in: Design, Art & Photos, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
843
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. 1st idea: Photography Portfolio.
  2. 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. 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. 4. Things to consider / addin a Photography Portfolio website
  5. 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. 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. 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. 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. 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. 10. Examples of problems I had encountered.1) Photos are not categorized. Website Link:http://www.fredrikclement.com/#/home
  11. 11. This is the Home Page.
  12. 12. Clicking on one of the links. (‘Dirt Track’)
  13. 13. After clicking the link.
  14. 14. When you are in the page above. Move your mouse over to the arrow.
  15. 15. And you will be led to this sliding gallery.
  16. 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. 17. Examples of problems I had encountered.2) Photos can be slightly bigger. Website Link: http://www.jaapvliegenthart.nl/
  18. 18. This is the Home Page.
  19. 19. Click on one of the links at the bottom. (Personal)
  20. 20. And you will be led to this light box gallery
  21. 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. 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. 23. Design Considerations
  24. 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. 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. 26. Sketches.
  27. 27. First sketch
  28. 28. Second sketch
  29. 29. Site Map
  30. 30. 1st layout of the Photographer’s Portfolio website.
  31. 31. 2nd layout of the Photographer’s Portfolio website.
  32. 32. Pros and Cons found in the 2 layouts.
  33. 33. 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.
  34. 34. 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.
  35. 35. Cons no. 1 found in 1st layout. Navigational bar (put as footer)•4 links: Portfolio,Biography, Works &Contact.•Navigational bar is notvery clear as it is placedat the bottom (placed asfooter). Therefore, it isnot visible enough.
  36. 36. Cons no. 2 found in 1 layout. st •The 4 pictures are too cramped.
  37. 37. Cons no.1 found in 2nd layout. Background Color •The background color is bright.BrightPhotos •Photos used are also very bright. •Thus, when bright background and bright photos are being put together, it will cause discomfort for the eyes.
  38. 38. Cons no.2 found in 2nd layout. •There is a viewing gallery. •There are different categories at the bottomViewing gallery •Thus, it might cause confusion to people. (go to viewing gallery or toDifferent Categories see the photos from the different categories below?)
  39. 39. Sketch of the final layout
  40. 40. Sketch of final layout
  41. 41. ‘Final’ Layout
  42. 42. Improvements made.• Combined elements from 2 layouts together as one.• Blue background remained.• Viewing gallery added at in the center.• ‘Footer’ remained.
  43. 43. Before After
  44. 44. Digital Prototype
  45. 45. Digital Prototype (Home Page)
  46. 46. Digital Prototype (About Page)
  47. 47. 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.
  48. 48. Digital Prototype (Contact Page)
  49. 49. Link to the website prototype.• photofolio.businesscatalyst.com
  50. 50. Further Development.
  51. 51. Click Click
  52. 52. Explanation
  53. 53. Home PageThumbnails will be placed at the home page so as tokeep it simple to let the users to focus.
  54. 54. When user clicked on one of the thumbnails, ‘Nature’…
  55. 55. Click
  56. 56. Nature themeThis is the page that will lead the user to when the user clicked on one of thethumbnails at the home page. In this case, the user clicked on ‘Nature’.Over at this page, there will also be thumbnails of the photos.
  57. 57. When user clicked on one of thethumbnails in the ‘Nature Theme’ page, ‘1 thumbnail’… st
  58. 58. 1st Nature Picture ThumbnailAfter clicking on one of the thumbnails in the ‘Nature Theme’ page, the abovepicture will become a pop-up page on the website and show the number of LIKESbelow the photo, and user itself can also like the photo if he or she likes it.
  59. 59. 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.
  60. 60. A walkthrough.
  61. 61. Home page
  62. 62. About page
  63. 63. Portfolio Page; when image is clicked, it will pop out a larger version of the image.
  64. 64. Portfolio Page; when image is clicked, it will pop out a larger version of the image.
  65. 65. Portfolio Page; when image is clicked, it will pop out a larger version of the image.
  66. 66. Portfolio Page; when image is clicked, it will pop out a larger version of the image.
  67. 67. Portfolio Page; when image is clicked, it will pop out a larger version of the image.
  68. 68. Portfolio Page; when image is clicked, it will pop out a larger version of the image.
  69. 69. Contact page
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×