Pop Lab

Context

Pop Lab offers strategy, photo and video, content editing, community management and Meta Ads. They needed a site that presents those five services, shows their work with real clients and makes it easy to get in touch, all while staying faithful to a brand manual with its own colors, typefaces, logo and a signature star.

situación previa — ¿tenían sitio antes? ¿qué pidió el cliente?

What we did

alcance exacto — ¿diseño y desarrollo, o desarrollo sobre un diseño de ellos?

• Brand manual, applied to the web. We turned the manual’s colors into a palette with contrast rules: the brand blue is only used as a fill because it isn’t legible as text on the cream background, and a deeper blue carries accent text instead.
• Typography with a plan for licensing. The manual calls for a commercial typeface. The site uses it where it’s installed and falls back to a close free alternative everywhere else, with the web-license setup ready to switch on.
• Logo and star adapted to the screen. We cropped the horizontal logo so it reads at navigation-bar size and turned the brand’s star into a single SVG that every page reuses.
• A portfolio that keeps the client’s layout. Each case follows the grid the client sketched, including a short video, plus a before-and-after of the brands’ Instagram profiles.
• An accessible contact form. Validation in the browser and a multi-select for services built from scratch, because the native one is unusable on phones: it works with a keyboard, closes with Escape and opens upward when there’s no room below.
• Light and fast. A static Astro site with JavaScript only for the mobile menu and the form; images are resized and served as WebP automatically.

Status

Live at poplabmkt.com.mx. Shown here with the client’s permission.

screenshots of the live site