Documentation
It’s always easy to start with some sort of base. So the first task at hand was to make a document for the project. For this I used ghostwriter markdown editor on GNU + Linux or GNU/Linux(add your GNOOOs kids).
This was the zone David Lynch would refer to as the idea fishing zone. I had the base idea in mind, but it needed a lot of development.
This really allowed the forming of a strong project structure and enabled me to find what I was looking for, in regards to content, as well as design.
Nutrition Data
The nutrition data is available online but it’s hard to find everything in a single place. And when we do find everything in a single place, it either has inconsistencies or is filled with medical jargon.
The first thing then, was to get the important data and organizing it.The first thing then, was to get the important data and organizing it.
Wikipedia was a really good source for the micronutrient names and RDA.
But the complete data was still missing.
If you check the Wikipedia articles of ‘minerals’ and ‘vitamins’, the data is there, but the food sources are limited, functions and deficiency symptoms include a lot of medical terms that are inaccessible for the average person.
If you open up the article on ‘Fat’, you’ll find the same issue of inaccessible terms.
Next was getting the functions and sources. Then observable deficiency symptoms.
All of this data needed to be simplified and understandable.
The tool used for this job was LibreOffice Calc. Data was stored in a CSV then later converted into a JSON array.
Interaction design
Interaction design had two challenges.
The first was picking a design style.
Since we are visualizing nutrient data and might be addressing a user base with a wide age range; there was a need for some level of objectivity as well as clarity in the design.
And when it comes to Objective design, the Swiss masters stand unbeatable.
The International typographic style from the 1950s focused a lot on the objectivity of the data.
Taking a look at the Neue Grafik magazine cover will give you an idea of what I am talking about.
International typographic was the style for this project!
It was going to be an experience, trying to bring something on a digital medium, that usually exists in print.
The font family had to be sans-serif. I first went with the Plex Sans from IBM but then while tinkering with and designing the interface, I found the Inter font family to be a much better fit for the project. It really captured the spirit of what I was going for.
The color scheme had to reflect the ambition for objectivity and clarity. Also I wanted a light and dark theme. The classic black and white combination allowed for a high contrast design.
Three shades were chosen for each color.
The most pronounced ones were for the headings and the background, and the less pronounced ones for paragraphs.
The site was divided into two sections. One where the interactive menu was placed and other where the data was going to be visualized. The data section was further divided into three sections.
To improve the readability of the article content, I put it in a container with a maximum width of 800px.
For the nutrient details the container was much bigger as the content or the data allowed as well as required some sort of breathability.
There was no need for any sort of graphics or images on the website. The whole project uses only two graphics, one for the arrow menu and one for the favicon and that’s it.
The second design challenge was the tool. The goal was to use 100% FLOSS for the project. Penpot seemed like a really great option but it had two factors that just didn’t fit well with me. First, the software is still in alpha and second, it is web based.
Though i would really like to use it for another project. I like it and would love to use it when it's out of alpha and has an offline desktop app.
I was unable to install Pencil on my distribution and just wasn’t in the mood for hacking around.
Akira is still an incomplete project.
GIMP is good enough for image manipulation but when it comes to designing, it is not the tool i would prefer.
I found Inkscape as a really good option for the job and went with it.
Development
On the CSS side, I used flexbox and the CSS grid for the layout. The nutrient details section in particular, was designed using the CSS grid.
I also used some CSS animations to add in some motion to the website.
On the Js side, features included a navigation menu, a theme changer and displaying dynamic data for each micronutirent.
The data was stored in the JavaScript file itself, as an array object.
The pages were routed using the location hash. It was kind of a routing hack to be honest, but it’s okay for now.
The last thing was making a PWA or a progressive web app. It was like icing on the cake(damn! We need some healthy idioms).
No frameworks or libraries were used for this project. Media Queries were used for responsiveness.
Since the site had no rasters, the load times were really good.
I used VSCodium and vim as my text editors.
Writing the content
Writing content took a lot of time. Plus I kept adding content while I was designing the interface.
Of course there will always be something more to add but I think the content we have, is alright for the first version.
I do plan on adding more in the future as the project expands.
The content has two kinds or styles. On one hand we have the completely objective nutrient data and on the other we have articles which add some level of subjectivity in the way they are written and presented.
The paragraph length is short to improve the readability of the content
i used LibreOffice Writer for writing the content.
SEO
Certainly we have SEO issues on the dynamic pages as we are using hash for routing but in the future we do plan on moving towards SSR pages. For now this will have to do.
That's it!
Softwares used: Ghostwriter, Inkscape, VSCodium, vim, LibreOffice and GNU + Linux.
And that is all thanks for nerding out!
made with love. i don't know how else we do it. i don't know how else anybody does it. i don't know. maybe that's why...
frens