Notes on the design

A research website has to work at several depths. Someone arriving for the first time may want to understand what I do in a few seconds. A potential collaborator may want to explore a project, watch an experiment, or read the underlying paper. The design should make both kinds of visit feel natural.

The aim was to create a portfolio that feels personal and inviting while treating the work with scientific care. That means making complex material approachable, giving readers control over how far they explore, and keeping the interface calm enough that the research remains the focus.

A foundation in Material Design

Material Design 3 is a central influence. Google’s design system connects visual hierarchy, typography, color, shape, motion, and interaction within a consistent language. Its emphasis on accessible, adaptive interfaces provided a useful foundation for this site.

Here, those ideas are adapted to a research portfolio. Rounded surfaces organize related content; a small set of colors and text styles establishes hierarchy; and consistent feedback makes actions easier to recognize. The green and lavender palette, variable typography, and restrained use of motion give that foundation a character of its own.

The principles

Clarity before decoration. Every visual choice should help someone understand the content or use the site. Space, typography, and color establish relationships without making every element compete for attention. Scientific imagery supplies much of the visual interest.

Depth by invitation. A useful overview should stand on its own. More detail becomes available when a reader wants it, without requiring them to leave the subject they were exploring. This approach, often called progressive disclosure, lets a page serve both a quick visit and a deeper reading.

Continuity through change. Opening a project or moving between sections should preserve a sense of place. Motion can explain how two views relate, while immediate feedback confirms that an action registered. Animation earns its place when it makes a transition easier to follow.

Control and inclusion. People should be able to read, navigate, and explore with a mouse, keyboard, or touch. Important actions need visible controls, clear focus, and comfortable targets. Gestures offer another way to act; they should never be the only way. Reduced-motion preferences deserve the same consideration as other input needs.

Putting the principles into practice

The research overview starts with a title, an image, and a concise account of each project. Readers can then reveal explanations, contributions, publications, and citations within the same surface. This keeps the initial page approachable while giving the supporting material a clear home.

The visual system carries across the introduction, research, and CV. Shared typography, spacing, rounded shapes, and light and dark color roles make them feel like parts of one place. Stronger emphasis is reserved for the next useful action; supporting information stays quieter. Interface colors frame scientific figures while preserving the figures’ own meaningful colors, labels, and proportions.

Transitions reinforce that shared structure. A project grows from its preview into a larger viewing area, and returning restores the overview. The introduction and CV move as neighboring parts of the site beneath a persistent header. These relationships help explain where the reader has gone and how to return. Small interactions use quicker feedback, and reduced motion removes unnecessary movement while retaining clear changes of state.

Adaptation involves more than screen width. Available space determines the layout, while the way someone is interacting determines which feedback and gestures are useful. A large touchscreen can offer touch gestures alongside mouse and keyboard controls. Text remains selectable, ordinary scrolling takes priority, and videos play when the reader chooses.

Learning through use

The design has developed through repeated use and small revisions. An effect can look appealing in isolation yet feel distracting when it happens throughout a page. A transition can be visually smooth and still leave someone unsure whether their click worked.

The guiding question is whether a choice helps someone understand the work, find their way, or feel in control. That gives the site a practical direction as it evolves: keep the expressive details that serve those goals, and simplify the ones that get in the way.