links to sections below:
Figma resources
- Figma help center
- Figma Design for Beginners course
- our class notes for this tutorial
- 23 Inspiring Portfolio Websites + Tips
- 2800+ Free Figma Portfolio Templates
- Brand Book Templates:
- Brand Identity Template #1, by Artem Goroshnikov
- Brand Identity Template #2, by Artem Goroshnikov
- Brand Book Figma Template, by Brix Templates
- Straightforward Brand Guidelines, by Redo?
- Styles
- Plugins:
- Simple image carousel template
- Create an overlay
- Dropdown menu
- options for building your interactive BSG
software
- Figma
- Photoshop alternatives
- Photopea: online, free but with lots of ads, very similar to Photoshop
- here’s a nice Photopea video tutorial
- background info on the creator of Photopea
- Affinity (Pixels) : desktop, free with a Canva account, very solid Adobe Photoshop competitor
- GIMP: desktop, free, open-source, it’s been around for 25 years
- and these helpful GIMP tutorials
- Photopea: online, free but with lots of ads, very similar to Photoshop
- Illustrator alternatives
- InDesign alternatives
- Just FYI, differences between graphics that are bitmap/raster and vector: video and text explanations
AI images
- OpenAI’s DALL-E 3 via ChatGPT: https://openai.com/index/dall-e-3/. The free ChatGPT plan includes two free images per day, and ChatGPT Plus costs $20 per month and includes DALL-E 3.
- Midjourney: much better images, but you have to pay $10/month
- Leonardo.Ai: pretty good image quality; easy to use; 25 free tokens each day
- Ideogram: evidently does a good job of rendering text; limited free plan; can be long wait times
- OpenArt: not great, but free
design resources
- free, copyright-friendly images: Pexels and Unsplash and Pixabay
- lots of good stuff at Freepik
- Smithsonian Open Access images
design principles
- CRAP principles, by Attention Insight
- Clean Up Your Mess: A Guide to Visual Design for Everyone, by Daniel Higginbotham
- Smashing Magazine (lots of links, tutorials, and advice)
- The TED talk design playlist
- not principles exactly, but good design and logo resources at David Airey’s website
- Eye on Design
- Dribble
- What is Bad Design, by Renee Fleck at Dribble
books on design
- The Non-Designers Design Book, by Robin Williams
- Graphic Design School, by David Dabner, Sandra Stewart, and Abbie Vickress
- 7 Essentials of Graphic Design, Allison Goodman
- Universal Principles of Design, Lidwell, Holden & Butler
Brand Style Guide Overview
BSG examples
- student BSGs: Ricky Nguyen, Yehna Cha, Mable Truong, Natalie Plumb, Sara Bredice, Eileen Bettinger, Anne Payaril
- more excellent student BSGs: Anna Constantino, Jade Burchett, Stephanie Foster, Kai Oda, Emily Nguyen, Melody Li, Naomi Blik, Vianna Mabanag, Esther Liu, Aanya Sharma, Enya Bours, Stella Rufeisen, Van Vo, Phuong Vy Tran, Blake Keenan, Bethany Oh, Audrey Kenyon, Claire Roggeman, Izzy Ferranco, Natalie Aymond, Sommer Huang, Jackson Weill
- professional PDFs: Love to Ride, Slack, Skype, I Love New York, b restaurants
- professional websites: UCSB, Barbican
how to create a BSG
- How to create a brand style guide, by 99 designs
- How to create a visual style guide for your brand, Canva
- How to build an effective brand style guide, by Venngage
- Creating a brand to serve, David Anastacio
- Asana rebrand, by Micah Daigle
- 16:9 aspect ratio calculator
more BSG examples
- Pinterest (thanks, Izzy)
- Archivepdf.net (thanks, Anouk)
- 12 examples of great style guides, by Marq
- 50 style guides every startup should see before launching, by Canva
- 21 brand style guide examples, by Hubspot
- Behance > Brand Style Guide
- Pinterest > Brand Style Guide
- Identity Designed, by David Airey
- hilarious: *Santa* Brand Book, by Quietroom (now sadly scrubbed from their website)
typography resources
required reading
- The Hidden Power of Typography, by Rob McKaughan (Microsoft)
- The History of Typography, 5-minute video by Ben Barrett-Forrest
- Five traits that define a typeface, by Creative Bloq
- The Anatomy of the Letterform, by Pangram Foundry
- Canva’s Beautifully illustrated glossary of typographic terms you should know
additional awesome typography resources
- Chapter 3 from Stop Stealing Sheep & find out how type works by Erik Speikermann & E. M. Ginger
- Practical Typography, by Matthew Butterick–especially the Foreword, Introduction, and the chapter Why typography matters
- learn and have fun at the same time:
- KernType: a kerning game where you can compare your kerns to a typographer’s solution
- Combining Typefaces, by Tim Brown (free PDF book)
- Typewolf: What’s Trending in Type, especially Font Recommendations and Lists, by Jeremiah Shoaf
- The Power of Typography TED Talk, by Mia Cinelli
- How Custom Fonts Became the Ultimate Corporate Flex, by James I. Bowie
- identifying a font that you like: FontSpring Matcherator or How to identify any font using Photoshop
- How to choose the right face for a beautiful body, by Smashing Magazine
- BSG typography pages by former students
finding perfect typeface pairs
- The Ultimate Google Font Pairings, by Reliable
- Fontjoy, an easy way to generate font pairings
- A Guide to Combining Fonts, by Matej Latin
- The Top 50 Google Font Pairings, by Pagecloud
- 10 Beautiful Font Combinations, by Inkbot
choosing the body font
- How to choose the right face for a beautiful body, by Smashing Magazine
- Serif vs. sans-serif for text in print, by Fonts.com
- Body text, by Matthew Butterick
- Meet the ipsums
type anatomy
- Google Fonts: a library of 1,358 free licensed font families
- to download a font, click on the plus sign in the top right corner, click on “Family selected” at the bottom of the screen, and then click on the download icon in the top right corner
- Google Fonts Knowledge: resources on all aspects of typography
- Google Fonts Glossary: defines key typographic terms with examples
free fonts
- Google Fonts
- Adobe Fonts
- Dafont
- Font Space
- Urban Font
- Font Squirrel
- free fonts that Matthew Butterick likes
fonts you have to pay for
- MyFonts
- Type Network (independent type designers)
logo resources
required reading
- The Art of Logo Design, 6-minute video
- The 7 types of logos (and how to use them), by 99 designs
- 31 Creative Techniques for Two-Letter Logos, by Company Folders
- Logo of Letters, by Before and After
- Lettermark Design, Pinterest
- logos and business cards designed by previous students in the minor
additional awesome logo resources
- Logo Design Love, by David Airey
- 123 Beautiful Personal Logos, Monograms, and Wordmarks for your Inspiration, by Job Mob
- How to Construct a Personal Logo: Practices and Examples, by Inspiration Feed
- 50 incredibly clever logos with hidden meanings
bsg logo pages by former students
helpful logo tools
color resources
- How to Find the Perfect Color, by Before and After
- Adobe Color CC: by Adobe, you can explore and create color themes/palettes and easily import them into Illustrator; generate a color palette from an image
- Colormind.io
- Coolors.co: generate a color palette, adjust the colors, extract colors from images, and other goodies
- Paletton: great tool to see color combinations for website design; once you’ve generated a palette, see it in action through the Examples tab; check out the “color blind” option to see how different color combos look to people with various kinds of color blindness
- Material Palette: choose two colors and get an eight-color palette that you can download
- Hail Pixel by Colordot: a great way to see colors and get hex codes
- Multicolr Search Lab (by TinEye): choose colors (up to five) and TinEye will return images with those colors
- CMYK vs. RGB vs. Pantone, by Stephanie Asmus (Medium.com)
- 10 Color Palettes from the Natural World, by Payman Taei
- Pantone Color of the Year: the annual zeitgeist, rendered in color
- BSG color pages by former students
Photoshop/Photopea tutorials
- Photo editing tutorial #1: Interface, Filters, & Adjustments
- Photo editing tutorial #2: Text
- Photo editing tutorial #3: Selecting & Combining
Fun (?) with Photoshop
templates
moodboard templates and tutorials
- my moodboard tutorial, with Melissa Carter’s modified mood board template
- zipped file with mood board templates by Melissa Carter, Corinne Alexandra, and Nesha Woolery
mockups
- mockup samples to use in class: wall sign, flower cup, and stamp
- Photoshop mockups at GraphicBurger, Unblast, and/or do a Google search for “free Photoshop mockups”
- mockup generators (though I’m not sure what, if anything, you get for free): Canva, PlaceIt, Visme, PixelTrue
- Mockup tutorial
brand book templates
- 20 Brand Book Templates ($39, but I bought the set so if there’s one you like just let me know)
- Zippy Pixels free/pro templates
- Nancy Duarte’s slidedocs
on writing
- Grammar Girl: on Semicolons; on Colons; on Dashes, Parentheses, and Commas; on Dashes, Colons, and Commas
- Style Academy: video tutorials and exercises on different aspects of writing style, with a focus on sentence combining and sentence imitation
- The Paramedic Method, developed by Richard Lanham
- Two spaces after a period: Why you should never, ever do it, by Farhad Manjoo at Slate
- for the intro/welcome and mission/style sections:
- Craft your intro, by Cole Nussbaumer Knaflic
- How to write a creative “about me” page, by Jessie Lewis
Adobe resources
Illustrator help
- tutorials for class: Illustrator #1 (Getting Started with Text) and Illustrator #2 (Shapes), Illustrator #3 (Fun Stuff)
- Adobe’s Illustrator tutorials
- How to Use Adobe Illustrator, Howcast with Will Focus
Photoshop help
- my tutorials: Photo Editing #1: Interface, Filters, Adjustments; Photo Editing #2: Text; Photo Editing #3: Selecting and Combining
- Adobe’s Photoshop tutorials
- Photoshop Tutorials
- What you can do with the fabulous Photoshop skills you’ll acquire