Pixels of the Week – June 23, 2019
Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…
This week’s selection: accessibility and typography, signs of low UX maturity, some inspirational UX cards, responsive menus, form required fields, mobile prototyping tool, CSS tables, a satire of the <toast> new HTML element, UI frameworks and user experience, the state of CSS 2019, mobile UX and illustrations, cognitive biases, conducting usability testing, etc.
You can follow me on twitter to get a dose of links every days.
I gave some talks
#UX #UI #Frameworks
Pretty, but not Usable – the slides and video of my talk at @cssdayconf I share my experience and process, some design/dev relations tips to help people build a user centric product while working with a UI framework.
The slides of our UX in Lux workshop on User Journey Maps are also online.
TL;DNR the one you should not miss
- base font size in relative units
- colour & contrast
- legible fonts with “Milimeter” test (I also use the a1iIlL0o test)
- paragraphs shapes, line length and line height
- semantics & heading levels for hierarchy
- Envisioning future user journeys: Tarot Cards as a design tool Interesting tool and quite lovely cards
- 5 Signs of Low UX Maturity: 1. you need to explain visual vs interaction design, 2. usability testing is done late and on only working designs, 3.no field studies, 4. UX Designer are not invited to product meetings and 5. just 1 or 2 people are responsible for UXD
- Conducting a usability test is not something easy, here are 5 principles for more accurate user testing
- Should you mark the required fields in a form? If most fields in the form are required, should we still mark them? According to Nielsen, the short answer is yes.
- A list of 84 cognitive biases explained and how sites and app are using them in their design. I’m not saying you should use them, but it’s interesting to be aware of those.
“Using Hamburger Menus? Try Sausage Links (scrolling navigation).” Interesting concept, one of the issues for me is the uncontrolled “overflow cutting”. A French newspaper implemented this and on my mobile, Culture got cut into “Cul” (French for “Ass”)
“Introducing the new HTML element – welcome <clippy>!” a satirical look at the current state of web “standards” development and Google introducing the <toast> element.
Brad Frost and Dan Mall: Rethinking designer-developer collaboration: an interesting 50+ min podcast on design systems, agile, etc.
Inspiration, fun demos and Great ideas
This page is a truly naked, brutalist html quine, a fun idea to bring back the world weird web
News in the industry
Useful tools and plugins that will make your life easy
A11Y with Lindsey: this is a cool blog with a lot of ressources and articles on accessibility
Origami Studio, a tool to create interactive prototypes for mobile apps without the need to code. You can test them directly on Android and iOS
34 CSS Tables, An interesting list of HTML and CSS tables with code and examples, from responsive tables to pricing, periodic tables, etc.