Notes on the design

This website is a small experiment in making a research portfolio feel clear, calm, and tangible. Its design has evolved through using it, noticing what gets in the way, and making small adjustments.

Let the work lead

The research supplies the visual interest. A restrained green and lavender palette, Google Sans Flex, and a shared family of rounded surfaces give different kinds of content a common home. Color helps establish hierarchy without competing with scientific figures.

Reveal detail when it helps

A card should offer a useful first impression before asking for more attention. Supporting explanations, methods, and citations unfold where they belong. Opening something should preserve its context; closing it should let the reader continue without losing their place.

Make motion explain a change

A card grows into a larger surface rather than being replaced by an unrelated window. Content stays at a readable size while its surroundings move. Motion should clarify where something came from and how to return.

Small feedback should be quick and quiet. A distracting hover effect is still distracting, however subtle it looked in isolation. Reduced motion keeps the same information and meaningful state changes.

Follow the input, not the screen size

A large screen can have a touchscreen. A tablet can have a mouse and a keyboard. Layout responds to available space; gestures and feedback respond to the way someone is interacting.

Touch gestures supplement visible controls. Keyboard focus remains clear, text stays selectable, and scrolling should not accidentally activate a card. No essential action should require hover or a gesture.

Keep actions stable and legible

Controls have generous hit areas, consistent shapes, and visible pressed and focus states. A disclosure chevron is more prominent than a secondary Share action. Hovering a clickable card also highlights the control that explains what clicking will do.

Material Design’s attention to hierarchy, state feedback, and touch targets is an influence, adapted to the character of this site.

Protect the meaning of the figures

Scientific colors, aspect ratios, labels, and model behavior have their own purpose. Interface styling should frame them, not reinterpret them. Typography and animation should support reading rather than move the goalposts.

The common thread is restraint: keep the useful cues, remove the distractions, and let the website improve through small, observable changes.