Designing Adaptive Components, Beyond Responsive Breakpoints

Designing Adaptive Components, Beyond Responsive Breakpoints

Last week, I was invited to “Ask the Expert”, an online meetup where experts share their knowledge around different topics related to building the web. In this article you will find a short transcript, the slides, a video of the talk and some demos and resources for the talk. I show how I design systems of components that go beyond responsive adaptation to different screen/viewport size and can also be used in different layout and container contexts. I also try to make sure that my components work beyond the perfect “happy path perfect situation”: what happens with super long text, missing images/content for example? And how about adapting components to user needs across specific points in their journey and build truly adaptive systems?

Continue reading

Pixels of the Week – July 26, 2020

Pixels of the Week – July 26, 2020

👉 Your curated weekly Design and Front-End resources: the mental model of how men’s & women’s bodies are described in books, CSS inline-block, backdrop filter, product design, Pixar’s rules of story telling, UX research systems, accessibility and buttons, prefers-reduced-motion and vestibular disorders, github profile visit counter, some Figma tips, inclusive design for trans people, automatic captions in OBS videos, popular CSS frameworks breakpoints, a cool online escape room game, etc.

Continue reading

Pixels of the Week – July 19, 2020

Pixels of the Week – July 19, 2020

👉 Your curated weekly Design and Front-End resources: modern CSS showcase, game ethics, design teams structures, an avatar generator, the UX of videogames, accessibility resources, github readmes, intrinsic web design, a small CSS buttons library, UX education and bootcamps, UX roadmaps, UX research resources, a fun GSAP demo, SVG shape generator, 558 free SVG icons, optimizing for core web vitals, a cute site to open a window somewhere in the world, etc.

Continue reading

Pixels of the Week – July 12, 2020

Pixels of the Week – July 12, 2020

👉 Your curated weekly Design and Front-End resources: APIs to build amazing mobile web experiences, UX tools, a guide to learn UX design (articles and videos), building a User Research Plan, different types of personas, dark mode logo, CSS layouts, UX prototypes, Accessibility mistakes, design systems, 2 fun websites that bring you to old school designs and web trends 20 years ago, etc.

Continue reading

There is an app, NO, a web API for that – conference talk

There is an app, NO, a web API for that – conference talk

Last week, I was invited to speak about mobile capabilities and PWAs by the Facebook Developer Circle: Akure. I talked about unleashing the capabilities of mobile browsers and new APIs to create a truly mobile optimized experience that goes beyond responsive grid and layout adaptation. In this article you will find the slides of the talk, a link to the replay but also links to the demos I show during the talk and some resources and articles to help you bring your mobile experience to the next level.

Continue reading

Pixels of the Week – July 5, 2020

Pixels of the Week – July 5, 2020

👉 Your curated weekly Design and Front-End resources: an introduction to UX psychology, UX Debt, the whimsical web with a list of websites that spark joy, pixelart, the A-Z of AI, PWAs and the picture in picture feature, Apple Design Resources, the Norman Doors and principle of discoverability, lint HTML with CSS, better UI rules, an interesting talk on Jobs to be Done, designing selection controls (checkboxs, radio buttons, etc.), design/dev relationship, etc.

Continue reading

Pixels of the Week – June 28, 2020

Pixels of the Week – June 28, 2020

👉 Your curated weekly Design and Front-End resources:  inclusive and accessible SVG checkboxes, UCD vs empathy, what it’s really like to be a designer, Journey mapping, racial biases in machine learning, avoiding spammy notifications, CSS grid and Flexbox for components, cool canvas demo, scroll position technologies, accessibility, dark mode tutorial, a guide to all the media queries (not just the ones for responsive), the history of Cooper Black, SVG portfolio, illustrations inspirations, a nice GSAP “apps have feelings” demo, Bootstrap 5, hybrid form elements, etc.

Continue reading

Pixels of the Week – June 21, 2020

Pixels of the Week – June 21, 2020

👉 Your curated weekly Design and Front-End resources: design systems, improving user interviews, a few talks (UX navel gazing, inclusive design, psychology and decision making, design metrics, cognitive biases), CSS grid, user states we tend to forget about,  Figma resources, PWAs and what you can do with those, dark modes, cool GreenSock animations and 3D models, CSS Z-index, accessible conference tools, colors and gradients, building task flows, etc.

Continue reading

Pixels of the Week – June 14, 2020

Pixels of the Week – June 14, 2020

👉 Your curated weekly Design and Front-End resources: custom shape divider tool, user interviews cheatsheet, a MOOC on accessibility, user journey map template, how to build task flows, UI patterns exploration, typography, color tool, the “works on my machine” and lack of empathy in our community, a fun browser game, the story of the amazon “1 click button patent”, diversity in tech community, responsive CSS grid layout, CSS sticky positioning, rating scales in UX research, tips for high contrast mode, a “Bundle for Racial Justice and Equality” game bundle, a blob maker tool, a pattern generator that uses font-icons, a podcast on the complicated dimensions of Black life, etc.

Continue reading

A Cheatsheet for User Interview and Follow Ups Questions

A Cheatsheet for User Interview and Follow Ups Questions

When I prepare user interviews (or usability tests), I end up coming back to the same resources again. I decided to put them all in one single place. If you follow this blog, you know it’s also kind of my “public bookmarks of resources” and “memos”. So here we go: I put together a “cheat sheet that helps write interview and follow ups questions for user research and usability test protocols” Those are fragments of questions to should help you get started writing your own questions. I organized them in different categories depending on what type of question I want to ask. I hope it will help you in some ways. You can also download them directly as .PDF if you need to print them or want to use those offline.

Continue reading