Project Summary

Adrian Duncan Photography is a fully responsive landing page developed using HTML5, CSS3, JavaScript, jQuery and Bootstrap 4.1. This was my first personal project using bootstrap grid system. The idea of this project was to create a landing page that professional photographers could use to showcase their work. I decided to do this project to enhance my bootstrap knowledge while off on term break.

Project Details

Role

Designer/Developer

languages

HTML5, CSS3, Bootstrap, JavaScript, jQuery

goal

Create a fully responsive modern landing page for a professional photographer

Process

The first steps of preproduction I drew up a mind map to brainstorm ideas for my project. I then gathered up my ideas and started drawing sketches to lay out the information architecture to show where each UI elements should be on the page. Finally, before developing the landing page I used Adobe XD to create low fidelity wireframes to confirm the design model of the project for both desktop and mobile. 

Sketches

Wireframes 

Special Features

  • High definition images
  • JavaScript Lightbox Gallery
  • jQuery Owl Carousel
  • Basic form for email address
  • Font Awesome icons for high quality styling
  • Bootstrap grid system for responsive design
  • Creating fully responsive website design across multiple devices by applying Media Queries

Final Product

Target Audience

Business professionals, Photographers looking to communicate their brand and gain credibility.  

Design Choices

With user friendliness being the main objective in this project I decided to use a white and black color scheme as I really wanted to make use of whitespace and create a clear hierarchy for the user to have a clear understanding and also make it fun to scroll down the page.  

Design Philosophy

The goal of Adrian Duncan Photography landing page was to use the skills I learned in my Web Technologies course and Udemy courses to build a fully responsive single page that I could showcase photography taken from myself or others. I decided to use HTML5, CSS3, Bootstrap grid system and some JavaScript and jQuery.      

Challenges

One of the biggest challenges I faced in this project was making the page fully responsive. At this point we were at the early stages of learning media queries so I found it difficult to understand what elements needed changed and for the design to look mobile friendly.   

Thanks for Reading!

Lets Work Together!