skip to main content

Posts tagged “design”

  1. The imitation game
    adactio.com

    Jeremy Keith:

    Jason shared some thoughts on designing progressive web apps. One of the things he’s pondering is how much you should try make your web-based offering look and feel like a native app.

    This was prompted by an article by Owen Campbell-Moore over on Ev’s blog called Designing Great UIs for Progressive Web Apps. He begins with this advice:

    Start by forgetting everything you know about conventional web design, and instead imagine you’re actually designing a native app.

    This makes me squirm. I mean, I’m all for borrowing good ideas from other media—native apps, TV, print—but I don’t think that inspiration should mean imitation. For me, that always results in an interface that sits in a kind of uncanny valley of being almost—but not quite—like the thing it’s imitating.

    People have been gleefully passing around the statistic that the average number of native apps installed per month is zero. So how exactly will we measure the success of progressive web apps against native apps …when the average number of progressive web apps installed per month is zero?

  2. The Myth of the Pixel Perfect Grid
    shkspr.mobi

    Terence Eden explains how different screen technologies, human biology, and fingerprint grease make “pixel perfection” a pointless goal:

    There is no grid. There never has been. You can align to theoretical pixels - but as soon as the image hits a physical screen, it will be adjusted to best fit reality.

    An obsession with pixel perfect rendering is futile.

    Every Layout expands on this idea, specifically as it pertains to CSS:

    Suffice it to say that, while screens are indeed made up of pixels, pixels are not regular, immutable, or constant. A 400px box viewed by a user browsing zoomed in is simply not 400px in CSS pixels. It may not have been 400px in device pixels even before they activated zoom.

    See also: Ian Mallett’s Subpixel Zoo: A Catalog of Subpixel Geometry.

  3. Styling Links with Real Underlines
    css-tricks.com

    Ollie Williams welcomes the new CSS properties for styling underlines:

    Finally we can demarcate links without sacrificing style thanks to two new CSS properties.

    • text-underline-offset controls the position of the underline.
    • text-decoration-thickness controls the thickness of underlines, as well as overlines, and line-throughs.

    I’ve been working on a blog post about this topic, and Ollie does a good job of covering some of the points I want to make. But I want to go further and explore implementation quirks, the details where the new properties don’t quite go far enough, and make a case for why underlines shouldn’t be pixel-aligned.

  4. Lucas Pope on the challenge of creating Obra Dinn’s 1-bit aesthetic
    pcgamer.com

    PC Gamer’s Steven T. Wright interviews Lucas Pope on the process of creating Return of the Obra Dinn:

    “When you’re developing a game as one person, you have a lot of advantages and a lot of disadvantages,” he says. “One of the advantages is that you can afford to make a game for two years without even really knowing what it is, which is exactly what I did. One of the disadvantages is that you have to do something different visually to stand out. This means I have to solve all sorts of problems that nobody else has solved, at least recently. But I think that can be fun in its own right.”

    The game’s development seems to have been more of a process of discovery and improvisation than one of decisive creativity. That explains a lot.

  5. Ooops, I guess we’re full-stack developers now.
    full-stack.netlify.com

    Chris Coyier’s latest talk puts all the complexity of modern front-end development in perspective:

    All the very huge responsibilities front-end developers already have:

    • Pulling of the design
    • Making the design part of a system
    • Making sure it is accessible
    • Worrying about the performance
    • Testing things across browsers
    • Testing things across devices
    • Sweating the UX

    Oh hello, big pile of new responsibilities

    • Component-driven design, designing our own abstractions
    • Site-level architecture
    • Routing
    • Fetching our own data
    • Talking to APIs
    • Mutating data
    • State management

    Oof.

  6. Jony Ive’s Fragmented Legacy: Unreliable, Unrepairable, Beautiful Gadgets
    ifixit.com

    Kyle Wiens makes a great point:

    [Dieter] Rams loves durable products that are environmentally friendly. That’s one of his 10 principles for good design: “Design makes an important contribution to the preservation of the environment.” But Ive has never publicly discussed the dissonance between his inspiration and Apple’s disposable, glued-together products.

    When a single broken key requires replacing a laptop’s entire top case, there is no denying that Apple has given too little consideration to the durability of its products.

    I’m extremely curious to find out how (if?) Apple’s design philosophy will change with Ive gone.

  7. Frank Chimero on causing ‘good trouble’ and re-imagining the status quo to combat achievement culture
    creativeboom.com

    Great interview. Frank Chimero is always thought-provoking:

    Everyone has their lean years, but I think they make a poor compass. You can always work more. We need to disabuse ourselves of the thought that work is the solution to our problems, or that by keeping up we are getting closer to something worth having. Being more active is not being freer. I won’t romanticise those months on peanut butter and jelly as freedom, but I can confidently say that in retrospect the problems of that time were no better or worse than the ones I’ve experienced at the peak of my successes.

  8. Relearn CSS layout: Every Layout
    every-layout.dev

    Heydon Pickering and Andy Bell have created a terrific resource for CSS layout patterns following algorithmic design principles.

    We make many of our biggest mistakes as visual designers for the web by insisting on hard coding designs. We break browsers’ layout algorithms by applying fixed positions and dimensions to our content.

    Instead, we should be deferential to the underlying algorithms that power CSS, and we should think in terms of algorithms as we extrapolate layouts based on these foundations. We need to be leveraging selector logic, harnessing flow and wrapping behavior, and using calculations to adapt layout to context.

    This approach is precisely what I’ve been striving for ever since Jen Simmons’s Intrinsic Web Design talk from last year.

  9. Drop caps & design systems
    product.voxmedia.com

    Ethan Marcotte:

    When I’m asked to describe design systems work, I say the word that springs immediately to mind is mapmaking. As designers like Matthew Ström and Alla Kholmatova have argued, every website has a design system underneath it. Take yours, for example: your website’s interface is built from a library of components, each shaped by a series of design decisions and business needs. Your design system may not be explicit—maybe you don’t have a polished pattern library, or a set of well-defined design principles, or maybe your documentation’s not as robust as you’d like it to be—but it’s still a system. And in order to improve that system, you have to research it before you can begin to gradually, slowly improve it.

  10. Underlines Are Beautiful
    adrianroselli.com

    Adrian Roselli:

    Underlines, the standard, built-in signifier of hyperlinks, the core feature of the web, are beautiful.

    This is objectively true. They are aesthetically one of the most delightful visual design elements ever created.

    They represent the ideal of a democratized information system. They are a frail monument to the worldwide reach of ideas and discourse. They are proof of our ascension from trees and swamps, a testament to our species’ intelligence, and a witness to our inevitable downfall.

    ❤️

  11. I was just reminiscing about this a few days ago. Nine years later, @lorenb’s Twitter for iPad is still unmatched. Devices are now several times more powerful, yet the experience of using Twitter on the original iPad is the best we ever got.

  12. A Website is a Car and Not a Book
    css-tricks.com

    Robin Rendle:

    Anyway, I asked Lindsay that question: what is it about web design that makes it so difficult to understand? She posited that the issue is that most people believe web design is like designing a book. Heck, we still call these things web pages. But Lindsay argued that building a modern website is nothing like designing a book; it’s more like designing a car.

  13. How the Web Became Unreadable
    wired.com

    Kevin Marks:

    There’s a widespread movement in design circles to reduce the contrast between text and background, making type harder to read. Apple is guilty. Google is, too. So is Twitter.

    My plea to designers and software engineers: Ignore the fads and go back to the typographic principles of print — keep your type black, and vary weight and font instead of grayness. You’ll be making things better for people who read on smaller, dimmer screens, even if their eyes aren’t aging like mine. It may not be trendy, but it’s time to consider who is being left out by the web’s aesthetic.