Skillnad mellan versioner av "Grafisk profil"

Från Kunskapsbanken
Hoppa till: navigering, sök
Rad 1: Rad 1:
{{layout|datum=2014-02}}
+
En grafisk profil har man för att en organisation enkelt ska kännas igen. Här sammanställs olika riktlinjer för hur allt material ska utformas så det blir sammanhängande. Sidan är också tänkt att hjälpa medlemmar m.fl. när de själva ska ta fram exempelvis ett flygblad. Det som finns angett i Ung Pirats grafiska profil är inte några regler som absolut måste följas utan snarare riktlinjer, eller tips om man så vill. I denna profil finns information om logotyp, teckensnitt, färger, och grafiska element.
{{innehållsförteckning|höger}}
+
==Varför behövs en grafisk profil?==
+
En grafisk profil har man för att en organisation enkelt ska kännas igen. Här sammanställs olika riktlinjer för hur allt material ska utformas så det blir sammanhängande och så att alla medlemmar m.fl. kan få hjälp när de själva ska ta fram exempelvis ett flygblad.
+
Det som finns angett i Ung Pirats grafiska profil är inte några regler som absolut måste följas utan snarare riktlinjer, eller tips om man så vill.
+
I denna profil finns information om teckensnitt, färger, logotype och grafiska element. Det finns även färdiga mallar för bl.a. brevpapper och visitkort att ladda ner på hemsidan www.ungpirat.se.
+
  
==Färger==
+
=Protip: snappa.io=
Förutom svart (för text) och vitt (för underlaget) använder vi oss inom Ung Pirat av fem färger: två grundfärger och tre komplementerande färger.
+
Grundtanken är att all text skall skrivas i svart mot vit bakgrund, medan de resterande färgerna kan användas för detaljer, informationsrutor etc.
+
På webben kan svart text ersättas med mörkgrått (hexadecimal #333333) för minskad kontrast och ökad läsbarhet.
+
  
<gallery>
+
Det absolut enklaste stället att starta är att använda sig av tjänsten https://snappa.io/. Här kan du gratis skapa schyst grafik utifrån färdiga mallar skapade för att smidigt spridas i sociala medier och på webben. Alla element i tjänsten är licensierade CC0, dvs public domain, och får användas hur som helst.
File:Grafisk_profil_orange.jpg|'''Grundfärg'''<br />RGB:255/153/51<br />CMYK:0/48/88/0<br />PMS: 130<br />Webb: #ff9933
+
File:Grafisk_profil_grön.jpg|'''Grundfärg'''<br />RGB:102/153/51<br />CMYK:66/20/100/4<br />PMS: 376<br />Webb: #669933
+
</gallery>
+
<gallery>
+
File:Grafisk_profil_turkos.jpg|'''Komplementfärg'''<br />RGB:102/204/204<br />CMYK:55/0/24/0<br />PMS: 7471<br />Webb: #66cccc
+
File:Grafisk_profil_blå.jpg|'''Komplementfärg'''<br />RGB:51/153/204<br />CMYK:73/26/5/0<br />PMS: 2925<br />Webb: #3399cc
+
File:Grafisk_profil_ljuslila.jpg|'''Komplementfärg'''<br />RGB:204/153/204<br />CMYK:18/44/0/0<br />PMS: 2572<br />Webb: #cc99cc
+
</gallery>
+
  
==Texter==
+
Välj en template, en snygg bakgrund, skriv budskapet i Lato i UP-orange (vars exakta hexkod du kan kopiera nedan), ladda upp logon och du är klar!
====Våra teckensnitt (tryck)====
+
Vi är ett förbund som vänder sig till unga. Vi är en nytänkande och modern organisation som satsar mycket på sociala medier och IT. Det är med detta som bakgrund vi valt vår typografi. Bitstream Vera Sans passar vår profil bra med tanke på att det är luftigare än många andra sans serifer vilket gör texten lättläst och behaglig. Det gör sig bra digitalt samtidigt som det ser trendigt ut i tryckt format. För att underlätta lättläsheten bör det finnas ett ordentligt avstånd mellan raderna. Vid grundstorlek 10pt är 14pt eller 140% radavstånd även bra för synskadade.
+
För ingresser används fetstil samt grundstorlek 11pt med radavstånd 15pt (140%).
+
Boris Black Bloxx är även det en sans serif, vilket brukar se bäst ut i rubriker. Det ser stelare och lite mer brutalt ut än Vera Sans och passar därför bra som komplement i rubriker och mellanrubriker.
+
  
====Avstånd mellan stycken====
 
Avståndet mellan stycken bör motsvara en tom rad (28pt i brödtext). Mellan stycke och efterföljande rubrik bör avståndet enligt den “gyllene regeln” motsvara tre tomma rader (56pt). Dessa avstånd underlättar läsbarheten och den visuella indelningen av dokumenten.
 
  
====Våra teckensnitt (webb)====
 
På webbplatsen och i e-post kan Boris Black Bloxx endast användas som grafikfil. Som ersättning för Boris Black Bloxx kan Helvetica Neue Bold användas.
 
Bitstream Vera Sans finns idag förinstallerad på flertalet operativsystem och ersätts i annat fall automatiskt med Helvetica / Arial.
 
  
====Rubriker och mellanrubriker====
+
= Officiell logotyp =
Boris Black Bloxx
+
{| class="wikitable" style="background: #e0dede;"
Huvudrubrik: 20pt
+
| [[Fil:UngPiratlogotyp.png|300px|frameless]]
Under- och mellanrubriker: 12pt
+
|}
Tom rad mellan rubriker och brödtext (inget mellanrum direkt mellan olika rubriker t.ex. överskrift och mellanrubrik)
+
Brödtext
+
Bitstream Vera Sans
+
storlek 10pt
+
Radavstånd 140% eller 14pt.
+
  
====Rubrik (mellanrubrik)====
 
'''Rubrik (mellanrubrik)'''
 
<br />
 
Stycke med lite text och ännu mer text <br />
 
och efter det lite text. Texten behövs helt enkelt för att visa texten.
 
tre tomma rader / 56pt mot baslinje<br /><br />
 
  
 +
Logotypen får även användas utan text till, samt i olika UP-färger, såhär:
  
'''Rubrik (mellanrubrik)'''
+
{| class="wikitable" style="background: #e0dede;"
en tom rad / 28pt mot baslinje
+
| [[File:Orange segel.png|170px|frameless]]
Stycke med lite text och ännu mer text <br />
+
|}
och efter det lite text. Texten behövs helt enkelt för att visa texten.
+
  
  
==Logotyp==
+
= Färger =
Vår logotyp består av texten ”Ung Pirat” med
+
Vår primära färg är orange. Den får gärna användas i kombination med svart, vitt, grått samt de andra profilfärgerna. För "coolt" satsa på orange eller annan profilfärg plus svart. För "happy" eller "nice looking" satsa på grönt eller annan profilfärg med vitt. Experimentera gärna med att använda profilfärgerna som bakgrund med svart eller vit text. Här finns exempel.
Piratpartiets logga mellan orden. Text och logga
+
hålls i svart. På det viset kan alla se att vi har ett
+
nära samarbete med Piratpartiet, samtidigt som
+
vi visar oss som en självständig organisation.
+
Den svarta loggan bör användas i så lång utsträckning
+
som möjligt. På en mörkare bakgrund
+
eller om en mindre framträdande och mer
+
designorienterad variant önskas, kan en inverterad
+
logotyp användas.
+
På webben kan istället för den svarta och inverterade
+
varianten även en gråfärgad logotyp
+
användas. För att förhindra förväxling med
+
andra politiska ungdomsförbund och/eller partier
+
bör dock inga andra färger användas för själva
+
logotypen.
+
  
LÄNKA IN BILDERNA!!!
+
{| class="wikitable" style="background: #e0dede;"
 +
| [[Fil:Snappa-1447952694.png|300px|frameless]]
 +
| [[File:VälkommentillUngPirat.png|300px|frameless]]
 +
[[File:HackathonUngPirat.png|300px|frameless]]
 +
| [[Fil:Piratjulklappinstagram.png|300px|frameless]]
 +
|}
  
==Avstånd kring logotyp==
+
{| class="wikitable"
LÄNKA IN BILD!!
+
!colspan="13"|Färgkoder
Dessa avstånd är mest riktlinjer. Vill man använda den exempelvis i en header på en
+
|-
webbplats kan det vara bra att halvera avstånden.
+
|
 +
|Webb
 +
|Tryck (CMYK)
 +
|-
 +
|
 +
|-
 +
|Orange – primär färg
 +
|#f28903
 +
|50-10-100-0
 +
| style="width: 30%; background-color: #f28903;"|
 +
|-
 +
|
 +
|-
 +
|Grön – sekundär färg
 +
|#95b420
 +
|0-55-100-0
 +
| style="width: 30%; background-color: #95b420;"|
 +
|-
 +
|
 +
|-
 +
|Lila – sekundär färg
 +
|#512483
 +
|85-100-0-0
 +
| style="width: 30%; background-color: #512483;"|
 +
|-
 +
|
 +
|-
 +
|Gul
 +
|#eabd00
 +
|0-20-100-10
 +
| style="width: 30%; background-color: #eabd00;"|
 +
|-
 +
|
 +
|-
 +
|Rosa
 +
|#d82e8a
 +
|10-90-0-0
 +
| style="width: 30%; background-color: #d82e8a;"|
 +
|-
 +
|
 +
|-
 +
|Röd
 +
|#cf242c
 +
|15-95-85-0
 +
| style="width: 30%; background-color: #cf242c;"|
 +
|-
 +
|
 +
|-
 +
|Blå
 +
|#00a6d0
 +
|90-0-15-0
 +
| style="width: 30%; background-color: #00a6d0;"|
 +
|-
 +
|
 +
|-
 +
|Mörkblå
 +
|#005c9f
 +
|100-60-10-0
 +
| style="width: 30%; background-color: #005c9f;"|
 +
|-
 +
|
 +
|-
 +
|Turkos
 +
|#00a09b
 +
|79-12-44-0
 +
| style="width: 30%; background-color: #00a09b;"|
 +
|-
 +
|}
  
==Grafiska element==
+
= Typsnitt =
För att ge dokument lite mer färg och ett piggare uttryck finns diverse dekorer som går att sätta in där de passar. En remsa i marginalen eller våra snirkliga mönster som kan fylla ut tomrum eller komplettera logotypen med lite färg och form är inte helt fel.
+
Vid använding av dekormomenten bör logotypen vara frilagd (dvs logotypen bör inte övertäcka eller övertäckas av dekormomenten).
+
Snirklarna finns i tre delar som går att sätta ihop som man själv vill. Det går att använda alla tillsammans eller endast en av dem på exempelvis ett visitkort. De kan användas som små detaljer, eller större och mer framträdande.
+
  
==Grafisk grafisk profil==
+
* Vi använder primärt fonten LATO i fyra skärningar (inom parentes Google Fonts): Light/Light Italic (300), Regular/Italic (400), Bold/Bold Italic (700) och Black/Black Italic (900). Gärna i kombination med varandra (se avsnitt Formgivning).
Följ denna länken för att komma åt den grafiska varianten av den grafiska profilen.
+
* Det finns fler skärningar av fonten – exempelvis LATO HAIRLINE. Den kan användas för trycksaker, men fungerar inte bra för skärmbilder online osv.
LÄGG TILL LÄNK HÄR!!
+
* Ladda ner till dator från [http://www.latofonts.com www.latofonts.com]
 +
* [http://www.google.com/fonts/specimen/Lato Google fonts], för webb.
 +
 
 +
 
 +
= Ikoner och illustrationer =
 +
 
 +
Ibland kan man behöva använda sig av ikoner eller illustrationer. För det ändamålet rekommenderas [http://fortawesome.github.io/Font-Awesome Font Awsome]. Används med fördel tillsammans med vårt typsnitt och våra färger.
 +
 
 +
 
 +
= Länkresurser =
 +
 
 +
=====Typsnitt=====
 +
* [http://www.latofonts.com%20www.latofonts.com Lato] – vårt officiella typsnitt
 +
* [http://www.google.com/fonts/specimen/Lato Google fonts] Lato på webbsidor
 +
* [http://fortawesome.github.io/Font-Awesome Font Awsome] – fri ikonfont för webb och illustrationer
 +
 
 +
 
 +
=====Fria bilder=====
 +
* [http://stocksnap.io stocksnap.io] Snygga högupplösta bilder som får användas fritt
 +
* [http://www.freepik.com/popular-vectors www.freepik.com/popular-vectors] Fria vectorbaserade illustrationer
 +
* [http://compfight.com Flickr] (för att hitta CC-bilder på Flickr)
 +
* [http://www.flickr.com/search/advance www.flickr.com/search/advance] (ställ in CC när du söker)
 +
* [http://bildbank.piratpartiet.se/main.php bildbank.piratpartiet.se/main.php] (PPs bildbank)
 +
* [http://commons.wikimedia.org commons.wikimedia.org] (såklart)
 +
* [http://search.creativecommons.org search.creativecommons.org] (portal för CC-bildsidor)
 +
 
 +
=====Tips=====
 +
* [http://www.skills2tech.com/2015/01/social-media-images-size-guide-2015.html Guider för format i sociala medier]
 +
* [http://freepsdfiles.net Fria psd-filer]
 +
* [http://www.jamendo.com/en Fri musik], för exempelvis film
 +
* [http://www.easypdfcloud.com Kombinera och konvertera pdf-filer]
 +
* [http://freesound.org Fria ljudeffekter]
 +
 
 +
=====Inspiration=====
 +
* Filmer gjorda med Piratpartiets grafiska form: [https://youtu.be/TeBk3DZJOr4 Infofilm], film om [https://youtu.be/tVazj_HCdWU migration].
 +
* Fristående hemsida med nedslag i Piratpartiets politik, [http://framtidspolitik.nu/ framtidspolitik.nu]
 +
* Confederación Pirata ([https://confederacionpirata.org/wiki/creativos:start%20 posters, memes, ads, logos])
 +
* Pirate Party UK ([https://pirateparty.org.uk/campaigns/activists/all-materials posters, flyers, images etc.])

Versionen från 16 februari 2016 kl. 16.38

En grafisk profil har man för att en organisation enkelt ska kännas igen. Här sammanställs olika riktlinjer för hur allt material ska utformas så det blir sammanhängande. Sidan är också tänkt att hjälpa medlemmar m.fl. när de själva ska ta fram exempelvis ett flygblad. Det som finns angett i Ung Pirats grafiska profil är inte några regler som absolut måste följas utan snarare riktlinjer, eller tips om man så vill. I denna profil finns information om logotyp, teckensnitt, färger, och grafiska element.

Protip: snappa.io

Det absolut enklaste stället att starta är att använda sig av tjänsten https://snappa.io/. Här kan du gratis skapa schyst grafik utifrån färdiga mallar skapade för att smidigt spridas i sociala medier och på webben. Alla element i tjänsten är licensierade CC0, dvs public domain, och får användas hur som helst.

Välj en template, en snygg bakgrund, skriv budskapet i Lato i UP-orange (vars exakta hexkod du kan kopiera nedan), ladda upp logon och du är klar!


Officiell logotyp

UngPiratlogotyp.png


Logotypen får även användas utan text till, samt i olika UP-färger, såhär:

Orange segel.png


Färger

Vår primära färg är orange. Den får gärna användas i kombination med svart, vitt, grått samt de andra profilfärgerna. För "coolt" satsa på orange eller annan profilfärg plus svart. För "happy" eller "nice looking" satsa på grönt eller annan profilfärg med vitt. Experimentera gärna med att använda profilfärgerna som bakgrund med svart eller vit text. Här finns exempel.

Snappa-1447952694.png VälkommentillUngPirat.png

HackathonUngPirat.png

Piratjulklappinstagram.png
Färgkoder
Webb Tryck (CMYK)
Orange – primär färg #f28903 50-10-100-0
Grön – sekundär färg #95b420 0-55-100-0
Lila – sekundär färg #512483 85-100-0-0
Gul #eabd00 0-20-100-10
Rosa #d82e8a 10-90-0-0
Röd #cf242c 15-95-85-0
Blå #00a6d0 90-0-15-0
Mörkblå #005c9f 100-60-10-0
Turkos #00a09b 79-12-44-0

Typsnitt

  • Vi använder primärt fonten LATO i fyra skärningar (inom parentes Google Fonts): Light/Light Italic (300), Regular/Italic (400), Bold/Bold Italic (700) och Black/Black Italic (900). Gärna i kombination med varandra (se avsnitt Formgivning).
  • Det finns fler skärningar av fonten – exempelvis LATO HAIRLINE. Den kan användas för trycksaker, men fungerar inte bra för skärmbilder online osv.
  • Ladda ner till dator från www.latofonts.com
  • Google fonts, för webb.


Ikoner och illustrationer

Ibland kan man behöva använda sig av ikoner eller illustrationer. För det ändamålet rekommenderas Font Awsome. Används med fördel tillsammans med vårt typsnitt och våra färger.


Länkresurser

Typsnitt


Fria bilder
Tips
Inspiration