Details

Design for Hackers


Design for Hackers

Reverse Engineering Beauty
1. Aufl.

von: David Kadavy

CHF 0.00

Verlag: Wiley
Format: PDF
Veröffentl.: 24.08.2011
ISBN/EAN: 9781119970064
Sprache: englisch
Anzahl Seiten: 352

DRM-geschütztes eBook, Sie benötigen z.B. Adobe Digital Editions und eine Adobe ID zum Lesen.

Beschreibungen

<b>Discover the techniques behind beautiful design by deconstructing designs to understand them</b> <p>The term 'hacker' has been redefined to consist of anyone who has an insatiable curiosity as to how things work—and how they can try to make them better. This book is aimed at hackers of all skill levels and explains the classical principles and techniques behind beautiful designs by deconstructing those designs in order to understand what makes them so remarkable. Author and designer David Kadavy provides you with the framework for understanding good design and places a special emphasis on interactive mediums. You'll explore color theory, the role of proportion and geometry in design, and the relationship between medium and form. Packed with unique reverse engineering design examples, this book inspires and encourages you to discover and create new beauty in a variety of formats.</p> <ul> <li>Breaks down and studies the classical principles and techniques behind the creation of beautiful design</li> <li>Illustrates cultural and contextual considerations in communicating to a specific audience</li> <li>Discusses why design is important, the purpose of design, the various constraints of design, and how today's fonts are designed with the screen in mind</li> <li>Dissects the elements of color, size, scale, proportion, medium, and form</li> <li>Features a unique range of examples, including the graffiti in the ancient city of Pompeii, the lack of the color black in Monet's art, the style and sleekness of the iPhone, and more</li> </ul> <p>By the end of this book, you'll be able to apply the featured design principles to your own web designs, mobile apps, or other digital work.</p>
<p><b>Introduction 1</b></p> <p>Design as Literacy 2</p> <p>The Hacker Attitude 3</p> <p>The Gap in Design Knowledge 5</p> <p><b>Part I: Understanding Design</b></p> <p><b>Chapter 1 Why Design Matters 9</b></p> <p>What Design Really Is 11</p> <p>What Design Is Not 13</p> <p>The Layers of Design 15</p> <p>Purpose 17</p> <p>Medium and technology 17</p> <p>Aesthetic decisions 18</p> <p>Conclusion 18</p> <p><b>Chapter 2 The Purpose of Design 19</b></p> <p>Visual Design and Its Relation to User Experience Design 21</p> <p>The basics of user experience design 22</p> <p>The visual design of one product versus another 24</p> <p>Sometimes a Visual Design Is Just Good Enough 25</p> <p>Sometimes Visual Design Is Your Advantage 26</p> <p>Reverse-Engineering the Twitter User Experience 28</p> <p>User personas 29</p> <p>Use cases 30</p> <p>Wireframes 32</p> <p>Knowledge Applied 33</p> <p><b>Part II: Medium and Form</b></p> <p><b>Chapter 3 Medium and Form in Typography 37</b></p> <p>The Tragedy of Misuse: Why You Hate Comic Sans 38</p> <p>The Shackles of the Typographer: The Unalterable Word 45</p> <p>The Formation of Our Alphabet 47</p> <p>The Birth of Our Letters 50</p> <p>The Twitter of the Roman Empire 51</p> <p>The height of Roman typography 52</p> <p>The Type That Has Lived On 62</p> <p>The invention and spread of printing 63</p> <p>Punchcutting: The cradle of the unalterable word 64</p> <p>Venice and the Renaissance 65</p> <p>France and Garamond 66</p> <p>Garamond Today: Why You Don’t Use Garamond on the Web 66</p> <p>The birth of the “web font” 67</p> <p>A great leap 68</p> <p>Bridging the gap 69</p> <p>Limitations can be embraced – even parodied 72</p> <p>Knowledge Applied 73</p> <p><b>Chapter 4 Technology and Culture 75</b></p> <p>How Trends Are Created 76</p> <p>The birth of Impressionism 76</p> <p>Impressionism and the middle class 78</p> <p>Impressionism and photography 79</p> <p>Impressionism and modern art 81</p> <p>Web 2 0 graphics 82</p> <p>How Apple started the Web 2 0 style 83</p> <p>How Aqua influenced the web 85</p> <p>How Aqua met Web 2 0 86</p> <p>Form shapes technology, this time 90</p> <p>SEO Is Design 90</p> <p>Understanding why SEO is important 93</p> <p>Choosing the right keywords 94</p> <p>Considering content and coding 96</p> <p>URL 97</p> <p>Title tag 97</p> <p>Meta tags 98</p> <p>Headers 98</p> <p>Content: em, strong, img 98</p> <p>Authority of linking pages 99</p> <p>Content of linking pages and of anchor text of links 100</p> <p>Everything in moderation 100</p> <p>Getting the content, getting the links 101</p> <p>Knowledge Applied 102</p> <p><b>Part III: Composition</b></p> <p><b>Chapter 5 Fool’s Golden Ratio: Understanding Proportions 105</b></p> <p>What Is Proportion? 107</p> <p>Proportion and Design 109</p> <p>The Broken Promise of the Golden Ratio 110</p> <p>The golden ratio and the Fibonacci sequence: Similar, but different 112</p> <p>The golden ratio in the human form 113</p> <p>Misconceptions about the golden ratio 115</p> <p>The golden ratio in ancient Greece 115</p> <p>The golden ratio in fine art 117</p> <p>The golden ratio in nature 118</p> <p>The golden ratio in psychology 118</p> <p>Other Pleasing Proportions 119</p> <p>The root 2 rectangle 119</p> <p>The 2:3 rectangle 120</p> <p>The 3:4 rectangle 121</p> <p>Proportions in Our World 121</p> <p>Music and dance 122</p> <p>Nature 123</p> <p>Computers and mobile devices 125</p> <p>Proportions at Work 126</p> <p>Knowledge Applied 132</p> <p><b>Chapter 6 Holding the Eye: Composition and Design Principles 133</b></p> <p>Compositional Relationships 134</p> <p>Reading direction 135</p> <p>Guiding the eye with composition 136</p> <p>Renaissance sculpture 137</p> <p>Impressionist paintings 139</p> <p>Web design 140</p> <p>Foreground/background relationships 141</p> <p>In Seurat’s painting 142</p> <p>In interface and web design 143</p> <p>Design Principles 144</p> <p>Dominance 144</p> <p>Similarity 146</p> <p>Rhythm 148</p> <p>Texture 150</p> <p>Direction 151</p> <p>Contrast 156</p> <p>Why the MailChimp Logo Is Beautiful: Use of Composition and Design Principles 157</p> <p>Foreground/background relationships 159</p> <p>Dominance 160</p> <p>Similarity 160</p> <p>Rhythm 162</p> <p>Texture 163</p> <p>Direction 163</p> <p>Contrast 163</p> <p>Knowledge Applied 165</p> <p><b>Chapter 7 Enlivening Information: Establishing a Visual Hierarchy 167</b></p> <p>What I Mean by “Hierarchy” 168</p> <p>Hierarchy is expressive 170</p> <p>Many visual factors can affect hierarchy 170</p> <p>Hierarchical Factors in Isolation 171</p> <p>White space 172</p> <p>Using a grid to manage white space 172</p> <p>Establishing a hierarchy with white space 173</p> <p>Knowing how much white space to use 175</p> <p>Considering white space and italic font style 175</p> <p>Using a four-column grid 176</p> <p>Type weight and size 177</p> <p>Type weight 177</p> <p>Type size 179</p> <p>Combining weight and size 181</p> <p>Color 181</p> <p>Visual ornamentation 182</p> <p>Hierarchy at Work 187</p> <p>Knowledge Applied 190</p> <p><b>Part IV: Color</b></p> <p><b>Chapter 8 Color Science 195</b></p> <p>What Is Color? 197</p> <p>The Tricks Your Eyes Play 198</p> <p>Metamerism 199</p> <p>Color constancy 199</p> <p>Afterimages 200</p> <p>How the Visual System Works 201</p> <p>Cones 201</p> <p>Trichromatic theory and color opponent theory 202</p> <p>Mixing of dominant wavelengths and the color wheel 204</p> <p>Colorblindness 205</p> <p>Defining Color 207</p> <p>Munsell 208</p> <p>Hue, saturation, and brightness 209</p> <p>Lab color model 210</p> <p>Color Models and Data-Driven Graphics 211</p> <p>Color and qualitative data 211</p> <p>Color and quantitative data 212</p> <p>Sequential versus diverging color palettes 216</p> <p>Thinking in Hexadecimal Color: Understanding the Colors of the Web 217</p> <p>Understanding RGB 218</p> <p>How hexadecimal represents RGB 220</p> <p>Mentally navigating the hexadecimal “cube” 221</p> <p>The future: HSL 224</p> <p>Color Models in Action: Why Your Business Card Doesn’t (and Never Will) Match Your Website 225</p> <p>RGB displays versus CMYK color printing 226</p> <p>Color gamuts 227</p> <p>Working across media and managing color 229</p> <p>Adobe RGB versus sRGB 230</p> <p>“Proofing” and previewing color shifts 231</p> <p>Printing with spot colors 232</p> <p>Knowledge Applied 233</p> <p><b>Chapter 9 Color Theory 235</b></p> <p>Color Response throughout Human History 237</p> <p>Color Response and Human Biology 237</p> <p>The Power of Red: Why You Don’t Stand a Chance in the “Target Challenge” 238</p> <p>The effect of red on your brain 239</p> <p>The prefrontal cortex and rational thought 239</p> <p>The attack on your prefrontal cortex 240</p> <p>The prefrontal cortex and decision-making 241</p> <p>Color and context 243</p> <p>What this means to you 244</p> <p>Research on Other Colors 245</p> <p>Color and Culture 246</p> <p>Color Schemes and the Color Wheel 247</p> <p>Color Choices and Web Conventions 249</p> <p>Backgrounds 249</p> <p>White 249</p> <p>Off-white 250</p> <p>Dark 250</p> <p>Bright 250</p> <p>Graphics and text 251</p> <p>Green 252</p> <p>Yellow 252</p> <p>Red 253</p> <p>Blue 254</p> <p>Accent colors 254</p> <p>The Interaction of Colors: Why Monet Never Used Black 255</p> <p>The Impressionists: Masters of color 256</p> <p>Color theory: What the Impressionists discovered 256</p> <p>Warm colors pop, cool colors recede 257</p> <p>Tints pop, shades recede 257</p> <p>The importance of context 258</p> <p>Temperature versus tint 258</p> <p>How Monet used color 260</p> <p>Using color like Monet 262</p> <p>Enriching your typography 262</p> <p>Adding life to your graphics 263</p> <p>Color Schemes 264</p> <p>Monochromatic 265</p> <p>Analogous 267</p> <p>Complementary 269</p> <p>Split-complementary 271</p> <p>Triadic 274</p> <p>Tetradic 276</p> <p>Variations 276</p> <p>Creating a Mood with Color 280</p> <p>Mysterious or exclusive 280</p> <p>Active 280</p> <p>Muted 283</p> <p>Natural 284</p> <p>Tools for Creating Color Palettes and Schemes 285</p> <p>Knowledge Applied 287</p> <p><b>Part V: Appendixes</b></p> <p><b>Appendix A Choosing and Pairing Fonts 291</b></p> <p>Classifying Typefaces 293</p> <p>Serif typefaces 294</p> <p>Old style 294</p> <p>Transitional 294</p> <p>Modern 295</p> <p>Slab-serif 295</p> <p>Sans-serif typefaces 296</p> <p>Display typefaces 296</p> <p>Looking At Letter Structure: The Form of the Skeleton 297</p> <p>Humanist typefaces 297</p> <p>Geometric typefaces 298</p> <p>Realist typefaces 298</p> <p>Pairing Fonts 298</p> <p>The rule 299</p> <p>The exception to the rule 299</p> <p>Why certain fonts pair well 301</p> <p>Texture 301</p> <p>Character width 304</p> <p>The ultimate cheat: Staying faithful to a typographer 306</p> <p>All the Fonts You’ll Ever Need 307</p> <p><b>Appendix B Typographic Etiquette 311</b></p> <p>Distorting Type: What Not to Do 313</p> <p>Fake bold 313</p> <p>Fake italic 314</p> <p>Fake small caps 314</p> <p>Stretching type 317</p> <p>Outlining type 317</p> <p>Type and images or textures 318</p> <p>Setting Body Copy 319</p> <p>Indicating a change in paragraphs 319</p> <p>Avoiding justified type 321</p> <p>Avoiding widows and orphans 322</p> <p>Tending to Typographic Details 323</p> <p>Not all quotes are created equal 323</p> <p>Using dashes dashingly 324</p> <p>One space after a period, not two 324</p> <p>Ligatures bring letters together 325</p> <p>Index 329</p>
<b>David Kadavy</b> is a user interface designer whose clients include Silicon Valley startups such as oDesk, UserVoice, and PBworks. He led the design departments at two Silicon Valley startups and an architecture firm, taught a college course in typography, and studied ancient typography in Rome. David blogs about design at <b>kadavy.net</b>, and his Twitter handle is <b>@kadavy</b>.
"If you want to learn to create great design yourself...there simply is no way to do so with lists of rules. Instead, I want to provide you with a new set of eyes through which you can see the world anew."---<b>DAVID KADAVY</b> <p><b>WHY DID MONET NEVER USE THE COLOR BLACK IN HIS PAINTINGS?</b></p> <p><b>WHY IS THE GOLDEN RATIO NOT ALL IT'S CRACKED UP TO BE?</b></p> <p><b>WHY IS COMIC SANS SUCH A HATED FONT?</b></p> <p>It's amazing what you can learn about great web design by asking questions like these. Award-winning designer David Kadavy uses this "reverse-engineering" process in <i>Design for Hackers</i> to deconstruct classical design principles and techniques from web designers. Using an eclectic array of reverse-engineered examples, ranging from Twitter's latest redesign, to Target's red shopping carts, and ancient graffiti from the walls of Pompeii, he explains:</p> <ul> <li><b>COLOR THEORY:</b> How can you enliven your designs by understanding how colors interact?</li> <li><b>PROPORTION AND GEOMETRY:</b> How can you establish a grid that is suitable for the device on which your design will be displayed?</li> <li><b>SIZE AND SCALE</b>: How can you create clean design just by choosing the right type sizes?</li> <li><b>WHITE SPACE:</b> How can you use it elegantly to communicate clearly?</li> <li><b>COMPOSITION AND DESIGN PRINCIPLES:</b> How can you use them to make your designs more compelling?</li> <li><b>TYPOGRAPHIC ETIQUETTE:</b> What tiny typographic details can make a huge difference in what you're communicating?</li> </ul>

Diese Produkte könnten Sie auch interessieren:

Netzkulturen
Netzkulturen
von: Josef Bairlein, Christopher Balme, Wolf-Dieter Ernst
PDF ebook
CHF 32.80
Mixed-Signal Layout Generation Concepts
Mixed-Signal Layout Generation Concepts
von: Chieh Lin, Arthur H.M. van Roermund, Domine Leenaerts
PDF ebook
CHF 118.00
System-Level Design Techniques for Energy-Efficient Embedded Systems
System-Level Design Techniques for Energy-Efficient Embedded Systems
von: Marcus T. Schmitz, Bashir M. Al-Hashimi, Petru Eles
PDF ebook
CHF 118.00