Web Design
TBD
Além da Muralha: Multipage Website
A multipage website and brand home for Além da Muralha, a YouTube channel about China, taken from the first briefing to a live, responsive site built in Framer.
Discovery & Briefing
Information Architecture
UI Design + Framer Build
Challenge
The channel only lived on YouTube. Everything around it was scattered: the videos in one feed, the community in a Discord, the rest across social links, with no home of its own. It needed a real website. Somewhere to keep its videos and blog, bring the community together, give people a clear way to support the project, and wear a brand that matched how careful the content was.
Outcome
A full six-page website, on brand and responsive, designed in Figma and shipped live in Framer, with a CMS the creator can update herself. The client’s own words: “ficou td maravilhoso, vc acertou em cheio” (“it turned out wonderful, you nailed it”).
Context & Objective
Além da Muralha is a YouTube channel about China. Weekly, in-depth videos that go past the clichés, under the tagline “A China como não querem que você veja” (“China the way they don’t want you to see it”). It had an audience, a Discord, and a visual identity, but nowhere of its own. Everything lived inside the YouTube feed and a handful of social links.
I came in as the only designer to give the project a proper website, from the first briefing call to a live, responsive build. The point was a home the channel could grow into: somewhere for its videos and blog, a way to gather the community, a clear route to support the work, and a brand that felt as considered as the videos.
The final home page.
Briefing & Discovery
Kickoff & onboarding
We started with a briefing, the way I start most design work. I ran a kickoff in FigJam and a few onboarding calls to understand the project before touching any pixels: what the channel is, where it’s going, and how a site could actually serve that.
The questions
Discovery was structured, not a loose chat. I worked through the business first: what the project is really for, how the site fits the strategy, which content and offers it should push, who the competitors are. Then the audience: the main profiles, how people find the channel, what they expect once they arrive, the questions a site could answer. Then goals: whether this was institutional or conversion-led, what success looked like, which moments mattered, like launches, campaigns, and deadlines. And last, content and structure: which sections exist, what material was ready, whether it needed a blog.
The full briefing, from business context down to the look-and-feel Likert exercise.
Reading the look and feel
To pin down the visual direction I ran a short exercise instead of trading vague adjectives: a set of Likert-style sliders (conservative to modern, classic to innovative, minimalist to bold, geometric to organic, cool to warm, serious to emotional, and so on). It turned taste into something we could point at and agree on.
I closed discovery with the technical side: integrations, whether the client wanted to edit the site herself (a CMS), the domain, who would maintain it. That way the brief covered the build reality as much as the aesthetics.
References & Direction
With the brief answered, I pulled references that matched what she’d described and went through them with her, so we could check we were reading the same direction. She brought her own references too, and we steered from there until the visual line felt shared instead of assumed.
[image to add: reference / moodboard set]
Information Architecture
Before designing any screens, I mapped the whole thing. The sitemap came in two passes. First a zoom-out map of every page and how they connect. Then a zoom-in breakdown of each page, section by section: an exhaustive first list to brainstorm everything the site might need, then a tighter map of what each page actually had to carry. We went through two versions, checking in as it firmed up, so the structure was settled before it became layouts.
Sitemap, zoomed out: every page and how they connect.
Sitemap, zoomed in: each page broken down section by section.
Visual Identity & Foundations
With the structure set, I moved into Figma and brought in the identity the client already had. I documented the assets, the typography, the colors, and started thinking in components as I went.
A lot of my job here was guiding decisions with reasons behind them, not only taste. When a typeface didn’t fit, visually or legally, I said so and offered alternatives. I lean toward open-source fonts so a client doesn’t inherit a licensing problem later, and I made the case for each choice: why one font worked, why another needed a paid license, what we could use instead.
Brand foundations: colour tokens and type ramps.
Component library: buttons, navigation, footers.
Low-fidelity Prototype
I turned the agreed sitemap into a low-fidelity prototype with simple templates, checking that the page structures could actually hold the content, and where things would sit, before any styling. Everything stayed deliberately plain here. I was testing the skeleton and the flow, and left the look for later.
Low-fidelity prototype of the home page.
High-fidelity Design
From there I raised the fidelity, bringing in the full identity and assets and testing the real decisions: color and contrast, readability, type, layout rhythm. I leaned on Chinese motifs that echoed the brand the channel already had, so the site read as an extension of the content instead of a template.
I validated as I went. We ran three rounds of checkpoints and three versions to reach the final design, with components, interactive elements, and all six pages laid out in Figma: Home, Sobre, Suporte, Parceria, Comunidade, and Blog, plus a template for each post.
The final home page, full length.
The final Mídia & Blog page.
Delivery & Over-delivery
The Figma deliverable was the complete design: every page, all the assets, the documentation, the components. Then, as an over-delivery, I built the whole thing in Framer and made it responsive, three breakpoints per page, and handed the client a real, published website she could put straight in front of her audience.
The About page across desktop, tablet, and mobile.
Outcome
The site went from a briefing to a live, on-brand home for the channel: six pages, a blog and media hub, community and support sections, a CMS the client can edit herself, and a fully responsive Framer build, designed and shipped end to end.
The clearest measure was the client’s own reaction:
ta perfeito… que trabalho bem feito… obrigada de verdade, eu tô muito feliz com o resultado, ficou td maravilhoso, vc acertou em cheio.
(it’s perfect… what great work… thank you, truly, I’m so happy with the result, it turned out wonderful, you nailed it.)
The client’s reaction right after handoff.
Final Thoughts
What I like about this one is that it’s the whole arc in a single project: reading the business and the audience, turning fuzzy taste into a direction we both agreed on, structuring the thing before styling it, then carrying it all the way to a live, responsive build. A channel that had only ever existed inside YouTube finally got a home that matched the work.
Context & Objective
Além da Muralha is a YouTube channel about China. Weekly, in-depth videos that go past the clichés, under the tagline “A China como não querem que você veja” (“China the way they don’t want you to see it”). It had an audience, a Discord, and a visual identity, but nowhere of its own. Everything lived inside the YouTube feed and a handful of social links.
I came in as the only designer to give the project a proper website, from the first briefing call to a live, responsive build. The point was a home the channel could grow into: somewhere for its videos and blog, a way to gather the community, a clear route to support the work, and a brand that felt as considered as the videos.
The final home page.
Briefing & Discovery
Kickoff & onboarding
We started with a briefing, the way I start most design work. I ran a kickoff in FigJam and a few onboarding calls to understand the project before touching any pixels: what the channel is, where it’s going, and how a site could actually serve that.
The questions
Discovery was structured, not a loose chat. I worked through the business first: what the project is really for, how the site fits the strategy, which content and offers it should push, who the competitors are. Then the audience: the main profiles, how people find the channel, what they expect once they arrive, the questions a site could answer. Then goals: whether this was institutional or conversion-led, what success looked like, which moments mattered, like launches, campaigns, and deadlines. And last, content and structure: which sections exist, what material was ready, whether it needed a blog.
The full briefing, from business context down to the look-and-feel Likert exercise.
Reading the look and feel
To pin down the visual direction I ran a short exercise instead of trading vague adjectives: a set of Likert-style sliders (conservative to modern, classic to innovative, minimalist to bold, geometric to organic, cool to warm, serious to emotional, and so on). It turned taste into something we could point at and agree on.
I closed discovery with the technical side: integrations, whether the client wanted to edit the site herself (a CMS), the domain, who would maintain it. That way the brief covered the build reality as much as the aesthetics.
References & Direction
With the brief answered, I pulled references that matched what she’d described and went through them with her, so we could check we were reading the same direction. She brought her own references too, and we steered from there until the visual line felt shared instead of assumed.
[image to add: reference / moodboard set]
Information Architecture
Before designing any screens, I mapped the whole thing. The sitemap came in two passes. First a zoom-out map of every page and how they connect. Then a zoom-in breakdown of each page, section by section: an exhaustive first list to brainstorm everything the site might need, then a tighter map of what each page actually had to carry. We went through two versions, checking in as it firmed up, so the structure was settled before it became layouts.
Sitemap, zoomed out: every page and how they connect.
Sitemap, zoomed in: each page broken down section by section.
Visual Identity & Foundations
With the structure set, I moved into Figma and brought in the identity the client already had. I documented the assets, the typography, the colors, and started thinking in components as I went.
A lot of my job here was guiding decisions with reasons behind them, not only taste. When a typeface didn’t fit, visually or legally, I said so and offered alternatives. I lean toward open-source fonts so a client doesn’t inherit a licensing problem later, and I made the case for each choice: why one font worked, why another needed a paid license, what we could use instead.
Brand foundations: colour tokens and type ramps.
Component library: buttons, navigation, footers.
Low-fidelity Prototype
I turned the agreed sitemap into a low-fidelity prototype with simple templates, checking that the page structures could actually hold the content, and where things would sit, before any styling. Everything stayed deliberately plain here. I was testing the skeleton and the flow, and left the look for later.
Low-fidelity prototype of the home page.
High-fidelity Design
From there I raised the fidelity, bringing in the full identity and assets and testing the real decisions: color and contrast, readability, type, layout rhythm. I leaned on Chinese motifs that echoed the brand the channel already had, so the site read as an extension of the content instead of a template.
I validated as I went. We ran three rounds of checkpoints and three versions to reach the final design, with components, interactive elements, and all six pages laid out in Figma: Home, Sobre, Suporte, Parceria, Comunidade, and Blog, plus a template for each post.
The final home page, full length.
The final Mídia & Blog page.
Delivery & Over-delivery
The Figma deliverable was the complete design: every page, all the assets, the documentation, the components. Then, as an over-delivery, I built the whole thing in Framer and made it responsive, three breakpoints per page, and handed the client a real, published website she could put straight in front of her audience.
The About page across desktop, tablet, and mobile.
Outcome
The site went from a briefing to a live, on-brand home for the channel: six pages, a blog and media hub, community and support sections, a CMS the client can edit herself, and a fully responsive Framer build, designed and shipped end to end.
The clearest measure was the client’s own reaction:
ta perfeito… que trabalho bem feito… obrigada de verdade, eu tô muito feliz com o resultado, ficou td maravilhoso, vc acertou em cheio.
(it’s perfect… what great work… thank you, truly, I’m so happy with the result, it turned out wonderful, you nailed it.)
The client’s reaction right after handoff.
Final Thoughts
What I like about this one is that it’s the whole arc in a single project: reading the business and the audience, turning fuzzy taste into a direction we both agreed on, structuring the thing before styling it, then carrying it all the way to a live, responsive build. A channel that had only ever existed inside YouTube finally got a home that matched the work.
Context & Objective
Além da Muralha is a YouTube channel about China. Weekly, in-depth videos that go past the clichés, under the tagline “A China como não querem que você veja” (“China the way they don’t want you to see it”). It had an audience, a Discord, and a visual identity, but nowhere of its own. Everything lived inside the YouTube feed and a handful of social links.
I came in as the only designer to give the project a proper website, from the first briefing call to a live, responsive build. The point was a home the channel could grow into: somewhere for its videos and blog, a way to gather the community, a clear route to support the work, and a brand that felt as considered as the videos.
The final home page.
Briefing & Discovery
Kickoff & onboarding
We started with a briefing, the way I start most design work. I ran a kickoff in FigJam and a few onboarding calls to understand the project before touching any pixels: what the channel is, where it’s going, and how a site could actually serve that.
The questions
Discovery was structured, not a loose chat. I worked through the business first: what the project is really for, how the site fits the strategy, which content and offers it should push, who the competitors are. Then the audience: the main profiles, how people find the channel, what they expect once they arrive, the questions a site could answer. Then goals: whether this was institutional or conversion-led, what success looked like, which moments mattered, like launches, campaigns, and deadlines. And last, content and structure: which sections exist, what material was ready, whether it needed a blog.
The full briefing, from business context down to the look-and-feel Likert exercise.
Reading the look and feel
To pin down the visual direction I ran a short exercise instead of trading vague adjectives: a set of Likert-style sliders (conservative to modern, classic to innovative, minimalist to bold, geometric to organic, cool to warm, serious to emotional, and so on). It turned taste into something we could point at and agree on.
I closed discovery with the technical side: integrations, whether the client wanted to edit the site herself (a CMS), the domain, who would maintain it. That way the brief covered the build reality as much as the aesthetics.
References & Direction
With the brief answered, I pulled references that matched what she’d described and went through them with her, so we could check we were reading the same direction. She brought her own references too, and we steered from there until the visual line felt shared instead of assumed.
[image to add: reference / moodboard set]
Information Architecture
Before designing any screens, I mapped the whole thing. The sitemap came in two passes. First a zoom-out map of every page and how they connect. Then a zoom-in breakdown of each page, section by section: an exhaustive first list to brainstorm everything the site might need, then a tighter map of what each page actually had to carry. We went through two versions, checking in as it firmed up, so the structure was settled before it became layouts.
Sitemap, zoomed out: every page and how they connect.
Sitemap, zoomed in: each page broken down section by section.
Visual Identity & Foundations
With the structure set, I moved into Figma and brought in the identity the client already had. I documented the assets, the typography, the colors, and started thinking in components as I went.
A lot of my job here was guiding decisions with reasons behind them, not only taste. When a typeface didn’t fit, visually or legally, I said so and offered alternatives. I lean toward open-source fonts so a client doesn’t inherit a licensing problem later, and I made the case for each choice: why one font worked, why another needed a paid license, what we could use instead.
Logo and brand-mark variants.
Brand foundations: colour tokens and type ramps.
Component library: buttons, navigation, footers.
Low-fidelity Prototype
I turned the agreed sitemap into a low-fidelity prototype with simple templates, checking that the page structures could actually hold the content, and where things would sit, before any styling. Everything stayed deliberately plain here. I was testing the skeleton and the flow, and left the look for later.
Low-fidelity prototype of the home page.
High-fidelity Design
From there I raised the fidelity, bringing in the full identity and assets and testing the real decisions: color and contrast, readability, type, layout rhythm. I leaned on Chinese motifs that echoed the brand the channel already had, so the site read as an extension of the content instead of a template.
I validated as I went. We ran three rounds of checkpoints and three versions to reach the final design, with components, interactive elements, and all six pages laid out in Figma: Home, Sobre, Suporte, Parceria, Comunidade, and Blog, plus a template for each post.
The final home page, full length.
The final Mídia & Blog page.
Delivery & Over-delivery
The Figma deliverable was the complete design: every page, all the assets, the documentation, the components. Then, as an over-delivery, I built the whole thing in Framer and made it responsive, three breakpoints per page, and handed the client a real, published website she could put straight in front of her audience.
The About page across desktop, tablet, and mobile.
Outcome
The site went from a briefing to a live, on-brand home for the channel: six pages, a blog and media hub, community and support sections, a CMS the client can edit herself, and a fully responsive Framer build, designed and shipped end to end.
The clearest measure was the client’s own reaction:
ta perfeito… que trabalho bem feito… obrigada de verdade, eu tô muito feliz com o resultado, ficou td maravilhoso, vc acertou em cheio.
(it’s perfect… what great work… thank you, truly, I’m so happy with the result, it turned out wonderful, you nailed it.)
The client’s reaction right after handoff.
Final Thoughts
What I like about this one is that it’s the whole arc in a single project: reading the business and the audience, turning fuzzy taste into a direction we both agreed on, structuring the thing before styling it, then carrying it all the way to a live, responsive build. A channel that had only ever existed inside YouTube finally got a home that matched the work.