https://basillabib.com/tags/hackers/Recent content in Hackers on Basil LabibHugoen-usgs454236@gmail.com (Basil Labib)gs454236@gmail.com (Basil Labib)© 2020–2026 Basil LabibSun, 14 Mar 2021 00:00:00 +0000https://basillabib.com/post/notes-design-for-hackers-by-david-kadavy/Sun, 14 Mar 2021 00:00:00 +0000gs454236@gmail.com (Basil Labib)https://basillabib.com/post/notes-design-for-hackers-by-david-kadavy/<h2 id="why-design">Why Design?</h2> <ol> <li>Your biggest asset - &ldquo;Learn whatever you want to achieve your vision&rdquo;.</li> <li>Good designs are timeless. They can awe people of <em>any</em> era.</li> <li>Fundamental soul of a human creation that expresses itself in successive outer layers of the product.</li> <li>Designing of a system comes before building it not after.</li> <li>Affect emotion, build credibility, earn trust.</li> <li>Don&rsquo;t draw ponies.</li> <li>First visual interaction thus heuristic shortcut to judge credibility.</li> <li>Purpose | Medium and Technology | Aesthetics</li> <li>Good design choices are a set of ideas that must mature in the mind.</li> <li>Use user persona to wireframe and prototype.</li> <li>Memorable and usability.</li> </ol> <h2 id="typography">Typography</h2> <ol> <li>Where does that typeface come from? What medium and technology influenced it?</li> <li>Typeface is what you use. Font is the file which contains the typeface (Am I being pedantic?).</li> <li>Understand the forces that brought the style into existence.</li> <li>SEO is design.</li> </ol> <h2 id="proportions">Proportions</h2> <ol> <li>How size and magnitude relate to each other.</li> <li>Important and unimportant elements.</li> <li>Common ones: <ul> <li>√2 : 1</li> <li>3 : 4</li> <li>2 : 3</li> <li>φ : 1</li> </ul> </li> </ol> <h2 id="composition">Composition</h2> <ol> <li>Arrangement of elements.</li> <li>Reading direction, guiding the eye.</li> </ol> <h2 id="principles">Principles</h2> <ol> <li>Dominance - pulls you in</li> <li>Similarity</li> <li>Rhythm</li> <li>Texture</li> <li>Direction</li> <li>Contrast</li> <li>Application to MailChimp logo</li> </ol> <h2 id="visual-hierarchy">Visual Hierarchy</h2> <ol> <li>White space</li> <li>Type weight</li> <li>Type size - 3:4 relationship - 5, 7, 9, 12, 16, 21, 28, 37, 50, 67</li> <li>Color</li> <li>Ornamentation</li> <li>Different blog designs and explanation</li> <li>Application to website</li> <li>Cluttering design in HTML tables</li> </ol> <h2 id="color-science">Color Science</h2> <ol> <li>Color in physics <ul> <li>EMR</li> </ul> </li> <li>Human visual limitations <ul> <li>Color constancy</li> <li>metamerism</li> <li>afterimages</li> </ul> </li> <li>Human visual system (biology) <ul> <li>Rod, cones (3 types), ganglion etc</li> <li>Trichromatic theory, color opponent theory</li> <li>Color blindness</li> </ul> </li> <li>Color models <ul> <li>Munsell</li> <li>HSB</li> <li>LAB</li> </ul> </li> <li>Data driven graphics <ul> <li>Converging palettes</li> <li>Diverging palletes</li> </ul> </li> <li>RGB model <ul> <li>Color mixing, additive model</li> <li>Hexadecimal mental model</li> <li>navigating color without using a picker</li> </ul> </li> <li>Cross media color representation <ul> <li>RGB (computers), CMYK (print)</li> <li>CMYK a subtractive model</li> <li>Gamuts</li> <li>ICC profile</li> <li>Approximate screen color on print (previewing color shifts, proofing etc)</li> <li>Spot colors</li> </ul> </li> </ol> <h2 id="color-theory">Color Theory</h2> <ol> <li>Color association with events for our ancestors</li> <li>Effect of red on prefrontal cortex <ul> <li>prefrontal cortex and rational thought</li> <li>eg of Target (retailer chain)</li> <li>use cases for red</li> </ul> </li> <li>Color and culture <ul> <li>questions to ask when designing for a foreign culture</li> <li>do research</li> </ul> </li> <li>Color Wheel</li> <li>Expected usage of few colors in culture <ul> <li>White - backgrounds, trustworthy etc</li> <li>Off white - natural feel, not for high traffic site</li> <li>Dark - sophistication, exclusivity</li> <li>Bright - less content</li> <li>Green - success, mark of progress</li> <li>Yellow - info</li> <li>Red - error, warning, urgent</li> <li>Blue - links (generally)</li> <li>Accent colors</li> </ul> </li> <li>Interaction between colors <ul> <li>warm colors pop, cool colors recede</li> <li>tint pops, shade recedes</li> <li>why monet never used black (explanation of his poplar painting)</li> <li>application to typography color, element design</li> </ul> </li> <li>Color schemes <ul> <li>monochromatic</li> <li>analogous</li> <li>complementary</li> <li>split complementary</li> <li>triadic</li> <li>tetradic</li> <li>variations</li> </ul> </li> <li>Creating mood with colors <ul> <li>mysterious (exclusive)</li> <li>active (youths, zeal etc)</li> <li>muted (solemn etc)</li> <li>natural</li> </ul> </li> <li>Tools for creating color schemes <ul> <li><a href="www.colorschemer.com">Color Schemer</a> </li> <li><a href="http://colorschemedesigner.com" target="_blank" rel="noopener noreferrer">Color Scheme Designer</a> </li> <li><a href="http://kuler.adobe.com" target="_blank" rel="noopener noreferrer">Kuler</a> </li> </ul> </li> </ol> <h1 id="appendix-a">appendix A</h1> <ol> <li>Consult for table of pairable typefaces to use for different purposes.</li> </ol> <h1 id="appendix-b---typographical-etiquette">appendix B - typographical etiquette</h1> <ol> <li>Don&rsquo;t</li> </ol> <ul> <li>Fake bold/italic/small caps</li> <li>Stretch types</li> <li>Outline types</li> <li>Impose background images or textures</li> </ul> <ol start="2"> <li>Avoid Widows and orphans</li> <li>Use drop caps</li> <li>Avoid indenting and leaving a line. Redundant.</li> <li>Use smart quotes (<code>&amp;rdquo; &amp;ldquo; &amp;rdquo; &amp;ldquo; &amp;prime; &amp;Prime;</code> )</li> <li><code>&amp;hyphen;</code> (‐), <code>&amp;ndash;</code> (–) and <code>&amp;mdash;</code> (—)</li> <li>Ligatures but not widely supported.</li> </ol>