Relume Wireframing 2.0: A Step-by-Step Guide

TL;DR:

• Relume Wireframing 2.0 is a major upgrade that delivers a smarter, more creative AI. The new version produces professional layouts that feel human-designed, significantly reducing the manual rework needed in previous versions.
• If you're a web designer or developer looking to streamline your workflow, Relume's Wireframing 2.0 might be just what you need. In this guide, we walk through the new features and show you how to build a complete website from scratch using AI-powered layouts.

What's New in Wireframing 2.0?

Relume has long been considered one of the best implementations of AI for web designers and developers. The new Wireframing 2.0 update is smarter, more creative, and designs the way an actual designer would create websites. Instead of generic layouts, you get thoughtfully structured pages that feel human-made.

Getting Started: Creating Your Project

To demonstrate the power of Wireframing 2.0, let's build a promotional site for a new feature.

Here's how to begin:

1. Open Relume and create a new project

Click the 'New Project' button to get started with a fresh canvas.

2. Write your project prompt

Keep your prompt simple and clear. For example: "A site for the new Memberstack DataTables feature. The easiest way to build and manage databases for your no-code apps." You can specify the number of pages you want (2-5 pages works well for most projects).

Generating Your AI-Powered Sitemap

After entering your prompt, click 'Generate Sitemap' and watch the AI work its magic. Relume will analyze your prompt and create a logical site structure complete with all the essential sections. You typically see sections like:

• Hero header section
• Features list
• Benefits section
• How it works
• Testimonials
• Call-to-action (CTA)
• Footer

Review the sitemap to ensure it covers everything you need, then proceed to the wireframing stage.

What Makes 2.0 Different?

Previous versions of Relume provided nice layouts, but they weren't always the most creative. Designers often needed to manually rework the wireframes. With 2.0, that's changed dramatically.

As the AI generates your wireframes, you'll notice something different right away. The layouts look genuinely creative and well-thought-out. Sections flow naturally, content is organized logically, and the overall design feels professional. Features like "What Developers Say" sections and "Get Started Quickly" prompts are positioned exactly where they should be.

While previous versions were already good, Wireframing 2.0 represents a clear improvement. The layouts feel more intentional, more polished, and closer to what you'd expect from a human designer.

Customizing Your Style Guide

Once your wireframes are generated, it's time to apply your brand's visual identity. The style guide section lets you customize colors, fonts, and other design elements.

Setting Up Colors

Start by entering your brand colors. You can:

• Replace the default colors with your brand's primary colors
• Add accent colors like gold or other complementary shades
• Set light background colors (white, light gray) for section variety

The AI is smart about applying these colors. It will automatically detect that you prefer light backgrounds and apply them consistently throughout your site, creating visual variety without overwhelming the design.

Choosing Typography

Select fonts for both headings and body text. Popular choices like Plus Jakarta Sans work well for modern, professional sites. Apply your font choices to both heading and body text for consistency.

Fine-Tuning Details

Don't forget the small details that make a big difference:

• Adjust button styles to match your brand
• Make headers bold or adjust their weight
• Switch between light and dark mode if needed
• Modify neutral colors to match your preferences

The great thing about Relume is that it applies your style guide choices across the entire site automatically, maintaining consistency throughout all pages.

Reviewing Your Final Design

After setting up your style guide, review the complete site design. You'll notice that Relume has intelligently applied your branding and styling to every page, creating a cohesive look throughout.

The homepage will showcase your color scheme, typography, and overall design aesthetic. As you navigate through other pages, you'll see that the styling is consistent, with thoughtful alternation between background colors and well-balanced section layouts.

Remember that the placeholder images are just that, placeholders. You need to replace these with your actual content once you export and build out the final site.

Exporting Your Project

Relume offers multiple export options to fit your workflow:

• Webflow - Direct integration for no-code development
• Figma - For additional design refinement
• React - For custom development projects
• HTML - Standard web format
• CSV and Text - For documentation or alternative uses

Before exporting, you can also add pages or sections if you need additional content. This flexibility makes it easy to expand your site without starting from scratch.

Final Verdict

Wireframing 2.0 delivers on its promise of more creative, intelligent layouts. The wireframes genuinely look better and feel more professionally designed compared to the previous version.

The ability to quickly customize typography, adjust header weights, and fine-tune colors makes it easy to match your brand identity. The AI's understanding of design principles means you spend less time reworking layouts and more time focusing on content and functionality.

Whether you're building a simple landing page or a comprehensive multi-page website, Relume Wireframing 2.0 offers a powerful way to accelerate your web design process without sacrificing quality.

Ready to try it yourself?

Check out Relume and experience the power of AI-driven web design. Visit Relume's website to get started.

FAQs:

Q: Do I need design experience to use Relume Wireframing 2.0?

A: No. Relume is designed to be accessible for beginners while still being powerful enough for experienced designers. Simply enter a text prompt describing your site, and the AI handles the layout and structure. You can then customize colors and fonts through an intuitive style guide interface.

Q: How is Wireframing 2.0 different from the previous version?

A: Wireframing 2.0 generates significantly more creative and intelligent layouts that closely resemble what a professional designer would create. Previous versions provided good starting points but often required manual adjustments. The new version produces wireframes that feel more polished and intentional right out of the box.

Q: What platforms can I export my Relume project to?

A: Relume supports multiple export formats including Webflow (for no-code development), Figma (for additional design work), React and HTML (for custom development), and even CSV and text formats for documentation purposes. This flexibility ensures it fits into virtually any web development workflow.

Q: Can I customize the design after the AI generates it?

A: Absolutely. You can fully customize colors, fonts, button styles, and other design elements through the style guide. You can also manually adjust sections, add new pages, or modify layouts as needed. The AI provides the foundation, but you maintain complete creative control.

Q: How many pages should I request when starting a project?

A: For most projects, 2-5 pages works well and provides a solid foundation. You can always add more pages later if needed. Start with your core pages (homepage, features, contact, etc.) and expand from there based on your specific requirements.