Design
Making things friendly and appealing.
Resouces
- Hack Design
- Typography, UI, UX, graphics, mobile, interactive, mobile, front-end, product design, etc.
Sites
- Iconhunt — Free and open-source SVG icons
- Modern Font Stacks — Preview modern system fonts, a collection of the fastest fonts available across operating systems
- Colour and Contrast — Anything visualizing colour and contrast. Each page is short but there are a lot of pages
- Catalog of Dark Patterns — deceptive UX design practices
Design systems and guidelines:
- A Design Systems for the U.S. Goverment — Design principles, components, patterns and more used by the US government
- A Design Systems for the Canadian Goverment — Style guide, templates, content style guides and more
Collections of UX/UI Design:
- Page Collective
- Screen Lane
- Page Flows
- Nicely Done Club
- UX Archive
- Mobbin Desing
- Design Encyclopedia
- Collect UI
Free Design Tools/Applications (likely alternative to Adobe):
- Figma — UI/UX design, acquired by Adobe, free for now. It was said that you would destroy the Sith, not join them
- Photopea — Open-source online photo editor, an alternative to Adobe Photoshop (manual, code)
- Armor Paint — Open-source 3D painting software, an alternative to Adobe Substance (manual, code)
- Krita — Open-source painting software (manual, code)
- Who can use this colour combination
- Tangram — create and share animations like Adobe Illustrator + animation tools
- Wired JS — set of common UI elements with hand-drawn look (GitHub)
Links
Guides
- Visual Design Rules You Can Safely Follow Every Time
(HN)
- A list of visual design rules to follow, like colouring, spacing, alignment, etc.
- E.g.: saturate the neutrals, colours in a palette should have distinct brightness levels
- It's like those things that I know it feels right when I see them, but cannot objectively explain why
- 8 A/B Testing Mistakes | Posthog
(HN)
- Include unaffected users, viewing results in aggregate, no predetermined duration, no trial before the actual experiment…
- Neglect counter metrics, ignore seasonality, unclear hypothesis, overreliance on A/B testing
- Invisible Details of Interaction Design
- There is something that makes interaction design feel right
- UX patterns for loading
(HN)
- What could be shown as an indicator of "loading" per different durations
- Adding more animation to something already slow can be controversial, but might find some inspiration here
- Designing the Kowloon Walled City Infographics for SCMP | Adolfo Arranz Twitter
- This infographic of the Kowloon Walled City
- The process of ideation, design and drawing the graphics
- How to draw beautiful software architecture diagrams
(HN)
- Things like minimize neighbour distance, symmetry, aligned, container groups, etc.
- A guide to digital design at The Guardian
- Guardian's digital design style guide: layout, spacing, font, colours, etc.
- The Eight Golden Rules of Interface Design | Ben Shneiderman
- E.g.: consistency, informative feedback, reversibility
- Should a toggle button show its current state or the state to which it will change
- Either don't use it, or put the states outside the toggle
- Hardest problem in computer science: centering things
(HN)
- Once you see it you can't unsee, problems of web fonts, line height, icons, etc.
- Toasts are Bad UX
- Because it disappears, unknown delay time, but still better than no feedback
- How to improve your product and design taste
- What you read, what product you use, what people you are around with