Weddings by KARA
Fully custom web design & development for this international, luxury wedding photography brand. Featuring a headless CMS and substantial custom code.
Challenge
Weddings by KARA is a well-established luxury photography brand of renown, operating across the globe for destination weddings. In re-imagining their brand identity, it was of the utmost importance to communicate their excellent history of quality work. The new website had to showcase their art elegantly while maintaining an excellent user experience.
Solution
The design strategy was to put their elegant photography front and centre. Focusing on large panels and delicate, succinct descriptions. Minimal but communicative. We wanted the site to be gallery-esque, but with such an abundance of past work, it was also important from a UX perspective to categorise their portfolio into accessible chunks. This was achieved by showcasing their work both in a dedicated portfolio section, as well as on their new headless CMS Blog.
Design
The design system was created to expand on the elegant minimalist strategy. We went for simple lines and clean white backgrounds to best showcase the photography.
Typography
We opted for Aguero Serif as the striking H1 font on the landing page. All other headings on the site are Collinger and the paragraph text is Einergrotesk, a lovely clean sans-serif. We found the pairing of these three elegant fonts to be perfect for this brand. For a personal touch, we used a gorgeous handwriting font called Northrow to personify the names of the happy couples whose wedding images are displayed throughout the site.
Colour Palette
The colours needed to take a backseat to the photography so we chose some classic grey tones and paired them with a muted blush subtle accent tone.
Features
Complex headless CMS Design
Weddings by KARA required four separate collections to be able to create: Wedding industry articles, Real Wedding features, vendor spotlights and venue spotlights. We designed and developed an integrated "Journal" / blog page that collated these four collections seamlessly. The CMS collections are integrated seamlessly throughout the site. The "testimonials" page for example, is automatically populated with every new real wedding entry. The homepage links both to the latest "featured" wedding and to a list of the most recent real weddings, with are automatically sorted by date. The "Our Weddings" page lists all the real weddings that have been added and each link brings the user to a specific detailed look at that wedding.
Navigation
Site navigation is centred around a navbar with various dropdown menus. Weddings by KARA required a substantial number of pages to properly showcase all they do, but they were conscious that navigation had to be centralised and easy for the user.
Contact Forms
We integrated CTAs on almost all pages and for the contact page we designed a tabbed contact form area that displays the five different form types that Weddings by KARA required for their sales automations.
SEO & Analytics Integration
Weddings by KARA already had a Google Analytics account connected to their old Squarespace site and we transitioned their account to the new version of Google Analytics. We also redesigned a lot of their SEO strategies to better align with their goals.
GDPR Compliance
We ensured their site remains fully GDPR compliant and we integrated a Cookie preference functionality that complies fully with requirements.
responsivity
The site is fully responsive as it was important to Weddings by KARA that functionality remained the same across devices. Lionize performed comprehensive device testing prior to launch.
Interactions & Animations
Site Loader Animation
We designed a fully customised site loader for visitors to Weddings by KARA. The elegant animation was custom coded so that it only plays once a day for unique visitors.
Custom Page Loader Animation
Transitioning from page to page is an elegant affair that reinforces the Weddings by KARA brand showcase their logo with each page navigation.
Interactions
From button hover effects, to page scroll interactions, the site is fully animated, and fully interactive. Lionize kept the interactions subtle so as to enhance rather than dominate the user experience. We used thin lines moving in tandem with heading loading animations to immerse the user in a creative experience that amplifies their respect for the creativity of the business.
