P—L

Projects and experiments

Featured projects & experiments, curated from 3 years of work. I mostly do web design but I also like to play around with graphic design work.

  1. White CapECL wordmark built from horizontal lines on a black field.
    Student using the CapECL website on an iPad and iPhone.
  2. Blue NTVL scales-of-justice symbol and wordmark on a pale stone wall.
    NTVL brand-guideline pages presenting the logo, colour palette and typography.
    Blue NTVL wordmark enclosed in a rounded rectangular frame on a pale stone wall.

Playground

Everything below is made from small projects and experiments: the fun stuff.

Temperancia Brand Identity

Creating a minimalist logo and business card for Temperancia.

Branding
Temperancia logo
Business card design

ODG

A scientific content oriented website with articles, diagrams and interactive visualizations.

Web Design
ODG website interface shown in light and dark modes

The goal with this website was to create a comprehensive, interactive website for scientific content. It's focused on two main questions, both of them having their own dedicated article pages and diagrams which you can see in the carousel below.

  1. Article page
  2. Diagram page
  3. Graph page

The source code for this website is available on GitHub.
The live site is available at odg.pierrelouis.net.
Main inspiration for the home page design: Heat Bureau

Animated Avatar

Bringing life to a simple design element

Web Design

I've always wanted to bring life to the most simple design element possible. Using only code.

When I stumbled upon Nicolas' small avatar in the footer of his portfolio, I knew it was exactly what I'd been looking for. It was simple, sleek and was already slightly animated. The subtle head and eye movements already made it alive.

I then played around for a bit, and created a dozen more animations with keyframes in CSS. It's incredible to see how much emotion you can give to a simple design element: 1 circle, 2 dots and a gradient.

Here it is, in all its glory:

Personal Brand Identity

The process of creating my personal brand identity.

Branding

My name is used throughout this website under two different ways: my entire first name and my initials.

Full name variants
Full width variants
Initials variants

Finally, I needed an very simple icon/logo, mainly used as a favicon. Here is the process I followed to create it:

Current PL logo

On the left is the original logo I used with my old portfolio. It was heavily inspired by something I saw on Pinterest. Then I gathered more inspiration. It needed to be simple, easy to see when small and kinda modern and minimalistic. This is how I ended up, as you can see on the right.

Music

A music widget from my old portfolio, linked to Last.fm.

Web Design
Music widget interface shown in light and dark modes

Old Portfolio

A snapshot of my old portfolio

Web Design
Mobile views of the old portfolio
Animated homepage of the old portfolio
  1. Old portfolio projects page
  2. Old portfolio project detail page
  3. Old portfolio About page