5 ms·

I always love seeing tricks like this from designers but then I never see anything this cool on the web otherwise. Where do all these great designers work and w

by 63 4y ago

I always love seeing tricks like this from designers but then I never see anything this cool on the web otherwise. Where do all these great designers work and why don't I ever get to see the products they make?

hot_gril 4y ago
This is a beautifully done blog. The author works at Square, according to his info page: https://codersblock.com/about/ https://codersblock.com/about/
gfat 4y ago
https://medium.com/bridge-collection/3d1b0a9b810e https://medium.com/bridge-collection/3d1b0a9b810e Stripe using animations back in 2014.
nicbou 4y ago
If you browse Awwward-winning websites, you quickly realise that they are annoying to browse. Most of the time, I'm just trying to read text and get an answer. Everything that is not text, formatting or typography gets in the way.
- TuringTest 4y ago
  You can have exquisite presentation with good choices of text, formatting and typography (including judicious use of colour, spacing and even animation and textures). A luxury printed book full of beautiful details will feel much better than a cheap paperback. The best techniques can be applied in subtle ways to improve the overall presentation, without resorting to flashy showcases.
  - nicbou 4y ago
    I agree with you. I'd love to see good examples of that, because I struggle to create that sort of websites. For example, how would you redesign the Python docs to feel like a beautifully typeset book does?
    - TuringTest 4y ago
      Information can be beautiful on its own, if you follow some common patterns about contrast, clustering and hierarchy. These are based on the principles of Gestalt [1] which engineers can learn without having artsy skills by watching books and courses specific for us, e.g. [2]. Do you know about Edward Tufte? His work doesn't revolves specifically about software, but his principles show how to present technical information in the clearest way, and his books [3] are beautiful examples on how to put a technical topic in book form with clean and beautiful layouts. [1] https://www.interaction-design.org/literature/topics/gestalt-principles https://www.interaction-design.org/literature/topics/gestalt... [2] https://medium.com/bigcommerce-developer-blog/design-for-developers-the-principles-of-visual-design-672f1fc1fc64 https://medium.com/bigcommerce-developer-blog/design-for-dev... [3] https://www.edwardtufte.com/tufte/books_vdqi https://www.edwardtufte.com/tufte/books_vdqi
    - kccqzy 4y ago
      A lot of Python docs are in fact pretty well designed to resemble a book without completely breaking the fluidity of the web page. They use serif fonts, apply font weights and colors subtly. In fact I think they strike the right balance between just being a regular webpage and completely succumbing to the constraints of the book as media. https://flask.palletsprojects.com/en/2.2.x/ https://flask.palletsprojects.com/en/2.2.x/
dmitriid 4y ago
Because these animations only work in rigidly specified isolated static objects. Because god forbid any animation touches layout. Well, many of those animations like opacity changes and border animations undoubtedly force the browser to re-layout and repaint the entire screen anyway. So on an actual page you'll se stutters, frame drops and ungodly CPU usage. The only animations that will (barely) work is the `transform: translate` ones as they usually preserve the layout, and can be composited on the GPU.
- sibit 4y ago
  > Well, many of those animations like opacity changes [...] undoubtedly force the browser to re-layout and repaint the entire screen anyway. Depends on the rendering engine. With Blink opacity, filter, and transform will skip past layout and paint after the first render. Chrome Dev Summit 2018: https://youtu.be/AB9qSUhlxh8?t=754 https://youtu.be/AB9qSUhlxh8?t=754
  - dmitriid 4y ago
    > With Blink opacity, filter, and transform will skip past layout and paint after the first render. Thanks! Didn't realize opacity was mostly fixed. In my head it as still very problematic because I know that opacity changes are very frowned upon by device manufacturers (like smart TVs). The reasons are actually mentioned in the video: - they "don't trigger layout and can often bypass paint" (so paint isn't always bypassed) - "compositing is not free. If you are on resource constrained devices, you really need to watch your composited layer count" The vast majority of devices in the world out there are resource constrained: cheap smartphones are ubiquitous. But then there's also things like smart TVs etc. Hence my reaction to opacity changes :)
thatguy0900 4y ago
Half of these don't work on safari even in a isolated demo. Compatability is probably a big reason
circustaco 4y ago
What do you think of The Pudding (https://pudding.cool/ https://pudding.cool/)? They make beautiful “visual essays”. Unlike some fanciful animated sites, I feel like The Pudding’s design and animation complement the text to make the result ‘greater than the sum of its parts.

by 63 4y ago

hot_gril 4y ago

This is a beautifully done blog. The author works at Square, according to his info page: https://codersblock.com/about/ https://codersblock.com/about/

gfat 4y ago

https://medium.com/bridge-collection/3d1b0a9b810e https://medium.com/bridge-collection/3d1b0a9b810e Stripe using animations back in 2014.

nicbou 4y ago

If you browse Awwward-winning websites, you quickly realise that they are annoying to browse. Most of the time, I'm just trying to read text and get an answer. Everything that is not text, formatting or typography gets in the way.

TuringTest 4y ago
You can have exquisite presentation with good choices of text, formatting and typography (including judicious use of colour, spacing and even animation and textures). A luxury printed book full of beautiful details will feel much better than a cheap paperback. The best techniques can be applied in subtle ways to improve the overall presentation, without resorting to flashy showcases.
- nicbou 4y ago
  I agree with you. I'd love to see good examples of that, because I struggle to create that sort of websites. For example, how would you redesign the Python docs to feel like a beautifully typeset book does?
  - TuringTest 4y ago
    Information can be beautiful on its own, if you follow some common patterns about contrast, clustering and hierarchy. These are based on the principles of Gestalt [1] which engineers can learn without having artsy skills by watching books and courses specific for us, e.g. [2]. Do you know about Edward Tufte? His work doesn't revolves specifically about software, but his principles show how to present technical information in the clearest way, and his books [3] are beautiful examples on how to put a technical topic in book form with clean and beautiful layouts. [1] https://www.interaction-design.org/literature/topics/gestalt-principles https://www.interaction-design.org/literature/topics/gestalt... [2] https://medium.com/bigcommerce-developer-blog/design-for-developers-the-principles-of-visual-design-672f1fc1fc64 https://medium.com/bigcommerce-developer-blog/design-for-dev... [3] https://www.edwardtufte.com/tufte/books_vdqi https://www.edwardtufte.com/tufte/books_vdqi
  - kccqzy 4y ago
    A lot of Python docs are in fact pretty well designed to resemble a book without completely breaking the fluidity of the web page. They use serif fonts, apply font weights and colors subtly. In fact I think they strike the right balance between just being a regular webpage and completely succumbing to the constraints of the book as media. https://flask.palletsprojects.com/en/2.2.x/ https://flask.palletsprojects.com/en/2.2.x/

dmitriid 4y ago

Because these animations only work in rigidly specified isolated static objects. Because god forbid any animation touches layout. Well, many of those animations like opacity changes and border animations undoubtedly force the browser to re-layout and repaint the entire screen anyway. So on an actual page you'll se stutters, frame drops and ungodly CPU usage. The only animations that will (barely) work is the `transform: translate` ones as they usually preserve the layout, and can be composited on the GPU.

sibit 4y ago
> Well, many of those animations like opacity changes [...] undoubtedly force the browser to re-layout and repaint the entire screen anyway. Depends on the rendering engine. With Blink opacity, filter, and transform will skip past layout and paint after the first render. Chrome Dev Summit 2018: https://youtu.be/AB9qSUhlxh8?t=754 https://youtu.be/AB9qSUhlxh8?t=754
- dmitriid 4y ago
  > With Blink opacity, filter, and transform will skip past layout and paint after the first render. Thanks! Didn't realize opacity was mostly fixed. In my head it as still very problematic because I know that opacity changes are very frowned upon by device manufacturers (like smart TVs). The reasons are actually mentioned in the video: - they "don't trigger layout and can often bypass paint" (so paint isn't always bypassed) - "compositing is not free. If you are on resource constrained devices, you really need to watch your composited layer count" The vast majority of devices in the world out there are resource constrained: cheap smartphones are ubiquitous. But then there's also things like smart TVs etc. Hence my reaction to opacity changes :)

thatguy0900 4y ago

Half of these don't work on safari even in a isolated demo. Compatability is probably a big reason

circustaco 4y ago

What do you think of The Pudding (https://pudding.cool/ https://pudding.cool/)? They make beautiful “visual essays”. Unlike some fanciful animated sites, I feel like The Pudding’s design and animation complement the text to make the result ‘greater than the sum of its parts.