Public-Law Advocate — One-Page Institutional Site
Three frames, two mobile adaptations — the tightest institutional piece here.
A minimalist one-page site for a public-law advocate, built to carry direct-partner seniority and academic credentials and to capture consultation requests. I designed the responsive desktop layout and two distinct mobile viewport adaptations, setting the editorial spacing and the credibility structure. The smallest file in the batch at three core frames, and the clearest example of one-page institutional work. Sole website UI designer; identity and build were other people's.
- Role
- Sole website UI designer
- Timeframe
- Sept 2023 – Sept 2023
- Stack
- Figma
- Evidence
- Live
- Design file
Sole Website UI Designer for Pereira de Moraes Advocacia, a specialized legal practice focusing on Administrative, Constitutional, and Electoral Law. Designed 3 core responsive layouts in Figma (file key 1ULmeElnpP2m2Azma9UJZL): an editorial desktop landing page (LP - Desktop) and two mobile viewport adaptations (LP - Mobile and LP - Mobile versão 2), backed by a 32-node Style Guide establishing typography scales, high-contrast legal styling, and positioning guidelines highlighting senior partner credentials (UFSC Master of Laws and OAB-SC commission presidency).
Agency employment at Sagitta delivering from September 18, 2023 to September 27, 2023. Juan served as sole website UI designer within the agency team: Kelvin Bezerra created the firm's visual identity and logo, Juan designed the complete single-page responsive landing page in Figma, and an external no-code developer implemented and published the site on WordPress. Scoped by Ramon.
Minimalist legal landing page design for public law practice
- 3
- responsive layout variations designed (Desktop + 2 Mobile versions)
- 32
- style guide tokens, typography scales, and brand guidelines
- 124 KB
- verified live HTML at pereirademoraes.com.br
- 10 days
- from design kickoff to final implementation handoff
Specialized practices in Administrative, Constitutional, and Electoral Law cater to a distinct clientele: public officials, corporate government contractors, political candidates, and municipal entities. In these sectors, multi-page corporate websites with generic marketing language fail to resonate. What decision-makers demand is immediate clarity regarding the partner's academic pedigree, published jurisprudence, and direct strategic availability.
Positioning partner seniority and practice areas
The single-page landing page was structured around editorial hierarchy and academic authority:
- Hero Section — Direct institutional headline emphasizing legal excellence, paired with an executive portrait establishing immediate personal accountability.
- Academic & Institutional Credentials — Prominently featuring the lead partner's master's degree from UFSC (Federal University of Santa Catarina) and presidency of the Electoral Law Commission at OAB-SC.
- Public Law Practice Focus — Three clearly delimited service pillars: Administrative Law (public tenders, civil service disciplinary processes, administrative compliance), Constitutional Law (constitutional injunctions, direct actions of unconstitutionality), and Electoral Law (campaign advisory, candidate registration defense, electoral litigation).
- Two Mobile Adaptations — Designed two distinct mobile layouts (LP - Mobile and LP - Mobile versão 2) to test alternative mobile hero hierarchies and contact button placements.
Juan grades this project Tier B: pereirademoraes.com.br answers HTTP 200 with 124 KB and 119 client-name mentions, proving that the page shipped to production. However, the no-code developer introduced spacing inconsistencies and degraded typography in WordPress. Cite the URL as proof of shipping; view the Figma file for the true design.
Style guide and typography scales
The 32-node Style Guide page (node 1:16) documented Kelvin Bezerra's brand logo, high-contrast dark navy and off-white color tokens, editorial serif typography for headings, clean sans-serif body scales, and client-approved positioning copy guidelines.
What this project is and is not
- Not brand identity or logo design. Kelvin Bezerra created the Pereira de Moraes visual identity and logo.
- Not WordPress implementation. A no-code developer was responsible for building the page in WordPress.
- Not legal counsel. I authored the front-end layout and content hierarchy, not the legal opinions.
- Not user research or discovery. Project parameters were scoped by Ramon.
- Not supported by conversion metrics. No lead counts or consultation statistics exist in the record.
The power of focused institutional landing pages
Pereira de Moraes Advocacia highlights the efficiency of a well-executed single-page format for high-specialization legal practices. By prioritizing partner authority, clear academic credentials, and distinct practice pillars, the design created a credible, elegant digital presence for a public law advocate.
Evidence
The landing page was implemented and published to production: pereirademoraes.com.br returned an HTTP 200 code with 124,883 bytes and 119 client-name mentions during the 2026-08-21 audit. Juan grades the live build as Tier B: the production site evidences public shipping, but represents a poor visual rendering of what was delivered in Figma due to no-code implementation shortcomings. The Figma file stands as the true design proof. No consultation or conversion metrics exist. This case study documents minimalist legal landing page design, partner authority positioning, and mobile layout variations.