ui

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

Backlog size is inversely proportional to how often you talk to customers As with anything, these are not absolute truths but born out of my experience. Replace planning time with talking to customers Reduce time spent on UI design; focus on technical component design instead How you think people use your app is different than how they use it Implement account spoofing Page one real estate is critical to a seamless experience Your customer is your most important marketer MVPs are pointless if you’re not going to iterate on them There is no point to having a large backlog because the bigger the backlog, the higher the unvalidated assumptions, and the lower the chance that it creates any customer value. ...

“UI design starts with words.” (via How Do You Design Interaction? | Smashing Magazine )

Compare and contrast different design artefacts (sketch, wireframe, mockup, and prototype) in terms of their fidelity, speed, cost and use cases.

(via Why It’s Important to Sketch Before You Wireframe – UX Movement ) Where by “Code” you should really read “Prototype”.

At Realmac we went this route with Ember, but we built in a slight twist. We try and guide the customer so they can get help or make a feature request rather than leaving a review on the App Store that we can’t respond to. If they are unhappy or confused we want to know about it and help them, if they are happy they can let us know and perhaps more importantly leave a review. ...

Origins of Common UI Symbols They are road signs for your daily rituals — the instantly recognized symbols and icons you press, click and ogle countless times a day when you interact with your computer. But how much do you know about their origins? Power Command Bluetooth USB Play Pause Sleep At FireWire SBBOD (spinning beach ball of death) Ethernet See also The Secret Histories of Those @#$%ing Computer Symbols | Wired.com

The Highlight — Best of 2013: UI Animations — Beautiful Pixels This year too, we’ve selected some fantastic apps in our list of The Highlight — UI Animations . See also for 2012 .

The User is Drunk (by squareweave ) Blurry vision Attention-poor (Guide them) Say it twice Emotional (Do over the shoulder testing) Drunk, not dumb ( Source: https://www.youtube.com/ )

This tool was born from the daily toil of finding sample avatars for UI mockups (via User Inter Faces )

CAPPTIVATE.co Capptivate.co captures fleeting transitions between app screens and delightful animated UI elements that we’ll otherwise lose forever as apps and operating systems continue to evolve. Categories: Basic Motion Fade Grow or Shrink Motion Path Move or Slide Point At Spin or Rotate Camera Focus or Blur Frame Parallax Rotate Around or Sweep Zoom Simulations Align to Motion Attract or Repel Bounce Collide Ease Drift Gravity Orbit Around Spring Vortex

Why hollow icons are more work for your users and ultimately create cognitive fatigue. (via Hollow Icons — Design/UX — Medium )

layervault: I’m very excited to talk about a technique that we’ve started using at LayerVault. We call it Progressive Reduction. (…) How does one guide a new user from on-boarding, to low proficiency, to high proficiency? With progressive reduction, the UI adapts to the user’s proficiency. (…) Your proficiency in a product will decay over time without usage. As such, the proficiency reflected in the UI decays over time. Essentially, your UI regresses without usage. ...

A Good User Interface has high conversion rates and is easy to use . In other words, it’s nice to both the business side as well as the people using it. Here is a running list of practical ideas to try out. (via GoodUI )

Starters Guide to iOS Design (…) I find that many designers struggle with the transition to UI work, or with the different processes involved in iPhone and iPad app design. In this guide I’ll describe the deliverables you’ll be expected to produce, outline the constraints of the medium and introduce fundamental iOS and UI design concepts.