Create Development Ready Wireframes in Minutes with Relume.io

Creating a website can often seem like a complicated process, but with tools like Relume.io, it becomes much more manageable - even for those without technical skills. In this blog, I'll walk you through how I brainstormed a website, generated a sitemap, wire-framed it, and did copywriting in minutes using Relume.io.

Step 1: Writing a Structured Website Description

The first and most important step is providing Relume with a clear and well-structured website description. This description includes the goals and key features of the site. Here's an example I used:

Website Description Example:

Company description: Design Agency is a design agency which offers design services on a subscription basis. You don't need to hire a full-time design team - simply subscribe to our package and gain access to a virtual designer with a diverse skill set. You can pause and resume your subscription anytime, saving on hiring, training, and payroll costs. We offer two packages: a basic design subscription covering UI/UX, branding, and graphic design, and a premium package that includes CMS-based website development and video editing.

Goals:

• Three-page website: Home, Book Meeting, FAQ
• Sell two subscription packages
• Schedule meetings

Mentioning "company description", "goals" and "other relevant notes" separately helps in generating better results.

Step 2: Generating a Sitemap

Once I submitted the website description, Relume used its AI to generate a sitemap that matched the goals I set. In this case, it produced a three-page sitemap: Home, Book Meeting, and FAQ. While the initial sitemap wasn't perfect, with some minor issues, about 80% of it was usable right away.

One of the great things about Relume is that I could easily tweak or regenerate the sitemap by updating the description - either at the sitemap level or the individual page level. This flexibility allowed me to get the sitemap just right.

Step 3: Switching to Wireframe Mode

After finalizing the sitemap, I switched to Wireframe Mode. Relume generated wireframes for each page, including sections based on the description I provided. For example, the Home page featured sections for a hero image, service descriptions, and client testimonials.

In my case, the AI-generated pricing section only included one pricing plan, even though I mentioned two packages in the description. However, this wasn't an issue, as Relume made it easy to manually adjust sections or regenerate specific parts by updating the description. I could also move, add, or delete sections to ensure everything fit perfectly.

Step 4: AI Copywriting for Content Generation

Relume isn't just about wireframing - it also helps generate copy for each section. Whether I needed headlines, product descriptions, or calls-to-action, Relume's AI-driven copywriting feature provided a strong starting point. As soon as I switched to wireframe mode, I could see Relume automatically generating content for each section. With a little bit of tweaking, I was able to align the AI generated copy with my envisioned brand tone.

Step 5: Customizing the Wireframe

By selecting elements and using the side menu, you can re-generate them by providing new descriptions for respective elements. You can also add new sections available in the side menu and further customise the wireframe. There's another nice feature called global sections - basically sections like headers and footers which will stay consistent through all the pages.

Step 6: Exporting to Figma or Webflow

Another aspect I love about Relume is that all the wireframes are built using Finsweet's Design System. Finsweet provides copy-paste-ready components for both Webflow and Figma, making it incredibly easy to edit the design later. Once I exported the wireframe, I could customize global styles - such as fonts and colors - across all sections and pages with just a few clicks. This is a huge time-saver when making design changes.

Figma Export

It's a fairly simple process - you need to copy the Figma style guide into your project and then use Relume's Figma plugin to import the sitemap and wireframe.

Webflow Export

It's a little bit of a complex process and you might need help from a developer. First you need to set up a style guide in Webflow and then use Figma's Webflow app to import the wireframe.

Conclusion: Relume for Streamlined Sitemap and Wireframe Creation

Relume has quickly become my go-to for effortlessly creating well-organized sitemaps and wireframes. While you might need some basic technical skills for final design tweaks and launching (especially in Webflow), Relume takes care of the toughest parts - brainstorming your concept and shaping it into something real.

From generating detailed sitemaps to building wireframes with Finsweet's Design System, Relume streamlines the entire process of brainstorming and content creation. With its AI-powered copywriting and customizable components, it makes it easy for anyone to create a solid website foundation, ready for further design in Figma or launching with Webflow.