1.  Wireframes & Consultations

The law firm Guardia sought to update its visual style and approached me to create a new website to meet current trends and requirements. Their existing website was outdated and powered by WordPress, prompting a need for article migration from the old blog and its complete backup. A primary requirement was for the solution to be complete with interactive elements and animations, especially the creative challenge of animating their dachshund mascot, which required a technical solution different from WordPress. Due to the extensive animations and custom graphic assets, the Webflow platform was chosen for the website.

2. Prototype & User Flows

The initial phase involved preparing a design proposal in Figma, which underwent several consultations with the graphic designer before reaching its final form, confirmed at a joint meeting. This collaborative process was crucial to ensure that the client's needs and preferences were fully incorporated. A significant challenge was creating an interactive conversation featuring fictional characters Anna and Gustav, represented through progressively appearing message bubbles, resembling a mobile chat. Despite the client's insistence on a lengthy conversation, it was interspersed with animated dachshunds created in After Effects and imported as Lottie animations via the Body Movin plugin. Another requirement was an interactive form that evaluated the best product, implemented in JavaScript to recommend a product based on truth conditions.

3. Animations in After Effects

For this project, I crafted bespoke animations using After Effects, adding a layer of captivation and engagement to the client's digital presence. The animations ranged from subtle movements to dynamic visual narratives, effectively bringing the brand's story to life.

4. CMS for Dynamic Content

I implemented a CMS solution to empower the client with the ability to update and manage content dynamically. This not only made the website more interactive but also ensured that it stayed fresh and relevant to the audience's needs.

5. Costume Interactive Graphic at Websites

The was time to integrated custom interactive graphics for a website, elevating the visual appeal and user engagement. These tailor-made graphics transformed the site into an immersive digital experience, leaving a lasting impression on visitors.

6. Wordpress Migration and Backups

I managed the seamless migration of a website to WordPress, ensuring no data loss during the transition. Additionally, I set up a robust backup system, safeguarding the site's data against potential threats and ensuring continuity.

7. Costume Code (JS, CSS, HTML)

For this project, I applied custom coding techniques using JavaScript, CSS, and HTML to enhance the website's functionality and aesthetic appeal. This bespoke development approach allowed for unique features and a tailored user experience.

8. Consultations & Sites Setup

I provided expert consultations and site setup services, guiding the client through the digital landscape and establishing a solid online foundation. This included strategic planning, design advice, and technical setup, ensuring a successful launch.

9. Domain Transfer & Redirecting

I handled the technical aspects of domain transfer and redirecting, ensuring a smooth transition and minimal SEO impact. This critical backend work maintained the site's visibility and accessibility throughout the process.

10. Google Tag Manager Implementation

Beyond basic setup, I collaborated closely with the client's marketing team during the consultation process, aligning the site's technical capabilities with their strategic marketing goals.

11. Cookie Banner Implementation

To comply with privacy regulations, I integrated a custom cookie banner into the website. This not only made the site legally compliant but also enhanced user trust by transparently managing consent for data tracking.

Despite the client having a clear vision for the website's appearance, which somewhat disregarded typographical and design rules, I prepared a second version of the site in case the client changed their mind. The client was delayed in delivering all necessary materials but was hurrying to complete the website on time. As a result, I began creating the website in an agile manner to accommodate continuous progress. The website was completed on time, but the client, after launch, requested a complete redesign according to my original suggestions. We reached an agreement on a reasonable price, and after receiving revised materials, I restructured the website and consulted with the client at each phase to ensure it met their needs. This unconventional process highlighted the importance of patience and communication from both sides.