https://medium.com/ringcentral-ux/eyeballing-or-optical-alignment-in-design-4ef5ab2d326f
A guide to how optical alignment works, and why mathematical alignment doesn't, always.
visual design
https://aaadaaam.com/notes/craft-at-scale/
quality
Five approaches to responsive data tables, with clear examples.
data visualisation, visual design
https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914
A check list to make sure you've designed everything your app/website might need.
visual design
https://copyblogger.com/call-to-action-buttons/
Article
product
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
An article giving practical advice for good looking user interfaces.
visual design
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96
The second part of the article giving practical advice on how to create gorgeous UI
visual design
https://jdittrich.github.io/userNeedResearchBook/
An online guide to research.
research
http://www.bogieland.com/postings/post_canonux.php
Peter J. Bogaards has put together a list of the works that make up the canon of UX design.
interaction design
https://www.designsystems.com/iconography-guide/
visual design
http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography
A fun and quick introduction to the rules of typography.
visual design
https://frontendmasters.com/guides/front-end-handbook/2024/#7.1
development
https://mprove.de/script/02/raskin/designrules.html
Taken from The Humane Interface.
interaction design
A paper about how software gets bloated/complicated, and the reasons behind it.
quality
https://twitter.com/tom_d_kerwin/status/1492814780528271364?s=20&t=Vex2KxqREVJCdQdYqhh-zQ
career
https://productdesign.tips/challenge
A list of curated/written UX challenges that allow designers to solve real-world problems.
career
https://articles.uie.com/a-proven-method-for-showing-the-value-of-good-ux/
An article in which Jared lays out a practical way to prove the value of UX design
product
https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
A practical guide to creating a colour scheme for a website/app.
visual design
https://twitter.com/yuanqinglim/status/1467860389174001668?s=21
career
https://medium.com/@cwodtke/a-unified-theory-for-designing-just-about-anything-b87f1e4f050b
Suggests the CAMP acronym: Context (Where/who/why/how?), Architecture (How will it be structured?), Mechanics (What specific methods will be used in it?), Poetics (How will it make people feel?)
product
https://www.youtube.com/watch?v=zOPA0NaeTBk
A video where Aaron Draplin of Draplin Design designs a logo in a short amount of time. Very interesting as a quick look at the logo design process.
graphic design
http://www.jonkolko.com/writingAbductiveThinking.php
An article about how design synthesis appears magical to observers, and that's why it and research are often discounted.
research
https://aesthetics.fandom.com/wiki/List_of_Aesthetics
A list of aesthetics.
visual design
Rounded/friendly icon set. Supports size, stroke width, and copying directly into design software.
visual design
https://ericwbailey.website/published/all-the-user-facing-states/
interaction design
https://www.youtube.com/watch?v=9qtd8Hc90Hw
A video compilation showing how interactions worked in operating systems that were popular around 1990, which is a lot of operating systems.
interaction design
https://the-pastry-box-project.net/anne-gibson/2014-July-31
26 different examples of ways in which people could have accessibility issues, both temporary and permanent. Gives you a sense of the things you should be aware of when designing something for everyone.
interaction design
http://androidniceties.tumblr.com
A collection of screenshots of well designed apps on Android.
visual design
A collection of CSS-driven animations you can use as a reference.
interaction design
A sensible outline of the reasons that companies often follow trends for their re-brands, rather than try for something that feels original.
visual design
https://www.ise.bgu.ac.il/faculty/noam/papers/04_tl_nt_ijhcs.pdf
A scientific paper about the importance of beauty in design. Origin of "classical" vs. "expressive" aesthetics.
visual design
https://marissagoldberg.notion.site/Async-First-Remote-Companies-121bf909186d80a9b108f336a2efac5f
50 async-first remote companies
career
An online tool to create cartoonish avatars by selecting different details about the person.
visual design
https://github.com/alexpate/awesome-design-systems
A collection of design systems, style guides, pattern libraries
visual design
https://github.com/rothgar/awesome-tuis?tab=readme-ov-file
A curated collection of interesting text-only user interfaces (TUIs).
visual design
https://buildexcellentwebsit.es
Andy Bell / Set Studio's manifesto.
development, visual design
A collection of typography samples that use open source fonts only. A good way to get a sense of how a typeface could be used
visual design
quality
https://www.behindthename.com/random/
Generate random names for use in your interfaces.
visual design
http://bettermotherfuckingwebsite.com/
Similar to "Mother Fucking Website" - a very simple website with just text, but with a few CSS declarations thrown in to make it look a bit nicer. My personal style preference when it comes to design
visual design
quality
https://typefully.com/DanHollick/blending-modes-KrBa0JP
visual design
A tool to generate blobs as SVG files.
visual design
Design briefs that you can use as the basis for projects in your portfolio.
career
https://hci.stanford.edu/publications/bds/1-kapor.html
product
A collection of brutalist websites
visual design
https://medium.com/@nathangitter/building-fluid-interfaces-ios-swift-9732bb934bf5
visual design, interaction design
https://www.refactoringui.com/previews/building-your-color-palette
An excerpt from Refactoring UI. A good practical introduction to colour palette choices.
visual design
https://www.dailyblogtips.com/crapthe-four-principles-of-sound-design/
Contrast, Repetition, Alignment, Proximity. I learned about this visual principles from Robin Williams' "The Non-Designer's Design Book", and so should you, but here they are in case you don't want to buy a book.
visual design
A site which collects patterns into categories, for either UX or UI inspiration. Generally large screen patterns.
visual design
Lets you export as SVG, and it's slightly different each time. Uses AI. Good for e.g. a signature.
visual design
http://boxesandarrows.com/card-based-classification-evaluation/
Describes a method for testing an information architecture/navigation proposal using index cards, rather than a paid online tool.
research
http://boz.com/articles/career-cold-start.html
A practical approach if you join an established company/start a new job or team as a new person and want to become knowledgeable as quickly as possible. Essentially you sit down with everyone and ask them three questions.
career, product
https://www.catchafire.org/volunteer/
This website aims to match skilled volunteers with organisations who need volunteer work.
career
https://www.joshwcomeau.com/css/pixel-perfection/
quality, visual design
A collection of checklists that you can use to guide you about what elements to include in a page or component.
visual design, interaction design
http://dangrover.com/blog/2014/12/01/chinese-mobile-app-ui-trends.html
A long article which looks at how app design in China is different from app design in the west.
visual design, interaction design
https://jackrusher.com/classic-ux/
A collection of software design demos from history. Early / foundational designs demonstrated.
interaction design
A collection of mockups produced for the Daily UI challenge, organised by the individual challenges.
visual design
https://github.com/kdeldycke/awesome-falsehood
This is a collection of links to articles listing falsehoods or misconceptions that programmers might believe about things (Names, time, dates). It's useful for testing assumptions when designing for building software, especially.
product
An interactive book, more or less, about colour and contrast and how vision works. Good as a reference.
visual design
https://vanschneider.com/colors
A simple collection of colour combinations that Tobias Van Schneider has collected together.
visual design
https://learnui.design/blog/color-in-ui-design-a-practical-framework.html
A practical approach to colour theory for designers who don't understand it naturally.
visual design
Give it a background colour and it’ll generate an accessible colour palette for you.
visual design, interaction design
A random colour pair generator that always generates colours which have high enough contrast to meet WCAG large text recommendations.
visual design
https://www.colorsandfonts.com/
Tools for picking colours and typefaces.
visual design
A short book about pairing typefaces that was made freely available after the publisher closed down.
book, visual design
http://www.howtomakesenseofanymess.com/chapter/5/page/91/common-indicators/
A list of things that are commonly measured to find out how something is performing, good or bad. For inspiration
product, research, interaction design
https://www.smashingmagazine.com/2021/06/complete-guide-accessibility-tooling/
A list of tools you can use to test whether your website is accessible.
interaction design
https://cari.institute/aesthetics
aesthetics
https://superfriendlydesign.systems/articles/content-display-patterns/
Goes into the difference between content patterns - what content is contained in a pattern - and display patterns - how you visually display that content.
visual design
https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/
An article on learning good user interface / UI design through copying other people's work
visual design
Copy special characters to your clipboard
visual design
https://paulstamatiou.com/craft/
A long post about shipping high quality, well-crafted software.
quality
https://stripe.com/gb/sessions/2024/craft-and-beauty-the-business-value-of-form-in-function
Katie Dill of Stripe, Karri of Linear, talk about quality in software.
quality
A challenge where you receive an email every day, with a UI prompt. Good practice for high fidelity prototypes, and to learn a new tool (Sketch/Figma/Photoshop/Whatever)
career
https://every.to/divinations/dall-e-2-and-the-origin-of-vibe-shifts
aesthetics
A list of different chart / graph types, with explanations of what they do and could be used for.
data visualisation
https://medium.com/ux-power-tools/dead-simple-techniques-for-using-branding-in-ui-d44cb44e40ee
An article about using UI techniques to apply your branding to interface components/screens
visual design
https://rongoldin.substack.com/p/three-kinds-of-design-craft
An attempt to define "Craft"
quality
https://medium.com/@indiyoung/describing-personas-af992e3fc527
A long article about why personas should be written up as descriptions of the reasoning, reactions, and guiding principles of groups of people. They should avoid any demographics or characteristics of those groups.
research
http://www.brianlovin.com/design-details
A deep dive into the small design details present in many mobile apps.
visual design
https://www.smashingmagazine.com/2014/12/design-principles-visual-weight-direction/
Includes a list of the things that affect visual weight.
visual design
https://hvpandya.com/design-quality-and-business
quality
A collection of mobile and website screenshots that show UI and interaction patterns.
visual design
https://userexperiencedesign.slack.com
A community for UX designers. Might take a few weeks to be verified, as they don't let in anyone but designers.
career
A design exercise/prompt generator for whiteboard challenges etc.
career
https://paavandesign.com/blog/designing-complex-desktop-interfaces
interaction design
https://www.designspiration.net
A collection of graphic design. Search through to find inspiration for whatever graphic design/theme you're working on. Good for colours.
visual design
https://en.m.wikipedia.org/wiki/Distinction_(book)
A book about how people with more capital (not necessarily money) set the taste of a culture. The Wikipedia article has a good summary.
book, aesthetics
https://heydays.medium.com/do-we-appreciate-humanitys-deeper-aesthetic-needs-1d5032ac772a
aesthetics
A website for finding charity opportunities. Go to the search page and do an advanced search. You can enter the location and some keywords. "Design" is best since many charities don't use the term "UX".
career
A website to help you test animation curves.
visual design
https://dl.acm.org/doi/10.1145/142750.142751
A paper about how you can show which parts of an interface/document have been used more.
interaction design
https://www.csu.edu.au/__data/assets/pdf_file/0008/917018/Eight-Behaviors-for-Smarter-Teams-2.pdf
The eight behaviours outlined in this report will help any team to work better, but are difficult to do.
quality
https://www.designerfund.com/blog/embedding-design-into-the-fiber-of-fintech/
An article about how Stripe approaches design
quality
A collection of empty states taken from real apps.
visual design
https://www.svpg.com/ensuring-excellence/
quality
https://hal.inria.fr/inria-00070012/document
A paper about the 11 criteria for judging interfaces. A good outline of the factors of interaction design.
interaction design
https://stephaniewalter.design/blog/essential-resources-design-complex-data-tables/
A collection of posts that cover ways to design complex data tables.
visual design
A guide to colours - it explains what various colours mean
visual design
https://scrollbars.matoseb.com/
interaction design
A brief generator which will make a short brief for you of a certain type of work (Logo design, UX, etc.). Also has pre-written briefs.
career
https://benji.org/family-values
A write-up of the approach taken to the Family crypto app, which is a particularly good example of quality in interface design.
interaction design, quality
https://craigmod.com/essays/fast_software/
quality
Well-designed open source icons that you can download to SVG without needing to sign up for anything
visual design
Free SVG generators, colour tools, and webs design tools
visual design, development
https://www.chrbutler.com/hire-for-first-principles
An article that argues companies should hire based on the principles of a person, not their skillset.
career
https://asktog.com/atc/principles-of-interaction-design/
A list of principles of interaction design by a "grandfather" of the industry.
interaction design
https://cmhb.de/minimal-design
visual design
https://medium.com/@jessicaivins/five-tips-for-creating-a-fantastic-ux-r%C3%A9sum%C3%A9-51e7350cc2a2
Mainly saving this for the tip where you save your "successes" throughout your career, so you can build a tailored CV whenever you need to. Also it's easy to forget what you've actually done on a day-to-day basis.
career
Free and open source icon set/collection
visual design
A website that helps you pair fonts together, and also lists resources to help you get better at it
visual design
A collection of pairs of open source fonts as used in the wild.
visual design
A collection of examples of specific typefaces in use, in the wild.
visual design
https://hackernoon.com/for-the-love-of-god-please-tell-me-what-your-company-does-c2f0b835ab92
A funny article about the websites that use a lot of marketing speak but don't really tell you what their company does
product
https://bjango.com/articles/opticaladjustments/
visual design
https://www.nngroup.com/articles/factors-ux-maturity/
A model that outlines what is needed for UX maturity.
interaction design
http://sethgodin.typepad.com/seths_blog/2018/01/working-with-a-designer-four-paths.html
Outlines the four approaches to working with a designer, when giving them the brief. This is written for clients of designers, but understanding these four approaches can help any designer to communicate what they NEED from a client, and what their expectations might be.
product
https://www.gameuidatabase.com/index.php
A collection of screenshots of UI in video games.
visual design
Collections of screenshots showing UI from video games, filtered by game and category.
visual design
One designer's collection of what they consider to be well-designed websites
visual design
A design brief / challenge generator to give you a project to work on, for practice, or for your portfolio.
career
https://jlzych.com/2022/04/24/good-north-star-bad-north-star/
How (and how not) to create product concepts that help keep product teams excited about the future in a practical way.
product
A list of UI/layout ideas that were tried and tested. Mostly focused on marketing sites/landing/e-commerce pages with a focus on conversion.
visual design, interaction design, product
https://eyeondesign.aiga.org/graphic-designers-have-always-loved-minimalism-but-at-what-cost/
A brilliant article about minimalism in graphic design and where it comes from
graphic design
A free online tool to play around with line height grids and typographic scales.
visual design
A collection of interface design issues.
quality, interaction design, visual design
https://guidebookgallery.org/index
A website that preserves screenshots of graphical user interfaces throughout history.
visual design
https://www.interruptions.net/literature/Smith-Mosier-Guidelines.pdf
A long list of user interface/interaction guidelines.
interaction design
https://news.ycombinator.com/item?id=34611552
A good insight into how some people think about interface quality.
quality
A collection of free icons that are specific to the health industry.
visual design
A collection of interaction patterns from real software.
interaction design
Remote job board
career
https://medium.muz.li/icon-set-3b4fc87dc6b5
A guide to drawing your own flat icons - mostly examples of good/bad, which is very useful.
visual design
quality
https://medium.com/@cwodtke/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8
An overview of what design thinking is, and the separate steps of it, regardless of the tools you use in each step.
product
https://www.youtube.com/watch?v=l_F9jxsfGCw
career, product
https://blog.datawrapper.de/interpolation-for-color-scales-and-maps/
data visualisation
An article which gives you a portfolio format to use, and advice on how to position yourself.
career
http://oxs.335.myftpupload.com/2022/08/26/how-to-develop-good-taste-pt-1/
A post about developing taste in fashion, but the principles apply to interface design as well.
quality, visual design
https://vanschneider.com/series/how-to-get-a-job-at
A series of interviews with well-known companies about how they approach their design hiring process.
career
https://brianlovin.com/writing/how-to-give-a-great-product-design-portfolio-presentation
A practical how-to with step by step instructions for presenting a project from your portfolio in a job interview.
career
https://www.uxportfolioformula.com/how-to-write-a-ux-case-study/
Contains a structure you can use to write your portfolio case studies.
career
https://blog.sbensu.com/posts/friction-logs/
quality
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
A list of all HTML elements / tags and what they're used for.
development
https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/
A list of HTML elements and what they should be used for. Helps with semantic HTML.
development
Collects and comments on the HUDs and GUIs in films and video games. Refers to them as FUI, which I believe is Future User Interface.
visual design
A tool to test a colour scheme in different situations.
visual design
A collection of designer portfolios.
visual design
A collection of what seems like every open source icon set.
visual design
An open source icon set, 1,000+ icons.
visual design
https://tdarb.org/blog/use-text-not-icons.html
visual design, interaction design
https://spark-public.s3.amazonaws.com/startup/lecture_slides/lecture5-market-wireframing-design.pdf
Part of a course on startups. Talks about ideas vs execution.
product
https://illustrationsuniverse.com
A catalogue of illustrations taken from real commercial apps. Good for illustration inspiration.
visual design
https://inclusive-components.design
A series of deep dives into inclusive/accessible ways to design and develop, with code examples, components.
visual design, interaction design
https://www.notboring.co/p/indistinguishable-from-magic
quality
A paper about how action and reaction are coupled in physical products, and the types of feedback they give. Talks about how this applies to digital products, and how digital allows us to decouple those things.
interaction design
https://hci-museum.lisn.upsaclay.fr
A collection of creative / innovative interaction designs.
interaction design
Screenshots and videos of video game UI / interfaces.
visual design
http://understandingminimalism.com/introduction-to-minimalist-design/
A definition of what minimalist design is.
visual design
https://rauno.me/craft/interaction-design
interaction design, quality
https://medium.com/@jsaito/is-this-my-interface-or-yours-b09a7a795256
An article about whether to use "My" or "Your" in user interfaces.
visual design
An expert in interaction design.
interaction design
A set of articles that dive into the theory of interaction design/software products.
interaction design
https://signalvnoise.com/posts/3781-kathy-sierras-featuritis-curve-helps
A graph that shows how people respond as you add more and more features to software.
quality
A database of companies (mostly American) where you can filter by their key values, to find the sort of company you want to apply to.
career
https://www.youtube.com/watch?v=0GhfHO9clTY
A video which shows various ways you can animate e.g. an app icon. Good for inspiration.
interaction design
A collection of examples of simple, modernist design. I wouldn't describe any of the featured designs as particularly usable, but they're all of a certain style.
visual design
A curated collection of well designed landing pages. Stands out because many of these are quirky or doing something different, but not unusable like most agency sites.
visual design
A collection of well designed landing pages for inspiration.
visual design
Landing page inspiration/collection
visual design
A good introduction/overview of responsive design, with HTML/CSS snippets.
visual design, development
https://ia.net/topics/learning-to-see
A long article by the designer of iA Writer about how designers and non-designers see. Touches on aesthetics, simplicity, all that good stuff.
visual design, interaction design
https://legible-typography.com/en/
A free online book about what makes text/typography legible.
visual design, book
career
https://designregression.com/article/line-length-revisited-following-the-research
visual design
https://www.youtube.com/watch?v=lz1L7ht3a_M
Linear dedicated December 2022 to improving the quality of Linear. They did an event where they answer questions about this.
quality
Gives you real content in different categories for design mockups.
visual design
A collection of logos in black and white only (No greyscale, no colour), most of which are famous/well designed. Good for inspiration and encouragement to stick to simple logos!
graphic design
A collection of screenshots that have been split into components, taken from hand-picked well-designed websites that really exist.
visual design
A service which lets you use placeholder images of whatever size/dimensions you want for free, to test in web designs.
visual design, development
http://worrydream.com/MagicInk/
A long article on software design theory.
interaction design
https://cutlefish.substack.com/p/tbm-2752-mandate-levels
A theory about how different teams work under different "mandates": their work starts or stops at different places on the list/levels of impact their work can make.
product
https://uxplanet.org/product-design-methods-mind-map-f6511820a7d5
This author put together a map of all of the UX design methods they could find, and put them into categories.
interaction design
A website with articles relevant to UI skills/tweaks.
visual design
These same concepts are relevant to quality being impossible at scale.
quality
https://uxdesign.cc/measuring-design-quality-with-heuristics-44857efa514
quality
The importance of history in interface design.
quality
visual design
https://www.youtube.com/watch?v=AHiNeUTgGkk
Jensen Harris goes into the increasing bloat of Office applications.
visual design, interaction design
Examples of good mobile app design, taken from actual shipped mobile apps.
visual design
https://modalzmodalzmodalz.com
A website that points out that modal dialogues ("modals") have problems, and suggests some alternatives.
interaction design
https://lospec.com/palette-list/aap-dga16
Takes the original EGA colour palette and dials it back a bit so it looks nicer to modern eyes.
visual design
If you want a specific style of typeface, this website gives you a font family stack you can use that'll include every operating system's best local font of that type.
visual design
https://frankrausch.com/ios-navigation
interaction design
http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html
A follow-up article outlining more UI details that are different in China from mobile design in the West
visual design, interaction design
http://motherfuckingwebsite.com/
A website built to demonstrate that text with minimal styling is still a website.
visual design
https://www.youtube.com/watch?v=YThelfB2fvg
A video about the mouse cursor, where the author creates his own set of mouse cursors after explaining how they got to be how they are today.
interaction design, visual design
A collection of screens from mobile apps that are examples of good design.
visual design
https://www.lukew.com/ff/entry.asp?1514
A high level view of the ways you can collapse content as the viewport size shrinks.
visual design
A list of tips product managers can use to look valuable and get ahead, even if they're not good at their job.
product, career
https://marketingexamples.com/landing-page/guide
A quick guide to high conversion landing page hero sections, but there's no proof of any of the techniques working.
product
https://craigmod.com/essays/smartphones_in_myanmar/
A long article about how people in a developing country, Myanmar, use their mobiles / smartphones.
research
An article about why Net Promoter Score (NPS) is a bad measure of success.
product
https://ianstormtaylor.com/design-tip-never-use-black/
An article about how flat black should never be used in interface design, since it's not a natural colour.
visual design
https://www.niceverynice.com/components
A collection of well designed real websites, for inspiration. Mostly landing pages.
visual design
A collection of screenshots from websites/products that are well designed. Costs money/requires an account.
visual design
https://www.andy.works/words/no-more-boring-apps
An article about how apps have become boring and that we should be doing more as designers to make them less so. I disagree with the article.
visual design
https://www.grahammann.net/book-notes/mastery-robert-greene
A good set of notes of how anyone should approach mastery of their field. Heavy focus on the apprenticeship model, and the mindset you should have.
career
https://www.are.na/blog/notes-on-taste
aesthetics
https://www.youtube.com/watch?v=OJGnpmnXR5w
A video introduction to Niklaus Wirth's operating system, Oberon, which has some fascinating interaction patterns.
interaction design
https://webtorque.org/ux-research-design/
Explores an approach to research and setting direction. Very interesting.
research
https://medium.com/mule-design/on-surveys-5a73dda5e9a0
An essay about the problems with surveys and how to approach them better.
research
https://yeun.github.io/open-color/
An open source colour scheme.
visual design
http://opensourcedesign.net/jobs/
This website collects a list of open source projects that need (Generally free) design help.
career
https://medium.muz.li/optical-effects-9fca82b4cd9a
A guide to visual weight and other optical tricks to be aware of when designing interfaces.
visual design
https://browsercompany.substack.com/p/optimizing-for-feelings
quality
https://www.subtraction.com/2010/11/05/i-wrote-a-book/
A book about grid principles on the web.
book, visual design
https://jods.mitpress.mit.edu/pub/issue3-brand/release/2
Touches on both the pace of layers in society (Fashion, Commerce, Infrastructure, Governance, Culture, Nature) and the idea that some things are more fixed and more difficult to change, as with homes (Stuff, space plan, services, skin, structure, site)
product
A collection of videos showing different types of "flow" like onboarding, through apps.
visual design, interaction design
http://yosefk.com/blog/people-can-read-their-managers-mind.html
The theory that people do what their manager rewards, rather than what their manager says is the right thing to do.
career
https://drmaciver.substack.com/p/people-dont-work-as-much-as-you-think?s=r
career
https://www.kilobitspersecond.com/2020/09/22/people-expect-technology-to-suck/
An article about how often technology doesn’t work, and how it affects most people’s expectations
quality
A job board that only lists jobs for companies that put people first and aren't a stressful place to work (think the Basecamp model).
career
A free large icon set where you can change the weight, colour, and copy SVG code all from the website.
visual design
Uses Google image search to find colours related to search terms.
visual design
A curated list of well-designed landing pages / websites.
visual design
https://www.untitledui.com/logos
Free placeholder logos to use in a design, e.g. in the top left of a website.
visual design
https://mralancooper.medium.com/plan-to-throw-one-away-df05fde7bf63
A story about throwing away the first prototype you make for something, and building it again from scratch for the final version. This can be faster than trying to work with whatever rough prototype you created to prove the concept
product
A great article about how to build your design presence/brand.
career
http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
An article about priority guides, which are an early stage design tool to use instead of wireframes. They focus the team on content, and the importance of that content, and they leave specific layout questions until these important things have been decided.
visual design
https://paper.dropbox.com/published/Becoming-a-Product-designer-requirements-T2TC8MP45MlCG7sqrPhofQw
Basically a job spec listing all of the skills a high-end product designer should have. Think of it like a checklist.
career
https://docs.google.com/document/d/1sx5f13_BbLnblTUK4_KfyXfA9TWBwGgh-ThM8FlaZcI/edit
A list of practical product management principles to consider.
product
http://contemporary-home-computing.org/prof-dr-style/
A look at the design of early, hand-built websites made by professors. An interesting history lesson about the early days of the internet, and how some common styles/trends came to be.
visual design
A collection of progression frameworks that companies use to manage the careers of their employees, promotions, raises, etc.
career
A collection of small-screen screenshots organised by pattern. Has a premium option, so the collection is probably a bit better curated.
visual design
http://cameronmoll.com/journal/putting-the-kibosh-on-ui-vs-ux
visual design, interaction design
A video.
quality
https://dl.acm.org/doi/epdf/10.1145/235008.235010
interaction design, quality
https://austinkleon.com/2020/12/10/quantity-leads-to-quality-the-origin-of-a-parable/
The origin of the quality / quantity pottery story.
quality
http://johnsalvatier.org/blog/2017/reality-has-a-surprising-amount-of-detail
quality
https://taylorpearson.me/overconfidence-bias/
product
https://taylorpearson.me/interestingtimes/reality-has-a-surprising-amount-of-detail/
product
A collection of marketing email examples that are well designed. Focuses on real life emails, rather than fake designs. Also look at their blog, where they write about what makes a good email.
product
https://tim.blog/2020/02/02/reasons-to-not-become-famous/
Tim outlines the reasons you don't want to be famous.
career
https://bradfrost.github.io/this-is-responsive/patterns.html
A collection of interface patterns that are responsive, for inspiration.
visual design
https://medium.com/mule-design/research-maturity-in-five-questions-df7042507de8
A set of five questions that help you get to how mature an organisation is in terms of research.
research
http://dhemery.com/articles/resistance_as_a_resource/
Practical methods to approach people who resist new ideas or proposals, especially as a manager.
career
https://x.com/_mql/status/1699038671779807234?s=46&t=wLp-zTWcmnjPnnnFEdqbfw
An image which shows standard responsive layout patterns you can use when the screen size reduces.
visual design
https://uxdesign.cc/reverse-engineering-the-invision-interface-50a8e81b9e9b
An article about copying Invision's interface to learn about their UI choices / copy work
visual design
http://jeremymikkola.com/posts/2019_03_19_rules_for_autocomplete.html
A list of things that autocomplete fields - like drop-downs - should follow.
interaction design
A 1.5 hour live stream where Ryan Singer of Basecamp gives an introduction to Christopher Alexander's work on pattern languages. Very high-level, very strategic way of understanding how design improves things.
interaction design
A collection of screenshots from SaaS apps.
visual design
https://www.cortes.design/post/saas-landing-page-formula-examples
A formula put together for how to design a SaaS landing page that'll get you started.
visual design, product
https://www.experimental-history.com/p/science-is-a-strong-link-problem
quality
A collection of videos and screenshots showing good design, from real products.
visual design
Has information on screen sizes for all Apple devices, including resolution in points and real pixels, and safe area sizes. Very hard to find this information anywhere on the web.
visual design
A web (HTML / CSS / Javascript) framework that is independent from any company, platform, or device.
visual design
Andy Bell's design studio, which focuses on building websites the way the web wants them to be built.
quality, development
https://37signals.com/seven-shipping-principles
quality
https://medium.com/shapingdesign
career
Generates randomised design challenges as short prompts - "Design X for Y but don't do Z".
career
https://www.baytas.net/blog/shoes/
Talks about the importance of cultural/personal knowledge when you design for a connection with people. Talks about "tourist vs. purist"
aesthetics
https://michelf.ca/projects/sim-daltonism/
A free colour blindness simulator. Useful for quickly checking over your designs or colour combinations with an overlay.
visual design, interaction design
https://www.youtube.com/watch?v=LKtk3HCgTa8
A video about what "simple" and "easy" mean.
simplicity
http://www.jonkolko.com/writingSimplicityComplexity.php
simplicity
A knowledge base/website focused on well designed security processes.
interaction design
A curated collection of well-designed websites.
visual design
https://matthewbischoff.com/software-paper-cuts/
interaction design
https://utopia.fyi/space/calculator/
An online tool to create a scale of spacing sizes for a design.
visual design
A component library for terminal-like visual style.
visual design
A series of interviews by Brian Lovin about the state of senior/high level individual contributors. How well do companies support people who don't want to go into management?
career
Aggregate device stats for website visits. Mobile vs. desktop, browser share, screen resolution popularity, etc.
interaction design
https://paulstamatiou.com/stocketa/
Paul documents the design decisions he made for his mobile app.
quality
https://alistapart.com/article/style-tiles-and-how-they-work
An article explaining style tiles, which are a way to show and discuss style guides without letting content affect the conversation/critique.
visual design
https://www.svgbackgrounds.com
A collection of good looking backgrounds that are entirely CSS/SVG, which means they're responsive.
visual design
visual design
https://slack.design/articles/sweating-the-small-stuff/
Slack's description of how they keep up with small detail improvements/maintain quality.
quality
development, visual design
https://www.iso.org/standard/35746.html
An ISO standard which lays out the factors of quality in software.
quality
https://pjonori.blog/posts/systems-math-explosions/
An article mostly about "combinatorial explosions", or why things get complicated fast/there are many more relationships when you add more elements
quality
Free icon set that lets you pick thickness and colour, and copy and paste the SVG into design software.
visual design
https://commoncog.com/blog/tacit-knowledge-is-a-real-thing/
Argues for the existence of, and explains, tacit knowledge. Relevant to visual design learning.
career, visual design
http://www.paulgraham.com/taste.html
quality
https://en.wikipedia.org/wiki/Law_of_conservation_of_complexity
Also know as the Law of Conservation of Complexity.
interaction design
https://lord.io/text-editing-hates-you-too/
interaction design
An article about the Bauhaus movement in architecture and how the same thing happened in visual design, with the shift from skeuomorphism to flat design.
visual design
https://ohmy.disney.com/movies/2016/07/20/twelve-principles-animation-disney/
An article about Disney's 12 principles of animation.
interaction design
https://www.youtube.com/watch?v=jWHsLAosIIg
A video that takes you through the 13 types of dashboard.
data visualisation
https://spec.fm/specifics/8-pt-grid
A guide to using an 8pt grid system. Covers baseline grids, rather than the more common/well-known column grids.
visual design
https://en.m.wikipedia.org/wiki/The_Analysis_of_Beauty
A book from the 1700s which tries to define the factors of beauty. This Wikipedia article has a summary.
quality, visual design, book
https://capwatkins.com/blog/the-boring-designer
career
https://www.wired.com/story/software-criticism/
quality
https://essays.uxdesign.cc/case-study-factory/
An article about why boot camp designers all produce the same case study.
career
https://applypixels.com/blog/comeback
visual design
https://moderncss.dev/complete-guide-to-centering-in-css/
Lists all of the ways you can centre content horizontally and vertically with CSS, from the latest technologies to the earliest.
development
https://gk3fyi.substack.com/p/the-cost-of-craft
quality
Details of the curriculum students studied at the Bauhaus design school.
graphic design
Shows different patterns for visualising data, like graphs and charts. Lets you search by function, which is great
data visualisation
https://creatoreconomy.so/p/the-day-you-stopped-making-compromises
quality
https://github.com/mmmonteiro/designethics/blob/master/en_US.md
A code of ethics for designers.
product, career
https://pivotal.substack.com/p/economics-of-data-biz
A good introduction to the business model of a data business.
product
https://www.cs.umd.edu/users/ben/goldenrules.html
visual design, interaction design
https://essenceofsoftware.com/posts/distillation/
A long summary of the book The Essence of Software. Mostly talks about the idea of "concepts" in designing software
interaction design
https://layervault.tumblr.com/post/32267022219/flat-interface-design
An article written in 2012 which criticises rich visual styles ("skeuomorphism") and promotes simple visual styles ("flat design"). Interesting as a look back at the other end of the pendulum swing.
visual design
https://thehistoryoftheweb.com/
A timeline of the web. Incredible.
development, product
https://nymag.com/intelligencer/2023/01/why-does-it-feel-like-amazon-is-making-itself-worse.html
quality
http://alistapart.com/article/the-king-vs-pawn-game-of-ui-design
An article approaching UI design principles from basics.
visual design
https://airtable.com/shr8I9oWiYngztMXC/tblMYuqK7rYdWc9Du/viwgvzxe2l5jNen1G
An aggregated collection of UX book recommendations
book
https://hackernoon.com/the-mvp-is-dead-long-live-the-rat-233d5d16ab02
An article explaining the Riskiest Assumption Test.
product
http://web.cs.wpi.edu/~dcb/courses/CS3041/Myth-of-Metaphor.pdf
Explains the three paradigms of interface design: technology, metaphor, and idiom/idiomatic.
interaction design
https://articles.uie.com/the-need-to-think-and-talk-like-an-executive/
An article in which Jared lays out ways that UX design can bring value to the business, in language that executives can understand.
product
https://www.youtube.com/watch?v=TCI8lPvr6SM
aesthetics
Eight factors that make art enjoyable.
graphic design, quality
https://www.youtube.com/watch?v=qMH_J_vcoqE
A video about using large, medium, and small shapes, with variety, in art to add visual interest.
visual design
https://jenson.org/The-Simplicity-Shift.pdf
A paper about the reality of companies making simplicity a core value.
simplicity
https://www.flickr.com/photos/digitalweb/5271635413
These are what Nick Ficnk things the core disciplines of UX design are. If you're trying to learn UX design, focusing on learning about each of these areas is a good idea! Later in your career, you could focus on one of these areas as your speciality.
career
https://benhoyt.com/writings/the-small-web-is-beautiful/
A long essay that mostly focuses on the development side, but that celebrates the "small web".
quality, simplicity
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
interaction design
https://randsinrepose.com/archives/the-update-the-vent-and-the-disaster/
An article explaining the three types of one-to-one you can have with your team members
career
https://safetydifferently.com/the-varieties-of-human-work/
product
http://idlewords.com/talks/website_obesity.htm
A talk (There's a video link at the top) about the problem with website download sizes increasing over time, and how it's ridiculous. Inspires a lot of my personal beliefs about bloat!
quality
http://amat-design.com/2021/12/02/thirty-hypotheses-on-interface-aesthetics/
An long article about the causes of good aesthetics in user interfaces.
visual design
https://www.thispersondoesnotexist.com/
Generates - one at a time - a photo of a person who does not exist using AI. More realistic photos than some similar services.
visual design
A large collection of single-use tools online, e.g. an SVG pattern generator.
development
A collection of 2 colour combinations.
visual design
https://world.hey.com/rjs/19-two-kinds-of-usability-b9bc04d5
Ryan argues that you don’t need to do usability testing if you understand best practices and the user’s domain.
product
A way to generate a type scale visually.
visual design
https://www.linkedin.com/posts/vitalyfriedman_ux-design-typography-activity-7025016663125151744-OtPK
A list of links Vitaly recommends for pairing typefaces.
visual design
A website that reviews new typefaces, suggests good free typefaces, and sells guides to good typography.
visual design
A UI design challenge/brief generator which gives you an idea, a colour palette, a font pairing, and illustrations/icons to use.
visual design, career
https://support.balsamiq.com/ui101/
A library / collection that explains best practices, sometimes taken from style guides, for various types of UI components or elements.
visual design
https://www.notion.so/UI-Checklist-d47ae9676a004a9b9d942a7908ac9efd
A checklist by MDS / Matt D Smith that helps a designer make sure their visual design is as good as it can be.
visual design
Placeholders for design. Offers lots of different types of placeholder content, that changes when you refresh the page.
visual design
https://balsamiq.com/learn/inspiration/ui-galleries/
Balsamiq has collected up websites/books that show pattern libraries for UI/UX.
visual design
Daily handpicked UI inspiration & patterns
visual design
A library / collection of different UI patterns, with some notes on how they can/should be used.
visual design
A collection of screenshots/short videos from real apps, so you can see how they're designed. For UI inspiration.
visual design
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
Gives iPhone model screen resolutions in both points and pixels
visual design
Each article takes an app or design and reviews it in a lot of detail.
visual design
High quality photos that are free to use for personal or commercial projects
visual design
https://uxdesign.cc/usability-heuristic-frameworks-which-one-is-right-for-you-1962387b7cc
quality, interaction design
https://bureau.rocks/projects/book-ui-en/
An interactive digital book that claims to approach UI design from first principles
book, visual design
A collection of screenshots from popular apps, organised by app. Also shows older versions of those flows/sections, so you can compare older to newer.
visual design
A weekly email of curated UX links.
interaction design
https://www.youtube.com/watch?v=4FYkTaXBQJ8
A presentation where Craig talks about how to choose good photography.
interaction design
An article about intent frames. Wireframes that don’t use content but that show the intent of each area of the design.
interaction design
https://sajadabedi.gumroad.com/l/500-shapes
A collection of hand drawn vector shapes you can add to your design (paid).
visual design
https://www.versionmuseum.com/
A collection of screenshots showing old versions of famous websites.
visual design
https://www.videoplaceholder.com
Placeholder videos that are hosted, so you can use them in your web design tests before you make your own videos.
development
https://uxdesign.cc/visual-craftsmanship-for-all-142b1c7da9a7
An article about improving visual design craftspersonship across the organisation, but I'm saving it because of the definition of the building blocks of visual design early in the article
visual design
https://github.com/ft-interactive/chart-doctor/tree/master/visual-vocabulary
A collection of chart and graph types and when they should be used, presented visually.
data visualisation
https://www.volunteermatch.org
A website which lists charities looking for volunteers.
career
A collection of example UI / UX patterns, with a little explanation about how it works/why it helps.
visual design
https://danluu.com/programmer-moneyball/
Talks about how tech companies pay too much attention to how trendy your past employers/companies were. It's about developers, but it's relevant to design.
career
http://www.zeldman.com/2012/05/18/web-design-manifesto-2012/
An article about the trend of large body text, in a single column, with nothing else on the page. This was written early in that trend.
visual design
https://webglossary.info/terms/
A collection of terms related to web development, with definitions.
development
A collection of curated gradients you can use for backgrounds/other areas of your design that need fancy gradients.
visual design
A list of guidelines for a good web interface.
interaction design
https://imperavi.com/books/web-interface-handbook/
A decent collection of principles and techniques for designing on the web, with visual example.
visual design
A collection of publicly visible design systems / style guides.
visual design
quality
https://dfeldman.medium.com/what-is-product-quality-a-practical-definition-990d3ca6827
quality
simplicity, quality
https://medium.com/knowable/why-everything-looks-the-same-bad80133dd6e
I don't agree with the tone (sameness is bad) but this article has good examples and a reasonably fair overview of the reasons why this happens.
aesthetics
https://www.youtube.com/watch?v=PIq51Pdkd6A
interaction design
https://alexgaynor.net/2020/nov/30/why-software-ends-up-complex/
simplicity, quality
https://blocks.wickedtemplates.com
A collection of layouts for blocks you can use on a landing page. This is meant for tailwind CSS, but it works well as inspiration too since they show examples of each type.
visual design
https://wwworkshop.inktrap.co.uk/
A design brief generator that produces brilliant mash-ups of concepts for you to design.
career
Has screen resolutions in pixels and points/DPs for lots of devices, seems to be up to date.
visual design
https://fictivekin.com/websystems
A guide by Fictive Kin. Covers the concepts behind a successful commercial website.
product