First Photography is a site that gives a start-up photographer who is specialising in photography for newborn to toddler photography an online presence. This site is targetted at new partents who are looking to capture first moments with their children in a professional style. This could be through many offered services such as: Cake Smash photography, newborn shoots, religious or naming ceremonies, family portraits, etc.
The site user will be able to find out about the photographer, see what services are offered, see some example photography and be able to get in touch with the photorapher via a contact form or through links to social media channels.
PLACEHOLDER: http://ami.responsivedesign.is/ images of finished site
I undertook a business needs/feasibility exercise discussed in the strategy plane part of the user essentials module. This helped me decide what to include in this project. Please see below:
I haven't included the plotter graph but based on the scores for importance and fesibility I was able to identify the four areas that were of most importance and most fesible.
I then created a wireframe using Balsamiq to have a structure to work from when building the actual site:
The navigation bar is fully responsive and will allow the user to navigate to the following pages:
- Home
- Gallery
- Contact
The puseduo hover CSS class has been used along with an active class when the user is on each page to show which page in the navigation they are on. The navigation bar will also show on all four pages so the user can easily navigate around the site wherever they are.
PLACEHOLDER: [screenshot of navigation bar]
The main banner image at the top will display in the header section below the navigation bar. The intention with the banner image is for the user to be drawn into an emotional response when they first hit the site, ensuring they continue to browse and eventually get in touch to book their own photoshoot.
PLACEHOLDER: [Image of header section]
The About me section is floated left to 50% of the size of the screen and contains an introduction about the photography and aims to build trust and excitement about using them for such important photo shoots.
PLACEHOLDER: [Image of About me section]
The Example services section is floated right to 50% of the screen and advertised the main services offered. The idea behind presenting the information to the user in this way is so they don't have to jump through too many clicks to find out what is actually offered by the photographer. The about and services can be viewed as one piece.
PLACEHOLDER: [Image of Example services section]
The footer will be at the bottom of the page and will contain links to social media. Inspiration for this was taken from the Love Running project as the minimal sleek Font Awesome icons look great. An extra navigation link to the Contact page is also included as a learned behaviour overtime (especially from corporare sites) is to find contact info in the footer. It was felt that the key call-to-action (CTA) for users is for them to get in contact to book so repeating the CTA felt worthwhile.
[Image of Example Footer section]
The navigation section will be repeated here to have navigational continuity for the user.
There will then be a selection of photos taken from Pixelate the stock imagery site to represent images the imaginery photographer has taken on previous shoots. The idea behind this is to encourage the user to see photography and be inspired to book in for similar shoots.
[Image of Gallery section]
The footer section will be repeated here to again keep reinforcing the CTA's.
The navigation section will be repeated here to have navigational continuity for the user.
The contact page has a contact form section center aligned auto so it is in the middle of the middle section (between navigation and footer). It includes required details of First Name, Last Name, Email Address and a description box for the potential services required.
[Image of Contact form section]
The footer section will be repeated here to again keep reinforcing the CTA's.