The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs
Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel so futuristic and appealing? Can we build some of these with the web technologies we have today?
In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem.
You can see the issue below: the 32px gap between all text ends up too be more than 32px because of this:
The leading-trim properties allow controlling the spacing above and below the first and last lines of a block. It allows precise control over spacing; moreover, by relying on font metrics rather than hard-coded lengths, it allows content to be resized, rewrapped, and rendered in a variety of fonts while maintaining that spacing.
Vertical Centering of Text is explicitly mentioned in the specification of this new property. Use it as follows:
text-edge: cap alphabetic;
As Wang notes:
The example above first uses text-edge (also a new property) to tell the browser the desired edge of the text is the cap height and the alphabetic baseline. Then it uses leading-trim to trim it from both sides.
These two simple lines of CSS create a clean text box that hugs your text. This helps you achieve much more accurate spacings and create a better visual hierarchy.
It is not uncommon that I raise an accessibility or usability issue with a client’s design or implementation and am met with either “But Google does this”, or “But Apple does this.” Mostly it is the default response to any issue I raise, but it is far worse when it is a reaction to a genuine technical failure or problem real users have identified.
That response does not address the problem I may have raised. It avoids. It offloads responsibility. It declines to even try.
Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate and the sense of achievement by the user.
Talks about seven resources to take into account to create a correct hierarchy:
Size: The larger the element, the more it will attract attention.
Color: Bright colors stand out more than muted tones.
Proximity: Elements close to each other attract more attention than distant elements.
Alignment: Any element that separates from the alignment of the others will attract attention.
Repetition: Repeated styles give the impression that the elements are related.
Negative Space: The more space around the element, the more attention it generates.
Texture: Varied and complex textures attract more attention than flat ones.
When done well, dark themes have many benefits. They reduce eyestrain. They are easier to read in low light. And, depending on the screen, they can greatly reduce battery consumption.
However, it is difficult to create a delightful dark theme. We cannot simply reuse our colors or invert our shades. If we do, we will achieve the opposite of what we want: we will increase eyestrain and make it harder to read in low light. We may even break our information hierarchy.
The stuff mentioned should help you to create readable, balanced, and delightful “Dark Mode” themes.
At the City Intelligence unit at City Hall almost anyone can create a data visualisation. To keep everyone in line they created Data Design Guidelines:
Effective communication of evidence and data through information design and data visualisation, is obviously important to help inform policy internally, but it is also just as important to help boroughs and individual Londoners better understand their city.
With this in mind, over the past year, we have been thinking more about how we can improve the clarity, consistency and accessibility of our data visualisation output.
The guidelines, which focus principally on chart design, cover the following areas:
As seen at the most recent CSS Day. I’m quite sure this will help many developers to make their POCs/experiments visually more interesting:
Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.
We’ll be looking at some of the more common problems faced by designers and developers—from simple forms to complex data—showing what a difference a few small cosmetic changes can do to bring design to the next level.
I know many designers will shrug when seeing this, but keep in mind that it’s intended for developers to make sure their POCs and demos look “good enough”. The guidelines/changes are simple, and make a huge difference … I wish my students from back in the day had seen this video.
Arun Venkatesan takes a deep dive into the design and engineering behind the new Mac Pro:
Apple held its annual developer conference, WWDC, this week in San Jose. In the keynote, aside from a slew of developer-focused software announcements, one new hardware announcement has attracted the most attention, the 2019 Mac Pro and Pro Display XDR.