Capstone Project: WordPress Website Theme

Project Blue Photography-Logo-Colored version of a camera with a mountain in front of it and the words Project Blue underneath the moutain
Project Blue Photography-Logo Colored Version

Project Blue Photography Case Study | March 2023

For my capstone project I am going to create a website that uses some of the exciting features such as CSS animations, scroll into view, using background video elements, and much more. This website will consist of multiple sections, or pages, that help make the website visually attractive to clients, new and returning. The overall goal from the website is to increase the number or projects and jobs. The website should be created with the utmost professionalism, yet still be able to showcase the skills I have as a web designer.

There will be a link available to bring clients to my portfolio for examples of my work so that the body copy and content will focus solely on gaining new leads for my freelance company. Additionally, the website will also be setup for monthly backups and updates of the website & plugins, integration of a newsletter to keep past clients reminded of our company. The website will be setup for Google Analytics and SEO optimization. The page load times will make a difference as there will be transitions and page effects that can end up weight the page down, making it load slower.

Lastly, this project will be used to attract new clients so it will highlight and show my graphic design skills in multiple departments, including content creation, website design, and web development, This project will meet GMW Department Objectives #1,4, and 5.

However, indirectly I believe I will be meeting all the department objectives as I will have to focus on making sure I have the right licenses and copyright information for any assets or images I may find online and use on the website. It is important that if any of my work needs to be referenced or linked somewhere to give proper credit. I believe I will meet the second objective because I will have to narrow down my concepts and ideas to whatever design is going to be most effective for my website and what I want to achieve.

  • List of Programs Used:
  • Adobe Creative Suite- Photoshop, Illustrator, Adobe XD, Media Encoder, After Effects
  • WordPress Content Management System
  • All photos came from the website Unsplash. (www.Unsplash.com)
  • Commonly Used List of Plugins:
  • Child Theme Creator
  • Elementor
  • MailChimp
  • Backup & Restore
  • Google Analytics
  • Askim Spam Protection
  • Contact Form 7
  • WP SMTP
Project Blue Photography- About Page Wireframe/ Mockup
Project Blue Photography- About Page Wireframe/ Mockup
Project Blue Photography- Contact Page. Wireframe/Mockup
Project Blue Photography- Contact Page. Wireframe/Mockup

I designed and created a responsive WordPress website that has a many features such as a full-page navigation, google map in the footer. This website build was a lot of fun and had a few obstacles that I had to work through to get it working how I wanted. Also, using custom made images for the shape dividers for different sections made it tricky to continue the desktop design onto mobile. 

In the end it was able to seamlessly flow together, and I am very happy with how the project came out. I learned more about using the z-index and the benefits of having similar looking layouts only showing on certain devices. For example, I had to alter the design of the webpages from being horizontal to vertical and stacking the elements on top of one another.

After the completion of the website, I created a brief video that showcase the website mobile responsive design. Some things I wish I could change to make this project better would be giving myself more time to spend on the building of the website so that it has a cleaner and faster load time. In conclusion, I am very happy with this project and am excited to use the skills I have learned to design more websites for other clients.

Additional Mockups

Project Blue Photography- Home Page/ Index. Wireframe/Mockup
Project Blue Photography- Home Page/ Index. Wireframe/Mockup
Project Blue Photography- Gallery Page. Wireframe/Mockup
Project Blue Photography- Gallery Page. Wireframe/Mockup
Project Blue Photography-Services Page. Wireframe/Mockup
Project Blue Photography-Services Page. Wireframe/Mockup