Design: WebAssembly 徽标

创建于 2015-06-03  ·  244评论  ·  资料来源: WebAssembly/design


WEBA ssemble logo 比赛

⚠️⚠️⚠️⚠️⚠️
⚠️ 更新 ⚠️ ✅ 投票给你最喜欢的标志 ➡️这个帖子⬅️
⚠️⚠️⚠️⚠️⚠️


原帖(现已关闭)


在 WebAssembly 项目的一开始, @sunfishcode 就设计了一个标志:
image
它有很好的想法:

  • 箭头聚集在一起代表“组装”。
  • 聚集在一起的箭头也可以表示将其他语言编译到网络上。

最好有一些更花哨的/网络-y/设计师-y,并保持中立,这样它就属于网络而不是浏览器供应商之一。

来自 NaCl 团队的 Petr Hosek 建议使用HTML5 技术类图标


有你来的地方!

使用您建议的 WebAssembly 徽标回复此线程。

我们还没有决定我们将如何选择最终标志,但它肯定会在“稳定 MVP”时间附近。


最有用的评论

大家好,
我只是想将此贡献添加到项目中,请随意使用。

谢谢

01
02

所有244条评论

这是一个巧妙的比喻。 FWIW 我一直喜欢 Borland C++ 标志,它
看起来像是拼凑在一起的积木。 “组装”也可以有
那个内涵也是。

2015 年 6 月 3 日星期三晚上 10:34,JF Bastien通知@ github.com
写道:

@sunfishcode https://github.com/sunfishcode
网页组装:
[图像:图像]
https://cloud.githubusercontent.com/assets/298127/7970689/95aefe64-09f4-11e5-87c8-b67d25f46901.png
它有很好的想法:

  • 箭头聚集在一起代表“组装”。
  • 聚集在一起的箭头也可以代表编译其他语言
    到网络。

要是有一些更花哨的东西 / web-y / 设计师-y 就好了,而且
保持中立,因此它属于网络而不是浏览器供应商之一。

我团队的 Petr Hosek 建议使用 HTML5 技术类图标
http://www.w3.org/html/logo/ ,并提出以下内容:
[图像:图像]
https://cloud.githubusercontent.com/assets/298127/7970659/70880d2e-09f4-11e5-9c7b-c2134ee7f483.png

_还有其他建议吗?_

@lukewagner https://github.com/lukewagner说:

我个人的看法是,箭头的不对称性困扰着我
一点点。 不过,不对称可以在视觉上很好看。 只是抛出一个想法:
如果箭头是对称的,但有 4 个略有不同的箭头怎么办
四个角的抽象形状:建立在“编译到网络”的基础上
上面的比喻,4 个形状将代表 4 种不同的源语言
正在编译(通过箭头)到中心(网络)。


直接回复此邮件或在 GitHub 上查看
https://github.com/WebAssembly/spec/issues/112。

@BrendanEich还提到他喜欢超级英雄组装的氛围,复仇者联盟的风格。

是的,除了我的 nit,我总体上喜欢指向一起的箭头。 积木是一个有趣的想法; 如果有人有与 HTML5 技术类图标样式相匹配的概念,我会很感兴趣。

Petr Hosek 最初提出以下建议:
image

@davidsehr指出了那个标志中的一个可怕的缺陷。 我喜欢箭头,但我们绝对应该避免无意中创建一个历史不敏感的标志!

不过,HTML5 技术类图标的想法还是不错的!

我与这里的一些人交谈过,他们建议我们在首次发布之前暂缓使用任何徽标。 这将使我们能够专注于技术,并让我们花时间实际创建一个经过深思熟虑且没有无意中含义的徽标!

wasm

@lukewagner嗯,它是 1.0 版(某个时候),它的缩写是 WASM。 此外,到目前为止,典型的 HTML5 技术图标 AFAIK 还没有使用绿色。

编辑:根据(CC BY 3.0)许可并基于HTML 5 徽标

编辑:当我有时间时,将提供像素错误较少的 SVG 版本:p。

编辑:绿色紫色版本的 SVG。

@Teemperor如果您不加入 W3C 社区组并具有适当的版权归

@jfbastien我已经在 W3C 社区中了。 该徽标必须在 HTML5 徽标许可,因为它显然只是重新混合的 HTML 5 徽标。

基于共同指向(用W EBssembly)中的箭头的另一种设计:
wasm2

根据(CC BY 3.0) 获得许可,由 Raphael Isemann 创建。

而且我认为稍后会更改的徽标比根本没有徽标要好:)

webassembly-group

这是我的 3 分钟截图。

wasm1
wasm2

:+1:

WA之字形怎么样

wa-logo

wa-logo2

@Namozag我喜欢它!

(看起来附件不能通过电子邮件工作......)
(快速和肮脏的夫妇)

锯齿形创意的玩法:

wa1

玩负空间:

wa2

——弗雷德

在2015年6月23日,在13:27,安德烈[email protected]写道:

@Namozag https://github.com/Namozag我喜欢!


直接回复本邮件或在 GitHub 上查看https://github.com/WebAssembly/design/issues/112#issuecomment -114450578。

@fstark看不到它们。

看起来您无法通过电子邮件附加图像,因此我将它们添加到原始评论中。 它们是否内联出现?

让我用更小的分辨率再试一次。

图 1(锯齿形的变化)
wa1

图 2(负空间)
wa2

我认为使用 WA 标志可能会令人困惑,因为 Whatsapp 也缩写为 WA。

这里的每个人都非常有创意。 同意避免 WhatsApp 重叠; 还有来自“Clueless”的“whatEVER”的 \/\/ ;-)。

/是

我真的不明白 Whatsapp 的担忧,因为他们的标志看起来像这样Whatsapp logo .

另外,全名是 WebAssembly,而不是 wasm 或 wa,所以我不确定混淆会来自哪里。 人们不会开始使用 wa 作为名称。 它只是徽标上的一些随机涂鸦。 重新使用@Teemperor的盾牌理念(可能不是绿色的,以避免 WA 内涵)加上一些涂鸦可以使 WebAssembly 具有直接连接到 HTML5 的可识别外观。 嗯。 以后可以试试。

也许这是一个地区性的事情,但我根本没有将@fstarks的标志与 WhatsApp 联系起来。
此外,正如我发现绿色盾牌用于 PHP(并且 WhatsApp 也是绿色的,正如@fstark 所说),所以我将它重新着色为紫色(并修复了像素错误):

wasm

我同意你应该推迟使用徽标。 事实上,我不相信它甚至需要拥有一个。

但是,我确实喜欢构思徽标,而且我喜欢在这里看到的一些设计。 如果有徽标,我认为它应该使用全名 (WebAssembly) 或缩短版本 (wasm)。 在后者中,我建议在视觉上区分 w 和 asm。 此外,建议以某种方式引用它的汇编语言方面。

对@Namozag 的所有标志创意和变化感到惊讶
asm

我似乎更喜欢在文本中包含“wasm”或“asm”的任何内容。

哦,酷,(不是)标志比赛! 并且已经有一些很棒的想法! 好吧,这是我对徽标的看法(试图结合之前的一些想法):

  • 有点像 HTML5 语义标志“赋予结构意义”,但颠倒过来,仍然“为程序和用户提供更有用的、数据驱动的网络”。
  • 有点紧凑,流动的数据
  • 有点可插拔
  • 一点栈
  • 有点“W”,“A”,“S”,“M”
  • 可选的阴影,当然还有_green_

干杯!

@dcodeIO看起来很棒!

@fstark图片 2,干杯!!

wasm-blue
wasm-logo2

@dcodeIO :很好!

也许是这样的;)
wasm

我真的很喜欢@dcodeIO 的黑色/绿色!

我喜欢黑色和绿色的。 干杯!

El mié.,7 月 1 日。 de 2015 a la(s) 10:10 am, Jan-Oliver Opdenhövel <
通知@github.com> escribió:

我真的很喜欢@dcodeIO https://github.com/dcodeIO的黑色/绿色


直接回复此邮件或在 GitHub 上查看
https://github.com/WebAssembly/design/issues/112#issuecomment -117662363。

wasm-logos-01
wasm-logos-03
wasm-logos-02

我的子
logo

wasm_first

这个是我最后一个潜艇的重复
wasm_first

我们是否应该举行一次民意调查来决定项目的最佳标志是什么?

你已经讨论了 WebAssembly 的标志很久了,我想是时候结束了。

通过 iPhone 发送

在2015年7月16日,22:36,托马斯[email protected]写道:

我们是否应该举行一次民意调查来决定项目的最佳标志是什么?


直接回复此邮件或在 GitHub 上查看。

我没有在图形软件上尝试过任何东西,但是在等待编译时,我有以下想法:

wasm-1

  • 中间的那个是W(网)和A(组装)的垂直叠加,让我想起很多像这样一个人向天空举手的表情: \o/
  • 右边的和中间的一样,虽然它也很好地折叠了 W(网)和 A(装配)。
  • 左边的和中间的一样,但在中央三角形上方还有4个浮头,应该是回忆最初的临时标志和相同的想法。

如果有人愿意扩展这些想法并从这些草图图像中制作真正的徽标,那就太好了!

我喜欢黑色/绿色的@dcodeIO

关于投票的主题,并帮助在此线程中设定期望:我们还没有选择选择徽标的过程,无论这个过程是什么,我认为它会在 WebAssembly 发布(规范和实现)时发生. 话虽如此,我很喜欢这里的想法流,并没有告诉任何人停止的意思,只是没有匆忙或迫在眉睫的决定。

越多越好! 我同意@lukewagner :让我们只在接近 MVP 发布时确定一个标志。 保持创造力直到那时。

webasmlogo

永远不会放弃寻找最好的标志!

我不是设计师,但我做了一些涂鸦,并认为我可以分享它们。

它们非常粗糙(错误的对齐方式/比例/字体),但总体思路应该会出现。
wasm_drafts_small

让我试试:)
wasm

WASM character idea

@dcodeIO图像 2 看起来很棒!

@dcodeIO太酷了!!

+1 @dcodeIO

+1 对于@dcodeIO黑色和绿色标志

+1 对于@dcodeIO黑色和绿色

真的很喜欢拉斐尔的第一个
Green shield logo

这是我在玩 Krita 时制作的东西。 虽然这个设计已经在我脑海中浮现了几个月:
wasmplain

这是我在玩效果时所做的一个 80 年代的 esk 实验:

wasm80s

大家好,
我只是想将此贡献添加到项目中,请随意使用。

谢谢

01
02

当前的 HTML5/CSS/JS 徽标既丑陋又陈旧(因为这些技术也是如此,哈哈)。 拿那个矢量标志——简单、干净、强大和该死的飞行——用它做任何你想做的事情。

wa_logo

wa_logo.zip

我喜欢@Fogaccio的作品

我喜欢@Fogaccio的标志。

@Fogaccio@jjmiyao的作品很酷!

WASM 文本的灵感来自并感谢 Erik Demaine http://erikdemaine.org/fonts/hined/
注意 W 和 M 是对称的。 (和其他一些角色一样,这会带来更多乐趣。)
用于/建议用于 F#UN FSharp 实验孵化器项目 FSTWASM FSharp To WASM。
这种字体中的每个字母和数字都可以由一个通用铰链链折叠而成,特别是 128 个直角等腰三角形。 特别是,每个角色都有完全相同的区域。 此外,链条可以折叠成一个正方形,用句点表示。 请参阅我们的论文“字母表的铰链解剖”,娱乐数学杂志,31(3):204–207,2003 年。
wasm_bluebackground

wasm font hinged 2-13-2016 3-08-36 pm

我是@Fogaccio标志的粉丝。 与几年前创建的一些较旧的 Web 平台 (HTML/CSS) 徽标相比,它干净、易于识别并且感觉更现代。

+1 @Fogaccio的标志,它有漂亮的 ASCII 艺术版本。

\ \ \  /\
 \/\/\   \

\ \ \   /\
 \ \ \    \
  \/\/\    \

\ \ \    /\
 \ \ \  /  \
  \ \ \     \
   \/\/\     \

...

@Fogacci ,你有.svg.ai版本的标志吗?

@mbebenita是的,我愿意.. =]

但是我需要准备好要交付的文件,我会尽快去做

@Fogaccio这方面有什么进展吗?

@kenchris我正在制作资产。

@Fogaccio友好的 ping

@kenchris@mbebenita ,我即将完成 .svg 和 .ai 资产,我想我会在周五完成。

HTML 标记符号 + AST。

wasmlogo

大家好,
只是想让您知道,这里 (https://github.com/Fogaccio/OpenDesign/tree/master/webassembly_identity) 是我之前发送的品牌提案文件。 我希望这些资源能够以最好的方式帮助您。 随意分享想法和建议。

谢谢

@Fogaccio谢谢,这很棒。 我正在查看小图标 16x16 版本:

https://raw.githubusercontent.com/Fogaccio/OpenDesign/master/webassembly_identity/favicon/png/browser/favicon_16x16.ico

你认为这可以更清晰一些吗? 此版本的图标可用于 IDE 和其他工具。 我们可能需要此尺寸的徽标的自定义像素艺术版本。 如果您还没有什么想法,我很乐意这样做。

@mbebenita ,我曾尝试对 .ico 进行像素艺术,但没有成功,请随时帮助我做到这一点 =]

我将非常感谢您的帮助

@Fogaccio使用较少的色调(和更清晰的颜色 - 因此与背景/透明/白色的更多合同)可能会使它看起来更清晰

虽然只有 16x16 尺寸,但这有点困难:) 需要仔细选择色调

这是另一个。 它是一个实体对象,由“A”顶部的“W”组成,从一个视图提供一个非常简单的老派像素化 2d 徽标,从另一个视图提供一个 3d 徽标。 这是一个动画gif:

straighta2

实体对象是在 openscad 中使用以下代码以编程方式创建的

module LetterW(thickness=5,height=20,width=20,col="Chartreuse")
{
    color(col) {
        union() {
            cube([thickness,thickness,height],false);
            cube([thickness,width,thickness],false);
            translate(v=[width,width-thickness,0])rotate([0,0,90]) union() {
                    cube([thickness,thickness,height],false);
                    cube([thickness,width,thickness],false);
            }
            translate(v=[-1.5*thickness,1.5*thickness,0]) cube([thickness,thickness,height-1.0*thickness]);
            //translate(v=[-1.5*thickness,1.5*thickness,0]) cube([2.5*thickness,thickness,thickness]);
            rotate([0,0,45]) cube([thickness/sqrt(2),sqrt(2)*1.5*thickness,thickness]);
        }
    }

}

module LetterA(thickness=5,height=20,width=20,col="Chartreuse")
{
    offset=-2*thickness;
    color(col) {
        union() {
            translate(v=[0,0,-height]) cube([thickness,thickness,height],false);
            translate(v=[width-thickness,width-thickness,-height]) cube([thickness,thickness,height],false);
            /*
            translate(v=[0,0,offset]) cube([width,thickness,thickness],false);
            translate(v=[width-thickness,0,offset]) cube([thickness,width,thickness],false);
            */
            translate(v=[thickness,0,offset])rotate([0,0,45]) cube([sqrt(2)*(width-thickness),thickness/sqrt(2),thickness]);
        }
    }
}

thickness=5;
height=20;
width=20;
scale=1.0;
$vpr = [0,0,90];

LetterW(scale*thickness,scale*height,scale*width);
LetterA(scale*thickness,scale*height-0.5*thickness,scale*width);

$t = 0.0;
//$vpr = [0, 0, 90];
//$vpr = [$t*90, 0, 90];
$vpr = [90, 0, 90];
$vpr = [90-$t*25, 0, 90-$t*45];

这是二维视图:

frame00099

这是 3d 视图:

frame00099

我可以在必要时产生变化并充实资产集。

我为 A 使用了更对称的弯曲横臂:

frame00100

但我个人更喜欢直横臂,因为A更明显。

@h00gs很有趣,我喜欢你几乎有一个 MC Escher 的事情要做。

我认为扳手可以传达装配信息,并且可以用类似于 WA 的形状制造。

wasm_draft_3

@rfernbach不知何故,你的设计在我看来就像一个维京人:
viking
……我们需要吉祥物吗? :)

@mbebenita在像素艺术中制作图标的挑战如何? ... =]

所以我最初的努力并不完全正确,所以我坚持不懈,并为 A 找到了一个弯曲的横杆,看起来不错。 这是一个动画: