Design: Logo Perakitan Web

Dibuat pada 3 Jun 2015  ·  244Komentar  ·  Sumber: WebAssembly/design


WebAssembly Logo Contest

️⚠️⚠️⚠️⚠️
️ UPDATE ️ pilih logo favorit Anda di ️ thread ini
️⚠️⚠️⚠️⚠️


POSTINGAN ASLI (sekarang ditutup)


Di awal proyek WebAssembly ,
image
Ini memiliki ide bagus:

  • Panah datang bersama-sama untuk mewakili "berkumpul".
  • Panah yang bersatu juga dapat mewakili kompilasi bahasa lain ke web.

Akan menyenangkan untuk memiliki sesuatu yang lebih mewah / web-y / designer-y, dan tetap netral sehingga menjadi milik web dan bukan salah satu vendor browser.

Petr Hosek dari tim NaCl mengusulkan menggunakan ikon kelas teknologi HTML5 .


Di sinilah ANDA datang!

Balas utas ini dengan logo WebAssembly yang Anda sarankan.

Kami belum memutuskan bagaimana kami akan memilih logo terakhir, tapi itu pasti sekitar waktu "stabil MVP".


Komentar yang paling membantu

Halo semuanya,
Saya hanya ingin menambahkan kontribusi ini ke proyek, silakan gunakan sesuka Anda.

Terima kasih

01
02

Semua 244 komentar

Itu metafora yang rapi. FWIW Saya selalu menyukai logo Borland C++, yang
tampak seperti blok bangunan yang disatukan. "Perakitan" juga dapat memiliki
konotasi itu juga.

Pada hari Rabu, 3 Jun 2015 jam 22:34, JF Bastien [email protected]
menulis:

@sunfishcode https://github.com/sunfishcode meretas logo cepat untuk
Majelis Web:
[gambar: gambar]
https://cloud.githubusercontent.com/assets/298127/7970689/95aefe64-09f4-11e5-87c8-b67d25f46901.png
Ini memiliki ide bagus:

  • Panah datang bersama-sama untuk mewakili "berkumpul".
  • Panah yang bersatu juga dapat mewakili kompilasi bahasa lain
    ke web.

Akan menyenangkan untuk memiliki sesuatu yang lebih mewah / web-y / designer-y, dan
tetap netral sehingga milik web dan bukan salah satu vendor browser.

Petr Hosek dari tim saya mengusulkan menggunakan ikon kelas teknologi HTML5
http://www.w3.org/html/logo/ , dan muncul dengan yang berikut:
[gambar: gambar]
https://cloud.githubusercontent.com/assets/298127/7970659/70880d2e-09f4-11e5-9c7b-c2134ee7f483.png

_Ada saran lain?_

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

Masalah pribadi saya adalah bahwa asimetri panah mengganggu saya
sedikit. Namun, asimetri bisa bagus secara visual. Hanya untuk membuang ide:
bagaimana jika panahnya simetris tetapi ada 4 yang sedikit berbeda
bentuk abstrak di empat sudut: membangun "kompilasi ke web"
metafora di atas, 4 bentuk akan mewakili 4 bahasa sumber yang berbeda
yang sedang dikompilasi (melalui panah) ke tengah (web).


Balas email ini secara langsung atau lihat di GitHub
https://github.com/WebAssembly/spec/issues/112.

@BrendanEich juga menyebutkan bahwa dia menyukai getaran perakitan superhero, gaya Avengers.

Ya, selain nit saya, saya secara keseluruhan suka panah yang menunjuk bersama. Blok bangunan adalah ide yang menarik; Saya akan tertarik jika ada yang memiliki konsep yang cocok dengan gaya ikon kelas teknologi HTML5.

Petr Hosek awalnya datang dengan yang berikut:
image

@davidsehr menunjukkan cacat mengerikan di logo itu . Saya suka panah, tetapi kita harus menghindari secara tidak sengaja membuat logo yang tidak sensitif secara historis!

Ide ikon kelas teknologi HTML5 masih bagus!

Saya berbicara dengan beberapa orang di sini, dan mereka menyarankan agar kami menunda memiliki logo apa pun hingga peluncuran pertama. Itu akan memungkinkan kita untuk berkonsentrasi pada teknologi sebagai gantinya, dan mari kita luangkan waktu untuk benar-benar membuat logo yang matang dan tidak memiliki arti yang tidak disengaja!

wasm

@lukewagner Yah, ini versi 1.0 (kadang-kadang) dan singkatannya adalah WASM. Juga, hijau sejauh ini tidak digunakan oleh ikon teknologi HTML5 khas AFAIK.

EDIT: Dilisensikan di bawah (CC BY 3.0) dan berdasarkan Logo HTML 5

EDIT: Akan memberikan versi SVG dengan kesalahan piksel lebih sedikit ketika saya punya waktu: p.

EDIT: SVG untuk versi hijau dan ungu .

@Teemperor kami tidak dapat menerima logo tanpa Anda berada di grup komunitas W3C, dan dengan atribusi hak cipta yang tepat. Masih terlalu dini untuk mendapatkan logo untuk saat ini :)

@jfbastien Saya sudah di komunitas W3C . Logo harus dilisensikan di bawah lisensi CC asli dari logo HTML5 karena itu jelas hanya logo HTML 5 remix.

Desain lain berdasarkan pada tanda panah menunjuk bersama-sama (untuk W eb A ssembly):
wasm2

Dilisensikan di bawah (CC BY 3.0) , dibuat oleh Raphael Isemann.

Dan menurut saya logo yang nanti diganti lebih baik daripada tidak ada logo sama sekali :)

webassembly-group

Ini hasil jepretan saya selama 3 menit.

wasm1
wasm2

:+1:

Bagaimana dengan WA Zigzag

wa-logo

wa-logo2

@Namozag Saya menyukainya!

(sepertinya lampiran tidak berfungsi melalui email...)
(Beberapa cepat dan kotor)

Sebuah permainan pada ide zigzag:

wa1

Bermain dengan ruang negatif:

wa2

—fred

Pada 23 Juni 2015, pukul 13:27, Andrey [email protected] menulis:

@Namozag https://github.com/Namozag Saya menyukainya!


Balas email ini secara langsung atau lihat di GitHub https://github.com/WebAssembly/design/issues/112#issuecomment -114450578.

@fstark tidak bisa melihatnya.

Sepertinya Anda tidak dapat melampirkan gambar melalui email, jadi saya menambahkannya ke komentar asli. Apakah mereka muncul sebaris?

Tidak

Biarkan saya mencoba lagi dengan resolusi yang lebih kecil.

Gambar 1 (Variasi pada Zigzag)
wa1

Gambar 2 (Ruang Negatif)
wa2

Saya pikir mungkin akan membingungkan untuk menggunakan logo WA, karena Whatsapp juga disingkat WA.

Benar-benar karya kreatif oleh semua orang di sini. Setuju untuk menghindari tumpang tindih WhatsApp; juga \/\/ dari "Tidak mengerti" untuk "apapun" ;-).

/menjadi

Saya tidak begitu mengerti masalah Whatsapp, karena logo mereka terlihat seperti iniWhatsapp logo .

Juga, nama lengkapnya adalah WebAssembly, bukan wasm atau wa, jadi saya tidak yakin dari mana kebingungan itu berasal. Ini tidak seperti jika orang akan mulai menggunakan wa sebagai namanya. Itu hanya beberapa coretan acak pada logo. Menggunakan kembali ide perisai @Teemperor (mungkin tidak hijau, untuk menghindari konotasi WA) dengan beberapa coretan dapat memberikan WebAssembly tampilan yang dapat dikenali yang terhubung langsung ke HTML5. Mm. Mungkin mencobanya nanti.

Mungkin hal regional, tapi saya sama sekali tidak menghubungkan logo @fstarks dengan WhatsApp.
Juga, ketika saya mengetahui bahwa perisai hijau adalah untuk PHP (dan WhatsApp juga berwarna hijau seperti yang dikatakan oleh @fstark ), jadi saya mewarnai ulang menjadi ungu (dan memperbaiki kesalahan piksel):

wasm

Saya setuju bahwa Anda harus menunda logo. Bahkan saya tidak yakin itu bahkan perlu memilikinya.

Namun, saya suka memikirkan logo dan saya menyukai beberapa desain yang pernah saya lihat di sini. Jika ada logo saya rasa sebaiknya menggunakan nama lengkap (WebAssembly) atau versi singkatnya (wasm). Dalam yang terakhir saya sarankan membedakan secara visual w dari asm. Juga, disarankan untuk merujuk aspek bahasa assembly dari itu entah bagaimana.

Kagum dengan semua ide logo, variasi dari @Namozag
asm

Sepertinya saya lebih suka apa pun dengan 'wasm' atau 'asm' di sana sebagai teks.

Oh, keren, (bukan) kontes logo! Dan sudah ada beberapa ide bagus! Nah, ini adalah pandangan saya tentang logo (mencoba menggabungkan banyak ide sebelumnya):

  • Agak seperti logo semantik HTML5 "Memberi makna pada struktur", tetapi terbalik, masih "mengaktifkan web berbasis data yang lebih berguna untuk program dan pengguna Anda."
  • Data yang sedikit padat dan mengalir
  • Sedikit bisa dipasang
  • Sedikit tumpukan
  • Sedikit "W", "A", "S", "M"
  • Bayangan opsional dan, tentu saja, _green_

Bersulang!

@dcodeIO tampak hebat!

@fstark Gambar 2 ,,

wasm-blue
wasm-logo2

@dcodeIO : bagus !

Mungkin seperti ini ;)
wasm

Saya sangat suka yang hitam/hijau dari @dcodeIO!

Saya suka yang hitam dan hijau. Bersulang!

El mié., 1 de jul. de 2015 a la(s) 10:10, Jan-Oliver Opdenhövel <
[email protected]> penjelasan:

Saya sangat suka yang hitam/hijau oleh @dcodeIO https://github.com/dcodeIO
!


Balas email ini secara langsung atau lihat di GitHub
https://github.com/WebAssembly/design/issues/112#issuecomment -117662363.

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

sub saya
logo

wasm_first

yang ini duplikat untuk sub terakhir saya
wasm_first

Haruskah kita mengadakan jajak pendapat untuk memutuskan apa logo terbaik untuk proyek tersebut?

Anda sudah lama berbicara tentang logo WebAssembly, saya pikir sudah waktunya untuk selesai.

Kirim melalui iPhone

2015年7月16日,22:36, Pemberitahuan [email protected]写道:

Haruskah kita mengadakan jajak pendapat untuk memutuskan apa logo terbaik untuk proyek tersebut?


Balas email ini secara langsung atau lihat di GitHub.

Saya belum mencoba apa pun pada perangkat lunak grafis, tetapi ketika menunggu kompilasi, saya punya ide berikut:

wasm-1

  • Yang di tengah adalah superposisi vertikal dari W (web) dan A (assembly), dan mengingatkan saya pada banyak emoticon seseorang yang mengangkat tangan ke langit seperti ini: \o/
  • Yang di kanan sama dengan yang di tengah, meskipun itu juga meruntuhkan W (web) dan A (perakitan) dengan baik.
  • Yang di kiri sama dengan yang di tengah, tetapi juga memiliki 4 kepala mengambang di atas segitiga tengah, yang seharusnya mengingat logo sementara asli dan ide yang sama.

Jika seseorang mau mengembangkan ide-ide ini dan membuat logo nyata dari gambar sketsa ini, itu bagus!

Saya suka yang hitam/hijau @dcodeIO

Mengenai masalah pemungutan suara, dan untuk membantu menetapkan harapan di utas ini: kami belum memiliki proses yang dipilih untuk memilih logo dan apa pun prosesnya, saya pikir itu akan terjadi lebih dekat dengan rilis WebAssembly (spesifikasi dan implementasi) . Meskipun demikian, saya menikmati aliran ide di sini dan tidak bermaksud menyuruh siapa pun untuk berhenti, hanya saja tidak ada keputusan yang terburu-buru atau segera.

Semakin banyak semakin meriah! Saya setuju dengan @lukewagner : mari kita hanya

webasmlogo

Jangan pernah menyerah untuk menemukan logo terbaik!

Saya bukan desainer tetapi saya membuat beberapa coretan dan berpikir saya mungkin juga membagikannya.

Mereka sangat kasar (keberpihakan/proporsi/font yang salah), tetapi ide umumnya harus muncul.
wasm_drafts_small

Mari saya coba :)
wasm

WASM character idea

@dcodeIO gambar 2 tampak hebat!

@dcodeIO itu keren!!

+1 untuk @dcodeIO

+1 Untuk logo @dcodeIO Hitam dan Hijau

+1 Untuk @dcodeIO Hitam dan Hijau

Suka banget sama yang pertama Raphael
Green shield logo

Ini adalah sesuatu yang saya buat saat bermain dengan Krita. Meskipun desainnya telah beredar di kepala saya selama beberapa bulan:
wasmplain

Berikut eksperimen 80-an yang saya buat saat bermain dengan efek:

wasm80s

Halo semuanya,
Saya hanya ingin menambahkan kontribusi ini ke proyek, silakan gunakan sesuka Anda.

Terima kasih

01
02

Logo HTML5/CSS/JS saat ini jelek dan tua (seperti teknologi itu juga, lol). Ambil logo vektor itu — sederhana, bersih, kuat, dan terbang — dan lakukan apa pun yang Anda inginkan dengannya.

wa_logo

wa_logo.zip

Saya suka karya @Fogaccio

Saya suka logo @Fogaccio .

Karya @Fogaccio dan @jjmiyao keren!

Teks WASM terinspirasi oleh dan terima kasih kepada Erik Demaine http://erikdemaine.org/fonts/hinged/
Perhatikan bahwa W dan M adalah simetris. (Seperti beberapa karakter lain, yang membuatnya lebih menyenangkan.)
Digunakan/disarankan untuk Proyek Inkubator Eksperimental F#UN FSharp FSTWASM FSharp To WASM.
Setiap huruf dan angka dalam font ini dapat dilipat dari satu rantai potongan berengsel universal, khususnya 128 segitiga sama kaki kanan berengsel di sudut tajamnya. Secara khusus, setiap karakter memiliki area yang persis sama. Selain itu, rantai dapat dilipat menjadi persegi, yang dilambangkan dengan titik. Lihat makalah kami “Hinged Dissection of the Alphabet”, Journal of Recreational Mathematics, 31(3):204–207, 2003.
wasm_bluebackground

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

Saya penggemar logo @Fogaccio . Ini bersih, langsung dikenali dan terasa lebih modern daripada beberapa logo platform web (HTML/CSS) lama yang dibuat beberapa tahun lalu.

+1 logo @Fogaccio , ia memiliki versi seni ASCII yang bagus.

\ \ \  /\
 \/\/\   \

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

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

...

@Fogacci , apakah Anda memiliki logo versi .svg , .ai ?

@mbebenita ya saya lakukan .. =]

Tapi saya perlu menyiapkan file untuk pengiriman, saya akan melakukannya secepat mungkin

@Fogaccio Ada kemajuan dalam hal ini?

@kenchris Saya sedang mengerjakan produksi aset.

@Fogaccio ping ramah

Hai @kenchris dan @mbebenita , saya hampir menyelesaikan aset .svg dan .ai , saya pikir saya akan mendapatkannya pada hari Jumat.

Simbol tag HTML + AST.

wasmlogo

Halo semuanya,
Sekadar memberi tahu Anda bahwa di sini (https://github.com/Fogaccio/OpenDesign/tree/master/webassembly_identity) adalah file proposal branding yang telah saya kirim sebelumnya. Saya harap sumber daya ini dapat membantu Anda dengan cara terbaik. Jangan ragu untuk berbagi pemikiran dan saran.

Terima kasih

@Fogaccio terima kasih, ini bagus. Saya sedang melihat favicon kecil versi 16x16:

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

Apakah menurut Anda ini bisa dibuat lebih mudah dibaca. Versi ikon ini dapat digunakan di IDE, dan alat lainnya. Kami mungkin membutuhkan logo versi seni piksel khusus untuk ukuran ini. Saya akan senang melakukan ini, jika Anda belum memikirkan sesuatu.

Hai @mbebenita , saya sudah mencoba melakukan seni piksel ke .ico, tetapi saya tidak berhasil, jangan ragu untuk membantu saya melakukannya =]

Saya akan sangat berterima kasih atas bantuan Anda

@Fogaccio menggunakan lebih sedikit corak warna (dan warna yang lebih tajam - sehingga lebih banyak kontrak dengan latar belakang/transparan/putih) mungkin akan membuatnya terlihat lebih tajam

Agak sulit meskipun hanya dengan ukuran 16x16 :) Perlu hati-hati memilih nuansa

Ini satu lagi. Ini adalah objek padat yang terdiri dari "W" di atas "A" yang memberikan logo 2d pixelated sekolah tua yang sangat sederhana dari satu tampilan, dan logo 3d dari tampilan lain. Berikut ini adalah gif animasi:

straighta2

Objek padat dibuat secara terprogram menggunakan kode berikut di 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];

Berikut adalah tampilan 2d:

frame00099

dan inilah tampilan 3dnya:

frame00099

Saya dapat menghasilkan variasi dan menyempurnakan set aset bila diperlukan.

Saya bermain dengan lengan silang bengkok yang lebih simetris untuk A:

frame00100

tapi saya pribadi lebih suka lengan silang lurus karena A lebih jelas.

@h00gs menarik, Anda hampir memiliki acara MC Escher, saya suka.

Saya pikir kunci pas mungkin berkomunikasi perakitan dan dapat dibangun dari bentuk yang mirip dengan WA.

wasm_draft_3

@rfernbach entah bagaimana desain Anda terlihat seperti viking bagi saya:
viking
...apakah kita membutuhkan maskot? :)

Hai @mbebenita Bagaimana tantangan membuat favicon di pixel art? ... =]

Jadi upaya awal saya tidak cukup tepat sehingga saya bertahan dan menemukan palang melengkung untuk A terlihat bagus. Berikut animasinya: