Mitglieder

Projekte/Style Guide: Unterschied zwischen den Versionen

Seite Diskussion

Projekte/Style Guide (Quelltext anzeigen)

Version vom 18. August 2022, 19:46 Uhr

13.942 Bytes hinzugefügt ,  vor 2 Jahren
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
== Farben ==
 
Die Wikimedia-Farben sind grün, blau und rot wie unten definiert. Sie können etwa als Hintergrundfarben und Titel- bzw. Überschriftsfarben verwendet werden.
= Schriftarten =
Wikimedia verwendet zwei Haupt-Schriftarten: Montserrat and Source Serif Pro. Beide Schriften sind frei und als Open Source verfügbar ("Open Font License").
* Die Standard-Schriftart für Fließtexte ist [https://fonts.google.com/specimen/Source+Serif+Pro Source Serif Pro (Download)].
* Die Schriftart für Wikimedia-Wortmarken, Überschriften und Dokument-Titel ist [https://fonts.google.com/specimen/Montserrat Montserrat (Download)].
 
 
 
= Logos =
(siehe [[:de:commons:Category:Wikimedia Österreich logos|Wikimedia Österreich Logos auf Commons]], dort auch als PNGs verfügbar)<br>
 
 
<gallery class="center" caption="Wikimedia Österreich Logos im .svg Format">
Wikimedia Österreich logo 4c.svg|'''Wikimedia Österreich normal''' (Standard)
Wikimedia Österreich logo b 4c.svg|'''Wikimedia Österreich vertikal'''
Wikimedia Österreich logo white.svg|'''Wikimedia Österreich weiß''' (für besondere Hintergründe)
Wikimedia Österreich logo black.svg|'''Wikimedia Österreich schwarz''' (für besondere Hintergründe)
Wikimedia Österreich logo b black.svg|'''Wikimedia Österreich schwarz vertikal''' (für besondere Hintergründe)
</gallery>
 
 
= Farben =
Die Wikimedia-Farben bestehen aus drei verschiedenen Farbpaletten: Die Kernpalette ("Core-Palette"), die Ursprungspalette ("Legacy-Palette") und die Kreativpalette ("Creative-Palette"). Die jewiligen Farbcodes finden sich unterhalb. 
 
== Verwendung von Farben ==
<br>
<b>Farbkombinationen</b>
<br>
Um einen ausreichend guten Kontrast zu erzielen empfiehlt sich die "Legacy-Palette" und die "Creative-Palette" mit schwarzem oder weißem Text zu kombinieren. Alle Farben mit Ausnahme von Violett, Blau, Grün und Dunkelgrün sind mit schwarzem Text kompatibel. Die übrigen Farben sollten mit Weiß kombiniert werden, um kontrastreich genug zu sein.
<br><br>
<b>Farbkombination-"Don'ts"</b>
<br>
Im Sinne der Barrierefreiheit wird empfohlen, auf eine <i>gemeinsame Verwendung der kräftigen und hellen Farbtöne der Kreativpalette</i> für Hintergrund und Text zu vermeiden, da der Kontrast nicht ausreichend ist.
 
== Kernpalette ("Core-Palette") ==
Die Kernpalette besteht aus Weiß und Schwarz sowie drei Schwarzschattierungen: Schwarz 75, Schwarz 50 und Schwarz 25. Schwarz und Weiß sind unsere Hauptfarben, die gut mit den Farben der Ursprungspalette und der Kreativpalette harmonieren.
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#FFFFFF; width:170px; height:150px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;FFFFFF<br>
R255, G255, B255<br>
C0, M0, Y0, K0<br>
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#000000; width:170px; height:150px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;000000<br>
R0, G0, B0<br>
C0, M0, Y0, K100<br>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#339966; width:170px; height:150px;">
<div style="background:#404040; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div>
&#35;339966<br>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;404040<br>
R64, G64, B64<br>
C0, M0, Y0, K75<br>
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#7F7F7F; width:170px; height:150px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;7F7F7F<br>
R127, G127, B127<br>
C0, M0, Y0, K50<br>
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#BFBFBF; width:170px; height:150px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;BFBFBF<br>
R191, G191, B191<br>
C0, M0, Y0, K25<br>
</div></div>
<br clear="all" /> 
 
 
 
== Ursprungspalette ("Legacy-Palette") ==
Die Ursprungspalette besteht aus den drei bereits ursprünglich eng mit der Wikimedia-Bewegung verbundenen Farben: Grün, Blau und Rot. Sie können z.B. als Hintergrundfarben, Titel- oder Überschriftenfarben oder Branding-Farbtöne verwendet werden. In Kombimation mit Weiß gibt es auch eine für Barrierefreiheit optimierte Version der Farben mit Konformitätsstufe AAA-geprüftem Kontrast (s. zweite Farb-Zeile).
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#396; width:170px; height:150px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;396<br>
R51, G153, B102<br>
R51, G153, B102<br>
C67, M0, Y33, K40<br>
C67, M0, Y33, K40<br>
PMS 347U
PMS 347U<br><br>
 
<b>AAA-geprüft:</b>
</div>
<div style="background:#246342; width:170px; height:75px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;246342<br>
R36, G99, B66<br>
C64, M0, Y33, K61
</div></div>
</div></div>


Zeile 17: Zeile 112:
R0, G99, B191<br>
R0, G99, B191<br>
C89, M63, Y0, K0<br>
C89, M63, Y0, K0<br>
PMS 2388U
PMS 2388U<br><br>
 
<b>AAA-geprüft:</b>
</div>
<div style="background:#0C57A8; width:170px; height:75px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;0C57A8<br>
R12, G87, B168<br>
C93, M48, Y0, K0
</div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#990000; width:170px; height:150px;">
<div style="background:#900; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;990000<br>
&#35;900<br>
R153, G0, B0<br>
R153, G0, B0<br>
C24, M100, Y100, K25<br>
C24, M100, Y100, K25<br>
PMS 2350U
PMS 2350U<br><br>
 
<b>AAA-geprüft:</b>
</div>
<div style="background:#970302; width:170px; height:75px;">
</div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;970302<br>
R151, G03, B02<br>
C0, M98, Y99, K41
</div></div>
</div></div>
<br clear="all" />   
<br clear="all" />   
Zeile 32: Zeile 145:
<small>Hinweis: Der grüne CMYK-Farbwert ist inkonsistent bei Adobe-Anwendungen. Verwende den grünen Hex-Wert und setze dein Dokument im CMYK-Farbmodus auf.</small>
<small>Hinweis: Der grüne CMYK-Farbwert ist inkonsistent bei Adobe-Anwendungen. Verwende den grünen Hex-Wert und setze dein Dokument im CMYK-Farbmodus auf.</small>


== Schriftarten ==
== Kreativpalette ("Creative-Palette") ==
* Die Standard-Schriftart für normale Texte ist [https://fonts.google.com/specimen/Source+Serif+Pro Source Serif Pro].
Die 11 Farben der Kreativpalette leiten sich aus Farbgebungen ab, die von Wiki-Communities auf der ganzen Welt häufig verwendet werden und wurden mit den [https://meta.wikimedia.org/wiki/Wikipedia_20/Resources Wikipedia20]-Geburtstagsfarben ergänzt. Diese Farbpalette ergänzt die Ursprungs- und Kernpalette um bei Bedarf mehr Flexibilität in Gestaltungsmöglichkeiten zu bieten. Die Farben Rot, Blau und Grün der Kreativpalette unterscheiden sich leicht von jenen der Ursprungspalette, da sie für die Barrierefreiheit Konformitätsstufe AA angepasst sind.
* Die Schriftart für Wikimedia-Wortmarken und besonders hervorgehobene Überschriften und Dokument-Titel ist [https://fonts.google.com/specimen/Montserrat Montserrat].
 
Beide Schriftarten sind frei und stehen unter der Open Font License.
=== Dunkle Farben ===
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#970302; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;970302<br>
R151, G03, B02<br>
C0, M98, Y99, K41
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#E679A6; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;E679A6<br>
R230, G121, B166<br>
C0, M47, Y28, K10
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#EE8019; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;EE8019<br>
R238, G128, B25<br>
C0, M46, Y89, K07
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#F0BC00; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F0BC00<br>
R240, G188, B0<br>
C0, M22, Y100, K06
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#5748B5; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;5748B5<br>
R87, G72, B181<br>
C52, M60, Y0, K29
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#305D70; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;305D70<br>
R48, G93, B112<br>
C57, M17, Y0, K56
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#0E65C0; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;0E65C0<br>
R14, G101, B192<br>
C93, M47, Y0, K25
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#049DFF; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;049DFF<br>
R04, G157, B255<br>
C98, M38, Y0, K0
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#E9E7C4; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;E9E7C4<br>
R233, G231, B196<br>
C0, M01, Y16, K09
</div></div>


== Logos ==
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
(siehe [[:de:commons:Category:Wikimedia Österreich logos|Wikimedia Österreich logos auf Commons]], dort auch PNGs)
<div style="background:#308557; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;308557<br>
R48, G133, B87<br>
C64, M0, Y35, K48
</div></div>


'''Wikimedia Österreich normal''' (Standard)
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
: [[Datei:Wikimedia Österreich logo 4c.svg|rahmenlos|hochkant=0.5|links]]
<div style="background:#71D1B3; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;71D1B3<br>
R113, G209, B179<br>
C46, M0, Y14, K18
</div></div>
<br clear="all" />  
<br clear="all" />  


'''Wikimedia Österreich vertikal'''
: [[Datei:Wikimedia Österreich logo b 4c.svg|rahmenlos|hochkant=1.1|links]]
<br clear="all" />


'''Wikimedia Österreich weiß''' (für besondere Hintergründe)
=== Helle Farben ===
: [[Datei:Wikimedia Österreich logo white.svg|rahmenlos|hochkant=0.5|links]]
 
<br clear="all" />
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#E5C0C0; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;E5C0C0<br>
R229, G192, B192<br>
C0, M16, Y16, K10
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#F9DDE9; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F9DDE9<br>
R249, G221, B233<br>
C0, M11, Y06, K02
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#FBDFC5; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;FBDFC5<br>
R251, G223, B197<br>
C0, M11, Y22, K02
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#FBEEBF; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;FBEEBF<br>
R251, G238, B191<br>
C0, M05, Y24, K02
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#D5D1EC; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;D5D1EC<br>
R213, G209, B07<br>
C10, M11, Y0, K07
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#CBD6DB; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;CBD6DB<br>
R203, G214, B219<br>
C07, M02, Y0, K14
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#C3D8EF; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;C3D8EF<br>
R251, G223, B197<br>
C0, M11, Y22, K02
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#C0E6FF; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;C0E6FF<br>
R192, G230, B255<br>
C25, M10, Y0, K0
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#F9F9F0; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F9F9F0<br>
R249, G249, B240<br>
C0, M0, Y04, K02
</div></div>
 
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#CBE0D5; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;CBE0D5<br>
R203, G224, B213<br>
C09, M0, Y05, K12
</div></div>


'''Wikimedia Österreich schwarz''' (für besondere Hintergründe)
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
: [[Datei:Wikimedia Österreich logo black.svg|rahmenlos|hochkant=0.5|links]]
<div style="background:#DBF3EC; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;DBF3EC<br>
R219, G243, B236<br>
C10, M0, Y03, K05
</div></div>
<br clear="all" />
<br clear="all" />


'''Wikimedia Österreich schwarz vertikal''' (für besondere Hintergründe)
: [[Datei:Wikimedia Österreich logo b black.svg|rahmenlos|hochkant=1.1|links]]
<br clear="all" />


== Präsentationsfolien ==
= Grafiken und Illustrationen =
* Google Präsentationen: [https://docs.google.com/presentation/d/10ELbrFeUa7E22S6MFzBM7c47dPWp6j29JZkHOuEaOl4/edit?usp=sharing Wikimedia Österreich Präsentationsvorlage] (Master)


[[Kategorie:Projekte]]
<gallery mode="nolines" caption="Wikimedia Brand Guidelines Update 2022" showfilename>
[[Kategorie:Verein]]
Wikimedia Brand Guidelines Update 2022 - Activism.svg|Activism.svg
Wikimedia Brand Guidelines Update 2022 - Chemistry.svg|Chemistry.svg
Wikimedia Brand Guidelines Update 2022 - Coatlicue.svg|Coatlicue.svg
Wikimedia Brand Guidelines Update 2022 - Commons.svg|Commons.svg
Wikimedia Brand Guidelines Update 2022 - DataAnalytics.svg|DataAnalytics.svg
Wikimedia Brand Guidelines Update 2022 - Environment.svg|Environment.svg
Wikimedia Brand Guidelines Update 2022 - Fireworks.svg|Fireworks.svg
Wikimedia Brand Guidelines Update 2022 - Flamenco.svg|Flamenco.svg
Wikimedia Brand Guidelines Update 2022 - Futbol.svg|Futbol.svg
Wikimedia Brand Guidelines Update 2022 - Hamsa.svg|Hamsa.svg
Wikimedia Brand Guidelines Update 2022 - Human.svg|Human.svg
Wikimedia Brand Guidelines Update 2022 - Human2.svg|Human2.svg
Wikimedia Brand Guidelines Update 2022 - Human3.svg|Human3.svg
Wikimedia Brand Guidelines Update 2022 - KnowledgeTransfer.svg|KnowledgeTransfer.svg
Wikimedia Brand Guidelines Update 2022 - MediaWiki.svg|MediaWiki.svg
Wikimedia Brand Guidelines Update 2022 - Mobile.svg|Mobile.svg
Wikimedia Brand Guidelines Update 2022 - Mosque.svg|Mosque.svg
Wikimedia Brand Guidelines Update 2022 - Pachamama.svg|Pachamama.svg
Wikimedia Brand Guidelines Update 2022 - Painting.svg|Painting.svg
Wikimedia Brand Guidelines Update 2022 - PenAndPaper.svg|PenAndPaper.svg
Wikimedia Brand Guidelines Update 2022 - Photography.svg|Photography.svg
Wikimedia Brand Guidelines Update 2022 - PuzzleGlobe.svg|PuzzleGlobe.svg
Wikimedia Brand Guidelines Update 2022 - Smile.svg|Smile.svg
Wikimedia Brand Guidelines Update 2022 - Speak.svg|Speak.svg
Wikimedia Brand Guidelines Update 2022 - Traveler.svg|Traveler.svg
Wikimedia Brand Guidelines Update 2022 - Wikidata.svg|Wikidata.svg
Wikimedia Brand Guidelines Update 2022 - WikiIncubator.svg|WikiIncubator.svg
Wikimedia Brand Guidelines Update 2022 - WikiNews.svg|WikiNews.svg
Wikimedia Brand Guidelines Update 2022 - WikiSource.svg|WikiSource.svg
Wikimedia Brand Guidelines Update 2022 - WikiSpecies.svg|WikiSpecies.svg
Wikimedia Brand Guidelines Update 2022 - WikiVoyage.svg|WikiVoyage.svg
Wikimedia Brand Guidelines Update 2022 - Wiktionary.svg|Wiktionary.svg
Wikimedia Brand Guidelines Update 2022 -Brain.svg|Brain.svg
Wikimedia Brand Guidelines Update 2022 -Community.svg|Community.svg
Wikimedia Brand Guidelines Update 2022 -CommunityFood.svg|CommunityFood.svg
</gallery>
Clara Landler
58

Bearbeitungen

Abgerufen von „https://mitglieder.wikimedia.at/Spezial:Mobiler_Unterschied/19876“