danifolio
danifolio
  • Work
  • About
  • Resume
  • Contact
Dani Bautista

Dani Bautista

Product Designer

  • Email me
  • Book a call
  • LinkedIn
  • Work
  • About
  • Resume
  • Contact
danifolio

© 2026 Dani Bautista

Last updated · November 2026

Back to Work

A first website for New Zealand's new animal law organisation

I designed and built Animalia Law’s website. The goal was a site that feels trustworthy, and one that Bianka, the founder, can easily keep up to date.

  • UI Design
  • UX Design
Animalia Law home page on desktop and mobile
  • Role

    Web designer

  • Team

    Project manager, motion designer, copywriter

  • Scope

    6 responsive pages, plus CMS templates for projects and news

  • Tools

    Figma, Squarespace

Overview

A one-person charity that needed to look established

Animalia Law is a specialist animal law and policy charity, founded by a New Zealand lawyer with more than 15 years of experience. She applied to Violet Studios’ creative support programme for animal advocacy organisations, and my part of the project was the website, the place where everyone’s work came together.

Given

What I started with.

The client gave us her logo and two brand colours. A copywriter wrote every page, a motion designer animated the logo, and a project manager kept everything on track.

Imagery

I began with the imagery.

I put together two moodboards with different directions. The client chose one and offered her own wildlife photos, so I found royalty-free images with the same feel to complete the set.

Type & colour

Then, typography and colour.

I compared a few typeface pairings next to the logo and chose the one that felt credible and approachable. Then I built a colour ramp from each brand colour, so every part of the site had the right shade.

Layouts

Next, the layouts in Figma.

I designed a few key pages first so the client could approve the look and feel, then moved on to the rest. I worked desktop first and relied on Squarespace’s responsive layout for mobile, adjusting each page where needed.

Build

Finally, the build.

I built the site in Squarespace with reusable sections, so the founder can update text, add projects and publish news without needing a designer.

Moodboards

Two directions, one choice

Before designing any layouts, I created two moodboards to explore where the site could go. Direction A was darker and more documentary. Direction B was brighter and more hopeful, with clean layouts and close-up animal portraits. The founder chose B and offered her own wildlife photos to go with it.

Moodboard A: courtrooms, scales of justice and farm animals in muted tones

Direction A

Documentary and serious

Justice imagery, muted colours and animals in farming and fishing.

Moodboard B: clean layouts, deep blue and bright animal close-ups

Direction B · chosen

Bright and confident

Clean legal layouts, a deep blue and vivid animal close-ups.

Colour

Two brand colours, two ramps

The client provided a blue and an amber. I built a ramp from each one, so there was a shade ready for every part of the site: text, backgrounds, buttons and highlights.

Primary · derived from the brand blue

  • 50#F2F7F9
  • 100#E6EEF3
  • 200#CCDEE6
  • 300#679BB5
  • 400#34799D
  • 500#015884
  • 600#01466A
  • 700#01354F
  • 800#002335
  • 900#00121A

Secondary · derived from the brand amber

  • 50#FEF6E8
  • 100#FEEDD1
  • 200#FDDBA3
  • 300#FCCA76
  • 400#FBB848
  • 500#FAA61A
  • 600#C88515
  • 700#966410
  • 800#64420A
  • 900#322105

Typography

A serif that feels trustworthy, a sans that’s easy to read

I tested three heading and three body typefaces alongside the logo. Literata felt serious without being cold, which suited a legal organisation. Inter keeps longer texts comfortable to read. Montserrat felt overused, and Playfair Display too decorative for a law charity.

Headings

Playfair Display

Transforming the law for the most overlooked animals

LiterataChosen

Transforming the law for the most overlooked animals

Averia Serif Libre

Transforming the law for the most overlooked animals

Body

InterChosen

Animalia Law advances protection for animals through evidence-based advocacy, research and reform.

SF Pro

Animalia Law advances protection for animals through evidence-based advocacy, research and reform.

Montserrat

Animalia Law advances protection for animals through evidence-based advocacy, research and reform.

Imagery

The client’s photos set the direction

Bianka’s own photos of New Zealand wildlife set the tone for the site: natural light, close framing and native animals. Where a page needed more, I sourced royalty-free photos with the same look and agreed each one with her.

A kererū perched on a branch
A ruru looking at the camera
A kererū in flight, in soft light
A ruru on a branch
Te Hauturu-o-Toi / Little Barrier Island from the sea
Client photos: kererū (New Zealand pigeon), ruru (morepork) and Te Hauturu-o-Toi / Little Barrier Island.

Page by page

Built for every screen

The site speaks to very different audiences, from the public to policymakers, lawyers and funders. To keep it clear for all of them, every page follows the same rhythm: a short introduction, sections that alternate text and images, and one clear next step. Starting on desktop was a deliberate choice: Squarespace turns a desktop layout into its mobile version remarkably well, so tuning each page for phones took very little time.

Home, research and publications section, on desktop and mobile
Home, newsletter sign-up, on desktop and mobile
Home: research and publications, and the newsletter sign-up, on desktop and mobile.
About us page on desktop and mobile: mission, vision and values
About us: mission, values, team and approach.
Support us page on desktop and mobile
Support us: why support matters and the current projects.

In their words

What the client said

“I’m really happy with the website and very grateful for your expertise, time, creativity, care and patience. Thank you for helping bring our vision for the website to life. It’s been a pleasure working with you.”

Bianka AtlasFounder and Executive Director · Animalia Law

Reflection

Looking back

This project taught me to design within limits: a brand I didn’t create, copy that was already written and a platform the client had to manage on her own. Instead of adding more, I focused on giving each piece room, keeping a clear rhythm across pages and making every section easy to edit. It reminded me that a website’s life starts at launch.

Visit animalialaw.org(opens in a new tab)

The client may have updated the site since launch, so some pages may look different from the designs shown here.

More work

Keep exploring

View all work
  • Sea Shepherd

    Making Sea Shepherd’s website readable for everyone

    An accessibility and ethical review of Sea Shepherd’s home page and online shop, with wireframes and a new design for both.

    • Accessibility
    • UX Design
    • UI Design
  • EsVerde
    Coming soon

    A clear, credible website for a new plant-based food non-profit

    Page layouts in Figma and a Squarespace build for a Spanish non-profit bringing plant-based meals to hospitals, universities and canteens.

    • UI Design
    • UX Design