Personal Website and Workshop Landing Page for Abhishek Kanani, a renown
Indian wedding cinematographer
Personal Website and Workshop Landing Page for Abhishek Kanani,
a renown Indian wedding cinematographer
Personal Website and Workshop Landing Page for Abhishek Kanani, a renown Indian wedding cinematographer
INTRODUCTION
INTRODUCTION
Abhishek Kanani is a renown wedding cinematographer, photographer and video editor based in Surat, India. I collaborated with The Media Architects to design his personal website, and develop it on Webflow.
Abhishek Kanani is a renown wedding cinematographer, photographer and video editor based in Surat, India. I collaborated with The Media Architects to design his personal website, and develop it on Webflow.
Abhishek Kanani is a renown wedding cinematographer, photographer and video editor based in Surat, India. I collaborated with The Media Architects to design his personal website, and develop it on Webflow.
PROJECT BRIEF
PROJECT BRIEF
Design a personal portfolio and workshop landing page for Abhishek Kanani (@CinematicAB) to showcase his work in wedding cinematography and drive new sign ups on his workshops.
Design a personal portfolio and workshop landing page for Abhishek Kanani (@CinematicAB) to showcase his work in wedding cinematography and drive new sign ups on his workshops.
WEBSITE GOALS
WEBSITE GOALS
The website was supposed to serve two purposes:
The website was supposed to serve two purposes:
1
1
Act as a portfolio, to showcase all his existing work and drive client discovery
Act as a portfolio, to showcase all his existing work and drive client discovery
Abhishek had a large body of work, spread across multiple platforms. A personal website would collate all of his work and help future clients and aspiring filmmakers find his work and potentially hire him or work alongside him.
Abhishek had a large body of work, spread across multiple platforms. A personal website would collate all of his work and help future clients and aspiring filmmakers find his work and potentially hire him or work alongside him.
2
2
Simplify workshop selection and improve sign up rates.
Simplify workshop selection and improve sign up rates.
Aspiring filmmakers who wanted to take Abhishek’s workshops were frequently confused about the differences in his workshops and had a lot of queries about them. His site needed landing pages for his workshops to enable students to make informed decisions about his courses, to improve sign-up rates.
Aspiring filmmakers who wanted to take Abhishek’s workshops were frequently confused about the differences in his workshops and had a lot of queries about them. His site needed landing pages for his workshops to enable students to make informed decisions about his courses, to improve sign-up rates.
The Design Process
The Design Process
Once I had come to grips with what the goals of the site were, I moved on to the design process, starting off with some research.
Once I had come to grips with what the goals of the site were, I moved on to the design process, starting off with some research.
Research
Research
Domain Discovery
Domain Discovery
Prior to this project, I had little understanding about the scale of the wedding industry in India.
The wedding industry in India was an estimated $50 Billion industry with an annual growth rate of 25-30%, employing over 10 million people in India. There are an estimated 12 million weddings per year in India.
Due to the craze for customised weddings, there is also a huge demand for event planners, wedding photographers, cinematographers and filmmakers and it was only growing. According to a survey done by WeddingWire India, there are around 300k couples in India that use the internet to find wedding vendors.
This further highlighted how important a personal website would be to connect Abhishek to prospective clients & other collaborators.
Prior to this project, I had little understanding about the scale of the wedding industry in India.
The wedding industry in India was an estimated $50 Billion industry with an annual growth rate of 25-30%, employing over 10 million people in India. There are an estimated 12 million weddings per year in India.
Due to the craze for customised weddings, there is also a huge demand for event planners, wedding photographers, cinematographers and filmmakers and it was only growing. According to a survey done by WeddingWire India, there are around 300k couples in India that use the internet to find wedding vendors.
This further highlighted how important a personal website would be to connect Abhishek to prospective clients & other collaborators.
Personality Discovery
Personality Discovery
The initial research phase involved finding out about Abhishek as an individual, and what his artistic style was, as that would dictate the direction some decisions would be based around. Some of the traits that make a good wedding cinematographer are the ability to tell a story and attention to detail to capture the beauty of the event.
After conversing with him and watching some of his wedding films, I realised that the website should exude a sense of refinement and sophistication, truly showcasing his outstanding work.
The initial research phase involved finding out about Abhishek as an individual, and what his artistic style was, as that would dictate the direction some decisions would be based around. Some of the traits that make a good wedding cinematographer are the ability to tell a story and attention to detail to capture the beauty of the event.
After conversing with him and watching some of his wedding films, I realised that the website should exude a sense of refinement and sophistication, truly showcasing his outstanding work.
Information Architecture
Information Architecture
Once I had decided the visual language for the site I went over the sitemap & established a clear information architecture of the entire website.
Once I had decided the visual language for the site I went over the sitemap & established a clear information architecture of the entire website.
Information Architecture visual
Information Architecture visual
Visual Design
Visual Design
Because his content itself is visually rich and quite heavy, the visual design for the website had to allow his work to breathe and take center stage.
Because his content itself is visually rich and quite heavy, the visual design for the website had to allow his work to breathe and take center stage.
Moodboard & Visual Inspiration
Moodboard & Visual Inspiration
To form a mental image of the kind of design and visual language, I took a look at a variety of websites in the domain, as well as personal portfolios for a bunch of creatives in the same or similar space. These would serve as inspiration for the visual language on the website.
To form a mental image of the kind of design and visual language, I took a look at a variety of websites in the domain, as well as personal portfolios for a bunch of creatives in the same or similar space. These would serve as inspiration for the visual language on the website.
Moodboard
Moodboard
Typography
Typography
I intended to use a serif font that would convey elegance, a refined upscale look, and flair, all characteristics that also described his work. After some deliberation, we decided to compromise and use Playfair Display for the titles and headings, due to budget constraints. Lower priority text and headings would use Inter.
I intended to use a serif font that would convey elegance, a refined upscale look, and flair, all characteristics that also described his work. After some deliberation, we decided to compromise and use Playfair Display for the titles and headings, due to budget constraints. Lower priority text and headings would use Inter.
Colours
Colours
For page backgrounds, I used light neutral colours like mist gray and light pink, along with some more bold colours like the gold and blue gray. Text was predominantly charcoal, with white used where necessary.
For page backgrounds, I used light neutral colours like mist gray and light pink, along with some more bold colours like the gold and blue gray. Text was predominantly charcoal, with white used where necessary.
Typography & Colours
Typography & Colours
Grid
Grid
I chose a simple 12 column grid that suited the content matter and really allowed a variety of different layout possibilities. Since I was developing this site on Webflow, I handled the tablet & mobile responsiveness during development.
I chose a simple 12 column grid that suited the content matter and really allowed a variety of different layout possibilities. Since I was developing this site on Webflow, I handled the tablet & mobile responsiveness during development.
The grid visualised on the about page
The grid visualised on the about page
Final screens
Final screens
Home
Home
The home page encapsulated all the information that the website conveyed. Starting with a background video on the hero section that conveyed what Abhishek did in the form of a showreel, to a display of his work and his workshops.
The home page encapsulated all the information that the website performed. Starting with a background video on the hero section that conveyed what Abhishek did in the form of a showreel, to a display of his work and hsi
The home page encapsulated all the information that the website performed. Starting with a background video on the hero section that conveyed what Abhishek did in the form of a showreel, to a display of his work and his workshops.
The home page encapsulated all the information that the website performed. Starting with a background video on the hero section that conveyed what Abhishek did in the form of a showreel, to a display of his work and his workshops.
About
About
For the about page, the emphasis was on Abhishek as an individual.
For the about page, the emphasis was on Abhishek as an individual.
Work
Work
The work page featured a grid of all his projects. The work expansion page features details about the project and attempts to highlight the rich visual language of his films.
The work page featured a grid of all his projects. The work expansion page features details about the project and attempts to highlight the rich visual language of his films.
Workshops
Workshops
The workshops page was landing page where traffic from his social channels (Instagram & Youtube) was directed. Due to budget & time constraints, as well as convenience for the client, the booking flow was handled on a third party platform.
The workshops page was landing page where traffic from his social channels (Instagram & Youtube) was directed. Due to budget & time constraints, as well as convenience for the client, the booking flow was handled on a third party platform.
Contact
Contact
The contact page allowed visitors that wanted to communicate with Abhishek the ability to do so.
The contact page allowed visitors that wanted to communicate with Abhishek the ability to do so.