Milans-Ultimate-Resource-List.md 212 KB
MILAN'S ULTIMATE RESOURCE LIST 🗂🚀
After gathering resources all over the place for the past few years with tools like Are.na, Dropmark, bookmarks, various notes apps—I decided to put them all here. CMD +F to search for keywords, or navigate through using the Outline (View > Show Document Outline) That’s it! If you have suggestions or requests for resources you'd like to see, please comment or reach out.
Key:
NEW—I’ll remove the last ones I tagged each time I update
FREE—probs referring to some type of education
★ = my favorites, or sites I visit often
Curated by Milan Moffatt (@milanmoffatt / @typeparty_)
Updated on Oct 12, 2021—added some newsletters and type foundries!
⚡️ Daily Tools / Practices
Figma—collaborative, free design software ★
Adobe Photoshop + Illustrator—for editing photos and illustrations/icons/vectors (bc Figma isn’t as robust. Editing with their pen tool’s behavior can be limiting)
Figma Mirror—viewing designs on devices / testing prototypes
Fonts Ninja—font identifier
Fireshot—full-page screenshots ★
ColorZilla—color from web picker
Dropmark—bookmarking + collections
Are.na—bookmarking + collections, inspo
Window Resizer—adjusting viewport size, also use Chrome Inspector (right click > Inspect > adjust viewport icon in top left) ★
Magnet—set up keyboard shortcuts to snap/resize windows ★
Chrome Inspector—playing around with CSS (right click > Inspect)
Typewolf—inspo, type obvi but also for color palettes + web design
siteInspire—inspo
Fonts In Use—inspo
Dribbble—inspo, esp illustration (be careful of those unrealistic UI designs!)
Behance—inspo
Unsplash—quality free stock photos
Noun Project—icons to use and modify
Helpful Work Techniques
- Interstitial journaling—amazing technique for staying focused! Combines notes, to-do list and time tracking
- Pomodoro timer
Work-specific Daily Tools
Zoom ★
Todoist ★—I use it for personal tasks but it’s the best to-do list app I’ve ever used. I also use the iOS Notes app
Google Docs / Sheets / Drive / Gmail ★
Dropbox
Notion
Pivotal Tracker
Slack ★
Figure It Out—sets Chrome landing page to world clock, great for remote teams ★
Design Tips
- Designing a balanced, consistent logo garden: search “[name] logo svg”. Put them all in the same artboard and optically adjust each logo within the artboard so they feel balanced. I usually start by setting a max width for horizontal icons and max height for square/more vertical ones, then adjust if needed. Export artboards as SVGs.
- Check out Figma plugins, they’re super cool
- WebAIM Contrast Checker—always check your color contrast! You can leverage this in explaining your design decisions with clients 🙌
- More coming soon…if you have any requests, hmu on Twitter @milanmoffatt :~)
⌨️ Coding
General
https://github.com/30-seconds/30-seconds-of-code ★
https://github.com/sindresorhus/awesome ★—mostly dev stuff but tons of useful links
https://tympanus.net/codrops/ ★
https://developers.google.com/web/
https://www.mozilla.org/en-US/firefox/developer/—browser tailored for web development. It includes additional browser tools to help you build, design and debug easier and faster.
Tools
http://www.heymeta.com/—helps you generate those meta tags by editing your existing ones or writing new ones which you generate and easily place on your website.
Components + Grids
https://www.styled-components.com
http://gridcalculator.dk/#/1366/8/20/20
Articles:
https://medium.com/@wereheavyweight/how-were-using-component-based-design-5f9e3176babb
Tutorials + Challenges
https://flickity.metafizzy.co/
http://www.cssarrowplease.com/
https://navnav.co/—Navigation tutorials
Github
https://www.thinkful.com/learn/a-guide-to-using-github-pages/
Sitemaps
Front-end
codeburst.io/the-front-end-checklist-8b2292fdda44—another front-end checklist
#
HTML
Htmlreference.io—free guide to HTML featuring all elements and attributes, and explains them with illustrated and animated examples
CSS
30-seconds.github.io/30-seconds-of-css ★
Cssreference.io—free visual guide to CSS featuring the most popular properties, and explains them with illustrated and animated examples
http://grid.malven.co/—visual guide to help you learn CSS grid properties with engaging visual representations and clear-cut explanations.
https://zendev.com/ultimate-guide-to-learning-css.html
Articles:
https://www.smashingmagazine.com/2018/12/common-css-issues-front-end-projects
JS
developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps
Articles:
learntocodewith.me/posts/javascript-libraries-frameworks
React
medium.freecodecamp.org/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6
Python
Flexbox
medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2?ref=bestwebsite.gallery
Flexbox.malven.co—visual guide to help you learn CSS flexbox properties with engaging visual representations and clear-cut explanations
css-tricks.com/snippets/css/a-guide-to-flexbox
CSS Grid
http://jensimmons.com/post/feb-27-2017/learn-css-grid
Web Animation / Drawing
https://svgjs.com/docs/2.7/elements/#svg-circle
https://www.creativebloq.com/inspiration/css-animation-examples
Responsive
https://www.avian.design/web-design-layouts-static-adaptive-fluid-responsive-and-mobile-first/
https://www.w3schools.com/html/html_responsive.asp
https://1stwebdesigner.com/responsive-website-tutorial/
https://www.catswhocode.com/blog/making-a-website-responsive-in-3-easy-steps
https://developers.google.com/web/fundamentals/codelabs/your-first-multi-screen-site/
Accessibility
https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/
https://rosenfeldmedia.com/books/a-web-for-everyone/
http://jxnblk.com/colorable/demos/text/?background=%23222233&foreground=%23DBDBDB ★—contrast checker
https://webaim.org/resources/contrastchecker/ ★—my go-to contrast checker
Forms
https://github.com/alphagov/accessible-autocomplete
https://designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/
https://blog.optimalworkshop.com/designing-form-fields-optional-versus-required
https://uxdesign.cc/form-field-required-vs-optional-9b4d7cdbf400
https://static.lukew.com/webforms_lukew.pdf
https://uxplanet.org/10-rules-for-efficient-form-design-e13dc1fb0e03 ★
https://css-tricks.com/tips-for-creating-great-web-forms/
https://codepen.io/collection/KuDsH/
CMS / Website Builders
https://www.upstatement.com/timber/
Data Viz
📚 Education
Online Learning
FREE FutureLearn—courses on all subjects, and more than half are free (1,600 free courses!)
LinkedIn Learning—actually pretty good since they acquired Lynda
#
Code / Design Schools
FREE Free Web Development Bootcamp — Class Central—Online Taught by Jessica Rose, Starting on Aug 23, 2021. Check it Out
FREE https://www.freecodecamp.org/
- Take this first: Responsive Web Design (HTML & CSS)
- Then, take this:
FREE https://www.wcd.school/—a college-level, tuition-free, design school with a peer-to-peer learning environment. For English-speaking African designers from and in Africa, ages 18-35 🌍
www.superhi.com ★—code, design, project management
https://airtable.com/shrJlUOffa9Q3dKrx/tblPdDFl20wjDeMqs—code school list
https://trydesignlab.com/—UX/UI school
Learning to Code Resources
https://internetingishard.com/
How to Work Better with Engineers
- A guide to improving your design-to-development hand-off process
- How to work effectively with engineers | by Jenny Wen | Dropbox Design
- Intro to User Experience Design: 4 factors to consider to improve your design to developer handoff by yours truly :~)
Learning Design
I taught two design courses at SuperHi:
- Introduction to User Experience
- Visual Design + Branding—the Design 101 course we wished existed before we made it! Co-designed and taught with Kristen A.C. and André Cândido
https://hackdesign.org/lessons101 ★
http://www.designkit.org/methods ★
https://trello.com/b/TmnSoCc5/learn-to-design
https://www.3dfordesigners.com/ ★
Articles:
Why inclusive design is essential to building a better product • Slack Design—by designers Nikki Nolan and Vivian Urata
What every designer needs to know before their first hackathon
25 Minute Design School. The Ultimate Crash Course in Digital… | by Joel Cox
7 Practical Tips for Cheating at Design | by Adam Wathan & Steve Schoger | Refactoring UI
Design Books
My Are.na board of Design Books for Beginners ★
The Design Bookshelf—A list of reading resources on various design topics (made by SuperHi student Cassandra 💕)
Design Sprints
Tips for running a remote design sprint—By Vivian Urata, an Old Slack Co-worker Who I Look up to and Admire 💖
GV's Sprint Process in 90 Seconds
Remote Design Sprints: Jake Knapp and friends whiteboard demo!! (long video ~1 hr!)
Virtual whiteboard tool—https://www.mural.co/ (Remote sprint template)
Virtual whiteboard tool—https://miro.com/ (Remote sprint template)
The book: https://www.thesprintbook.com/ (also see The Design Sprint — GV)
https://designsprintkit.withgoogle.com/ ★
The Remote Design Sprint Cheat Sheet — Jake Knapp
Sprint Checklist PDF (from GV book Sprint, by Jake Knapp) ★
Tips for running a remote design sprint • Slack Design ★
How to conduct a Design Sprint — Good Design
Design Sprint Resources & Planning Tools + Blog
📊 Marketing
Analytics / General Marketing
https://uxdesign.cc/google-analytics-ux-alice-emma-walker-958d6f0f0af3
https://www.startups.co/articles/seo-for-beginners
https://www.oreilly.com/business/free/files/introduction-to-okrs.pdf
https://www.sideprojectchecklist.com/marketing-checklist/
https://www.siteguru.co/—Audit and optimize your site’s SEO
https://www.campaignmonitor.com/resources/browse/topic/coding/
https://reallygoodemails.com/ ★
https://mailchimp.com/help/templates/
Copy
Articles:
https://www.invisionapp.com/inside-design/ecommerce-microcopy/
https://copyhackers.com/2015/10/copywriting-formula/
https://www.invisionapp.com/inside-design/10-ux-copywriting-tips-designers/
🌟 Design
#
Agencies to Keep an Eye on
Product Design / Design and Business Courses
https://growth.design—free case studies. Check out Product Psychology Mastery course!
Strategic Business Thinking for Designers · Second Wave Dive—course
Design Inspo
underconsideration.com/brandnew ★ (now subscription-based, $20 a year to support—v worth it!)
designmadeingermany.de/sites-we-like
http://nicelydone.club/patterns/
https://gangbase.design/category/websites/
UI Inspo
https://pttrns.com/—mobile UI
https://jonsuh.com/hamburgers/
https://www.calltoidea.com/—UI by category
https://gibbygabb.dropmark.com/226290/5251616—designing for touch
Articles:
https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
Visual/other Inspo
https://reallygoodemails.com ★
http://motionographer.com/—motion design inspo
UX
https://digitalpsychology.io ★
https://www.useronboard.com ★—onboarding examples
http://practicaluxmethods.com ★
https://www.uxframeworks.design/
Articles:
https://conversionxl.com/blog/competitive-analysis/
https://speckyboy.com/infinite-scrolling/
https://www.nngroup.com/articles/scarcity-principle-ux/
https://www.usertesting.com/blog/6-psychological-triggers-that-make-ux-design-persuasive/
https://www.invisionapp.com/inside-design/ux-strategy-guide/
UX Research / User Testing
https://www.optimizely.com/optimization-glossary/ab-testing/—nice glossary + free e-book with A/B testing case studies!
https://www.invisionapp.com/inside-design/how-to-start-user-testing/
https://www.uxpin.com/studio/blog/stop-gambling-your-ux-improvising-user-research-on-a-budget/
https://uxdesign.cc/asking-the-right-questions-on-user-research-interviews-and-testing-427261742a67
Design Systems
https://www.designsystemsforfigma.com/ ★
https://github.com/alexpate/awesome-design-systems ★
https://designsystemsrepo.com ★
https://www.designsystems.com ★
https://www.carbondesignsystem.com/—example of a design system
https://www.uxpin.com/create-design-system-guide
https://www.designbetter.co/design-systems-handbook ★
https://uxdesign.cc/yes-your-startup-is-ready-for-a-design-system-7c50d13e1516 ★
https://www.invisionapp.com/inside-design/launching-design-system-part-1/
https://airbnb.design/building-a-visual-language/
https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries ★
https://www.invisionapp.com/inside-design/guide-to-design-systems ★
https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117
Process / Case Studies
https://www.invisionapp.com/inside-design/how-to-write-a-ux-case-study/
https://www.invisionapp.com/inside-design/decreasing-friction-design-development-handoff/
Figma
https://www.figma.com/resources/
https://www.figma.com/blog/material-design-figma-styles/
https://heartbeat.ua/resources/social-network-cover-generator-figma/ ★—social media cover image generator
Sketch
https://www.sketchappsources.com/
Mega Resources
https://www.uxlibrary.org/ ★—“Your one-stop website for UX Articles, Books, Resources, Illustrations & More” this is AWESOME!
https://www.felixjoy.co/designbase
https://www.designbetter.co/ ★
https://womenwho.design ★—womxn designers
http://studio-index.co/—design studios around the world
http://wwwhere.io/—last updated Oct 2017 but still good stuff
https://www.awwwards.com/collections ★—design inspo by category
https://github.com/sindresorhus/awesome ★
Product Designer Starter Kit ★
Newsletters / Blogs
NEW http://densediscovery.com—densely curated weekly email with fresh discoveries at the intersection of design, technology and sustainability from @kaibrach (creator of Offscreen Mag!)
NEW https://www.theleagueofmoveabletype.com/newsletter ★—Micah Rich is an amazong human, I’ve been a supporter of his newsletter for years. Type fans check it out!
NEW https://freshfonts.eo.page/ ★—Founded by Noemi, another amazing human! I’ve been supporting this newsletter for a long time too. Check out their Twitter
https://medium.com ★—see who I follow
https://alistapart.com/articles
https://www.underconsideration.com/brandnew/ ★—great brand reviews
Casual Archivist, by Elizabeth Goodspeed ★—I love this occasional newsletter. Elizabeth collects and shares vintage design ephemera and tells the stories and trends behind them! Very cool
Decks / Presentation
Design Challenges
https://github.com/melanierichards/just-build-websites ★
Icons
https://material.io/tools/icons ★
http://openmoji.org/library.html
https://www.invisionapp.com/inside-design/free-icons-for-product-design ★
Lorem Ipsum / Placeholder Content
Photography
https://www.flickr.com/photos/wocintechchat/albums ★
https://createherstock.com/free-stock-photos/ ★
Mockups
https://www.layers.design/—posters and signs
https://www.mockupworld.co/—free mockups
Music
Videos
Tools
https://imagecompressor.com ★—sometimes you need to compress an image quickly
https://www.online-convert.com/
https://www.onlinevideoconverter.com/
https://sidewaysdictionary.com
Typography (resources + Open source)
twitter.com/typeparty_ ★—my side project for free and open source type inspo on the web
https://www.typewolf.com/cheatsheet ★
http://velvetyne.fr ★—free and open source type foundry
https://fontsinuse.com/ ★–resource of websites showcasing various fonts in use (also check out their blog)
https://fontface.ninja ★—free Google Chrome browser extension that allows you to inspect, try, buy and bookmark fonts on any website
https://v-fonts.com/ ★—variable fonts (also check out the Variable Fonts twitter)
https://gitlab.com/raphaelbastide/libre-foundries ★—libre foundries list
https://www.theleagueofmoveabletype.com/
http://www.nofont.com/typefaces/open-source-serif-fonts-for-body-text—open source serif fonts for body text by nofont.com
http://fonts.greatsimple.io/ ★—trendy Google Fonts Combinations
https://fontain.org/—selection of free/libre/open source fonts together with their source files
http://typ.io/—nice font pairing resource that shows websites using the pairings
http://type-scale.com/—interactive type scale tool that uses ratios to help you set up your type sizes
https://www.canva.com/learn/combining-fonts-10-must-know-tips-from-a-designer/
https://css-tricks.com/understanding-web-fonts-getting/
https://fontcdn.org/—another way to browse Google Fonts
https://googlefonts.github.io/korean/—v cool site using korean Google fonts
Type Foundries (mostly paid)
NEW https://typefoundry.directory/ ★—a beautifully designed curated index of type foundries by Matthew Smith of Morning Type. Includes variable fonts filter!
NEW https://type-foundries-archive.com/
NEW http://www.tunera.xyz/
https://airtable.com/shrFnmJDFKQuik6Ju/tblOOfWzc1JT33c6k/viw3GySxCmxqD37GN?backgroundColor=gray—type foundries list
Foundry.nu—collection of popular type foundries
http://www.love-letters.be/foundry.html
Typography Guides / Education
https://designforhackers.com/blog/justify-text-html-css/
https://practicaltypography.com ★—one of the best and most straightforward resources for those who want to learn about typography basics
https://betterwebtype.com/rhythm-in-web-typography
https://betterwebtype.com ★—this too
http://typographyhandbook.com ★—this too
https://medium.com/type-thursday/create-your-own-font-in-48-hours-f1d42f911a51
https://www.typocircle.com/learn/
https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
My Top 10 Typography Tips
- Establish sizes for a hierarchy H1-H6, links, and body text without using any color. then, apply color/font weight/text decoration/letter spacing etc. to text and links as needed to convey functionality or a certain purpose e.g. I see students underline things that aren’t clickable, but it looks like a link
- Try to use as few type styles as possible for consistency. Setting up a type system before designing will help. I often see students using 3 different sizes for body copy, 2 different colors for links and 5 heading sizes…your designs will look better and your user will learn how to navigate through your site better if things are consistent!
- To set up your type sizes and hierarchy, you can get started with a type scale tool like modularscale.com or type-scale.com
- Avoid using display fonts for body copy or things longer than a sentence or two
- Left align text longer than a sentence or two for readability. You shouldn’t center paragraph text, and “say no to justification on the web”! Just don’t do it.
- Body copy should be at least 16px, 18-21px is even better.
- Give body copy line-height of 1.2-1.5 at least for legibility. To meet W3C accessibility guidelines “Line height is at least space-and-a-half within paragraphs—that’s 150%.”
- Longer line lengths = more line height, short line lengths = less
- Headings tend to be larger and bolder than other elements to stand out. A good way to think about type hierarchy is: what needs to stand out most on the page?
- Pair a serif with a sans, sans with sans, but be careful with serif and serif unless you know what you’re doing and have a vision lol
Book Design
https://indesignsecrets.com/getting-accurate-colors-when-printing-proofs-from-indesign.php
https://indesignsecrets.com/incopy-book-publishers-workflow-management.php
Maps
Color
http://stencil.wiki/colors ★—risograph ink colors
https://shapy.app/ ★—for CSS gradients
https://www.lockedownseo.com/social-media-colors ★
Illustration
https://undraw.co/illustrations—open source illustrations
https://loremipsum.ueno.co/dear-ueno-how-do-i-learn-illustration-34b179a71385
#
Branding
https://onym.co/ ★—your ultimate guide to naming
Design Systems
Resources:
https://github.com/alexpate/awesome-design-systems design systems MEGA directory
http://designsystemsbook.com/ a GREAT book and primer on design systems, highly recco
https://www.designbetter.co/design-systems-handbook free book from InVision
https://www.invisionapp.com/inside-design/guide-to-design-systems/ another great resource from InVision
Atomic Web Design—http://bradfrost.com/blog/post/atomic-web-design/
https://zeroheight.com/ design system tool that helps you build one
Good examples:
IBM Carbon—https://www.carbondesignsystem.com/
Salesforce—https://www.lightningdesignsystem.com/
Atlassian—https://atlassian.design/
Shopify Polaris—https://polaris.shopify.com/
GOV.UK—https://design-system.service.gov.uk/
Google Material Design—https://material.io/design/introduction/#
Heroku Purple (not a design system, but good ex of UI kit)—http://purple.herokuapp.com/
Hudl Uniform (nice that they have 2 pathways upfront for design and dev)—http://uniform.hudl.com/
Brand / Style Guides
https://www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/
http://styleguides.io/—more UI/web style guide resource rather than brand
https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/
https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries ★—very good breakdown of difference between design system, style guide, pattern library
create a copy style guide https://blog.markgrowth.com/how-to-create-a-copy-style-guide-in-90-minutes-af1046c60aab ★
lots of PDFs of brand identity style guide examples https://www.logodesignlove.com/brand-identity-style-guides
voice, tone + content guide http://voiceandtoneguides.webflow.io/
https://styleguide.mailchimp.com/voice-and-tone/
Living Style Guides
https://frontify.com/styleguide
https://zeroheight.com/landing
Wireframing / Prototyping
http://principlerepo.com/
http://principletemplates.com/
Articles:
The modern web design process: creating sitemaps and wireframes ★
How to Create a Wireframe — A Beginner's Guide to Wireframing
https://www.invisionapp.com/inside-design/search?q=wireframing https://uxdesign.cc/wireframes-flows-personas-and-beautifully-crafted-ux-deliverables-for-your-inspiration-bb7a8d99af62
another good article on wireframing vs. prototyping and how they compare: https://www.invisionapp.com/inside-design/wireframe-prototype-difference ★
3D/VR/AR
https://www.3dfordesigners.com/
https://sketchfab.com/—free & paid 3d models
http://threedscans.com/—free 3D scans of various historic statues.
Poly.google.com—if you’re building for virtual and augmented reality, you need 3D objects for your apps. Poly lets you quickly find 3D objects and scenes for use in your apps, and it was built from the ground up with AR and VR development in mind.
🗣 Design Podcasts + Blogs
Blogs
https://www.designbetter.co/ ★
https://www.underconsideration.com/brandnew/ ★—reviews brand identities
https://www.itsnicethat.com/ ★
https://eyeondesign.aiga.org/ ★
https://thecreativeindependent.com/ ★
https://www.vanschneider.com/blog
https://www.smashingmagazine.com/
https://www.creativereview.co.uk/
http://www.omglord.com/—includes resources + city guides
http://www.typeroom.eu/—typography galore
More visual/design Inspiration Than Blog
Podcasts 🎶
Design Matters by Debbie Millman
Nice To Meet You (NTMY) Show by Tobias Van Schneider
Design Better by InVision
Being Freelance by Steve Folland
Design Life by Femke Van Schoonhoven + Charli Prangley
The Design of Business by Michael Beirut + Jessica Helfand
Knowable—no design topics (yet) but cool concept
🎤 Design/Dev Conferences
US 🇺🇸
Europe
👨👩👧👦 People
yesequal.us—women who code (and other industries!)
https://www.wherearethebossladies.com/
https://www.latinxswhodesign.com/
https://www.freethebid.com/women-directors/—video industry
💼 Career / Freelancing
Leadership
How To Take Charge Of A UX Kickoff Meeting — Smashing Magazine
The most important steps to becoming a great design leader
How we approach 1:1s with the technical team at Playground Inc. and how you can too
https://staff.design/—collection of interview with designers exploring how product designers navigate the individual contributor (IC) path to its highest levels
Career Coaching
Practical Works — Leadership, Management and Organizational Consulting—Cap was my coach in 2019, but he is currently on a coaching hiatus
Yuan Wang — Design Coach, Leader & Educator—my current coach in 2021
Design Feedback
https://open.buffer.com/how-to-give-receive-feedback-work/ ★
https://trydesignlab.com/blog/principles-for-giving-high-value-design-feedback-critique
Productivity
https://blog.doist.com/the-ultimate-guide-to-personal-productivity-methods-eef50340f575
Side Projects
https://www.sideprojectchecklist.com ★
Public Speaking
https://99u.adobe.com/articles/59009/public-speaking-is-terrifying-6-ways-to-deliver-like-a-pro
Remote Jobs
https://weworkremotely.com/categories/remote-design-jobs
https://automattic.design/2018/03/07/remote-work-and-remote-designers/
https://trello.com/b/GYBwezNe/design-remote-companies—made by Josh Olsen
Hiring
https://www.hiremorewomenintech.com/ ★—a great resource for hiring to create a diverse and inclusive environment
Startups
https://mix.com/gc/startup-tools
Stock / Equity
https://github.com/clef/handbook/blob/master/Hiring%20Documents/Guide%20to%20Your%20Equity.md
https://avc.com/2019/08/employee-equity-how-much-2/
https://blog.ycombinator.com/a-guide-to-employee-equity/
https://medium.com/swlh/a-no-b-s-guide-to-startup-stock-option-grants-526a8bc33c2b
Salary / Rates / Negotiation #money
http://askforit.co/blog/—negotiation articles + coach
http://thenuschool.com/how-much/#/start
https://www.invisionapp.com/inside-design/freelancer-rates/
http://designsalaries.aiga.org/
https://www.hellobonsai.com/freelance-rates
Videos:
2011/03 Mike Monteiro | F*ck You. Pay Me.
Books:
The 30-Day Money Cleanse by Ashley Feinstein Gerstley
Broke Millennial by Erin Lowry
Broke Millennial Takes On Investing (Pre-order) by Erin Lowry
The Financial Diet by Chelsea Fagan
Articles:
Everything I learned about negotiating and getting money in 2017 ★—my article on negotation
https://blog.freelancersunion.org/2013/11/08/what-do-when-client-doesnt-pay-10-rules-live/ ★
You asked: Negotiating a raise + how to handle hating work ★
https://www.nytimes.com/2018/08/10/smarter-living/how-to-negotiate-salary.html ★
Self-Employed and Taxes, Deductions for Health, Retirement
Contract Creator — Freelancers Union ★
Contract
ALWAYS USE A CONTRACT. I repeat, DO NOT WORK WITHOUT A CONTRACT. Even if it’s a “quick gig” or project for a friend. After your first call where you gather the project overview and objectives, send a proposal outlining the scope of the project (what you will do, in X amount of time). Sometimes they’ll give you a strict timeline—in that case, tell them what you will accomplish in that timeframe and lay it out on a timeline. Get them to agree to it in writing, and then send them a contract. Sometimes, I send the proposal and contract together. Whenever possible, get 50% payment upfront.
🧠 Most important tips I learned while freelancing:
- Define scope upfront: decide what this project will and—v important—will NOT include.
- Any requests outside of scope should be charged at your hourly rate. Avoid scope creep, and stand your ground on only doing work that is within scope—otherwise you could have a never ending, dragged out project that lasts 8 months when you thought it would only take 1-2 🙃
- Double the time you think it’ll take. Triple your rate. If they push back on your rate/project fee, it’s a good thing. You can always reduce the scope of work to fit their budget, but don’t reduce your rate—it could come off like you don’t value your own services and your worth.
- Ask other designers doing similar work how much they charge. You’re probably not asking for enough 🤑
I usually send a Proposal and Scope of Work (SOW)—if you plan on working with the client again in the future, you can send a Master Services Agreement (MSA) and a new SOW per project.
Documents
https://www.aiga.org/standard-agreement ★
http://jessicahische.is/helpingyouanswer ★
https://www.invisionapp.com/inside-design/how-to-write-a-proposal ★
http://www.shakelaw.com/legal-info/freelancehire-agreements/
Freelancing / Making a Portfolio / Getting a Job / Running a Business
https://thecreativeindependent.com/guides/how-to-start-a-new-business/
https://thecreativeindependent.com/guides/how-to-make-a-website-for-your-creative-work/
https://www.invisionapp.com/inside-design/launch-freelance-career/
https://cushionapp.com/—freelancing app
https://stripe.com/atlas/guides ★
https://www.are.na/carly-ayres/resources-for-design-job-seekers ★—mega resource!
https://www.greig.cc/8-questions-to-ask-a-client-before-designing-their-website/—great blog in general
Lawyers
https://klukfarber.com/—freelance/small biz lawyer
Accountants
https://www.sargentpc.com/—NYC-based
Design Portfolio Tips
https://www.invisionapp.com/inside-design/things-avoid-building-design-portfolio/
https://blog.prototypr.io/how-i-built-my-design-portfolio-from-scratch-c9a44ec079a5
https://www.vanschneider.com/leading-companies-never-want-see-portfolio
https://www.casestudy.club/journal/ux-designer-resume ★
Applying for Developer Jobs
https://dev.to/emmawedekind/decoding-the-front-end-interview-process-14dl
What it’s Like to Work at…
https://airbnb.design/first-day-to-first-launch/
Writing a Bio
🚫a UX Designer with a desire to empower users through emphatic storytelling & intuitive design.
🚫Designer with a passion for all things visual.
🚫I make beautiful, intuitive pixel-perfect user interfaces
Tip #1: How can you make your bio uniquely yours? Bios can be one of the toughest things to write, but spending time making yours unique is worth it. I’ve given feedback on hundreds of portfolios in the past couple years, and see the same bios over and over. The same buzzwords: passion, empathetic, storytelling, empower users, intuitive, clean, delightful experiences, etc.
Tip #2: Important! Make sure you call yourself what you want to be hired for. Unless your work is wildly irrelevant, people that come to your portfolio will see what you call yourself and will take your word for it. It’s their first impression of you. I almost always encourage designers to drop “Junior” in front of their title on their portfolio. Just say Designer.
Check out http://designerbios.tumblr.com—idk if it’s being facetious and making fun of how pretentious designer bios can be, but it is interesting to see them all in one place!
🌈 Diversity, Inclusion & Belonging
I need more resources here e.g. LGBTQIA+ communities and resources, design perspectives of the underrepresented…if you have suggestions, please email me milanmoffatt@gmail.com !
http://projectinclude.org/recommendations ★
https://www.hiremorewomenintech.com/ ★
https://app.simplenote.com/publish/jyWxbY—Diversity and inclusion reading list
Design Books by Womxn & People of Color
Decentering Whiteness in Design History Resources
🖤 BLM
Directories
https://blacklivesmatters.carrd.co/
https://www.theradicaldatabase.com/
A Growing List of Resources for the Movement for Black Lives—from AIGA Eye on Design. Esp. helpful for designers. Includes a list of activists to follow on social too.
For non-Black Folks
Anti-racism resources for white people
The Guide to Allyship—open source guide from Amélie Lamont
A Guide to Allyship (5/28/2020)
10 Steps to Non-Optical Allyship—by @mireillecharper (follow her!)
Reading
📚I’ve Been Reading So You Want To Talk About Race by Ijeoma Oluo and Me and White Supremacy by Layla F. Saad. They’ve Been Really Helpful to Me, Check Them Out! Up Next is White Fragility by Robin DiAngelo
Newsletters
https://www.antiracismdaily.com/
Accounts I Follow
Yes, these are liberal, progressive accounts. Social media has been an echo chamber this year, at least for me. I encourage you to listen to many different voices, do your research, fact check and form your OWN opinions.
I’m interested in following those with opposing views on social (please send if you have recommendations!) Change happens when we accept our differences and try to work together, and I believe that is possible.
@theconsciouskid—esp. helpful for parents
@theokraproject—protect and support Black Trans lives
@justiceforgeorgenyc—updates on protests in NYC
@shinetext—the best self-care app
@brooklynbailfund—look into your local bail fund!
@indyamoore—omg also watch Pose on Netflix if you haven’t yet 💜
@nycpochealingcircle—QTBIPOC-centered & led healing resource
📖 Books
Here are some great books to get started with #designbasics such as balance, grids, typography, color and more:
- Elements of Typographic Style by Robert Bringhurst
- Thinking With Type by Ellen Lupton ★
- Grid Systems by Josef Müller-Brockmann
- Interaction of Color by Josef Albers
- The Design of Everyday Things by Don Norman ★
- Design Is a Job by Mike Monteiro, and all A Book Apart books ★
- Don't Make Me Think, Revisited by Steve Krug ★
- Hooked by Nir Eyal—for product designers ★
- Design for Hackers by David Kadavy—for devs wanting to learn design but good design basics in general
Also see “Typography Guides / Education” above for some online books.
https://mediatemple.net/blog/tips/big-list-typography-books/ #typography
https://www.future-ethics.com/ #designethics
✨ Just for Fun[a][b]
The Origins of the 'Anonymous Animals' in Your Google Docs—an article about anonymous Google Doc animals
[a]hi i'd like to suggest astrology and language learning under this or maybe there could be a specific category for them!
[b]that's a great idea—i haven't updated this section in a while. i love personality assessments too, i could include some of those :) thank you!