Wix
- Wix.com
- class tutorials
- Wix Help Center
- Wix Website Tutorial 2023
- Wix Tutorials: 8 Essential YouTube Learning Resources
- setting up a blog in Wix
- 10 Blog Examples for Your Inspiration
Wix websites by previous Writing 105M students
- Sasha Glim, SGJewelry
- Cambrie Laymance, UCSB Bucket List
- Nina Breister, UCSB College Cooks
- Annie Sun, UCSB VITA: Volunteer Income Tax Assistance
- Emma Opper, The Gauss Bonnet Theorum
- Melody Rong, Melody Rong Portfolio
- Samantha Hanson, Samantha Hanson Portfolio
Canva tutorials
Design resources
- free, copyright-friendly images: Pixabay and Pexels and Unsplash
- lots of good stuff at Freepik
- icons, mockups, and other (photo editing) resources: Graphic Burger
Photoshop alternatives
- Photopea: free online photo editing program; similar to and compatible with Photoshop
- Pixlr: free online photo editing program; Pixlr X is super easy, Pixlr Editor has more features
- GIMP for PC and GIMP for Mac OSX free, open-source, desktop photo editing program; download GIMP and put it in your Applications folder. You might have to go into your Security settings to open GIMP
- and these helpful GIMP tutorials
- Affinity Photo: costs $40-ish; available for both Windows and Mac and iPad
In-class photo editing tutorials
- photo editing #1: interface, filters, and adjustments
- photo editing #2: text
- photo editing #3: selecting and combining
- plus this handy list of Photoshop tools (most of which are also in Photopea) that describes where the tool is located and what it does, along with a link to a tutorial for using that specific tool
Style Guide examples
- UCSB
- Style Guides by students in previous sections of Writing 105M: Cambrie Laymance, Emma Opper, Nina Breister, Sasha Glim, Melody Rong, Samantha Hanson
- Brand Style Guides by students in the Professional Writing Minor: Eileen Bettinger, Anne Payaril, Mable Truong, Sara Bredice, Natalie Plumb, Ricky Nguyen, Yehna Cha
- 12 examples of great brand guidelines, by Marq
Color Theory & Examples
- “The Fundamentals of Understanding Color Theory,” by Kris Decker (99 Designs)
- Color pages from Writing 105M students
- Color pages from Professional Writing Minor students
Color
- 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
- Coolors.co: generate a color palette, adjust the colors, extract colors from images, and other goodies
- Material Palette: choose two colors and get an eight-color palette that you can download
- “Perfect Color,” by Before & After
- Hail Pixel by Colordot: a great way to see colors and get hex codes
- 0 to 255, to find lighter and darker hues of a color
- Multicolr Search Lab (by TinEye): choose colors (up to five) and TinEye will return images with those colors
- Pantone Color of the Year: the annual zeitgeist, rendered in color
- Color-Hex: get RGB, CMYK, and other color attributes for every hex code
Typography
- Chapter 3 from Stop Stealing Sheep & find out how type works by Erik Speikermann & E. M. Ginger
- A Visual Guide to the Anatomy of Typography, by Orana Velarde
- Five traits that define a typeface, by Creative Bloq
- Canva’s Beautifully illustrated glossary of typographic terms you should know
- The History of Typography, 5-minute video by Ben Barrett-Forrest
- check out these body text comparisons
- Typography pages from Writing 105M students
- Typography pages from Professional Writing Minor students
additional awesome typography resources
- Practical Typography, by Matthew Butterick
- learn and have fun at the same time:
- Type Connection: “a typographic dating game”
- KernType: a kerning game where you can compare your kerns to a typographer’s solution
- Google Fonts Knowledge: resources on all aspects of typography
- Google Fonts Glossary: defines key typographic terms with examples
- Meet the ipsums: generate fun lorem ipsum
finding perfect typeface pairs
- The Ultimate Google Font Pairings, by Reliable
- A Guide to Combining Fonts, by Matej Latin
- The Top 50 Google Font Pairings, by Pagecloud
- 10 Beautiful Font Combinations, by Inkbot
- Fontjoy, an easy way to generate font pairings
free fonts
- Google Fonts: a library of 1,508 free licensed font families
- to read more about a font, choose “See specimen”
- 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
- Adobe Fonts
- Dafont
- Font Space
- Urban Font
- Font Squirrel
- free fonts that Matthew Butterick likes
Logo makers
- Brandmark.io
- Adobe Stock (type your initials and “logo” to see lots of options)
- smashing logo design
- logomaster.ai
Website outline/sitemap
design principles
- 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
on writing
- Writing for the Web, Seattle University
- Best Practices for Web Writing, University of Maryland, Baltimore
- Writing pages from Writing 105M students
- About pages from Professional Writing Minor students
- Grammar Girl: on Semicolons; on Colons; on Dashes, Parentheses, and Commas; on Dashes, Colons, and Commas
- How to use a semicolon: The most feared punctuation on earth, from The Oatmeal
- Style Academy: video tutorials and exercises on different aspects of writing style, with a focus on sentence combining and sentence imitation
- 20 Most Common Errors, from The Everyday Writer, published by Bedford St. Martins
- Grammar Slam, by WWE wrestler CM Punk
- The Paramedic Method, developed by Richard Lanham
- Two spaces after a period: Why you should never, ever do it, by Farhad Manjoo at Slate
