DEV Community

Christopher Shen
Christopher Shen

Posted on AI-assisted

Redesigning a Halloween guide for people who need a costume tonight

This post was written with AI assistance.

When someone searches for a last-minute Halloween costume, they probably have a practical question: “What can I put together with the clothes and supplies I can get today?”

That question shaped the recent redesign of Halloween Prep, a small static site with Halloween guides. The goal was to make the costume page easier to scan, especially on a phone.

Start with a choice

The last-minute costume guide begins with three outfit ideas: a black cat, a closet pirate, and a silent-film-inspired look.

Each option shows the base clothes and the finishing detail up front. Readers can jump directly to the materials and steps instead of reading through every idea first.

Make the details useful

Each guide has a checklist, numbered steps, and substitutions. The page also acknowledges that “last minute” doesn’t have to mean using only what’s already at home: a headband, cardstock, or tape might be available at a nearby craft, discount, or dollar store. Availability varies by location.

The checklists can be copied or printed, and the layout was adjusted for smaller screens. The costume images are AI-generated illustrations, not photographs of completed outfits. The instructions are editorial suggestions and haven’t yet been hands-on tested.

Keep the page lightweight

The site is built as a static website with JavaScript, HTML, and CSS. The redesign keeps the existing costume-page URL and uses in-page links so readers can move quickly between the overview and each outfit.

There’s still room to improve: real photos and hands-on testing would make the guides more useful. But this iteration gave the page a clearer job—helping someone choose a workable idea and find the next step.

I’d welcome feedback on the mobile layout and how clearly the guide presents each option.

Top comments (0)