Grae Speakers

Grae Speakers

Concept company branding, App, UI/UX, web design, and packaging design.

Follow along as I build this speaker brand from the ground-up, including a simple app UI, logo, packaging, and responsive website.

UI / UX Project Brief

The ideal customer is a woman named Gretchen. Gretchen is in their early ‘40s and lives with their partner. They are a university graduate and work full-time. Gretchen loves music, lives in the suburbs, is familiar with technology, and is comfortable shopping online.


Client

Self-initiated

Role

Design & Development

Timeframe

Ongoing

Principles

Alignment, Balance, Colour theory, Contrast, Emphasis, Grids, Hierarchy, Negative space, Page layout, Pattern, Proximity, Repetition, Rhythm, Rule of thirds, Typography, White space

Skills

Brand development, Logo design, Packaging design, Print design, UI+UX design, Web design


App UI Design

I’m in the process of designing an app for Grae Speakers. The app function: after purchasing the Bluetooth speakers, the packaging and marketing material instructs users to download the Grae Speakers app. After downloading and installing the app, users are guided through simple Bluetooth speaker pairings. Users can name each speaker, test volume individually, and once connected, control the master volume and equalizer settings.

UI wireframe design by Cam Stevens

I use time-tested design principles to inform the design outcome for every project I work on, such as:

  • Using space to group related elements;
  • Using consistent treatment of elements and functions;
  • Visual hierarchy of information and proximity;
  • Conveying information as simply as possible;
  • Using colour purposefully;
  • Ensuring proper text contrast ratios for accessibility;
  • Using a single typeface with appropriate font weights and proper line spacing;
  • Using proper alignment of text and content;
  • Avoiding the pure... (#000 and #fff)

Starting with Lo-Fi wireframes the app prototyping begins. The next step is prepping the HiiFi version with graphics, colour, and text styles applied...

UI app design by Cam Stevens


Logo Design

I tend to surround myself with small collections of things... design ephemera. Whether I’m taking photos of a faded, hand-painted sign on the side of a historic building, or type hunting old products in antique markets, I’m constantly building my library of design inspiration. This comes in handy when designing logos.

Nowadays there are logo-generating websites offering thousands of poor-quality, over-used options. I prefer to draw from the old-world way of doing things by starting with simple shapes. I believe ‘less is more’; it promotes clarity and timeless design.

Typically, I’ll scribble down some notes and sketch a few ideas on paper, but I end up jumping in to Illustrator very early in my process. It is there where I start shaping initial designs and testing them with typefaces and different font weights. Eventually, I come to a solution—but I don’t close the book until I see how the logo reacts with all of the creative components.

At this point, I continue iterating the design until I’m happy with the result.

Grae Speakers logo design by Cam Stevens

Grae Speakers logo design by Cam Stevens


Web Design

When I design a website, I start with the smallest viewport. The restricted space forces me to prioritize important elements and remove unnecessary ones. This approach ensures my interface is simpler at desktop sizes too.

Using Figma, I start with wireframes; being mindful of breakpoints and responsive layout. I also work on a second page using high fidelity images, vibrant colour, and intuitive text sizes. This also allows the chance to see the newly created logo in its environment; how it reacts with site navigation and the UX.

In this case, I’m making sure the font sizes and colours closely match the app, seen above, for consistency.

UI website wireframe design by Cam Stevens

UI website design by Cam Stevens

UI website wireframe design by Cam Stevens

UI website design by Cam Stevens


Packaging Design

All packaging is created in Illustrator and mocked-up in Photoshop. I stick with a design system for this brand: consistent typeface and layout structure.

Packaging design by Cam Stevens

Packaging design by Cam Stevens

Packaging design by Cam Stevens

Sales Materials

For anything that requires printing, I lean on Adobe InDesign, Illustrator, and Photoshop for perfect results.

Brochure design by Cam Stevens