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.

1. Designing Systems
   Create design systems, not pages
2. Atomic Design Methodology Atoms, molecules, organisms, templates, and pages
3. Tools of the Trade Pattern Lab and the qualities of effective style guides
4. The Atomic Workflow People, process, and making design systems happen
5. Maintaining Design Systems Making design systems stand the test of time

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.

A product’s capacity to implement UI customer feedback is more important than a product’s initial UI, yet we tend to focus far too much on the latter with heavy design up front. Small components and low-level reusability are key in UIs that are easy to change.

Keeping technical debt low allows you to make the changes your customers need you to make. Speed is a function of technical debt.

An MVP is enough of a feature that can tell me:

• Does this have enough customer value to continue investing in?
• What about the technical implementation needs to be improved if we want to scale this feature?
• Does this feature make a dent in our key goals, or is it a distraction?

These questions cannot be answered without shipping something to production. I could plan and strategize for months on end and get no closer to answering them. They have to be in production in front of users, and “release one” is rarely ever the final state.

“UI design starts with words.”

(via How Do You Design Interaction? | Smashing Magazine )

(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.

(via Dan Counsell – Prompting for app reviews )

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

This year too, we’ve selected some fantastic apps in our list of The Highlight — UI Animations .

See also for 2012 .

• 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 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 )

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.

Read More

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 )

(…) 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.