UI Chunks E01 (Pilot): All about Buttons - 74 pages guide + Figma/Sketch Library
30 days to refund. No questions asked.
What is UI Chunks?
UI Chunks is a complete source of UI design knowledge, organized in easy-to-learn chunks which refers to the structure of the top notch design systems. It's full of practical tips and good practices, but it keeps a general nature, not limited to a subjective point of view.
Each of the chunks presents anatomy, classification and usage guidelines with richly illustrated examples and Figma/Sketch files to make the theory proven in practice. It stays pleasing to the eye.
For who?
- UI/UX Designers — for beginners to build solid foundations from scratch or advanced designers to structure and extend existing, intuitive knowledge about components and design systems
- Product teams — it could be helpful to work out common understanding when scalable products are to be designed
- Frontend developers — for those who wants to dive into the designers approach of components building to create the pixel-perfect apps
What problem does it solve?
UI Design knowledge is still very scattered and demands multidisciplinary skills. "The chunking" approach lets you organize it — step by step, with understanding and consciousness. You won't need to study hundreds of Medium articles anymore to find the answer (if you're lucky).
With the UI Chunks you'll be ready to design any UI component to create your very own UI kit or a design system. You will see components through long-standing design practitioners eyes.
Basically, if you want to learn or improve your UI design skills by technical approach the UI Chunks is for you.
E01: Buttons
The very first chunk is available now — All about buttons. No bullshit content.
We explored UI buttons from the ground up. Get this ultimate buttons guide for a coffee price. Boost your design skills in no time. Be ready for the design system era.
What's inside:
- End-to-end source of UI buttons knowledge to make you understand how to design and use buttons properly.
- Read about anatomy thru classification, to the button language and usage
- Learn how to build your very own button library in Figma or Sketch
Ebook Content Table (74 pages - counted in Google Doc):
Intro
1. Button Anatomy
- Container
- Content
- Paddings and Spacings
2. Button classification and hierarchy
- Types and Variants
- Style
- Size
3. States & Behaviors
4. Usage
- Layout fitting
- Associated actions
- Ordering and Grouping
- Alignment
5. Button language
6. Accessibility
- Disturbed vision
- Cognitive issues
- Manual limitations
You will get:
- 74 illustrated a4 pages - read about anatomy thru classification, to the button language and usage (Notion)
- 2 button libraries (Sketch + Figma) - analyze and compare how a professional library is build, learn how to build your very own button library
Authors
We're presenting the result of our professional experience for a coffee price but we believe it's worth it. Put the wind in our sails. Give us a feedback to make UI Design learning better together. And more is about to come... ⛵
Andrew Mialszygrosz (Twitter)
UI/UX designer since 2007. Highly focused on web applications, design systems and design operations. He's crazy about product scalability, usability and workflow processes.
Paul Stomma
Product designer with over 10 years experience. Oriented on cross-functional skills around digital products delivery. Design systems and UX writing enthusiast.
Testimonials
– Greg Dlubacz (@gregdlubacz), Product designer
"This ebook reads very easily, as it's informative, straightforward and fluently written. Gives you a whole overview of the construction of buttons what helps to create components libraries and design systems. This book is an absolute must have for everyone working on or with design systems, UI designers, products designers and other people involved in the process of creating digital products."
– Patryk Ilnicki (@Patryk_Ilnicki), Senior UI/UX Designer, Tetrisly co-founder
"I've read and learned new things about buttons that help me be a better designer and understand how to use them with the user-centered method. Simple language, many examples, and a real-used focus will provide you with the next level of design."
- Wildan Zulfikar (@wzulfikar)
"Checked the free package and I’m hooked, so I bought the full one. Terrific!
This reminds me “Refactoring UI” book (from Adam Wathan and Steve Schoger). Both complement each other and I can say that I’ll want more of content with your writing style. I like that you talked about a11y, use arrows to explain reading path pattern, and overall the illustrations are very helpful.
Please write more of this!"
- Jakub Jaszkin
"I read the very first episode of UI Chunks series and just wanna let you know that it’s great knowledge, but stays very condensed. I have already worked on design systems and despite my personal experience in this area, in the next one, I’ll definitely use tables, rules and tips from first episode. Additional props for editing everything in Notion ❤️.
I’m waiting for the next chunks!"