Marcus Kelly: the Portfolio
Web design & development, brand identity
Context
Challenge
A portfolio has to express who I am as a designer without competing with the work it exists to present. I wanted mine to feel distinct and personal, but quiet enough that projects with very different visual languages could live comfortably within the same system.
Goal
Create a portfolio that feels recognizably mine, makes the work easy to navigate, and can continue to grow without requiring a redesign every time I add a project.
Studying information hierarchy
Before designing individual pages, I studied how other portfolios, agencies, editorial sites, and product websites organized information. I wasn’t looking for a layout to imitate. I wanted to understand the patterns that made complex sites feel simple: how quickly they established hierarchy, where they introduced calls to action, how much information appeared at once, and how they transitioned between sections.
Mapping those patterns helped me decide what my own portfolio needed, and just as importantly, what it didn’t.
Study of TwoTone Creative
Studying TwoTone helped me think beyond visual styling and look at the site as a sequence of information. I mapped how the homepage establishes its value proposition, introduces services, builds credibility, and repeatedly provides a next step without making the experience feel crowded.
That exercise influenced how I structured my own homepage: establish what I do quickly, move into selected work, keep project navigation direct, and let supporting information stay secondary.
Study of Volvo and Koenigsegg
Volvo and Koenigsegg influenced the design language I sought to capture, and they just so happen to both be Swedish automotive companies. They became useful references for two different qualities I wanted the portfolio to hold at the same time.
Volvo showed how restrained typography, generous spacing, and straightforward interface elements can keep complex content approachable. Koenigsegg showed how those same principles can coexist with louder type, unconventional composition, and more expressive interactions.
That balance became important to my own system: structure first, with moments of scale and movement that keep the portfolio from feeling sterile.
Rough prototyping
The visual direction emerged through rapid prototyping rather than a single finished concept. I used Figma to test how the identity behaved across different page structures, screen sizes, and content types before committing to a reusable system.
Quick, early prototyping
My early Figma files were loose. Rather than perfecting one homepage, I experimented with different ways of combining large imagery, typography, project information, and navigation across desktop and mobile. Above, you can see me replicating, altering, and remixing existing arrangements from Koenigsegg and Airloom. I’ve found that this kind of visual collaging is an effective way to explore different directions quickly without committing to one too early.
Working this way helped me distinguish between the parts of the design that needed consistency and those that could remain flexible. The grid, spacing, typography, and navigation needed a shared structure, but individual project layouts could be more expressive.
Building a more maintainable codebase
As the site expanded, maintaining one growing CSS file made iteration slower and introduced more opportunities for inconsistency. I moved the styling into SCSS so I could organize typography, components, utilities, and reusable variables into a clearer, more maintainable system.
Eventually, I brought my JavaScript into the same development workflow and connected the project to Codex. Having the site’s code organized in one place gave me and my coding assistant a better understanding of the project as a whole, making it easier to implement changes across the website rather than addressing individual pages one at a time.
Typographic voice: Lexend
Lexend became the foundation of the Marcus Kelly identity because it felt precise without becoming impersonal. Its geometry gave the site the clean structure I wanted, while its softer rhythm kept the identity from feeling overly technical or clinical. That balance made it flexible enough for both interface text and larger, more expressive typography.
It comes together
The result is a portfolio system rather than a collection of individually designed pages. Shared typography, spacing, components, and responsive behaviors give the site consistency, while flexible layouts allow each project to retain its own character.
Just as importantly, I can now add and revise work without rebuilding the experience around it. The visual identity remains stable while the content continues to evolve.
When design becomes maintenance
Building this site taught me how important maintainability is in web design. As the site grew, I realized that even small decisions about typography, spacing, and other visual elements could become difficult to manage when they weren’t applied consistently across pages.
Since launching the first iteration in 2025, I’ve continued refining the site with two priorities: reducing page-specific styling and improving performance. This has involved auditing my previous work, reworking parts of the site’s underlying structure, and expanding my library of reusable patterns.