DEMA Show 2019 Trade Show Website Reskin

Work for hire for Diving Equipment & Marketing Association (DEMA) by Lara Lee while employed at CSG Creative with permission for Lara Lee to display for self-promotion.

Background

Every year, the Diving Equipment & Marketing Association (DEMA) launches DEMA Show—the only trade-only trade show specific to the diving and scuba industry. This four-day event attracts 6,000+ diving professionals from all over the world.

DEMA’s 2018 trade show website provided ample marketing opportunities for their partners and advertisers. However, DEMA’s own message was somewhat more buried. Therefore, we proposed a reskin that would clarify DEMA’s core messaging and make the website look as fun and amazing as the event itself.

Two main challenges arose: working within both a smaller budget and technically-constraining trade show CMS platform, a2z. As a result, CSG Creative focused on the branded look, navigation, and homepage design.

My Role

Web Designer

Digital Direction

Matt Hamilton

Agency

CSG Creative

Art Direction

Courtney Lopes

Web Developer

Stacie Davis

The Results

0 +

Show Attendees

Organic Visits a Month
to the Trade Show Website

Dive into Wireframing: First Steps of a Trade Show Website

The first step to any website design project is wireframing. Wireframing tackles the information hierarchy so I can ensure that the design ultimately resolves DEMA’s pain points.

I experimented with:

ad size and placement, which needs to be prominent but non-competitive;
whitespace to increase readability; and
highlighting the primary slideshow.

I then worked with my supervisor Matt Hamilton, Digital Director, to condense and simplify initial layouts. Then, with feedback on the initial B&W wireframes, I then created high-fidelity, full-color wireframes incorporating Courtney Lopes’ branded core and visual identity elements.

One of my favorite ideas for the trade show website reskin was decorating the top bar. I took fish from the DEMA Show logo and overlaid them for an extra touch of branding. The client loved this creativity and asked for this in their print pieces as well.

Header & Footer Wireframe Concepts

First Wireframe

Final Wireframe

The final wireframe is more condensed, including a short navbar, text-only news items, and less content in the footer. We also successfully persuaded the client to move the ads down. Now the hero slideshow makes an impressive full-screen above-the-fold display of DEMA Show’s most important messages in their website design.

The Inspiration: DEMA Show 2019 Core Identity

The Final High-Fidelity Wireframe in the Trade Show Website Reskin

“If you haven’t seen Lara’s web design go live, check it out! Her first site design was a homerun…even the a2z guy that gave us training said this was the nicest design and UI he’s seen from DEMA yet! Nice job, Lara!”

Matt Hamilton

Director of Digital Design