diff --git a/Artificial Intelligence Models.md b/Artificial Intelligence Models.md index 0fc2d04..f97bcdd 100644 --- a/Artificial Intelligence Models.md +++ b/Artificial Intelligence Models.md @@ -62,29 +62,6 @@ - Focus on overall themes and principles across all the sources. - Relate concepts together. Map out all the interconnected ideas around. -### Design Styles - -Some ~spells~ styles to try when designing dashboards, UIs, or anything else. - -- Datasheet -- High-contrast -- Monospaced fonts -- Minimal and utilitarian layout -- Retro control-panel vibe -- NeoTech -- Industrial retrofuture -- Techno brutalism -- Neo-Brutalism -- Editorial Minimalism -- Swiss / International Typographic Style -- Text-first, code-adjacent feel -- Sharp rectangles, thin borders -- Terminal-inspired developer minimalism -- Fieldset + legend pattern -- Clear visual hierarchy - -[More skills at the impeccable repo](https://github.com/pbakaus/impeccable). - ## Skills - [Edward Tufte's Visualization Skills](https://github.com/aref-vc/tufte-claude-skill) diff --git a/Game Design.md b/Game Design.md index d69f39a..84a90c3 100644 --- a/Game Design.md +++ b/Game Design.md @@ -1,6 +1,6 @@ # Game Design -Some [principles](https://youtu.be/zaxAdRlyZQ8) to keep in mind: +Some [principles](https://youtu.be/zaxAdRlyZQ8) to keep in mind, many of which also apply to [[Web Design]]: 1. Create concrete, achievable, and rewarding [[goals]]. 2. Design for nuanced emotion. diff --git a/Learning.md b/Learning.md index 56f6bdf..7a80e4f 100644 --- a/Learning.md +++ b/Learning.md @@ -104,13 +104,10 @@ right in your browser. ### Others -- [Hack Design](https://hackdesign.org/lessons) - Quick and simple lessons on design. - [Better Explained](http://betterexplained.com/) - Math without endless memorization. - [Seeing Theory](https://seeing-theory.brown.edu) - A visual introduction to probability and statistics. - [Tuts+](https://tutsplus.com/) - Collection of how-to tutorials on lots of topics. - [Learn Genetics](https://learn.genetics.utah.edu/). Genetics science learning resources. -- [HTML for People](https://htmlforpeople.com/) - Resource for learning HTML. -- [Typography in ten minutes](https://practicaltypography.com/typography-in-ten-minutes.html) - Learn the basics of typography. - [Metaknowledge](https://github.com/RichardLitt/meta-knowledge) - A list of knowledge repositories from multiple people. - [[Privacy]] - [Reddit r/privacy Wiki](https://www.reddit.com/r/privacy/wiki/index) - Guide to becoming more secure online. diff --git a/Mindfulness.md b/Mindfulness.md index 9b0e78b..9a227e2 100644 --- a/Mindfulness.md +++ b/Mindfulness.md @@ -57,5 +57,4 @@ - Seek real [[Feedback]] (e.g. anonymous). - Meet a wide range of people, as valuable opportunities often come from unexpected connections. - Burnout is a major killer of agency and creativity. Prioritize rest and sustainable effort. -- [Style is a set of constraints that you stick to](https://stephango.com/style). Style emerges from consistency, and having a style opens your imagination. Collect constraints you enjoy. Unusual constraints make things more fun. You can always change them later. This is your style, after all. It’s not a life commitment, it’s just the way you do things. Having a style collapses hundreds of [[Future|future]] decisions into one, and gives you focus. E.g: always pluralize tags to never have to wonder what to name new tags. - [Slowing down, and offering more time to the act of consumption, immediately increases comprehension and enjoyment](https://www.raptitude.com/2025/12/maybe-the-default-settings-are-too-high/). Slowing down your rate of consumption will inevitably change what you want to consume. diff --git a/Programming.md b/Programming.md index 23c502c..06639ea 100644 --- a/Programming.md +++ b/Programming.md @@ -131,5 +131,4 @@ Like any other field, the world of software development has some interesting and - [Formatting your README](https://guides.github.com/features/wikis/#Formatting-a-readme) - [Open Source Guides](https://opensource.guide/) - [GitHub Badges](https://shields.io/) -- [Icons and Photos For Everything](https://thenounproject.com/), [other illustrations](https://github.com/sw-yx/spark-joy#illustrations) and [color toolbox](https://hue.tools/). - [Command Line Interface Guidelines](https://clig.dev/) and [12-factor CLI apps](https://medium.com/@jdxcode/12-factor-cli-apps-dd3c227a0e46) and [Learnings after building CLI apps](https://simonwillison.net/2023/Sep/30/cli-tools-python/). diff --git a/Web Based Tools.md b/Web Based Tools.md index b611606..f8938a8 100644 --- a/Web Based Tools.md +++ b/Web Based Tools.md @@ -2,21 +2,7 @@ Collection of awesome web-based tools. -## Design -- [Excalidraw](https://excalidraw.com/) -- [Canva](https://www.canva.com/) -- [Figma](https://www.figma.com/) -- [Photopea](https://www.photopea.com/) -- [Veed.io](https://www.veed.io/) -- [Birme](https://www.birme.net/) -- [Law of UX](https://lawsofux.com/) and [Visual Design Safe Rules](https://anthonyhobday.com/sideprojects/saferules/) and [User Interface Wiki](https://www.userinterface.wiki/) - -### SVGs - -- [SVGViewer](https://www.svgviewer.dev/) -- [SVG Crop](https://svgcrop.com/) -- [SVGOMG](https://jakearchibald.github.io/svgomg/) ## [[Teamwork]] diff --git a/Web Design.md b/Web Design.md new file mode 100644 index 0000000..cacfcf5 --- /dev/null +++ b/Web Design.md @@ -0,0 +1,85 @@ +# Web Design + +Good web design makes its purpose, hierarchy, and next action obvious while remaining readable, responsive, accessible, fast, and distinctive. + +- Design matters a lot. If it looks bad, people won't look at it. +- Start with the problem, audience, content, and desired outcome. Make the main action obvious. +- [Everything in your design should be deliberate](https://anthonyhobday.com/sideprojects/saferules/): whitespace, alignment, size, spacing, color, shadows, and everything else. +- Use high contrast for important elements. Use headings, whitespace, proximity, and alignment to group related content, guide attention, and reduce clutter. +- Start every project by making the body text look good. Keep body text at 16px or above, line spacing around 120–145% of the point size, and line length around 45–90 characters. +- Use no more than two typefaces. One well-chosen family in multiple weights is often enough. +- Reduce cognitive load. Limit choices, group information into meaningful chunks, and use familiar interaction patterns. Users spend most of their time on other websites and expect yours to work similarly. +- Give clear and immediate [[Feedback|feedback]]. Design default, hover, focus, active, disabled, loading, error, and success states for interactive elements. +- [Design for web accessibility](https://www.w3.org/WAI/tips/designing/). + - Provide sufficient contrast, don't use color alone to convey information, make interactive elements easy to identify, use clear and consistent navigation, label forms, provide identifiable feedback, and include alternatives for images and media. +- [Create responsive designs](https://web.dev/learn/design/) that adapt to different viewport sizes, input methods, user preferences, and content. Use content-driven breakpoints and test narrow, wide, zoomed, portrait, and landscape layouts. +- [[Programming|Performance]] is part of the user experience. Optimize images and fonts, remove unnecessary resources, and keep interactions responsive. +- Prototype before polishing. Iterate in the browser and test with real content, devices, keyboards, touch, slow connections, and different browsers. +- [Style is a set of constraints that you stick to](https://stephango.com/style). Style emerges from consistency, and having a style opens your imagination. Collect constraints you enjoy. Unusual constraints make things more fun. You can always change them later. This is your style, after all. It’s not a life commitment, it’s just the way you do things. Having a style collapses hundreds of [[Future|future]] decisions into one, and gives you focus. +- Use [[Data Visualization]] principles for charts and data-heavy interfaces. + +## Design Styles + +Some ~spells~ styles to try when designing dashboards, UIs, or anything else. + +- Datasheet +- High-contrast +- Monospaced fonts +- Minimal and utilitarian layout +- Retro control-panel vibe +- NeoTech +- Industrial retrofuture +- Techno brutalism +- Neo-Brutalism +- Editorial Minimalism +- Swiss / International Typographic Style +- Text-first, code-adjacent feel +- Sharp rectangles, thin borders +- Terminal-inspired developer minimalism +- Fieldset + legend pattern +- Clear visual hierarchy +- [Proportional Web](https://owickstrom.github.io/the-proportional-web/) +- [Monospace Web](https://owickstrom.github.io/the-monospace-web/) +- [Tufte](https://github.com/edwardtufte/tufte-css) + +## Resources + +- [Hack Design](https://hackdesign.org/lessons) +- [HTML for People](https://htmlforpeople.com/) +- [Typography in ten minutes](https://practicaltypography.com/typography-in-ten-minutes.html) +- [Law of UX](https://lawsofux.com/) +- [Visual Design Safe Rules](https://anthonyhobday.com/sideprojects/saferules/) +- [User Interface Wiki](https://www.userinterface.wiki/) +- [Designing for Web Accessibility](https://www.w3.org/WAI/tips/designing/) +- [Learn Responsive Design](https://web.dev/learn/design/) +- [Learn Performance](https://web.dev/learn/performance/) +- [Every Layout](https://every-layout.dev/) +- [Inclusive Components](https://inclusive-components.design/) +- [Impeccable Design Skills](https://github.com/pbakaus/impeccable). +- [Anthropic Frontend Design](https://raw.githubusercontent.com/anthropics/skills/refs/heads/main/skills/frontend-design/SKILL.md) +- [Vercel Web Design Guidelines](https://raw.githubusercontent.com/vercel-labs/agent-skills/refs/heads/main/skills/web-design-guidelines/SKILL.md) +- [Microsoft Frontend Design Review](https://github.com/microsoft/skills/tree/main/.github/skills/frontend-design-review) +- [Visual Design Rules You Can Safely Follow Every Time](https://anthonyhobday.com/sideprojects/saferules/) +- [User Interface Wiki](https://github.com/raphaelsalaja/userinterface-wiki/tree/main/skills) +- [Laws of UX](https://lawsofux.com/) +- [Taste Skill](https://github.com/Leonxlnx/taste-skill/tree/main/skills) +- [NN/g 10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) +- [NN/g 5 Principles of Visual Design in UX](https://www.nngroup.com/articles/principles-visual-design) +- [Inclusive Design Principles](https://inclusivedesignprinciples.info/) +- [The Elements of Typographic Style Applied to the Web](https://webtypography.net/toc) +- [Edward Tufte's Visualization Skills](https://github.com/aref-vc/tufte-claude-skill) + +## Tools + +- [Excalidraw](https://excalidraw.com/) +- [Canva](https://www.canva.com/) +- [Figma](https://www.figma.com/) +- [Photopea](https://www.photopea.com/) +- [Veed.io](https://www.veed.io/) +- [Birme](https://www.birme.net/) +- [SVGViewer](https://www.svgviewer.dev/) +- [SVG Crop](https://svgcrop.com/) +- [SVGOMG](https://jakearchibald.github.io/svgomg/) +- [Icons and Photos For Everything](https://thenounproject.com/) +- [Other illustrations](https://github.com/sw-yx/spark-joy#illustrations) +- [Color toolbox](https://hue.tools/).