design

Atomic Design by Brad Frost Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team’s design and development workflow. Designing Systems Create design systems, not pages Atomic Design Methodology Atoms, molecules, organisms, templates, and pages Tools of the Trade Pattern Lab and the qualities of effective style guides The Atomic Workflow People, process, and making design systems happen Maintaining Design Systems Making design systems stand the test of time

Catalog of Refactoring Refactoring.Guru makes it easy for you to discover everything you need to know about refactoring, design patterns, SOLID principles, and other smart programming topics. See also: The Catalog of Refactoring The Catalog of Design Patterns

Site Structure | Web Style Guide 3 The success of the organization of your web site will be determined largely by how well your site’s information architecture matches your users’ expectations. A logical, consistently named site organization allows users to make successful predictions about where to find things. Figure 3.2 — Examples of the “Goldilocks problem” in getting the site structure “just right.” Too shallow a structure (left) forces menus to become too long....

Good design, much like anything, starts with understanding the basics. Applying the following design principles will help you avoid design disasters and allow you to communicate your key theme. You’ll find that it’s rare to see only one principle being used at a time as they all work in conjunction with each other. Alignment Repetition Contrast Proximity Balance Source: The 5 Basic Principles Of Design – Maddison Designs

{width=“598” height=“337” srcset=“tumblr_nk2ojojvBA1qz82meo1_1280.jpg 598w, tumblr_nk2ojojvBA1qz82meo1_1280-300x169.jpg 300w” sizes="(max-width: 598px) 100vw, 598px"} Nice illustration of the writing process, or any other creative/development endeavor, for that matter. Original Tweet: I love this illustration of this writing process. From Nicely Said book. pic.twitter.com/w5ccIVsrNX — ★ Sean Johnson (@seanuk) February 20, 2015 TODO: Link to the book source?

7 Rules for Creating Gorgeous UI The Rules: Light comes from the sky Black and white first Double your whitespace Learn the methods of overlaying text on images (see Part 2 ) Make text pop— and un-pop (see Part 2 ) Only use good fonts (see Part 2 ) Steal like an artist (see Part 2 )

With practice, this new mental map of color will become instinctive: you’ll likely find that it is much easier to create and manipulate color specified in HSL in your stylesheet code than hex or RGB. See also Three Ways You Should Be Using HSL Color In Your Site Today.

(via iPhone 6 Screens Demystified | PaintCode ) See also The Curious Case of iPhone 6+ 1080p Display

Not all technical debt is born the same, because A Mess is not a Technical Debt . (via TechnicalDebtQuadrant )

Foundation | The Most Advanced Responsive Front-end Framework from ZURB Responsive design gets a whole lot faster for users. It’s now crazy fast for designers and engineers to code and learn too.