POPULARITY
Send us a textElliot Jay Stocks is a designer and musician, known in typographic circles thanks to his time as Creative Director of Adobe Typekit, founder of typography magazine 8 Faces, and for his recent collaboration with Google that lead to the creation of Google Fonts Knowledge. In this conversation, you'll hear about Elliot's prolific career in type. We talk passion projects and opportunities to broaden skills sets and unique opportunities that can happen from following one's genuine interests. Elliot also shares his process for writing and designing my very favourite typography textbook, as well as the entry point for students who are just beginning to formally explore the world of letterforms. A quick note that this episode isn't sponsored — as always I'm just a curious human trying to connect with interesting, creative people and projects out in the world. I'm all about interesting projects with interesting people! Let's Connect on the web or via Instagram. :)
This week, Creative Type Director Phil Garnham sits down with Elliot Jay Stocks, designer, musician, and lover of all things typographic. From his time with Adobe Typekit to his current project building out Google Fonts' Knowledge center, Elliot has explored the vast universe of typography and helped people understand what they need, how to use it, and why there's so much to love about type.
Doesn’t it feel like there are literally millions of typefaces to choose from? In today’s episode, we’ll talk about the top five biggest mistakes we’ve seen non-designers make, and how they can be easily fixed. Of course, as designers, it’s up to us to let our non-designer friends know about the typography crimes they’re committing–but we’ll leave that for another episode. Happy listening (and typesetting). Jens’ favorite typeface: https://fonts.adobe.com/fonts/aktiv-grotesk Megan’s favorite typeface: https://fonts.google.com/specimen/Noto+Sans Here are some other resources to checkout if you’re a typeface lover like we are: Great places to find licensed and free typefaces: 1. Adobe Typekit https://fonts.adobe.com/ 2. Font Squirrel https://www.fontsquirrel.com/ 3. Google Fonts https://fonts.google.com/ Some other resources: 1. Google font pairing: https://bit.ly/30RbYRQ 2. Google featured collections: https://bit.ly/2WZTNIJ 3. Identity fonts with Font Squirrel Matcherator: https://bit.ly/39BWm96 Letterform Design: 1.Typograph Study Sheets: https://bit.ly/3jIN8MU 2. 36 Days of Type: https://bit.ly/3jAH9JQ 3. The Font that Never Sleeps: https://www.instagram.com/cooperblack.nyc/ If you’d like to support the show or to learn more about Design Atlas check out linktr.ee/DesignAtlas. To get in touch with us, send us a DM on Instagram @designatlaspod, Tweet us @designatlasFM, or send us an email. --- Send in a voice message: https://anchor.fm/design-atlas-fm/message Support this podcast: https://anchor.fm/design-atlas-fm/support
In today's episode, we're talking about what it looks like to get online ready. It really doesn't matter what you've done online nor what you're wanting to do, there is one underlying thread that needs to be succinct within your online presence… and that is what your business looks like visually. And of course, I'm talking about images and fonts and colors. These are the visual representation of your brand. Equally important is the messaging of your brand. What emotions does your brand evoke? What type of person is attracted to your visuals? Are you relatable? Do the visuals match your level of experience? Because you're transitioning from an offline brand to an online brand, you will want to look at every aspect of your brand identity and make sure that it translates as well on the screen as it does in 3D. Let's start with your colors. In the printing world, they use CMYK to create color -- or in other words this model works by partially or entirely masking colors on a lighter, usually white, background. It is sometimes called subtractive because inks "subtract" the colors red, green and blue from white light. In the online space, when we're working with screens, we're using RGB to create color -- and this is the process by which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue. You might have also heard of Pantone colors which are color codes that stand for a specific shade. Basically, pantone is the standard language for colors and might be what you've looked at when picking paint colors. It's not going to translate one-to-one for print nor one-to-one for screen so we're not going to focus on it here. If you're currently using CMYK colors be sure to use a tool to see what the RGB version of that color looks like on several different devices and screens. You may want to adjust your colors in order to allow them to pop on screens. Our screens can display 16,777,216 different colors because each of Red, Green and Blue have 256 shades but CMYK cannot translate to each of those colors because it uses pigments instead of light. They are really different entities and it's worth the time to translate your logo and brand colors into online equivalents. And you do have the liberty to alter colors and shades as necessary to get the right look and feel online. OK, now onto the fonts you use. Online we use written word everywhere from our websites to overlays on our graphics. In the offline space, using the default font for printouts that you give your students or instructions you send home with your artwork is usually fine. Those printouts aren't going to live in association with your brand for the long term. You might use a few fonts for signage inside your studio, your business card and flyers. And this is the aspect of your brand that you'll be carrying forward online. In addition to the fonts themselves, there are font weights and variations to consider. There are nine font weights - 100 which is “Thin” through 900 which is “Black” and everything in between. Normal is 400 and bold is 700. You'll likely want to bring at least those two weights online and possibly one or two more. When it comes to variations, we're talking about italic and small caps. I don't usually see a lot of small caps but I do see italic… so we're looking at somewhere from four to eight different looks for the exact same font. And we haven't even got into font size yet -- but don't worry we'll get there soon. Before that, a few thoughts on the number of fonts to use… two. Period. Only two fonts. One is going to be your serif or sans-serif main text font and one is going to be your decorative font for emphasis and headlines. With fonts, I strongly recommend looking at the usage policy of the fonts you are already using -- some might have web use while others don't. Be sure to use web fonts and follow the rules set forth by the font creator or font distributor. The two font repositories that I use most often online are Google Fonts and Adobe Typekit. If your font doesn't permit web use, look at these repositories to find something that you're happy to use in your online visuals. If you're unable to locate a font, then consider purchasing a new one that has web usage rights. Now let's talk about font size!!! I recommend sticking with standard and consistent font sizing -- this means that as your website is being built out, you'll want to define the font family, font size, font variant and font color for all the standard website building blocks, like headings and paragraphs and quotes and lists. Once it's defined and you pick that website building block, you'll be well on your way to have a consistent look online. Feeling pretty good about this so far? We've talked about translating your print and paint colors to online colors and fonts for written word. So, now let's discuss some of the parts of your brand that will likely be new to you now that you're expanding online. Yup, we're talking imagery. These are not only your headshots and brand photographs but also the swishes and lines and symbols and icons that you use within your website and social media. Are they hand drawn or computer drawn? What is the line weight? Are they modern or classic, frilly or simple? How will they be used to stitch your online identity together? Are they monochrome or colorful? Are they formal or informal? The first few questions were more about the swishes and lines and symbols and icons whereas the last few were about your photographs. My brand photos were taken in front of metal siding and I use the one with the siding as my profile picture but for my website and within social media graphics I removed the background on the pictures so that I could overlay them and have them stand out. So think about how you're going to want to use photographs within your online visuals and make sure to keep your brand and its message top of mind when they are being taken. The last thing I want is for you to have no images that you can use that match up with the rest of what you're trying to do online. Icons and symbols are a great way to break up content, I use bullet points regularly within my podcast episodes and I made the conscious choice to keep them simple. When I want to spruce up bullet points on sales pages or other pages, I'll use aspects of my submark and the bright pattern you see on the podcast artwork. My brand is vibrant and fun and not intimidating because I want to attract fun and spontaneous artists who are looking to do something online. We haven't talked about brand messaging in this episode precisely because this episode was about getting your brand online ready and I believe that focus needs to be on the graphics, fonts and colors. Making these decisions and crossing that off the list is going to make everything else you're wanting to do in this growth stage that much easier -- you'll have a basis from which to work! I'm so excited to be on this journey with you. Thank you for tuning into the podcast each week. Have you downloaded the Expand Online Getting Started Guide yet? You can access it right here: https://techofbusiness.com/onlineproduct/. Next week, we're going to talk about Instagram and Facebook and how they play into gaining awareness of your business expanding online! Download the Expand Online Getting Started Guide Book a Strategy Session Instagram: @jaimeslutzky Facebook: @yourbiztech The Expand Online Community on Facebook Email: jaime@techofbusiness.com Contact Page: https://techofbusiness.com/contact/
In today’s episode, we’re talking about what it looks like to get online ready. It really doesn’t matter what you’ve done online nor what you’re wanting to do, there is one underlying thread that needs to be succinct within your online presence… and that is what your business looks like visually. And of course, I’m talking about images and fonts and colors. These are the visual representation of your brand. Equally important is the messaging of your brand. What emotions does your brand evoke? What type of person is attracted to your visuals? Are you relatable? Do the visuals match your level of experience? Because you’re transitioning from an offline brand to an online brand, you will want to look at every aspect of your brand identity and make sure that it translates as well on the screen as it does in 3D. Let’s start with your colors. In the printing world, they use CMYK to create color -- or in other words this model works by partially or entirely masking colors on a lighter, usually white, background. It is sometimes called subtractive because inks "subtract" the colors red, green and blue from white light. In the online space, when we’re working with screens, we’re using RGB to create color -- and this is the process by which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue. You might have also heard of Pantone colors which are color codes that stand for a specific shade. Basically, pantone is the standard language for colors and might be what you’ve looked at when picking paint colors. It’s not going to translate one-to-one for print nor one-to-one for screen so we’re not going to focus on it here. If you’re currently using CMYK colors be sure to use a tool to see what the RGB version of that color looks like on several different devices and screens. You may want to adjust your colors in order to allow them to pop on screens. Our screens can display 16,777,216 different colors because each of Red, Green and Blue have 256 shades but CMYK cannot translate to each of those colors because it uses pigments instead of light. They are really different entities and it’s worth the time to translate your logo and brand colors into online equivalents. And you do have the liberty to alter colors and shades as necessary to get the right look and feel online. OK, now onto the fonts you use. Online we use written word everywhere from our websites to overlays on our graphics. In the offline space, using the default font for printouts that you give your students or instructions you send home with your artwork is usually fine. Those printouts aren’t going to live in association with your brand for the long term. You might use a few fonts for signage inside your studio, your business card and flyers. And this is the aspect of your brand that you’ll be carrying forward online. In addition to the fonts themselves, there are font weights and variations to consider. There are nine font weights - 100 which is “Thin” through 900 which is “Black” and everything in between. Normal is 400 and bold is 700. You’ll likely want to bring at least those two weights online and possibly one or two more. When it comes to variations, we’re talking about italic and small caps. I don’t usually see a lot of small caps but I do see italic… so we’re looking at somewhere from four to eight different looks for the exact same font. And we haven’t even got into font size yet -- but don’t worry we’ll get there soon. Before that, a few thoughts on the number of fonts to use… two. Period. Only two fonts. One is going to be your serif or sans-serif main text font and one is going to be your decorative font for emphasis and headlines. With fonts, I strongly recommend looking at the usage policy of the fonts you are already using -- some might have web use while others don’t. Be sure to use web fonts and follow the rules set forth by the font creator or font distributor. The two font repositories that I use most often online are Google Fonts and Adobe Typekit. If your font doesn’t permit web use, look at these repositories to find something that you’re happy to use in your online visuals. If you’re unable to locate a font, then consider purchasing a new one that has web usage rights. Now let’s talk about font size!!! I recommend sticking with standard and consistent font sizing -- this means that as your website is being built out, you’ll want to define the font family, font size, font variant and font color for all the standard website building blocks, like headings and paragraphs and quotes and lists. Once it’s defined and you pick that website building block, you’ll be well on your way to have a consistent look online. Feeling pretty good about this so far? We’ve talked about translating your print and paint colors to online colors and fonts for written word. So, now let’s discuss some of the parts of your brand that will likely be new to you now that you’re expanding online. Yup, we’re talking imagery. These are not only your headshots and brand photographs but also the swishes and lines and symbols and icons that you use within your website and social media. Are they hand drawn or computer drawn? What is the line weight? Are they modern or classic, frilly or simple? How will they be used to stitch your online identity together? Are they monochrome or colorful? Are they formal or informal? The first few questions were more about the swishes and lines and symbols and icons whereas the last few were about your photographs. My brand photos were taken in front of metal siding and I use the one with the siding as my profile picture but for my website and within social media graphics I removed the background on the pictures so that I could overlay them and have them stand out. So think about how you’re going to want to use photographs within your online visuals and make sure to keep your brand and its message top of mind when they are being taken. The last thing I want is for you to have no images that you can use that match up with the rest of what you’re trying to do online. Icons and symbols are a great way to break up content, I use bullet points regularly within my podcast episodes and I made the conscious choice to keep them simple. When I want to spruce up bullet points on sales pages or other pages, I’ll use aspects of my submark and the bright pattern you see on the podcast artwork. My brand is vibrant and fun and not intimidating because I want to attract fun and spontaneous artists who are looking to do something online. We haven’t talked about brand messaging in this episode precisely because this episode was about getting your brand online ready and I believe that focus needs to be on the graphics, fonts and colors. Making these decisions and crossing that off the list is going to make everything else you’re wanting to do in this growth stage that much easier -- you’ll have a basis from which to work! I’m so excited to be on this journey with you. Thank you for tuning into the podcast each week. Have you downloaded the Expand Online Getting Started Guide yet? You can access it right here: https://techofbusiness.com/onlineproduct/. Next week, we’re going to talk about Instagram and Facebook and how they play into gaining awareness of your business expanding online! Download the Expand Online Getting Started Guide Book a Strategy Session Instagram: @jaimeslutzky Facebook: @yourbiztech The Expand Online Community on Facebook Email: jaime@techofbusiness.com Contact Page: https://techofbusiness.com/contact/
Using Adobe Typekit fonts in Indesign, Photoshop, and Illustrator is wonderful. There are too many to choose from. However, if you need the font so you can package your work or work offline, your Typekit fonts won’t be available. This video shows you how to find them. The post How to Find Adobe Typekit fonts on Mac appeared first on AARON LINSDAU Adversity Expert.
Welcome to another conversation I had with a remarkable creative. Last Summer, I met designer Elliot Jay Stocks, who has worked for clients including Microsoft, Virgin, EMI, MailChimp, and Campaign Monitor. He is also an electronic musician who records under the name of Other Form, as well as a speaker and design author. His current job is co-founder and Creative Director of the lifestyle magazine Lagom. He is probably most known for being the founder of another magazine though, the bi-annual printed typography magazine (and soon-to-be book) 8 Faces. Elliot also used to work as Adobe Typekit’s Creative Director. So of course we talked a lot about type and typography, but also about working for Adobe, as well as working with your partner, turning a magazine into a book, and releasing a record. Please check the shownotes on www.creative.fm for links to his many projects.
The Busy Creator Podcast episode 10, with guest Web Designer Erica Heinz Erica Heinz (@ericaheinz) is a web designer in Brooklyn, NY. As a veteran freelancer, she's work for a variety of clients and sectors, lately focusing on fast development around humanitarian and public sector projects. She's also a teacher of web design, and of yoga. Together, Prescott and Erica discuss tools of the trade, best practices for web designers, how to continue to learn, and how to avoid becoming overwhelmed by systems. This episode features the most in-depth show notes to date, with a ton of links to websites, tools, and tips. Show Notes & Links Previous web designers on The Busy Creator Podcast, Niki Brown Erica does Humanitarian Work and Rapid-Responce work Occupy Sandy, built in 6 Days Peace Talks in Ireland for the Council on Foreign Relations A microsite for Richard Branson's B Team, done in 3 weeks Prototyping Prescott hates the term “Product Designer” in the realm of Web Design “Visual Designer” is a term that was fast outdated Description vs. Rank in terms of job titles Erica started in illustration, switched to design for the problem-solving Terms like “New Media” for early Internet instruction From fashion to packaging to software, Erica's freelance career Erica is an early adopter, but not bleeding edge Studiomates, bunch of smart people Using SASS to streamline a web workflow BusyCreator.com is really just the basics A Book Apart‘s books Parsons, The New School for Design ADOCHD (ADHD with OCD thrown in there) “I have CDO …” Blister pack of pills … for OCD “The Self-Licking Ice Cream Cone“ Not everything is a checkbox (I'm looking at you, Basecamp.) Getting Things Done philosophy “GitHub is the new View Source.” “HTML elements are like the alphabet.” Jen Simmons on Drupal.org Jonnie Hallman on Ruby on Rails “Do things the long, hard, stupid way.“ So-called “Hacker/Garage Culture” “A really good website lasts two years, and then it's gone.” Agile development EricaHeinz.com Tools SASS Digital Typography on the web: Adobe Typekit, @font-face, etc. HTML5 (with fallbacks) Codekit, a way to compile code locally on your Mac Coda, a text editor SublimeText, another text editor Emmet, CSS shorthand Chrome, and its extensions Safari, fewer extensions but many the same Awesome Screenshot, extensions 1Password, a Mac/iOS utility to store passwords Pinboard, social bookmarking for introverts Instapaper Dropmark, quick-saving of images, links Pocket, formerly Read It Later Stylebot, add a new CSS Bit.ly, for shortening Gimme Bar, for random stuff Browser Resize, for viewing your site in multiple sizes Pepperplate, for recipes Momentum, for new tabs Basecamp Kanban Flow Dragdis, a browser add-on to quick-save items Sprint.ly, collaboration for development Waffle.io, a Kanban board for GitHub issues TeuxDeux Multiple Inboxes for Gmail Coloured Stars add-on Pivotal Tracker (which Erica refuses to use) Slack, combines IRC and file changes, great for team communication Subversion LayerVault, version control for Photoshop Editorial.ly, collaborative writing Dropbox, with previous revisions Google Drive Skillshare Bourbon/Bourbon Neat CSS Mixins Code Academy Techniques Clarify team roles as to who does what (e.g. UX, front-end design, back-end dev.) Stay ahead of the curve to avoid headache later Use Post-Its on a wall; colour-code for different aspects Keep a postcard wall (outside of the computer) Rearrange your Top 3 on the board, use small Post-Its on top of the index cards Find a set of tools that work for you. You don't have to be up-to-date on everything. Go for 80%; let go of the compulsive tweaking of the last bit. Use three-letter client codes Use bullets to indicate time requirements (e.g. •••big effort, •not so much) Learn how to build stuff from scratch Be honest about what you should be doing in each moment Try yoga or breathing techniques Habits Systematize your projects for sharing and collaborating. Maintain the system, but not to a crippling degree. Keep email separated by inboxes Keep learning. Keep updating your workflows and skills. Erica's workflow Phase 1. Content and Site Map, Brand Erica's workflow Phase 2. Visual expression, typography, and details Erica's workflow Phase 3. Development, frameworks Comment your own HTML and CSS code (e.g. “// Trust me, keep this.”) Change your routines every once in a while Erica is a night owl, enjoys being “out of sync” Break your day into 2- or 3-hour chunks Keep “busy” work for later in the day, when your brain is tired
As part of the Christmas Crossover, Sarah and Josh explore a set of questions with Libby from Adobe Typekit.