A landing page for a cybersecurity startup
- Project type
- Landing page
- My role
- UX / UI Designer with front-end implementation
Context & Problem
Secure Logos needed a single-page cybersecurity landing page designed for organic search traffic and direct contact conversion.
The project started with no existing brand assets: no logo, typography, or color system.
Beyond content clarity, the challenge was to design and ship a production-ready page quickly, without introducing unnecessary technical overhead.
My Role & Responsibilities
I handled the project end-to-end, including:
- clarifying vague business requirements
- defining user intent based on search behavior
- structuring the information architecture
- writing SEO-aware, conversion-oriented copy
- designing the UI and brand foundations in Figma
- translating the design into a React application using Figma Make (prompt-to-code)
- performing manual front-end refinements to improve layout, spacing, and responsiveness
The project was completed in one week, working approximately two hours per day.
Constraints & Key Decisions
SEO and performance as technical constraints
The page needed to load fast, remain lightweight, and expose meaningful content for search engines. This ruled out heavy UI patterns, complex interactions, and unnecessary scripts.
Prompt-to-code as an accelerator, not a replacement
Figma Make was used to generate a React implementation directly from the design. While this significantly accelerated development, the output still required manual refinement to reach production quality.
In several cases, adjusting layout, spacing, or responsiveness was faster and more precise by editing CSS directly rather than iterating through additional prompts.
Avoiding third-party dependencies
Although a contact form was initially considered, it was excluded to avoid relying on external services that could introduce potential security vulnerabilities. The final solution uses a clearly visible email address for direct contact.
Designing for two intent levels
Search-based traffic revealed two distinct user intents:
- high-intent users looking for specific cybersecurity services
- exploratory users who needed education and reassurance
This insight influenced both content structure and technical simplicity.
Solution
The landing page was designed in Figma, iterated through multiple versions, and then translated into a React application using Figma Make.
After generation, the codebase was manually refined:
- spacing and layout adjustments were handled directly in CSS
- responsiveness was fine-tuned from mobile up to wide desktop
- unnecessary markup was simplified to keep the page lightweight
The final page is a fast-loading, text-driven landing page focused on clarity, SEO, and direct contact, without relying on complex interactions or external services.
Results
- A live single-page site, designed and implemented end to end in one week
- Brand foundations created from scratch, with no existing assets to work from
- An information architecture and copy written for two distinct search intents
- A React implementation generated from Figma Make, then refined by hand in CSS
- No third-party form or tracking dependencies, by decision
This is what I delivered. Conversion and traffic sit with the client, so I make no claims about them.
What I Learned
- Prompt-to-code tools are most effective when combined with front-end fundamentals
- Performance and security concerns should influence technical decisions early
Interested in working together?
If you’d like to discuss a similar problem or explore a collaboration, feel free to reach out.