This is the main website for Studio Monochrome, a creative photography studio based in Amsterdam. The website aims to target individuals, brands, and magazines who are looking for photography services to work on their campaigns. The website's main focus is to promote, showcase, and inform potential clients about their work, and raise studio awareness.
The website is fully interactive, built with mobile-first design in mind, and accessible on a wide range of mobile devices, and tablets.
The website features a modern, spacious, interactive, and eye chatching design following the latest trends for users to easily navigate, while having a unique experience during their visit.
- I want to understand the main purpose of the website.
- I want to easily navigate through the website.
- I want to find out more information about the studio, and their background.
- I want to see the studio's portfolio.
- I want to see the studio's social media presence.
- I want to find out how to contact the studio for project requests.
- The goal of the website is to inform potential clients about studio's work, increase Studio awareness, as well as increasing client portfolio. Studio aims to attract more clients by showcasing the quiality of their portfolio, and their vision for creative photography.
- The colors used throught the website are;
- Light Theme
- Dark Theme
- The primary font that was used on this project is Adobe Termina. It was used throughout the website for Logo, Navigation links, on all the texts, and Contact form to give the website a modern, and minimalistic feel.
- The landing page features a short video loop as a background. It's used to give the visitors an idea of the website's purpose, and a glimpse of the studio's work. The image for the About section was used to show the studio workspace, and their equipment. Portfolio images were chosen to establish the professionalism of the studio, and to give a hip, and stylish feel to the website.
- Responsive on all device sizes.
- Interactive, and responsive overlay navbar built with HTML, CSS, Javascript, and GSAP animations.
- Landing page featuring a video loop as a background, and animated reveal effects on jumbotron, texts, logo, and navbar.
- Information page about the Studio.
- Portfolio section showcasing Studio's work.
- Contact page with interactive contact Form using EmailJS API for project requests, and provide feedback upon succesfull submission.
- Custom scrollbar built with Javascript, and GSAP animations.
- Custom cursor built with Javascript, and GSAP animations.
- Dark Mode for users to easily customize, and style the website.
- Localstorage to store data across browser sessions, and save user settings for their future visits.
- Image, and text reveal animations using Javascript, and GSAP animations.
- ScrollTo animations for call to action buttons, using Javascript and GSAP animations.
- Blog section to increase website traffic, attract more potential clients, and raise brand awareness.
- Animated image carousel for each project, and campaign.
- Horizontal scroll section for the portfolio section.
- Implementation of a Smooth scrolling library for Desktop view for better UX.
- Visiual Studio Code
- Vscode Is the code editor used to develop, commit & push this project to Github.
- GitHub
- Github is used for:
- Tracking the project, and for version control.
- As a repository for other users to see the code used in the project.
- Deploying the final version of the project for live view. The deployed version can be viewed here.
- Bootstrap
- Bootstrap to structure the website, and to achieve responsive layout across various mobile devices.
- JQuery
- JQuery used with Bootstrap, and GSAP.
- The GreenSock Animation Platform
- GSAP used for animating the Overlay menu, texts, and Images on the website.
- EmailJS
- EmailJS used for the contact form to send emails directly using javascript.
- Adobe Fonts
- Adobe Fonts for importing typography.
- Adobe Photoshop 2021
- Adobe Photoshop 2021 for resizing images.
- Adobe Premiere Pro 2020
- Adobe Premiere Pro 2020 for editing video colors.
- Font Awesome
- Font Awesome for adding a icons.
- W3C Markup Validator
- W3C Markup Validator to check validity of HTML code.
- W3C CSS Validator
- W3C CSS Validator to check validity of CSS code.
- JSHint Javascript Code Quality Tool
- JSHint Javascript Code Quality Tool to check the quality of the Javascript code.
- Balsamiq:
- Balsamiq was used for creating wireframes during the design process.
The W3C Markup Validator and W3C CSS Validator Services were used to validate the HTML & CSS code in the project to ensure there were no syntax errors. JSHint was used to check the quality of the Javascript.
- I want to understand the main purpose of the website.
- Upon visiting the website, users are greeted with a short video loop of a photoshoot as landing page background, along with an animated jumbotron text showing the studio name, and a subtext describing the website's purpose.
- I want to easily navigate through the website.
- Upon visiting the website a call-to-action button is presented for users to easily start browsing the website. On the top right hand side there is a sticky, animated overlay navigation toggler that helps the user to navigate to any page they wish anytime they need. On the contact page there is an another call-to-action button that leads user back to the home page.
- I want to see the studio's portfolio.
- Right underneath the studio's about page, a portfolio section is presented to the user. Portfolio section contains all the photos that are taken by the studio, which are slided in with a smooth transition animation as they scroll through the section. Every image gives a detail about what type of photography studio produces.
- I want to find out more information about the studio, and their background.
- Upon visiting the website, right beneath the main text on the landing page, there is a call-to-action button that leads the user directly to Studio's about page, which gives an overview of the studio's mission, informing the visitor about their background, and all the campaigns they previously worked on.
- I want to see the studio's social media presence.
- Studio's social media presence is presented right underneath the navigation links every time user clicks on the navbar.
- I want to find out how to contact the studio for project requests.
- On the navigation bar a contact link is presented, which takes the user directly to the contact section, which is at the bottom of the website, and provides users with a contact form, along with the details of the studio.
- All pages were tested locally, and on GitHub using Chrome, Firefox, IE, and Safari.
- All pages tested for responsiveness in different device sizes using Google Chrome Developer Tools;
- Desktop
- iPhone 5/6/7/8/X
- iPad 1/2/3/Pro
- Galaxy Android phones
- All the pages were also tested manually using;
- iPhone 5s/6s/8/X/XS/11/
- Samsung Galaxy S8/Note 10+
- iPad Air 2
- iPad Pro 3
- All the internal links tested locally, and functional.
- All the logos on the website are functional, and leads the user back to the home page.
- All external links work as expected, and open in a new tab.
- All images are properly sized, and contain 'alt' text for description.
- All the buttons checked for functionality, and works as expected.
- All the links in navbar works, and navbar works as expected on mobile, and on desktop.
- All the fields in the contact form, as well as the submit button are tested, and working properly. Contact form successfully submits user requests, and gives feedback upon successful submission.
- All the animations on the website work properly on Desktop, and mobile without any glitches, or delay.
- Dark theme toggle works as expected, and saves user settings in localstorage for their next visit.
- Desktop:
- Mobile:
-
During the earlier development stages of this website, a smooth-scroll library was implemented to add smooth-scrolling effects throughout the website, and to add a horizontal scrolling section for the portfolio images. After further testing I found out that smooth-scrolling library was hijacking the native scrolling on mobile devices, therefore resulting a slower, and poor UX for the users. The issue was fixable, but in order to fix this issue there had to be changes made in the javascript. Due to its complexity, and the library being out of the scope of this project, smooth-scrolling library was removed, and implementation was left out.
-
During the testing stages of the website, contact form was causing issues, and wasn't submitting the form correctly, resulting an Authentication failure, and rejecting login attempt. After further testing issue turned out to be caused by Outlook email service. Issue was fixed by creating a new email account using Google's Gmail service.
-
During the final development stages of the website, I wanted to take a diferent approach for animating image, and text reveal effects, which were based on user's scroll direction. The code for these animations were taken from Greensock Demos. After further testing i've realized that the code wasn't working properly on mobile devices, therefore causing a glitch during scroll. I wasn't sure if the issue was related to my code, and i wanted to further test the issue by checking the GSAP's official website with my mobile device, which uses the same animations in the demo. I found out that the same problem appears on developers website as well. I've raised this issue on the Greensock Community Forums, and issue turned out to be a bug caused by the transition effects that were being used in the CSS, which only appears on Mobile browsers, and wasn't detected by the author. After raising the issue, developer updated their official Codepen demo, but the issue didn't seem to be fixed. Due to this reason, I've decided to update my code back to its original state, and changed my reveal animations to only work from one scroll direction, which works without issues on Desktop, and mobile devices. For more information on how to use Greensock Animations on your website, please visit Greensock.
-
To view the deployed version of Studio Monochrome I took the following steps:
- Logged on to GitHub.
- Selected yigitaksoy/Studio-Monochrome from the list of repositories.
- Selected Settings within the repository.
- Scrolled down to Github Pages, and changed source to master branch.
- The page automatically deployed.
-
To add this repository to your local workspace:
- Click on the Studio Monochrome repository on GitHub link.
- Click on the Code button, and copy the URL.
- Go into your local workspace, and open up a new terminal.
- Type
git cloneand paste the URL you copied from GitHub, and press enter. It should look like this:
git clone https://github.com/*username*/*repository*The process of cloning is now completed. For further information on cloning, visit How to clone from GitHub.
- All Content on this website were inspired, and adapted from websites on Awwwards.
- All images used on this website are from Unsplash.
- Video loop used on the landing page is from Mixkit.
- Animated Fullscreen Overlay Navigation with GSAP is from Codepen.
- Custom Scrollbar is from Greensock ScrollTrigger Demos.
- Animated Cursor is from Greensock Forums.
- Image reveal Animations is from Greensock Forums.
- Javascript code for detecting mobile browser is from Stackoverflow.
- Gradient reveal effect for homepage header is from Greensock Forums.
- Source code used for ScrollTo effects are from GSAP ScrollTo Plugin Documentation.
- Contact form structure code is from Codegrid Youtube Channel.
- Dark/Light Mode Switch with CSS Variables is from Dev.to
- EmailJS source code is from CI Walkthrough Project.
- I would like to thank my mentor Nishant Kumar for his valuable input thoughout this project.
- All content on the website, including images and text, are used for educational purposes only.