Making of Aprilzero

http://aprilzero.com/journal/making-of-aprilzero/

by vpj • 12 years ago

445 78 12 years ago

nacs• 12 years ago

Previous discussion of AprilZero (the site, not the making of): https://news.ycombinator.com/item?id=8024073

vxNsr• 12 years ago

You can actually track him hour to hour... kinda crazy that he's providing that, the site design is a little different than described I found myself clicking on things that weren't links and being sent places I didn't want to go because I'd click something that looked clickable but turned out not to be and clicking on unclickable things sends you back one step.

blueatlas• 12 years ago

This is a striking example of the amount of work and thought that goes into a design that presents rich data so clearly and cleanly. The casual visitor would likely never have an idea of what it took to build what they are looking at.

exogen• 12 years ago

Yes. It really shines a lot on the fact that those futuristic movie interfaces didn't just spring out of the computer by virtue of it being the future. And I'm not talking about the CGI folks who create those interfaces for the movie (although of course that's a lot of work, too) – I mean in the fictional movie universe, where did those UIs come from? Are we assuming that in the future, computers will be auto-generating all these sweet transitions and design details? It seems to me that it will always come about just like April Zero – through a LOT of effort, trial, and error.

tabrischen• 12 years ago

Really great write up of a well thought-out design and iteration process.

Bookmarked for future reference.

disdev• 12 years ago

Best line from the write-up: It combined three of my passions: running, photography, and getting attention.

Great design!

the_cat_kittles• 12 years ago

I love that line too- somehow being honest and upfront about something thats "taboo" to like makes it totally fine with me

dschwartz88• 12 years ago

I realize that this took a huge amount of time, so asking for an open source version of this might be asking a bit much. But, I would absolutely be willing to pay for a SaaS product, or a licensing fee for the code. It's absolutely beautiful, and as someone who does this in a gross spreadsheet, moving to something like this would be unbelievable.

carsonm• 12 years ago

Yes, package this up for me in a SaaS, teach me the lifestyle, and then please take my money.

dclowd9901• 12 years ago

That was my first thought as well. If the author's not currently working on such a product, they should absolutely get on it.

andrewcross• 12 years ago

+1 for being will to pay for a SaaS version of this.

joshdance• 12 years ago

Considering most people are casual observers 3 comments about paying for this is a positive signal. vpj should just throw up a landing page asking for money and start building. :)

vpj• 12 years ago

I am not the designer, I just shared the link.

Author: https://twitter.com/aprilzero

nilved3• 12 years ago

I realize that this took a huge amount of time, so asking for an open source version of this might be asking a bit much.

What's this to mean? Linux and gcc took much more time from many more developers. Licensing isn't a function of your investment into the project, it's a function of how the project will best benefit the world.

k-mcgrady3• 12 years ago

I would also love to pay for this. However I would not want a typical SAAS product. I don't want my data on your servers. Give me something I can install myself really easily. There are products out their which do the SAAS things and ones which I can install locally (if I setup a server, database, configure it all etc.etc.). Give me something really simple and something I can secure myself locally and you have lots of my money. I don't have much, but I will give you lots of it :)

mahyarm• 12 years ago

It's a personal dashboard start up in the making ;)

ryanmickle• 12 years ago

Turned out gorgeous, really well done, Anand.

skizm• 12 years ago

Wow, what do you do for a living that you can travel so much?

reledi• 12 years ago

You don't need a lot of money to travel.

skeletonjelly2• 12 years ago

True, but you should probably take a take a look at the above comment...

lectrick• 12 years ago

You need a bit of money to travel to Tokyo on a whim, as detailed in one of his screenshotted chats.

zhng• 12 years ago

traveling "costs" a lot. what must be given up in order to travel?

FireBeyond• 12 years ago

No, but given the ballpark for a next day first class fare SFO to Tokyo is in the $10-20,000 one way range, that's not really true in this case.

radicality• 12 years ago

He also travels business/first and stays in 5* hotels (clicked something on the Explore tab). My guess is some kind of previous startup that sold well? Maybe his roommate can fill us in.

PStamatiou3• 12 years ago

Had a well paying job for several years and lots of freelancing before that, has roommates so his rent is not absurd so he can afford the great opportunity to travel a lot. :)

oumph1• 12 years ago

Does anyone know what the USB Ultrasound transducer mentioned is called?

elitrium• 12 years ago

Judging from the screenshot, I believe it's made by BodyMetrix:

http://www.amazon.com/BodyMetrix-Personal-Ultrasound-Body-Co...

PStamatiou3• 12 years ago

Yes that's the one he has (I'm his roommate)

dredwerker• 12 years ago

Would be nice if someone could make an arduino/pi one :) off to hackaday to have a look. $495 is a bit steep for me.

nimish• 12 years ago

Would love to know how the animations were designed and implemented--they really add the extra wow factor.

skeletonjelly2• 12 years ago

Combination of CSS3 transitions (blur, translation, glow) and d3 I think

stevofolife• 12 years ago

Amazing, I saw your website a few days ago and been studying it ever since.

basseq• 12 years ago

This is really amazing. A lot of thoughtful work went into this site, and it's great that he took the time to document the process and talk through it. Wow.

sixQuarks• 12 years ago

wow, incredible designer. What would it take to convince you to work with me?

Permit• 12 years ago

It's always impressive to see an individual with a really good eye for design and the technical chops to bring it to life alone.

Building a site as beautiful as this must have left you inundated with job offers. It's really awesome!

nilved3• 12 years ago

On Arch Linux using WebKit, this page doesn't load at all without JavaScript, and doesn't work at all with it. Can you fix the site or provide a text version?

majurg• 12 years ago

Pretty sure JS is the brunt of the visualizations, etc.

nilved3• 12 years ago

Definitely, but a well-made site will degrade gracefully. I digress though, because I'm okay with turning on JavaScript; the issue is that the page still doesn't react to scrolling.

icantthinkofone2• 12 years ago

While looking at all this, I can't help but keep asking, "Who is this guy?". I'm sure he's not some random web developer who thunk this up one day.

alphakappa• 12 years ago

Yes, where did this guy spring from? This is some great stuff!

djloche• 12 years ago

Not to diminish Anand's credibility at all - but why does he have to be anything other than some random web developer? Does everyone have to have some magical backstory to qualify to ship something great?

The primary difference between Anand and 'some random web developer' is that he actually shipped. You can join this club too.

k-mcgrady3• 12 years ago

> Does everyone have to have some magical backstory to qualify to ship something great?

I was wondering the same as the parent and not because I thought there was a 'magical backstory' but because when someone ships something this good they have usually shipped something else you know of.

josephpmay2• 12 years ago

Anand was the lead designer at Quizlet (arguably the most successful ed-tech startup)

lucaspiller• 12 years ago

Anyone know where you can get detailed blood tests like that in the UK? I'm guessing the NHS won't cough up for that every month...

k-mcgrady3• 12 years ago

I know there are certain things you can pay the NHS to do (e.g. a friend had to get a full physical signed off by the doctor to participate in boxing and had to pay £20 for it). But then again blood tests are usually pretty slow even for people who need them so they may not want people paying and taking up resources.

markgarity2• 12 years ago

Anand, you have SERIOUSLY outdone yourself on this one. I continue to aspire to attain frontend design chops as good as yours.

I remember watching Iron Man with this guy in his apartment in LA while trying to convince him to move to SF. He took meticulous sketches and notes on the UI used in the film. I look at this, especially the initial circular ui, and see the culmination of those notes with amazing use of frontend technologies and near perfect 3rd party integrations.

Well done, man. You are an inspiration to me.

icantthinkofone2• 12 years ago

So you can answer the question. Who is Anand Sharma?

markgarity2• 12 years ago

Who is John Galt?

josephpmay2• 12 years ago

not op, but Anand was previously the head of design at Quizlet (a top ed-tech startup).

smilefreak• 12 years ago

This is seriously an awesome and well executed concept.

I am working in genetics lab that studies complex disease. Many of these diseases have many environmental component and there is much interest in investigating these so-called gene-environment interactions.

Currently to investigate interactions between genes and the environment, we rely on patients to fill in questionnaires, which are problematic because people are inaccurate. Other more specific measurements are gathered with nurses taking blood, serum etc.

I wonder whether this could be deployed in anyway in medical research, using the smartphones currently on the market.

debt• 12 years ago

This definitely would provide a visual hierarchy to view all the potential interactions, though I think your problem might be more hardware-related.

I assume if you combined as many of these apps(Moves, Cardiio, Foursquare, etc.) into a single app(including peripherals like the USB ultrasound, which seems impossible right now) you could get close to a pretty accurate picture of a person's total gene interactions throughout the day. Also, the app would have to be running continuously in the background.

click170• 12 years ago

This page did not like loading on a mobile phone.

hexleo• 12 years ago

Amazing, the blog's owner is a designer? Full of modern sense. It's a good idea, combine many health apps and LBS apps data, display to user. It's done automatically?

Jonovono3• 12 years ago

Dude!! Where is your Narrative clip? http://getnarrative.com/

exacube• 12 years ago

You have to pay a subscription just to get your photos out of the clip!? I like the idea of the clip, but what a huge dealbreaker

Jonovono3• 12 years ago

hmm, as far as I know you just pay the $10 a year if you want to have your photos stored on the cloud, but if you are willing to store all them yourself you can do that. But i'll double check that!

jjsz• 12 years ago

According to the previous discussion, he used, ignoring analytics and APIs: js (coffeescript), leaflet, d3 (mercator projection), jQuery, SASS, mapbox, jquery-pjax, python (django), individual animated state transitions with css, and webkit transitions.

This is on another level. What extra resources on the side would one recommend following IDV for the Web [1], to close the gap?

[1] http://chimera.labs.oreilly.com/books/1230000000345/index.ht...

karl_gluck• 12 years ago

This is really amazing; on the desktop, the site looks fantastic and it is very interesting to browse. I learned way more about his travel history than probably necessary due to sheer interest.

That said, it is completely unusable on the phone. Not just 'it looks weird' but completely broken. I can't navigate anything or even read the article linked here. -Firefox on Nexus 5

dan1234• 12 years ago

FWIW it looks very nice in Mobile Safari, maybe there's something Firefox doesn't support right now?

Excavator2• 12 years ago

More likely the issue is due to him using a ton of -webkit-prefixes for things that have been unprefixed for years in Firefox.

https://hacks.mozilla.org/2012/07/aurora-16-is-out/

nailer• 12 years ago

Photos page just crashed iOS on Ipad 3 completely, wpthink it mirth have been all the hexagons. First couple of pages look OK though.

throw564• 12 years ago

Just wondering. Which insurance supports monthly blood testing. Are thee reasonable private providers with reasonable charges?

ejain• 12 years ago

InsideTracker and WellnessFX are two companies that offer direct-to-consumer blood testing at somewhat reasonable prices. Another company called Cue [https://cue.me/] is working on a device that would let you do certain blood tests at home.

teekert• 12 years ago

I find it a bit strange that he is currently on Koh Tao and his latest run was 5 hrs ago in San Francisco? :)

Kiro• 12 years ago

I want to read the "How to setup Photoshop" article that's in the old version of the page but the link is dead. Where can I find it?

kalvin• 12 years ago

This is SO well done. So, so impressive.

A side question, for any doctors on HN-- I'm really curious, what do you think about the Blood Tests section? That is, the benefits of monthly blood testing. From talking to one earlier today about related topics (coincidentally!) I could imagine the following response:

1. The ideal ranges for each value on your blood test do not necessarily represent the ideal range for you personally -- and not only do they not necessarily represent the ideal range for you, if your number is outside them and you're otherwise asymptomatic, your number is likely already "healthy" (with very few major exceptions like blood pressure and cholesterol.)

2. So by doing this, you aren't actually tracking things that need to be improved, or rather, you have no way of knowing if you'd be "more healthy" by being within range

3. So, getting monthly blood tests is useless, and any changes detected would also be useless

4. (And as an aside, annual physicals for young healthy people are not beneficial (and can be harmful) to health)

Is this right? Was I just talking to a curmudgeon? Tech-optimistic doctors, what do you think?

davak• 12 years ago

For normal people monthly lab testing would be overkill at best and dangerous at worse.

The thing to remember about lab tests is that the "normals" are based on bell curves so approximately 1 out of 20 labs will be abnormal from this phenomena alone. The more labs you get, the more false abnormals you get. If each false abnormal gets worked up, you are talking a lot of additional testing and worry.

Typical recommendations to test hypercholesterolemia is every 90 days at most if actively treating and then yearly once stable.

To your aside, I think annual physicals are probably overkill, but primary care doctors are now expertly trained in screening for multiple issues that could affect young healthy folks. Seeing your PCP for a "well-person" visit every few years is a good idea. Most of the time the doctor isn't going to order labs and will just chat a bit, do a physical exam, and get you on your way. A good doctor will have informed opinions about your exercise and diet regimen, for example.

tisunov• 12 years ago

Such a thorough peek behind the curtains of his design decisions. And he definitely fueled my passion for travel and active lifestyle.

ivabz• 12 years ago

WOW. Appreciate the way it is build.

But, So screwed up on IE10.

joeyspn2• 12 years ago

Collateral damage...

Excavator2• 12 years ago

Don't have access to IE here but he's using a ton of -webkit- prefixing for things that are supported in other browsers since long ago.

http://caniuse.com/transforms2d

http://caniuse.com/css-transitions

http://caniuse.com/css-animation

http://caniuse.com/css-gradients

Must say all that -webkit- yellow on those pages is scary.

joeyspn2• 12 years ago

This is an awesome work, really. The design style reminds me a lot of Eric Jordan's style (2advanced Studios) [0]. Not really a new style, but nice to see that Interaction Design with open technologies (HTML/JS/CSS) is arriving "there", where (believe or not) Flash was 10 years ago...

I've been waiting for this moment for years. Hopefully this will set a new trend.

[0] http://www.youtube.com/watch?v=ANng1oTO2Zk

Making of Aprilzero

Related Stories