Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

A brand new website layout for Photographer's Portfolio.

Published in: Design, Art & Photos, Business
  • Be the first to comment

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