Project Brief
Client Meeting
To better understand the client needs a meeting was arranged. Compiling the information during the discussion I understand that the main goal of this site is to advertise and expand his client base. Expanding further on his client targets I understand that the majority of his work involves photography projects mainly in the sectors of art events, production shots and behind the scenes.
Logo
Logo design. Client does not have an existing design and is comfortable with a clear and simple font based logo that shows his name. However client is also open to suggestions and ideas.
Logo design. Client does not have an existing design and is comfortable with a clear and simple font based logo that shows his name. However client is also open to suggestions and ideas.
Navigation Bar
Discussion on how many pages needed for the website, client is not completely unsure as of the current moment but currently suggests around 5-6 Gallery pages with 2 additional for an about and contact page.
Discussion on how many pages needed for the website, client is not completely unsure as of the current moment but currently suggests around 5-6 Gallery pages with 2 additional for an about and contact page.
Homepage
After a brief discussion about the options of a homepage, client is positive to the suggestion of a carousel based homepage as an introduction showcase to his work before users explore further into the website.
After a brief discussion about the options of a homepage, client is positive to the suggestion of a carousel based homepage as an introduction showcase to his work before users explore further into the website.
Gallery
Client wants a website solely focused on a gallery system showcasing his photography work and does not require written descriptions for each image. Discussing further into the gallery display, client expresses the idea for a simple and clean design with the criteria of maintaining the original ratio of the images. Requesting details on the image sizes, client explains that he works with original image size of 5184x3456 pixels based on his camera’s specifications and rarely works outside of those dimensions.
Client wants a website solely focused on a gallery system showcasing his photography work and does not require written descriptions for each image. Discussing further into the gallery display, client expresses the idea for a simple and clean design with the criteria of maintaining the original ratio of the images. Requesting details on the image sizes, client explains that he works with original image size of 5184x3456 pixels based on his camera’s specifications and rarely works outside of those dimensions.
Responsive Design
As technology develops, there are an increasing number of ways of viewing online materials through various devices. Meaning numerous different screen resolutions. Bringing this to the attention of the client, he understands the need of a responsive layout in order to advertise his work more effectively. However it is expressed that the website should be prioritised in desktop resolution so users can view images closest to the original resolution for more accurate detail.
As technology develops, there are an increasing number of ways of viewing online materials through various devices. Meaning numerous different screen resolutions. Bringing this to the attention of the client, he understands the need of a responsive layout in order to advertise his work more effectively. However it is expressed that the website should be prioritised in desktop resolution so users can view images closest to the original resolution for more accurate detail.
User Discussion
In order to gather more insight on this project I decided to discuss with users about their needs when hiring a photographer. Feedback gained from the conversations included a good portfolio of work demonstrating the photographers skills in their criteria and possibly other subjects that will allow them to discern whether the photographer is adaptable to their line of work. Other than photography skills, users also value the description of the photographer as this will allow them to understand the personality and whether they will work together well.
In order to gather more insight on this project I decided to discuss with users about their needs when hiring a photographer. Feedback gained from the conversations included a good portfolio of work demonstrating the photographers skills in their criteria and possibly other subjects that will allow them to discern whether the photographer is adaptable to their line of work. Other than photography skills, users also value the description of the photographer as this will allow them to understand the personality and whether they will work together well.
Discussion on preferred viewing platform I noticed a mixture of answers. Most prefer to research/browse on their mobile, while others on a tablet and fewer on desktop simply for portable reasons. However some have stated that when it comes to more image based websites, their initial viewing would be on mobile but for more accurate detail they would continue further viewing on a desktop especially when looking to hire.
Low Fidelity
Homepage
Based off of the client criteria and the priority of desktop viewing, I created two different homepage concepts that I believed to be most suitable for the showing the objective. Both utilising an image carousel made to showcase a selection of work. The main difference is the display of the navigation bar and spacial design. Concept one shows a navigation bar with a dropdown function. The idea is to allow users to focus on the centred showcase of images with minimal distractions before continuing further into the website. Concept two shows more information on available pages to the users with a more filling view of having the carousel expanding to the limits of the resolution borders. The main goal is to provide as minimal interactions to the users, compared to the first concept and keeping the layout to a simple, single click and change layout.
Based off of the client criteria and the priority of desktop viewing, I created two different homepage concepts that I believed to be most suitable for the showing the objective. Both utilising an image carousel made to showcase a selection of work. The main difference is the display of the navigation bar and spacial design. Concept one shows a navigation bar with a dropdown function. The idea is to allow users to focus on the centred showcase of images with minimal distractions before continuing further into the website. Concept two shows more information on available pages to the users with a more filling view of having the carousel expanding to the limits of the resolution borders. The main goal is to provide as minimal interactions to the users, compared to the first concept and keeping the layout to a simple, single click and change layout.
Client Feedback
From our discussion I understood that the client preference lies more towards the second concept as it gives a more closer representation of the image to the original photographed size.
From our discussion I understood that the client preference lies more towards the second concept as it gives a more closer representation of the image to the original photographed size.
Navigation Bar
As for the navigation bar layouts I had originally chosen, client did not agree with the design and would prefer a more simpler approach. Prepared for this I had other designs planned for the meeting.
As for the navigation bar layouts I had originally chosen, client did not agree with the design and would prefer a more simpler approach. Prepared for this I had other designs planned for the meeting.
Client Feedback
Client prefers No.5 for a simpler design. Explaining my choices for choosing the two before based on how many gallery pages he wants. I decided to talk about the names of each of his pages as he was unsure how many pages he needed. Going through the notes previously about the type of work he’s done in art events, production shots and behind the scenes, do all the images he want to show case fall under all these categories? Client agreed so these would be the page names containing all the relevant work. Meaning there would only be 3 gallery pages needed, about page and contact page.
Client prefers No.5 for a simpler design. Explaining my choices for choosing the two before based on how many gallery pages he wants. I decided to talk about the names of each of his pages as he was unsure how many pages he needed. Going through the notes previously about the type of work he’s done in art events, production shots and behind the scenes, do all the images he want to show case fall under all these categories? Client agreed so these would be the page names containing all the relevant work. Meaning there would only be 3 gallery pages needed, about page and contact page.
Upon showing the other options for the navigation layout I found that the client favours the concept of number 4 and 5. In order to get a more accurate decision, I believed the best option at this current moment would be to discuss the amount of pages needed for the website. Referring back to the previous meeting about working in art events, production shots and behind the scenes, through discussion it was agreed that currently the images he plans to show fall under these three categories.
Gallery
As there are many options on how to display a gallery I decided to create a variety of gallery systems for the client during this stage. This will allow me to present options to the client and through discussion I can understand the general design that is more appropriate to the client.
As there are many options on how to display a gallery I decided to create a variety of gallery systems for the client during this stage. This will allow me to present options to the client and through discussion I can understand the general design that is more appropriate to the client.
Client Feedback
After showing the different gallery layouts I gained more information through feedback and discussion with the client:
After showing the different gallery layouts I gained more information through feedback and discussion with the client:
•Gallery No. 1 - Attracted to the layout of incorporating landscapes and portraits together.
•Gallery No. 2 - Does not have the feel of variety as the other layouts do and would require image editing to fit the correct image ratio portrayed.
•Gallery No.3 - Attracted to the more variety of grid structure without reducing the ratio of the images a considerable amount.
•Gallery No.4 - Attracted to the major variety of different image sizes shown, however shows concern around the images being too small.
•Gallery No.6 - A tidier layout where the images are aligned in rows and has a consistent pattern.
Upon further discussion, client specifies that majority of the images will be landscape based mores than portrait. The main concern for the image layouts presented in the low fidelity concept is around the image sizing being too small for users to view properly. After presenting a template for a contact form the client informed me more specifically that a name, contact email/phone number and a comment box for extra information would be all that is needed. A minor adjustment mentioned is the clients preference to give more subtlety to the interactive buttons on the image pop-ups.
Low Fidelity Development
The gallery layout has been updated after reflecting on client feedback on image sizes, forming the grid based on row alignment and adding more variety in alignment of images based on whether a portrait is present or not. Contact page has been updated and layout has been adjusted when removing unnecessary details from the form. Interactive arrows in the pop up gallery had the background removed. I believe during high fidelity prototyping, using component states and changing the alpha of the arrows will create a more subtle approach, removing further distractions from the images itself.
High Fidelity
Fonts
Based on the current design concept I decided to research on different font combinations that may suit the clients standards. I chose a mixture of simple but straight forward sans-serif styles and more styled serif fonts. From the client feedback, he expresses that he does not feel that serif type fonts represent him accurately and prefers the simple sans-serif styles but is more attracted to the logo in full capital letters as it stands out more.
Using this information I decided on more subtle sans serif based fonts. Choosing Helvetica as the main font for the logo and source sans pro for sub texts and navigation.
Using the few images given by client I moved onto a high fidelity prototype, filling in the remaining image tabs using the photo splash plugin to give a clear representation of how each gallery will look. In order for users to gain more interactive feedback on their current active page and/or what the cursor is currently highlighting, a text underline feature is introduced to the navigation bar. Adjustments to the pop up image overlay was made. Involving the previous and next arrow interactions, I used key component states and changing transparency levels to give them more subtle visuals. The about page was updated with clients profile and text fill is replaced with clients current bio description.
User testing
Running an initial prototype test among other design colleagues I have found some points of concern. That viewing the images on mobile phone maybe too small and a plan for landscape mobile view should be considered as well since users would rather switch from portrait to landscape mode based on the image type to get a bigger view. Should also create and test more prototypes to decide at what resolution will the navigation swap to drop down menu mode. Some have pointed out whether the arrow buttons are necessary for mobile view as smartphones are more commonly used these days, knowing the swipe left and right hand gestures come naturally. Rather they would prefer removing the arrow features to give more room for bigger images.
Running an initial prototype test among other design colleagues I have found some points of concern. That viewing the images on mobile phone maybe too small and a plan for landscape mobile view should be considered as well since users would rather switch from portrait to landscape mode based on the image type to get a bigger view. Should also create and test more prototypes to decide at what resolution will the navigation swap to drop down menu mode. Some have pointed out whether the arrow buttons are necessary for mobile view as smartphones are more commonly used these days, knowing the swipe left and right hand gestures come naturally. Rather they would prefer removing the arrow features to give more room for bigger images.
From user testing I have received positive feedback on the layout as they can see each individual image in the gallery clearly. Within the contact page most have stated that having a simple contact form is preferred as they would prefer to discuss further details personally. As the about page is the only available source of any information in the design, they believe a well developed description is important.
Client Meeting
Client had no objections to the overall design and approves of the new, more subtle arrows in the pop up gallery section. However, as the client has mentioned the importance of retaining images to it’s original ratio, I addressed the issue of homepage in mobile portrait view. As the images used were landscape based I offered alternatives to overcome this issue. After a brief discussion on the topic, we agreed that it was best to swap to portrait based images when the display is reduced to a portrait based phone resolution. Upon further discussion, client wanted to add another webpage based around portraits.
Client had no objections to the overall design and approves of the new, more subtle arrows in the pop up gallery section. However, as the client has mentioned the importance of retaining images to it’s original ratio, I addressed the issue of homepage in mobile portrait view. As the images used were landscape based I offered alternatives to overcome this issue. After a brief discussion on the topic, we agreed that it was best to swap to portrait based images when the display is reduced to a portrait based phone resolution. Upon further discussion, client wanted to add another webpage based around portraits.
High Fidelity Development
Based on user/client feedback and further research I decided to:
•Remove the arrow buttons from smaller screen views which allows more space for images and less visual interactions allowing users to focus solely on the images.
•Remove the arrow buttons from smaller screen views which allows more space for images and less visual interactions allowing users to focus solely on the images.
•Additional portrait page was added per clients request.
•Changed mobile homepage carousel images to portrait when under a specific resolution size. This removes the need to crop any images and fills the mobile view more cleanly.
•Add an extra prototype resolution size displaying when the navigation bar swaps to a drop down menu.
Final User Testing
With a working developed prototype I wanted to conduct one final testing focused on usability across different device resolutions. From the responses retrieved I am confident that the prototype has no known issues and can proceed with a client meeting and moved on to developing.
With a working developed prototype I wanted to conduct one final testing focused on usability across different device resolutions. From the responses retrieved I am confident that the prototype has no known issues and can proceed with a client meeting and moved on to developing.
