Hem

Emmas Böcker

Style Guide

Innehållsförteckning

Intro

En style guide är en grafisk profil som företag, organisationer etcetera använder sig av för att skapa igenkänning och att bygga konsekvens. Detta inger trygghet hos användarna och ökar tillgängligheten eftersom användaren vet hur man ska ta till sig informationen. Style Guides handlar om dokumentation och fördelen är att man får någonting som är skalbart och som andra människor kan förstå.

Det huvudsakliga syftet med style guides är att underlätta både utveckling samt underhåll och skapande av nya sidor. Det är till för att underlätta för användbarheten och tillgängligheten. Poängen är att style guides är levande och inte statiska. Det är riktig kod som HTML, CSS, Scrips mfl. De underlättar för att kunna jobba med olika företag samt att det blir enklare att sälja in produkter med en grafisk profil. Det som är viktigt att tänka på med style guides är att hålla dem levande och möta användarnas krav.

Rutsystem

Det här är mallen för rutsystem som ska följas.
Header
Article
Article 2
Figure
Article 3
Article 4
Footer

Header
Headern ska alltid vara en full screen landing page med headerbilden som du kan se i sista kapitlet under Bilder och Grafik.

Article 1
Första artikeln ska vara i bodyns färg vilket är #f8f8f8. Den ska vara 100% bred men texten ska ligga på 60-70% bredd. Texten ska alltså inte gå från kant till kant på skärmen.

Article 2
Ska ha vit bakgrundsfärg så det går att skilja mellan de olika artiklarna. Den ska vara 100% bred men texten ska ligga på 60-70% bredd. Texten ska alltså inte gå från kant till kant på skärmen.

Article 3
Nästa artikel ska återigen vara i bodyns färg vilket är #f8f8f8. Den ska vara 100% bred men texten ska ligga på 60-70% bredd. Texten ska alltså inte gå från kant till kant på skärmen.

Article 4
Ska ha vit bakgrundsfärg så det går att skilja mellan de olika artiklarna. Den ska vara 100% bred men texten ska ligga på 60-70% bredd. Texten ska alltså inte gå från kant till kant på skärmen.

Figure
Ska ha en bredd på 100% och det ska ligga med två artiklar mellan varje figur.

Footer
Ska ha en bredd på 100% av skärmens storlek samt med en gradient av färgerna #a6d3d8 och #8f93ac med 45 graders vinkel.

/* CSS kod för gradient */
header {
background-image: linear-gradient(to bottom right, #a6d3d8, #8f93ac);
}

Typografi

Brödtext: Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö

/* CSS kod för brödtext, placeras i <body> */

body {
font-family: 'Verdana';
font-size: 15px;
color: #666666;
}

h1 rubrik: Raleway Regular

ABCDEFGHIJKL
MNOPQRSTUV
WXYZÅÄÖ abcdefghijklmn
opqrstuvwxyzå
äö


/* CSS kod för h1 */

h1 {
font-family: 'Raleway', sans-serif;
color: #fff;
font-size: 8vw;
line-height: 1;
}

h2 rubrik: Crimson Text Bold

ABCDEFGHIJKLMNOPQRST
UVWXYZÅÄÖ abcdefghijklmnopqrstuvwxy
zåäö

/* CSS kod för h2 */

h2 {
font-family: 'Crimson Text', serif;
text-transform: uppercase;
color: #000000;
font-size: 4vw;
font-weight: 700;
opacity: 0.3;
}

h3 rubrik: Raleway Light 300

ABCDEFGHIJKLMNOPQRSTU
VWXYZÅÄÖ abcdefghijklmnopqrstuvwxy
zåäö


/* CSS kod för h3* /

h3 {
font-family: 'Raleway', sans-serif;
color: ##8f93ac;
font-size: 300%;
font-weight: 300;
letter-spacing: 2px;
}

h4 rubrik: Crimson Text Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö


/* CSS kod för h4 */

h4 {
font-family: 'Crimson Text', serif;
color: #000000;
font-size: 150%;
font-weight: 700;
letter-spacing: 1.5px;
opacity: 0.7;
}

h5 rubrik: Raleway Italic 300
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö
/* CSS kod för h5 */

h5 {
font-family: 'Raleway', sans-serif;
font-size: 120%;
font-weight: 300;
font-style: italic;
margin: 0;
}

h6 rubrik: Verdana Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö
/* CSS kod för h6 */

h6 {
font-family: 'Verdana', sans-serif;
font-size: 100%;
font-weight: 700;
margin: 0;
}

Färger

#a6d3d8
rgb(166, 211, 216)
cmyk(39%, 4%, 17%, 0%)

#8f93ac
rgb(143, 147, 172)
cmyk(49%, 39%, 20%, 4%)

#f8b3a4
rgb(248, 179, 164)
cmyk(0%, 39%, 31%, 0%)

#000000
rgb(0, 0, 0)
cmyk(100%, 100%, 100%, 100%)

#ffffff
rgb(255, 255, 255)
cmyk(0%, 0%, 0%, 0%)

Form-element

Här finns riktlinjerna för hur form-elementen i dokumentet ska se ut enligt den grafiska profilen.

<input>



/* <input> ska främst användas till sökrutan och ska då placeras i hemsidans <nav> i HTML. Såhär ska CSS koden se ut */

input {
width: 100%;
padding: 5%;
border-radius: 10px;
border: 1px;
border-style: solid;
border-color: #cccccc;
font-size: 15px;
}

<select>


/* <select> används till drop-down menyn i <nav> i HTML. Så här ska CSS koden se ut */

select {
font-family: 'Verdana';
font-size: 15px;
color: #333;
padding: 1%;
border: none;
}

<option>
/* <option> är alternativen i en select lista. Eftersom det är länkar ska de vara en pseudo klass med hover effekt. Kod för länkar ligger under Länkar och Navigation */

option {
background-color: white;
}

<button>


/* <button> knapp för att skicka/hämta data */

button {
background-color: #f8b3a4;
color: #ffffff;
width: 100%;
padding: 2%;
border-radius: 10px;
border: 1px;
border-style: solid;
border-color: #cccccc;
font-size: 15px;
}

<form>
Titel


Format




/* <form> för formulär */

form {
width: 100%;
background-color: #ffffff;
padding: 5%;
color: #333333;
}

<ul>


/* <ul> för unordered lists */

ul {
padding: 2%;
}

li {
text-align: left;
}

Länkar och navigation

Mot en ljus bakgrund:

Såhär kommer länken se ut

Mot en mörk bakgrund:

Såhär kommer länken se ut

Bilder och grafik

Här kommer riktlinjer för hur bilder och grafik ska se ut enligt den grafiska profilen.

Header som ska användas

header_bild

Logotyp mot ljus bakgrund

svart_logotyp
Storlek anpassas efter layouten.

Opaciteten ska ligga mellan 0.2 och 0.8.

Logotyp mot mörkbakgrund

vit_logotyp

Storlek anpassas efter layouten.

Opaciteten ska ligga mellan 0.2 och 0.8.

Bilder

De bilder som används ska ha ett filter med samma gradient som använts för header och footer. Färgerna ska vara den turkosa (#a6d3d8) samt den blålila (#8f93ac) där den turkosa börjar från det vänstra hörnet högst upp och går över till den blålila mot det nedre högra hörnet. Opaciteten på filtret ska vara mellan 30-50%. Se bild nedan där filtret är applicerat på bildens högra sida.

bild_med_filter

Ikoner

Dessa ikoner ska användas. De vita mot mörk bakgrund eller bakgrund med den gradient som ska användas. De svarta ikonerna används mot vita eller väldigt ljusa bakgrunder.

ikoner

Favicon

Denna favicon i storlek 16 x 16 px ska användas för desktops.

favicon

Moodboard

Det här var moodboarden för denna dynamiska webbsida.

moodboard