跳到主要内容

Creative JavaScript网站实时更新世界的食物情况

World Food Clock by Luke Twyman

你可能记得不久前,我们推出了一个漂亮的小网站,名为Here Is Today,由网络和互动设计师提供卢克特威曼在我们的顶部JavaScript的例子帖子。

现在,Twyman又回来了世界美食时钟通过巧妙地创造性地使用JavaScript和Canvas,它专注于食品生产。我们和他聊天了解更多信息。

该项目是如何产生的?

我开始意识到我和很多人对食品生产的了解还不够。我认为通过可靠的研究创建一个关于该主题的统计网站是个好主意,我可以轻松地添加和更改。

最初我不知道它会如此浪费,尽管我确实知道废物和资源的使用是我想要包括的。我希望有些人从中学到了我在制作过程中学到的东西,而且(关于食物浪费)人们可以开始在国内做出改变,我希望有些人能够看到它对食品生产的早期阶段也是如此。

您对该项目的设计方法是什么?

我很早就知道我想使用实时计数器。大多数人永远不会处理十亿的事情,所以当我们习惯阅读它们时,这些巨大的数字往往难以让我们大多数人真正理解,直到我们能够以更相对的方式衡量它们。

World Food Clock by Luke Twyman

Twyman的世界美食时钟使用实时计数器来突出食品生产的不同方面

我希望将重点放在这些数字上并且不要过度说明,因此很多布局工作都是为了使这些数字清晰地显示并以合乎逻辑和可吸收的方式分组。我尝试用更多的视觉面板添加一些变化,对我来说过程的一部分是想要在使其足够视觉以至于它会吸引人们的兴趣之间取得平衡,但不是那么过于审美,我觉得我在减损主题。

你用过哪种字体?

标题都使用Lora Italic,一个相当直立的衬线斜体,曲线很好,与Roboto Bold Condensed形成鲜明对比,这是我用于所有数字的。我的决定是基于字体有影响力,节省空间和字母间距保持数字稳定随着它们的数量增加。

较小的文字和标签都在Cabin Condensed中,我在这里以非常实用的方式使用,但Cabin具有良好的屏幕易读性,特别是对于小数字。这三种字体都可以免费使用网络许可。

World Food Clock by Luke Twyman

该网站使用Lora Italic,Roboto Bold Condensed和Cabin Condensed字体,所有这些都可以免费使用网络许可

你用它来构建它?

一切都在纯JavaScript和Canvas中完成。我曾经考虑做一些更混合的东西,因为像第一个只有计数器的面板,根本不需要使用Canvas,但感觉就像我在Canvas和非Canvas面板之间转换会开始变得凌乱和/或混淆使用。

该项目最具技术挑战性的方面是什么?

我想最技术性的是两个图表 - 三角形比率和五角形百分比。我清楚地知道我希望它们如何通过状态之间的平滑过渡来查看和运行,尽管这种数学绝对不是我的强点所以它实际上只是一个坚持一些试验和错误的情况。我很高兴他们是如何出来的,现在如果我想将新值插入其中,它们很容易重复使用。

World Food Clock by Luke Twyman

Tywman最棘手的元素之一就是创造了五角大楼

该网站创建了多长时间?

我想大约两个星期,虽然这包括研究时间,这是相当大的一部分。

您最近看过任何鼓舞人心的网页设计吗?让我们在评论中知道。



翻译字数超限