projects

Interactive Style Guide

Now that you have spent the last eight weeks meticulously crafting your static Brand Style Guide, it’s time to bring that vision to life. For the final project in the course, you’ll transition your work into Figma to transform your PDF document into a dynamic, interactive digital experience. The goal is to evolve your brand from a series of static pages into a functional prototype.

You’ll explore Figma’s advanced features through targeted tutorials to master prototyping, linking, and transitions. You’ll be reusing many elements from your BSG–writing, images, color palette, typography choices–but presenting them in a new way via Figma.

At a minimum, your interactive BSG must include functional navigation that allows users to move to different pages or sections. Beyond basic navigation, you are encouraged to experiment with a dropdown menu, a photo gallery for your images section, an overlay, an animation, and/or horizontal scrolling to present content. You can also use one of the many free portfolio templates in Figma and modify it with your own colors, type, images, and content.

Ideally the interactivity will further reflect your brand’s voice and style—whether that means snappy, high-energy transitions or smooth, minimalist fades. To submit the project, send me the link to your finished Figma prototype:

  • Open your Figma design file and click the Present (play icon) button in the top-right toolbar. This opens the prototype in a new tab. 
  • While in the presentation view, click the Share prototype button in the top-right corner. 
  • Click Copy link at the top of the window. 
  • Email this link to me via email (sorapure@ucsb.edu). 

Brand Style Guide

For the major project in the course, you’ll use a variety of programs to create a brand style guide that presents your “brand” visually and in writing. You’ll be creating the various parts of the BSG each week, with feedback from me and your peers. I’ll provide an interim grade about halfway through. The project is due as a PDF anytime from Friday 3/14 at 5:00 pm.

Do not use Canva to create your BSG. Canva is an excellent resource but unless you purchase the Pro version (and even then) it constrains your creative options. If you do use Canva to layout your BSG pages, do not use any templates or any elements that Canva provides. Just use Canva as a blank page on which you place elements that you create in other programs (e.g., photoediting programs).

In class, we’ll be using Figma Slides to create the page layouts for your BSG. Unlike Google Slides and the free version of Canva, Figma Slides allows you to use fonts that you download and install on your computer, giving you freedom in your typographical choices. You can also use Adobe’s InDesign or another document design program. Google Slides or PowerPoint are also good alternatives.

Required elements of the BSG, though not necessarily in this order:

  • front and back covers and (optionally) inside covers
  • table of contents
  • your story/welcome
  • voice/mission/style
  • lettermark logo and lockup in several colors
    • one or more mockups displaying your logo on an item (e.g., business card, clothing, coffee cup, billboard, etc.)
  • typography
  • color palette
    • moodboard?
  • imagery
    • moodboard?

Typography section draft: Decide on the two or three typefaces that will be included in your Brand Style Guide. Using Figma (or InDesign, Canva, or another program), create one or more pages that show and describe the typefaces. The brief description of the characteristics of each typeface should demonstrate how it is reflective of your brand style while using appropriate typographic terminology. Look at the BSG typography pages from former students to get ideas for content and layout. Save your page(s) as a PDF and upload them to the typography draft folder in Google Drive.

Logo section draft: Create a personal lettermark logo in black and white (and optionally in color) using your initials or your first or last name, if it’s short. Keep in mind that the best logos are simple, scalable, memorable, versatile, and relevant. Your lettermark logo should be reflective of your brand–that is, your values, style, personality, and professional goals. You should display the logo at different sizes and also create a “lockup”–that is, your lettermark logo plus your full name. These should all be in black and white; you can also show your logo in a few colors, but that’s optional.

Consider including mockups that show your logo in real world settings. You can also include a logo “do’s and don’ts” page. Look at the BSG logo pages from former students to get ideas for content and layout. Save your page(s) as a PDF and upload them to the logo draft folder in Google Drive.

Color section draft: Decide on the color palette for your Brand Style Guide. Aim for 6-8 colors; your palette must include one very dark (almost black) color and one very light (almost white) color for text, backgrounds, and contrasts. A palette without these is unusable. Determine how you’ll present the palette in your BSG. Provide names and brief descriptions of each color, along with identifying hex codes and CMYK/RGB codes. Include a clear and concise explanation of how these colors express your brand style and how they should be used as part of your brand. Upload a PDF with this information to the color draft folder in Google Drive.

Imagery section draft: Not every BSG includes an imagery section but they all include imagery that aligns with and expresses the style of the brand. For this draft, then, you can create a specific section with a page or pages that describe and give examples of your brand’s imagery. (For a good example of an imagery/photography section, check out UCSB’s “Identity Guidelines,” pages 54-61.) Or you can find and/or create images that you’ll use throughout the BSG, not necessarily in a dedicated section. Either way, your imagery should express your brand and style through its color, mood, and other features.

Writing sections: Your writing throughout the BSG should align with and verbally represent the visual style that defines your brand. In particular, the opening sections of the BSG provide an opportunity for you to describe yourself and your brand in excellent, engaging, appropriate writing. Note that the student BSGs have different opening sections: Introduction, Welcome, Greetings, About Me, and Brand Identity. Whatever you choose to name your section(s), use it/them as an opportunity to verbally present yourself and your brand and to display your excellent writing skills.

BSG examples

Design Playground Mini-Projects

Like structures in an actual playground, these mini-projects invite you to throw yourself into the mix and exuberantly explore your creativity. All five quick challenges are low-stakes, low-risk, and maximum curious adventure. They’re intended to be fast, fun bursts of visual and verbal communication, offering you a safe space to try out unconventional ideas and push your aesthetic boundaries without the pressure of a major grade. (The five mini-projects taken together will receive one letter grade, which will be 20% of your final grade.) Treat them as essential warm-ups to sharpen your eye and help you make decisions that will ultimately constitute your Brand Style Guide.

Design Playground 01: Single-Slide Introduction

The Challenge: A Signature Detail

Welcome to the start of building your personal brand! Before we dive into the deep end with developing logo, typography, color, imagery, voice, and the crushing weight of self-definition for your Brand Style Guide, we’re going to start with a fun, fast, visual icebreaker.

Your mission is to create one single slide that introduces you to your classmates by focusing on just one detail about you. Like a signature, this detail might be thought of as a unique, personal mark that represents you and communicates an important element of your style or identity.

Choose a detail that’s interesting, engaging, memorable, creative, maybe slightly ridiculous, but purely you. We’ll brainstorm some ideas and approaches in class.

Important information:

  • The only element that’s required to be on the slide is your name.
  • Use any design software you prefer but be sure that your end product fits on a 16:9 slide.
  • Add your slide to this Google Slide deck before class on Thursday 1/8.

Remember: This is a multimedia writing and design class. Don’t just throw a photo and some text on a slide and call it a day. Use this as your first opportunity to showcase your taste, aesthetic sensibilities, and, most importantly, your style.

Final advice: Be bold. Own your mark.

Design Playground 02: Object Lesson

The Challenge: Critique the Mundane

For this design challenge, we’re shifting focus from self to surroundings. Great designers are constantly observing and analyzing the world around them. Your task is to apply your critical eye to a single, ordinary object and distill its design lessons into one powerful slide.

The Process:

  1. Start by selecting an everyday, readily accessible object that you can easily photograph—for instance, a specific pen, a door handle, a chair, a backpack. Try not to choose anything too complicated, and keep your focus on physical, observable design.
  2. Take a photograph of the object; the photo will be the central element of your slide’s design. Consider removing the background (in Google Slides, right-click the image, select Edit Image, and then select Remove Background).
  3. On your slide, concisely analyze the object’s design, identifying at least one success and at least one failure in its form, function, usability, or aesthetics. Use arrows, lines, circles, or other markers to identify specific parts of the design that you’re discussing.
  4. Finally, based on your critique, derive one brief, powerful, and perhaps even clever general statement about design or a universal design principle. This statement will be the title of your slide. Some examples are “Fashion and function are equally important,” or “The quietest design is often the best,” or “Good design prioritizes the user.”

Requirements:

  • Your slide should include the design statement as title, photo of the object, design critique (using concise, engaging writing), and your name (small, bottom corner).
  • Use any design software you prefer but be sure that your end product fits on a 16:9 slide.
  • Add your slide to this Google Slide deck before class on Tuesday 1/13.

Final advice: Sharpen your eye. (Ouch.)

Design Playground 03: Brand Strategy

The Challenge: Learn from a Master

David Airey’s Identity Designed website is a wonderful showcase of high-caliber, real-world case studies from international design studios, detailing the strategies and processes behind successful logos, color palettes, and comprehensive brand identity systems. The challenge here is to study a successful brand design and articulate what you’ve learned that you can apply to your own Brand Style Guide.

The Process:

  1. Select one of the case studies at Identity Designed and study it closely, looking in particular for elements, choices, strategies, processes, or other lessons that you might adapt in your BSG.
  2. Create a screencast of around 3-4 minutes in which you identify what you find of value in the case study and how you plan to adapt it in your own BSG.
    • Be sure to organize your discussion into several key points, with an introduction and conclusion. Consider writing a script or outline to guide your presentation.
    • You shouldn’t simply summarize the case study; rather, highlight insights or lessons about design and branding that are relevant for your BSG project.
    • As you’re talking, show relevant images from the case study that demonstrate the points you’re making. Try not to scroll all the time.
    • Take a look at this example screencast that I made.

Requirements:

  • Use screen recording software that creates an mp4: Zoom (start the meeting, share your screen, click on record); Mac’s built-in screen recorder; Window’s built-in screen recorder; Canva’s desktop app; ScreenPal; OBS Studio; or another program.
  • Upload your screencast (with your name in the filename) to this Google folder before class on Tuesday 2/17.

Design Playground 04: Anatomy of the Alphabet

The Challenge: The Personality of a Single Letter

This design challenge is all about getting up close and personal with typography. Every letterform—even the most common ‘a’ or ‘e’—has been carefully shaped by the intentions of the typeface designer to convey a style, a personality, a message. Your mission is to select one letter from a typeface that you might use in your BSG and provide a detailed visual analysis that also demonstrates your command of typographic terminology.

The Process:

  1. Select a typeface that you are seriously considering for use in your BSG. Then select one single letter (upper- or lower-case) that has an interesting form factor, an unusual element, or just a lot of personality.
  2. Take a screenshot that isolates that letter; it should be large as it will serve as the primary focus of the slide’s layout.
  3. Analyze the letter on the slide (next to or around the visual), describing its style and personality using typographic terminology to name parts of the letter. If it helps your critique, briefly discuss the historical period or intended use of the typeface.

Requirements:

  • Your slide should include a large rendering of your chosen letter, along with the name of the font, your name, and your analysis. 
  • Use any design software you prefer but be sure that your end product fits on a 16:9 slide.
  • Add your slide to this Google Slide deck before class on Tuesday 1/20.

Final advice: Scrutinize the serif. Every part has a purpose.

In-Class Activities

BSG Audit (Thursday 1/8)

Before you begin building your own Brand Style Guide, it’s good to take a careful look at many examples of the genre to understand what works and what doesn’t—and why. In this activity, your group will act as “design consultants” to audit a BSG created by a previous student. Adapting the “two truths and a lie” approach, you’ll identify two strengths and a weakness, creating a slide with your findings and briefly presenting it to the rest of the class.

Group Typeface exercise (Thursday 1/15)

Working in groups of three or four, carefully examine the typeface that your group is assigned. Then, drawing on the three readings that discuss the anatomy of typefaces, create a bulleted list that describes the main features of your typeface. Be sure to use the correct terminology to describe the typeface’s features and elements. Then add a paragraph that offers a more creative description of the typeface’s style and personality, referencing some of the traits you mentioned in the bulleted list. Add your group’s slide to this Google Slides deck and be prepared to present your description to the rest of the class.

Logo exercise (Thursday 1/22)

Experiment with different fonts as you combine your initials to create a logo. Type each letter separately so that you can move, resize, and bring the letters together in overlapping or other interesting ways. You can work in Google Slides, Canva, Figma, or another program. Select the top nine options and replicate them on this Google Slide deck, using a grid to separate the logo options.

Color Inspiration exercise (Thursday 2/5)

Browse through the web and your own photo collection to identify images that have the color vibe, so to speak, that you’re aiming for in your BSG. Select multiple images that you find inspiring. Reduce the images to a reasonable size in Photoshop or Photopea, or take a screenshot. Create a new slide in this Google Slides deck in which you combine the images and write text that describes what you find inspirational in the colors there.