Small clients brief by reacting. A moodboard asks a two-person business to imagine their own name on top of other people’s pictures, and imagining is what they hired a designer to do, so the response is often polite approval and very little information. Put a real page in front of them, created with an AI website generator, with their name in the corner and their services in the menu, and they start pointing within a minute. Usually at a word they would never use about themselves. Sometimes at a section that isn’t there.
So, most small identity jobs now start with a throwaway web page, a prop for one meeting. Fern and Thistle came to the studio for a name treatment and a website. They are a two-person flower studio offering wedding flowers, weekly subscriptions for offices and homes, and seasonal wreath workshops in their studio. Which of these offerings should lead the conversation became the real subject of the first meeting. That is a brand question before it is a layout one.
Table of Contents
The draft was made with Rewind’s free AI website generator, which uses one form and requires no account. One of the tags printed over the form says Commercial use OK, and because the generator was being used for client work, that claim was worth reading twice.
Business for Website Type. Clean Light for Color Scheme, the plainest option on the menu, because there was no reason to introduce a palette yet. The description read: “Fern and Thistle, a two-person flower studio. Wedding flowers, weekly flower subscriptions for offices and homes, and seasonal wreath workshops in the studio. The look should be calm and editorial, with lots of white space.” Then the tick boxes: Home and About, Portfolio / Gallery, Contact.
Extra Features was where the bait went: elegant serif headings, responsive, a workshop dates section. Elegant was deliberate. In practice, it is the word florists reach for first, and seeing the generator’s default interpretation makes it easier to identify what the eventual design needs to steer away from.
The whole brief, with the line asking for elegant serif headings near the bottom. The code arrived under the form as one HTML file with its stylesheet written into the head, and each requested page laid out as a section of one long scroll, linked from the menu. The download, rewind-result.html, went straight into the browser.
The hero has generous room above and below, and the content sits in a narrow column, so on a laptop Wildly Elegant Florals floats in an empty field with the menu far above it. That is the white space I asked for.
The first screen of the draft at laptop width, from the menu bar down to Our Story. The headline is a serif at regular weight. Bold might be the expected choice, but regular is better for a studio that wants to sound calm.
Below it come Our Story, a portfolio of three cards (Weddings, Subscriptions, Events), Seasonal Workshops with two date cards, and a contact form. It is close to the order a designer might draw, and it puts the weddings-or-subscriptions question on the table at once. The story text and dates are stand-ins for the studio to replace.
The workshops get a faint blue-grey ground. Because every section shares the same cap, the tint stops short of the page edges and sits in the white like a card on a table. That is worth keeping.
Every type decision on the page lives in a few lines at the head of the file. Then comes the typography, where the designer’s work begins. The headings use a serif and the body a sans, pairing a display serif with a reading sans. It’s the right direction and all a first draft needs to establish.
The main heading is large and drops a size on narrow screens. The spacing between the headline, section headings, and body text is the part of a page a designer would build by hand regardless of the starting point, so that is where a custom type scale comes in.
The blue is defined in one class, accent, and the Send Inquiry button uses the same value. Colouring one word in a quiet headline is an old trick, and a decent one. Here, it lands on Elegant, the word planted in the brief, making the word that stands out the designer’s own bait. Fair enough. The shade is a clean, steady blue. For this studio, a better choice would be to draw the accent from the flowers themselves once photographs are available: a muted green or dusty rose. The button could use a separate colour so the highlighted word never reads as a link.
The studio name sits at the top left in bold sans. That corner carries the identity, the part the designer is paid to create, so its simplicity is welcome.
The portfolio cards contain a word and a short line each for now, with a pale grey placeholder waiting for photographs that do not yet exist. For a florist, photographs make up much of the site, and they need tall frames rather than shallow landscape crops. That is a shoot to plan later.
Framer is a platform for building the finished site, provided the studio is happy to host it there. It describes itself as an “AI website builder for designers and teams”, and the Get started for free button leads to a login page. Logging in first makes sense for a tool that will be used over several weeks. For a page intended to be discarded after one meeting, it is unnecessary overhead. There is also a risk that the client will see a fully featured editor. They also assume the draft is the finished site.
The welcome screen offers two options: continue with Google or enter a work email. Wix is the platform a small studio might reasonably try on its own. Therefore, it is worth looking at that experience too. Its AI website builder promises a finished business site from a prompt, but Create with AI leads to a sign-up page, with social login options or an email address. If the studio decides to manage the site itself, Wix is a reasonable choice, and the visual identity should be designed to hold up on that platform.
At the studio, the HTML file was opened in a text editor beside the browser, making it possible to change a colour and reload the page during the conversation. At phone width, the layout stacks into a single column and the headline drop a size, which is probably how most of the studio’s customers will encounter it.
The section order stays, more or less. The white space stays too, along with the pairing of a regular-weight serif and a sans. These are decisions a designer might make anyway. Seeing them on a real page gives the studio something concrete to respond to and agree on during the meeting.
Everything that makes the site recognisably theirs gets redrawn. The typefaces are chosen and licensed for desktop and web use before the client sees anything final. A typeface that wins everyone over in a proof, only to come with a web licence nobody budgeted for, creates a difficult conversation best avoided. Next comes the scale between the headline and body text. The wordmark gets drawn, which is much of the job, and once the photographs are ready, the gallery gets tall frames to accommodate them.
And the blue goes. Elegant returns to the same color as the rest of the headline, in whichever serif the studio settles on. That is, if the word stays in the headline at all.
Gain more insights and inspirations by reading our latest blog.
Unlock freebies for your creative projects. Explore a curated selection of fonts, graphics, and more - all absolutely free. Don't miss out, claim yours now!
Claim Free Freebies
