# Web Design

## Notes

* There's a bit of a curse when it comes to design: if you spend 4 hours building something, you lose all objective perception. It's impossible to tell if it's good or not. For this reason, I always step away from a project for a day or two after I have a rough design in place. When I come back, I'll be able to tell if it's good or not. ([source](https://www.joshwcomeau.com/blog/how-i-built-my-blog/#:~:text=a%20bit%20of%20a%20curse%20when%20it%20comes%20to%20design)))
* An affordance is a property or feature of an object which presents a prompt on what can be done with this object. In short, affordances are cues which give a hint how users may interact with something, no matter physical or digital. ([source](https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4#:~:text=Affordance%20is%20a%20property%20or%20feature%20of%20an%20object%20which%20presents%20a%20prompt%20on%20what%20can%20be%20done%20with%20this%20object.))
* Reading/column width: 65 characters (2.5 times the Roman alphabet) is often referred to as the perfect measure. Derived from this number is the ideal range that all designers should strive for: 45 to 75 characters (including spaces and punctuation) per line for print. ([source](https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/#:~:text=65%20characters%20\(2.5%20times%20the%20roman%20alphabet\)%20is%20often%20referred%20to%20as%20the%20perfect%20measure.%20derived%20from%20this%20number%20is%20the%20ideal%20range%20that%20all%20designers%20should%20strive%20for%3A%2045%20to%2075%20characters%20\(including%20spaces%20and%20punctuation\)%20per%20line%20for%20print.))

## Links

* <https://dribbble.com/>
  * Go here for inspiration and borrowing
  * Compose different ideas together
* [Refactoring UI: The Book](https://refactoringui.com/book/)
* [Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability: Krug, Steve: 9780321965516: Books - Amazon.ca](https://www.amazon.ca/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=pd_sbs_14_t_0/142-9119805-5166140?_encoding=UTF8\&pd_rd_i=0321965515\&pd_rd_r=24a545f2-e73d-40b5-a144-1bce4b469385\&pd_rd_w=6yGuB\&pd_rd_wg=881L7\&pf_rd_p=9926bb69-42b9-46e4-b788-f665992e326d\&pf_rd_r=28D4D66KJ5RYBFSYA754\&psc=1\&refRID=28D4D66KJ5RYBFSYA754)
* [Learn Design for Developers from Sarah Drasner](https://frontendmasters.com/courses/design-for-developers/)
* [Top Free Resources for Developers in 2021 | Zero To Mastery](https://zerotomastery.io/resources/)
* [Glassmorphism in user interfaces. Another year, another UI trend is… | by Michal Malewicz | UX Collective](https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9)
* [Designing UI book](https://www.designingui.com/)
* [Neumorphism in user interfaces. How UI trends reach for inspiration… | by Michal Malewicz | UX Collective](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6)
* <https://uionline.io/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.abramczyk.dev/web-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.