The validity of the code and potential errors were checked for both HTML and CSS using the following validators:
- As a potential client and a business with time-constraints, I can immediately see beauty and full body shots of Agnes, so I can gauge if she has the overall look that I am searching for.
- The landing page immediately provides the client with both beauty and body shots via an easy to navigate carousel.
- A link for the Portfolio page is located both on the carousel and navigation bar, so if the client wishes to see more he/she can navigate quickly to the portfolio.
- As a potential client, I have easy access to her bio and so I can determine whether or not her character and work ethic fits with our team.
- A call to action button is located on both the landing page and the navigation bar that will take the customer to the About Me page, so the customer can learn more about her with ease.
- A short quote and a short, concise introduction about Agnes is also located on the landing page, so if the customer is in a rush they will be able to gauge something about her personality as well as see her pictures immediately on the landing page without needing to navigate to the rest of the site.
- As a new visitor to the site, I can easily and intuitively navigate between the pages, so I don’t waste time searching for things.
- Call to Action buttons are located on The Home Page and About Me page.
- The Navigation bar is in a clear font at the top and it toggles on a mobile view, so it is very intuitive to use.
- According to convention, the logo links back to the Home Page.
- The site has been tested by a few users and they have all remarked that it is very easy to move from one page to another.
- As a potential client, I have immediate access to her existing body of work so I can determine how well she photographs and how versatile she is.
- There is easy and intuitive navigation that leads to Agnes' photos in the Portfolio via the HomePage.
- There is at least one photograph on each page other than the Portfolio.
- There is a carousel on the Home Page, which immediately gives the client a snippet from her Portfolio.
- As a potential client, I am able to access her social media (instagram and facebook), so that I can do further research and keep up-to-date with her existing projects if I so wish.
- There is a footer on each page that navigates to both her Instagram and Facebook profiles.
- As a potential client, I can see who she has already worked with, so that I get a better idea of her level of experience.
- There is some information of the Portfolio page for each picture that outlines who she has worked with.
- As a potential client and a business, the overall layout of the website enables me to visualise how her photographs can be translated into a broader campaign, so I am able to gauge if I can use them in a professional capacity to fulfil my particular need.
- Muted, neutral colours were chosen for the site in order to make it look clean and to draw attention to the photos.
- The design of the website was made based on careful analysis of existing portfolios of photographers including Kayla Fisher and Mareen Fischinger and the conventions they used to make their websites appealing to existing clients, as well as emphasise how their work can be translated into a broader body of photographs.
- A limited number of elements were placed on each page during the design process to ensure that the focal point would be the photographs.
- Photographs were displayed both as a collective (the carousel and the Portfolio gallery) and as individual shots (The About Me and the the Contact Page). The purpose of this was to show the client how the photographs could be translated into different contexts, and to demonstrate their versatility.
- As a potential client and a business with time constraints, I can use the contact form quickly and intuitively in case I wish to get in touch with her and discuss anything further.
- It is easy to navigate to the Contact Form via the navigation bar.
- There are only 3 required fields on the contact form, and so the User Experience is fast and does not require too much typing.
- The form follows an intuitive and conventional layout (Name, Surname, email address and message).
- Navigation Bar
- Firstly, I entered the Home Page on a desktop.
- Secondly, I clicked on each Navigation menu item and checked that it went to the correct page.
- Thirdly I used the developer tools to check the site on both a Mobile and Tablet Device. I also checked each link on actual Mobiles and a Tablet to make sure each item went to the correct page.
- Initially there were overflow problems on the mobile and tablet version. Some of the images on the page were resized in order to fix this.
- Initially the Navbar was not clear enough and the font was too small, so it was difficult to see it on a smaller screen size. The font was changed and the background of the Navbar was also changed to 'dark' using a bootstrap preset as opposed to its initial transparency, which made it difficult to view.
- Logo was clicked and as expected it took the client to the Home Page.
- Carousel
- Carousel was refreshed multiple times on desktop, mobile and tablet to ensure that it smoothly transitioned between the three pictures.
- The slider on the carousel was clicked for each picture to ensure that it took the user to the correct picture.
- Animations on carousel, entry of text and images
- The page was refreshed on Mobile, Tablet and desktop to make sure that the Animations worked.
- About me Mini Section text & image, and Quote Section text
- The text and images for these two sections were tested on different screen sizes using the developer tools. This was to ensure that they looked appealing and stood out regardless of screen-size.
- The colour of font and font choice was changed multiple times in order to ensure that the most eye-catching font colour and font style was selected.
- Call To Action Button leading to About Me Page and 'View Portfolio'
- The View Portfolio link and 'Learn more About Me' button were clicked on different devices to ensure that they were working properly.
- Footer
- I hovered over the footer and as expected the colour changed on desktop but not on Mobile and Tablet. The icons also smoothly navigated to the correct social media pages.
- Navigation Bar
- Testing from the Homepage section was repeated on all three devices.
- Code was checked to ensure that it is identical to the Home Page.
- Page Image
- The image was checked on each device to ensure that it loaded correctly and that there was no overflow. Initially some overflow was experienced and so max-width was set to 100% in the css file to get rid of this problem on all images in the site.
- Page Content
- Text was checked on all screen sizes to make sure that it is clear and visible.
- Animations
- Animations were checked on all screen sizes to make sure that they transitioned smoothly.
- Call to Action Buttons
- Both buttons were clicked and tested on all three devices both by myself and other individuals to make sure that they navigated smoothly to their given page.
- Footer
- Testing from the Homepage section was repeated on all three devices.
- Code was checked to ensure that it is identical to the Home Page.
- Navigation Bar
- Testing from the Homepage section was repeated on all three devices.
- Code was checked to ensure that it is identical to the Home Page.
- Introductory Text
- Testing for Page Content from 'About Me' page was repeated.
- Gallery
- Each thumbnail image was clicked on the Portfolio page to ensure that it loaded correctly.
- The layout of each thumbnail image was checked on multiple screen sizes to ensure that there was no overflow (see Page Image section under 'About Me' to see how overflow was fixed across all images).
- Full screen view of all images was also checked on all devices to ensure there was no overflow and that the images appeared in high quality.
- Fancybox navigation buttons to move backwards and forwards, and play and pause functions were checked.
- Animations
- Testing of Animations/Transitions from 'About Me' and 'Home Page' was repeated on Portfolio Page.
- Footer
- Testing from the Homepage section was repeated on all three devices.
- Code was checked to ensure that it is identical to the Home Page.
- Navigation Bar
- Testing from the Homepage section was repeated on all three devices.
- Code was checked to ensure that it is identical to the Home Page.
- Page Image
- Testing from Page Image on 'About Me' page was repeated here on all screen sizes.
- Introductory Text
- Testing for Page Content from 'About Me' page was repeated.
- Contact Form
- Form was checked to see if it would allow user to submit without all mandatory fields filled in. First, I left the 'First name' field empty, then the 'Surname' field empty and then the 'Email Address' field empty. Each time, an error message occurred upon submission.
- Incorrect format for email address submitted, and as expected error message occurred.
- The screen size was changed and form was viewed on all devices to ensure that it looks clear and smooth regardless of screen size.
- Footer
- Testing from the Homepage section was repeated on all three devices.
- Code was checked to ensure that it is identical to the Home Page.
Friends and fellow students were given the website and asked to check navigation and give impressions on intuitive ease of navigation and clean, professional look of design. All parties agreed that the design enhances the images, which was the primary goal, and that navigation was smooth across the site.