Ask HN: How much time and money does it take to develop this website?
I recently saw a website (https://atelier.net/social-mobility/a-promise-broken/) that uses Explorables to show data and text. It looks like it takes a lot of time and effort to create. I'm not sure if there are tools now that can help make these kinds of pages quickly, or if it's still done the old way, where designers first create the user experience (UE) and user interface (UI), and then hand it over to front-end and back-end engineers to develop.
6 comments
If you want to answer this question build an unpolished clone. Usually the people who ask these questions are people that can’t build things themselves.
I have built a lot of projects maybe not as impressive as this one. I want to know this new tech so I ask the community for help.
> and then hand it over to
Most certainly not. It was never done that way. If you want to get such a page done well, designers and engineers have to work back and forth with some coordination.
In fact, the question about "how much time" it takes can't have a definitive answer unless you ask the people who made it. And if you do, that answer will probably only be valid for that page, not for "these kinds of pages".
The thing is most of the time is spent in two places:
1. Precisely that "back and forth" between design and development, where things can go from "this has to be done this way and it has to work perfectly" on one side and "that can't be done" on the other side, to "let's both compromise and find a way to make it work". Depending on where the team is in that spectrum, it will take more or less time.
2. Revisions. This can include pure technical revisions of how well it works -and the effort taken to actually make it work right-. But also any revision from anyone involved: writers, designers, managers, etc. The more people involved, the more revisions. And usually the more changes and adjustments needed.
As for money, well, this is a large bank's "data intelligence" subsidiary. They work with "countries, corporations and investors". And their work is precisely this. They analyse data and produce digestible reports as their main business. So they probably have the money to have a large enough team and this counts as marketing/advertising anyway.
---
But if you're asking from a merely technical standpoint... I would say it's mostly custom-made. Some of it, particularly the graphs, can probably use some libraries to some extent. Like the "Life events" graph, where the graph itself is from visx [0], but it is then wrapped to coordinate it with the rest of the "Life events" elements which are clearly custom built. The first graphs (GDP/profit/income and sentiment over time) are visx/XYCharts too, but are simpler and didn't require much customization.
Besides that, the page uses a bunch of libraries for most of the work underneath. Besides visx, it uses D3, twgl, various motion/animation libraries, and a few more utilities. If you're thinking about a "design tool" like a sort of Photoshop or something off the shelf... No, most probably not in this case. Maybe, since this is something they do regularly and if they are smart, they will have some in-house tools to help with particular effects/components, but that's about it.
[0] https://airbnb.io/visx/xychart
Most certainly not. It was never done that way. If you want to get such a page done well, designers and engineers have to work back and forth with some coordination.
In fact, the question about "how much time" it takes can't have a definitive answer unless you ask the people who made it. And if you do, that answer will probably only be valid for that page, not for "these kinds of pages".
The thing is most of the time is spent in two places:
1. Precisely that "back and forth" between design and development, where things can go from "this has to be done this way and it has to work perfectly" on one side and "that can't be done" on the other side, to "let's both compromise and find a way to make it work". Depending on where the team is in that spectrum, it will take more or less time.
2. Revisions. This can include pure technical revisions of how well it works -and the effort taken to actually make it work right-. But also any revision from anyone involved: writers, designers, managers, etc. The more people involved, the more revisions. And usually the more changes and adjustments needed.
As for money, well, this is a large bank's "data intelligence" subsidiary. They work with "countries, corporations and investors". And their work is precisely this. They analyse data and produce digestible reports as their main business. So they probably have the money to have a large enough team and this counts as marketing/advertising anyway.
---
But if you're asking from a merely technical standpoint... I would say it's mostly custom-made. Some of it, particularly the graphs, can probably use some libraries to some extent. Like the "Life events" graph, where the graph itself is from visx [0], but it is then wrapped to coordinate it with the rest of the "Life events" elements which are clearly custom built. The first graphs (GDP/profit/income and sentiment over time) are visx/XYCharts too, but are simpler and didn't require much customization.
Besides that, the page uses a bunch of libraries for most of the work underneath. Besides visx, it uses D3, twgl, various motion/animation libraries, and a few more utilities. If you're thinking about a "design tool" like a sort of Photoshop or something off the shelf... No, most probably not in this case. Maybe, since this is something they do regularly and if they are smart, they will have some in-house tools to help with particular effects/components, but that's about it.
[0] https://airbnb.io/visx/xychart
Thank you for sharing. I also think that this type of website takes a lot of time to create customized features. It might be similar to the infographics I've been learning about recently. There aren't really any good frameworks or tools that make development easier.
Not "tools" in that sense, but libraries -e.g. D3- do make development of this substantially easier.
Hofstadter's law.
https://en.m.wikipedia.org/wiki/Hofstadter's_law
https://en.m.wikipedia.org/wiki/Hofstadter's_law