Jon Beck Photography Site
INTRODUCTION TO THE PROJECT
A university project, Jon Beck Photography was a fictional client that needed a website created for his photography business. After receiving a brief of what he envisioned his site to look like and the content it would include, I got to designing this website for the 'client' using HTML/CSS coding for the first time.
CONTENTS OF THIS PROJECT
CLIENT QUESTIONNAIRE
A client questionnaire was provided at the beginning of this project. This document detailed all the important information I needed on Job Beck and his current photography business that would be helpful in constructing a website that was true to himself and his brand as a photographer. The questionnaire goes into his likes and dislikes of websites he has seen that are either competitor companies or sites that he has stumbled upon, material and features he would like to include in the website and what his company has to offer to his audience. This information was very helpful in providing a basis for my research on the client and coming up with ideas that would suit the dream that was described in this questionnaire.
HIERARCHY OF GOALS
From the questionnaire it was important to take this information and establish a hierarchy of goals for the website to ensure that it followed what the client wanted from the site and that it reflected his company and brand accurately in their goals.
1. Promotion of the photographic work of Jon Beck and selling of these photographs to the target audience
2. Inform the website user of the photography workshops and tours that are being run, give information of where and how these workshops/tours run and how to get involved
3. Responsiveness to clients, fast and easy communication between Jon Beck Photography and possible clients; showing high-level of customer service in both queries and selling
4. Display a professional, high end approach to business - use of latest technology in the creation of the products being sold/promoted on the site
MOODBOARDS
Before I constructed the design, I needed to determine the theme of the website and what kind of mood I wanted it to portray to the audience that viewed this. The moodboard included text, colours, buttons, icons and more. This would become the basis of my final design compositions later in the project so it was important to create multiple moods with a board for each one respectively to assess which would be best for the website design.
COMPETITORS ANALYSES
When researching for this project, a big part of it was looking at Jon Beck's competitors and how the design and functionality of their websites worked effectively or what were their weaknesses in presenting their clients and the respective business. In this analysis I looked at photographers Mark Gray and Matt Krumins' websites and assessed how well they did with visual distinction, product catalogues, navigation, accessibility and more.
My final analyses of each website can be found in the conclusions section of images above, however as a summary of what I found out from my researching of the competitors I found seven major points that I realised I needed to incorporate into my own website based off of my research.
1. Ensuring the website is minimalistic by keeping the home page clutter free - spaced out, similar fonts all-round, bold headings
2. Begin with a gallery of the photographer's work that is large and stands out as the focus of the website - primary focus on the photographic images
3. Smaller section below photographs about the workshops - secondary focus
4. Have brief non-commercial descriptions of the services available on the website leading to links to appropriate pages with more information
5. Navigation bar to have main category headings with drop down menus for further subcategories within so there aren't too many headings and therefore can be spread nicely along the top of the home page
6. Make sure alt texts are coded properly to make sure the website is easily accessible for all users
7. Test the coding of the website on a range of web browsers to achieve as close to 100% rendering as possible so users of all browsers can view the site correctly
PERSONA
Personas are important in all graphic design research, especially web design, as you need to know your users well to design a website that is going to help them find what they are looking for on a website or what is going to appeal to them to keep them interested in the website and interact with it. For this project, I created a persona named Penelope Bell who is a mother and interior designer. This profile demonstrates qualities of Penelope's that might be in line with other people that may visit Jon Beck's website and want to engage with the features that he offers.
HOME PAGE WIREFRAMES
Before starting on my final designs and putting all that I have gathered in my research into a composition and plan for the website, I did wireframes for the home page as a basic skeleton for what the page might look like. I tried different orientations, looking at various positioning of images and text and formatting of text on the page. I eventually came to a final design of the wireframe that is shown below that was portrait, scroll down that fit in with the simplistic design that Jon Beck had asked for in his client questionnaire.
DESIGN COMPOSITIONS
Now that I had my final wireframe sorted out and ready to go, it was time to make it into a design composition and fill in all those blank spaces with the correct images that I wanted to use in the website, fonts and colours for the different elements present in the design of the website. This design composition would become my final design for the website that I would use code for to bring it to life. Once again I did multiple versions of this, picking the best one to be the final design composition.
CODING THE SITE
For this project, I learnt how to code for HTML and CSS using Bootstrap in coding software, Brackets. This was my first time coding for websites so there was a lot of video tutorials, looking up how to do what I was wanting to achieve and asking my university tutor lots of questions to get my website to where I wanted it to be and look like. The hardest part of this process for me was learning how to make a responsive website that would remain consistent across all devices from computers to mobile phones. As I watched more and more videos and got help, this became an easier process to work with and eventually I managed to get my site to responsiveness that I was aiming for.
USER TESTING
After I had completed the website, it was time to pass it over to others to get their feedback in user testing. I write up a brief user testing script that required users to navigate through the website to find features that were important to the goals of the website. From this script, the users participated in the user testing session where they used a think aloud protocol, where they navigated through the website without any prompting by myself except for asking the questions from the script, getting the user to talk out loud to describe their thought process as they navigated. This process is important in ensuring that I have done a correct job in the design and function of the website to lead the users through to what my client and myself want them to discover on the site to get them to interact with the client's brand.
Each user's testing script and feedback from their experience with my website is shown below, along with my summary of how the testing went.
Callum
Indiah
Morris
Survey Summary
FINAL WEBSITE
The website wasn't created with the intention of publishing it online for the public to view as the rights to Jon Beck Photography remain to the client themselves and not the fictional client brief that was created for this project at university. As a result, there is only access to this website through the HTML/CSS files created. Below is a link to a .ZIP file that contains all the HTML/CSS pages and images used in this website available to download if you wish to see the working site.
Note: The files will possibly only have access to be opened through a computer and not a mobile device.