Caroline_Thallauer by Caroline

femelefanter

caroline_thallauer0018 — 2017-11-10 19:20:28 UTC

hoppas det var rätt nu

I1 -A 1

caroline_thallauer0018 — 2017-11-11 14:54:18 UTC

Började jobbar med uppgift A nu i helgen då jag kom in på kursen som reserv och 5 dagar innan det började.
Än så länge går det rett fint, gjort en hel del i uppgift 1A och det är mycket detaljer att tänka på gällande avstånd. Jag gör mitt bästa för att försöka få till det. De gryniga pixlarna ställer till det lite för att få det perfekt men man gör så gott man kan.
Jag valde dn.se hemsida.
Lyckas få till fontstilen relativt bra då jag fick söka efter stilar att ladda ner gratis och ta reda på vad för font hemsidan använder.

Att få till avståndet var knepigt och man får småändra lite till och från.

Jag valde att jobba i photoshop för att få variation då jag arbetat mycket i illustrator den senaste tiden. Samt att lärare föredrar det själv och därav blir det kanske lättare för henne att se detaljer i ett program hon är bekväm med och därav lär jag mig förmodligen mer om hon hittar fel.

Jag hoppas jag förstod rätt och visar arbetsprocessen gång och tankar i padlet. Jag har inte använt/ hört talas om det tidigare.

(bild på Wikipedia om fontstilar i tidningar)

I1 -A 2

caroline_thallauer0018 — 2017-11-11 15:01:55 UTC

Bild på arbetsprocessen med header namnlogga. Jag har ett lager med kopian av hemsidan som bas och vitt lager att arbeta på, jag gömmer ibland olika lager för att se om det stämmer och hur det ser ut.
I processen ändrar jag inte originallagret eller dubbleringen av den, Jar arbetar oftast med två av av originallagret för att förhindra fel och andra misstag, då har man alltid originalet att återgå till eller kopiera igen.

Jag fick arbeta med mellanslaget mellan styckena i denna text. Fick minska den rett så rejält för att få den passande, vilket jag vart förvånad hur nära dessa var.

I1-A 3

caroline_thallauer0018 — 2017-11-11 15:04:36 UTC

Arbetets gång med lite småtext, det är inte 100% korrekt fontstil men väldigt nära då jag inte fick tag på dns egna fontstil. Därav får jag ändra lite med bland annat mellanrum, höjd och bredd på flera ställen.

DN använder tydligen DN Bodoni och DN Grotesk som dom ska ha utvecklat själva och jag får inte tag på de exakta utan hittar dock väldigt snarlika så som A Bodoni Orto Titul Nr Black

och HK Grotesk, som jag ladda ner gratis från www.fontsquirrel.com och http://best-font.com

I1 -A 4

caroline_thallauer0018 — 2017-11-12 11:39:10 UTC

Det är alltid bra att kontrollera att man stavat rätt, satt en halvtimme med denna och undra varför jag aldrig fick till storleken x'D

I1 -A 5

caroline_thallauer0018 — 2017-11-12 11:49:37 UTC

Det är en utmaning att hitta rätt fontstil bland alla miljoner, och för ett inte så tränat öga att hitta och veta rätt så är det svårt att se. Det här är kanske en helt vanlig font men jag hittar den inte i mitt program, jag valde att ta en snarlik stil DIN regular. Den stämmer inte överens med 6:an på denna bild men resterande så passar den relativt bra.
man skulle kanske kunna gå in i koden och kolla efter rätt men det är en mer utmaning att försöka hitta det själv och om man inte hittar att försöka hitta snarlika som får en att ändra mycket på mellanrum mellan bokstäver/siffror och storlek.

I1 -A 6

caroline_thallauer0018 — 2017-11-12 12:59:18 UTC

Det intressanta är att det är så pass många rutor och lager man måste tänka på, även hur man placerar alla rutor underst. Jag kände att jag började lite fel och då vart det lite ostrukturerat. Det kanske är lättare att börja med basen sen gå uppåt. Jag började mer uppifrån och ner med det översta på sidan. Det går men det hade nog varit lättare att börja med alla boxar på hemsidan.
Vilket jag kommer att prova på denna gång med sidans footer och se om det blir på något sett lättare och snabbare att arbeta.

I1 -A 7

caroline_thallauer0018 — 2017-11-13 15:29:51 UTC

Färgmässigt så tar jag pipetten men i vissa fall så är det inte bra och blir lätt grått istället för svart, därför valde jag att inte använda pipett på svart text. Färgmässigt va det inte så mycket på denna sida om man inte räknar med annonseringen. grå svart/vitt och rött var det som gällde här.
Jag vart lite förvånad hur mycket variation av storlek det var på texten. Något man inte tänker på när man inte går in djupare som man gjorde nu.
Mycket av texten var relativt täta mellan versaler än jag trott, däremot lämnar dom mer mellanrum mellan hela orden istället, utom själva "dagens nyheter".

Bilderna var fint och stadigt satta med alla en viss marginal så det inte såg för tätt ut. Åter igen fanns det inte så mycket bild på denna sidas övre del eller undre del. En liten bild längst ner på en farbror som jag gissar är grundaren av tidningen. dom hade gett bilden en fin rund form som stack ut lite från allt rektangulära.

I1 -B 1

caroline_thallauer0018 — 2017-11-13 17:31:57 UTC

Jag har i alla fall börjat på andra delen. Känner att jag måste ha lite eld i baken nu när jag kom in lite sent, jag vill gärna hålla planen som är satt.

Med loggan arbetade med i Illustrator.
Jag började med loggan, Svart vitt och rött #A52A2A enligt färgskala 3 som jag valde ut.
skissade ut lite exempel, som vart sedan något helt annat men sån är jag. 99% så blir det inte vad man skissat när man väl sätter sig i själva programmen och flyttar om. Men det är en idé att gå på när man skissar.

Varför jag valde just KR istället för KB
som står för kronblad som företaget heter. var mestadels att KR är så igenkännande i folköga som vanligtvis står för kronor. Bra förkortning som är lätt att minnas. Finns många alternativ till logga men målet är inte att gå in djupare på det så jag lämnar den sådär.

Texten är Myanmar Text regular stora versaler 13,27pt med kerning på 25 för lite mer luft, stilren rak text. Själva K är gjort med raka linjer och Ret är i samma fontstil men spegelvänt som gör det lite mer intressant. Gav ett litet mellanrum mellan logga och texten. Alternativet är att ta bort texten om man nu så önskar för att placera någon stans på hemsidan.

I1 -B skiss för logga

caroline_thallauer0018 — 2017-11-13 17:38:20 UTC

I1 -B skiss för meny och lite av hemsida

caroline_thallauer0018 — 2017-11-13 18:08:26 UTC

I1 -B Nattskissande

caroline_thallauer0018 — 2017-11-13 23:25:47 UTC

En annan meny, den innan kändes lite omodern (fick en känsla av sent 90-tal eller tidig 00-tal med den stilen) på ett sett, tror att denna kan bli snyggare och modernare stil.

I1 -B 2

caroline_thallauer0018 — 2017-11-14 01:14:40 UTC

En natt av menyskapande

Påbörjade menu med Myriad Pro regular 15pt med rejält med luft mellan texten, en kerning på -5. Jag arbetade denna gång i illustrator.
Beroende på layouten på hemsidan sedan så kanske det kan hända att jag gör texten mindre eller större men just nu känns 15pt okej.

Som bilden visar har jag gjort 4 alternativ. Det tredje är lite onödigt men ni förstår vad jag ville visa, är en länk inte vald eller inaktiv så är det endast text.
Texten är i färgen #708090, dekorativ ljus bakgrund som är färgen #F5F5F5
svart på #000000 som är strecket.
på steg 4 följer det gråa med muspekaren. Sidan är mestadels informativ och kommer inte ha någon underkategorier i menyn.

I1 -B 3

caroline_thallauer0018 — 2017-11-16 11:52:43 UTC

Knappar
Gjorde passande knappar (vänster) som liknar menyn som har lite samma stuk.
Admin login är Din regular 12pt och jag valde att göra dom täta med avstånd på -5 även Stort versal på L och jag skippade mellanslag. Den här knappen är bara för de som ska redigera sidan.
Läs mer knappen ska då vidarebefordra till en egen sida med mer text. Det är samma fint och diverse inställningar på denna för att få det lite enhetligt. Denna fick en dekorativ ram så inte knappens färg smälter in i den vita bakgrunden.

Det kan hända att jag ändrar storleken på knapparna om det ser för stort ut när jag väl placerar ut den.

Ikoner
Alla ikoner ät fägen #718092 men jag drog ner genomskinligheten till 50%. Jag vill inte att ikonerna skulle sticka ut för mycket även vill jag inte ha den för ljusa färger för då syns det inte så bra som jag tänkt mig.

texten till häger om ikonerna är endast för att beskriva ikonen. Det kommer inte med på hemsidan.
Här jobbade jag åter igen i illustrator.
Kanske ska påpeka att idé till formen kommer mestadels från arkitektur efter jag googlat på det namnet och kollat runt på bilder som finns. Lite mer industriell känsla.

I1 -B 4

caroline_thallauer0018 — 2017-11-16 13:35:24 UTC

http://www.aop.se/
En hemsida jag hämtar lite inspiration ifrån bland annat, en stilren enkel stil.
Det ser proffsigt ut och inte några större konstigheter. Däremot noterade jag att dom inte har startsida meny vilket kan vara vilseledande när man måste klocka på logga för att komma till första sidan.

Har problem med att få till temat med byggnader om jag inte får använda gratis fotografin. Jag är ute efter betongbyggnader och här jag bor finns inga. Det kan ta veckor innan jag kommer in till en stad som har sådana byggnader. Annars får jag försöka tänka om.

I1 -B 5

caroline_thallauer0018 — 2017-11-16 14:31:01 UTC

Inspiration till illustration
Ska påpeka att jag inte är någon arkitekt på långa vägar men jag fick bra tips från denna sida http://www.kontur.se/ att göra en illustrativ bild av ett nybygge. Vilket jag kommer ha på framsidan tillsammans med lite annat.

I1 -B 6

caroline_thallauer0018 — 2017-11-18 15:40:04 UTC

Tankar:
Jag har börjat med hemsidan.
Helt ärligt har jag det svårt med att själv få ett utseende på sidan att kännas rätt. Det kan hända att det sitter i mitt huvud bara men jag har lite svårt att få till det att se proffsigt ut. Känns som en liten utmaning det här.
Har i skallen att mer luft eller vita områden desto lättare är det att få det att se proffsigt ut. Men vet inte om det stämmer.
Om jag lämnar ett arbete i någon månad och återkommer ser jag nästan direkt vad som känns fel och rätt. Men så kan man tyvärr inte gå till väga med det här, det är nog min kreativa sida som jag fått det ifrån gällande målande och smyckestillverkning. Då kan jag lämna och återkomma senare.

Det skulle vara bra om man fick lite feedback från någon med "rätt" ögon.

För att göra det svårare bor jag i skogen och kan inte ta kort på innerstaden som det här behöver. Så jag valde en flera år gammal bild som egentligen är ifrån Uppsala stad och hoppas på att det inte gör något. Jag sätter inte min fot i sthlm och extremt sällan i Uppsala. Om jag har tur byter jag ut den på måndag om vi ska in och handla så kan jag då ta kort på ett centrum. Då blir det lite svårare att se att det är i Uppsala

I1 -B 7

caroline_thallauer0018 — 2017-11-21 07:52:49 UTC

Jag lekte med layouten en hel del, minskade knapparna och menyn till ca 70% i Photoshop för jag tyckte de såg stora ut. Vet inte om de måste ändras i programmet jag gjorde dem i så det stämmer med storleken? Nog bäst att göra det uti fall att.
Känns som jag är osäker på storleken på objekt genom detta arbete, jag gjorde hemsidan som rekommenderat i storleken 940 * 600.
Nu ska jag se om jag kan åter igen kolla storlekar på objekt på diverse sidor. Nu har jag en större skärm så det är frågan om hur kommer att gå.

I1 -B 8

caroline_thallauer0018 — 2017-11-21 13:00:58 UTC

Efter snack och lite feedback av läraren så känns det som jag är på rätt bana. Får göra lite dubbelt upp för jag byter program till illustrator då jag gjorde knapparna i det programmet.

I1 -B 9

caroline_thallauer0018 — 2017-11-21 13:05:42 UTC

Börja arbetet med hemsidan, den är gjord efter skärmdump efter min egen skärm denna gång och det vart mycket mer lättarbetat gällande storlek.
Jag har fått ändrat om storleken på menyn från 12p till 24p. Inställningarna annars är desamma som innan.
Sök vart i fontstilen Arial storlek 18pt med avstånd på -5.
Infotexten i footer vart Arial 24pt avstånd på 10 för att då till mer luftig känsla. Ovanför vart ikonerna som visar vart man snabbt kan hitta telefon,mail och adress.
Loggans namn fick mellanslag, vilket var tips från läraren men även så gjorde jag så från början men ändrade det. Ibland är det bäst att inte ändra på originalet.
(bilden visar pågående arbete med sidan)
Jag ska positionera menyn bättre så småningom beroende på andra element som ska in.

I1 -B 10

caroline_thallauer0018 — 2017-11-24 14:01:31 UTC

Jag gjorde om nästan hela, nu och det börjar likna något som jag tycker ser okej ut. Jag har lite mer att jobba på då för att få en mer jämn dynamik på sidan som den inte har just på denna bild.
Infotexten fick fonten arial på 21pt, de är lite olika skalor på bokstäverma.
Första textstyckte för en vågrät skala på 85% med ett avstånd på 25.
Ett minre textstycke i gråboxen som också har arial på 21pt skala på 85% och avstånd på 25. jag sänkte textstyckenas höjd till 75% för att inte få en för avlång stil.

Jag valde att högerplacera bilderna för att de inte skulle ta över sidan för mycket och få mer plats till texten

Mitt nästa steg är dynamiken och samspelet som det känns att det behövs fixas till och eventuellt lite med texten. Jag valde att ha "sök" ikonen som en knapp istället och jag ska tillverka en till ikon, kanske att "läsmer knappen" något som är som en länk i texten istället. Den knappen känns lite oplacerad och distraherande och lite onödig egentligen.

i1 -B 11

caroline_thallauer0018 — 2017-11-25 14:50:25 UTC

Bilder göra så fruktansvärt mycket, mer än vad man tror. Att man har bilder som ser ut att vara proffsiga. Jag bytte ut bilden med husen till en bild med en lokal. Egentligen museum i sthlm som togs för fem år sedan. Jag har inge möjlighet att få en bra proffsig bild tills uppgiften ska in. Det här är nog det närmsta jag kommer. La till lite effekt för att den inte skulle vara allt för plant och nu ser sidan en aning bättre ut.
Gjorde mer centrerad istället för utsträckt på hela sidan, fonten är ett undantag, samt lekte mer med texten. Små justeringar sen hoppas jag på att det ser okej ut.
Jag tog bort admin knappen för den kändes inte bra och lade till två knappar till höger facebook och twitter och lade till en fax icon.
det mörka vart ljust istället pga att det var lite jobbigt att läsa och som jag hoppas man märker mer nu är att själva formen ska vara i form av en byggnad, som syns bättre nu än tidigare. Bytte plats på texterna med och gjorde det första textstycket lite mer intressant.
Skriver en mer detaljerad i sista inlägget som jag tänkte sammanfatta det hela.

i1 -B ny knapp Twitter

caroline_thallauer0018 — 2017-11-26 13:56:16 UTC

i1 -B ny knapp facebook

caroline_thallauer0018 — 2017-11-26 13:56:27 UTC

i1 -B ny ikon fax

caroline_thallauer0018 — 2017-11-26 13:57:07 UTC

i1 -B 12

caroline_thallauer0018 — 2017-11-26 13:58:41 UTC

Slutresultatet
Text:
Texten var nog det sista och det jag jobbade mest med för att få till det. Det tog ett tag att hitta rätt fontstil som kändes rätt och att försöka få till avstånd på rader och bokstäver.
första textstycket vart lite eget.
Rubriken stora versaler först, arial 23pt avstånd på 25, höjd 85% .
Under en mindre text på 21pt med avstånd till nästa rad på 20pt
Större intressanta ord för att understryka viktigt meddelande och den vart i samma font som loggan med Myanmar text regular 36pt avstånd på 100. avstånd till nästa rad på 10pt.

nästa stycke ändrade jag på lite. Arial 21pt avstånd på 25, 85 %hög och 75% bred

Jag gick genom hela designen med det Don‘t make me think, 2014 av Steve Krug, kap 2 i taken och han skrev att några studier visar att besökare inte läser allt som står utan på en hemsida utan sollar igenom sidor och läser bara relevant lite större text. Därav valde jag att förstora tre relevanta ord i det första textstycket. Är man så pass intresserad av det som står går man oftast in på sidans andra kategorier och läser.

Grafiska delar:
Logotypen vänster hörn som inte går att missa. Höger sida två bilder, en är illusterat av mig, ska föreställa exempel på planlösning av mark och husbygge.

Den andra är ett gammalt fotografi jag gjorde svart/vitt för att försöka få ett mer effektfull stil då det vart svårt för mig att hitta ta en ny passande bild. Jag hade nog velat haft bild på hus i betong stil men jag måste arbeta med det jag har.

Footer delen är alltså ljusgrått lager och som tidigare så ska det tillsammans med det gråa fältet se ut som ett designat hus.
Lika så menyn har samma grafiska stil.

ikoner/knappar. 4st ikoner i footer för att besökaren snabbt och lätt kan komma åt kontakt och annan information genom bilderna så man inte ens behöver läsa sig till det. Sök va tänkte som en ikon först men ändrade mig snabbt då det är den man kan klicka på för att söka, det vart en knapp istället och ikonen fax gjordes istället.
två till knappar för facebook och twitter gjorde jag.
Jag valde att skippa de gamla knapparna då det kändes som de inte passade in i slutändan och vart bara störande och röriga delar.

Som lite extra lade jag till själva adressen längst upp i adressfältet med en favicon på sin plats och det är R:et i loggan som jag valde för den står mer ut. Testade med hela loggan men det var så smått och det syntes inte bra med de små linjerna.

Hela sidans struktur vart mestadels centrerad(meny, textstycke, footer) några delar vart undantag för att slippa scrolla när man är på första sidan. lämnade höger och vänster delar vita men valde att ha hela footer lika bred som sidan är.

I1 -A 9

caroline_thallauer0018 — 2017-11-26 20:07:42 UTC

sammanfattning
Dn.se sidan hade en relativt lagom innehåll om man jämför med många andra nyhetssidor.
Det gav ett bra helhetsintryck av sidan.
Färgmässigt är det vitt och rött på sidan. Nackdelen med en sån stark röd färg är att det kan vara relativt skarpt för ögat. Då blir det kanske svårt att fånga något annat som behöver den uppmärksamheten som vissa texter som även är röda blir då lite svårare att lägga märket till.

DNs logga är inte mer än enbart fonter, enkel och stilfull font DN Bodoni.
SIdans inehåll är väldigt läsbart blandade fonter men vad jag tror är DN Bodoni, DN Grotesk, Arial men också Georgia,Times New Roman,Times,serif som står med i sidans kod. Relativt balancerad fontstilar med olika grader av skärningar och avstånd.

Sidan har som en dubbel meny (fanns inte när jag kollade på sidan, se min gamla print scren bild men jag skriver om min åsikt om den), en en huvud och en undre. Menyn är faksitk ganska tråkig. Består av text och en röd bord under som ska indikera vilken sida som är aktiv. När undermenyn blir aktiv blir texten tjock. Men en sån tråkig meny underlättar kanske på ett sett att inte ta över sidan vars innehåll ska vara mest relevant.

Kan påpeka att dn har ändrat på sidan, nu ser man två knappar för premunera och login på höger övre hörn. Det fanns inte när jag tog print scren på sidan.
Det ger en mer tydlighet men också så tar den mer plats, jag tycker den äldre sidan var mer tilltalande och den vart mindre gryllig. Även texten till höger om namnet/loggan gör så det blir mer rörigt än tidigare. De har staplat texten på varandra som i en lista. Den är relativt nära logga och jag tycker det är distraherande till skillnad mot tidigare. Fördelen är att det ser ut som loggan är större nu än tidigare.

Till den gamla sidan jag kollade på:
Tycker det är en tilltalande nyhetssida då fördelen är att de inte har tryckt ihop text för att få plats med allt. Det syns att de väljer att ha luft mellan grafiska element och text. De ger rubriker bra med utrymme att synas.

(Vart lite rörigt nu när de ändra om dn.se sidan måste jag erkänna, vet inte vilken fot jag ska stå på men det vart ett intressant tillfälle att jämföra lite)

I1 -A8

caroline_thallauer0018 — 2017-11-26 20:44:19 UTC

B PDF

caroline_thallauer0018 — 2017-11-27 15:54:28 UTC

Här kommer stamanställda pdf filen med bilder och text

I1 -B första test logga

caroline_thallauer0018 — 2017-11-27 16:38:55 UTC

Fösta test av loggor jag gjorde

Referenser

caroline_thallauer0018 — 2017-11-28 12:08:00 UTC

Samlade referenser och inspirationskällor

http://www.kontur.se/
http://www.aop.se/
Kurslärarens material

Litteratur:
Butler, Christopher (2012), The strategic web designer : how to confidently navigate the web design process. Cincinnati OH: HOW Books. (175 s). •

Krug, Steve (2014), Don‘t make me think, revisited : a common sense approach to web usability. 3 uppl. Berkeley, Calif. : New Riders. (200 s).

I2 - A 1

caroline_thallauer0018 — 2017-11-30 21:29:27 UTC

Logga
Börja skissa på logga men det var mycket svårt denna gång. Antagligen lack på inspiration även om jag kikar runt på google på sökorden logos

I2 - A 2

caroline_thallauer0018 — 2017-11-30 21:32:41 UTC

Logga
Efter skissande kände jag att bilden med trädet kändes rett så okej så jag började smått med illstrator. Jag vet inte vilken bara det blir för just nu känns det som jag har 0 inspiration men jag kom fram med detta till slut. Inte direkt ett träd. Vet inte om den kommer att användas. Får inte en känsla av kommun från den här loggan. Däremot gillar jag Aet jag gjorde i slutet men är lite orolig att det ska vara för otydlig att uppfatta.
Typsnittet jag lekte med heter Trebuchet Ms regular

I2 - A 2

caroline_thallauer0018 — 2017-11-30 21:52:17 UTC

Logga
Ser ut som någon tekniklogga...jag får nog göra ett nytt försök i morgon. Gillade den tjocka texten som är Tw Cen MT Condensed extra bold

I2 - A3

caroline_thallauer0018 — 2017-12-01 10:49:34 UTC

Logga
Börjar kanske se ut som något men lite tråkig med svart/vitt måste jag erkänna.

I2 - A4

caroline_thallauer0018 — 2017-12-01 13:59:04 UTC

Logga
Lekte med färg och fonstil men återgick till den tidigare fonten då jag fasnade för den. Däremot vart det andra färger. Blå och brun. Blå som sjöar som finns där och brun som jorden. Jag ville undviker grön för att inte ta det uppenbara, deras skogar. Även om det är en väldigt passande idé valde jag brun istället.

I2 - A5

caroline_thallauer0018 — 2017-12-01 15:04:45 UTC

Fyra färger som jag ska försöka jobba efter utöver svart/vitt. Men det kan hända att jag ändrar några. De två översta är satta då loggan fick de färgerna.

Referenser och inspiration länkar

caroline_thallauer0018 — 2017-12-01 15:06:28 UTC

Lärarens material och hänvisningar
http://webstyleguide.com/wsg3/9-editorial-style/index.html
https://www.uppsala.se/
http://hedemora.se/
https://eda.se/
https://www.toptal.com/designers/colorfilter (extremt intressant sida där man kan se hemsidor så som folk med olika färgblindhet ser det)
https://webdesign.tutsplus.com/articles/accessibility-basics-designing-for-visual-impairment--cms-27634

Litteratur:
Butler, Christopher (2012), The strategic web designer : how to confidently navigate the web design process. Cincinnati OH: HOW Books. (175 s). •

Krug, Steve (2014), Don‘t make me think, revisited : a common sense approach to web usability. 3 uppl. Berkeley, Calif. : New Riders. (200 s).

I2 - A4

caroline_thallauer0018 — 2017-12-01 15:26:28 UTC

Layout
Exempel på en snabb lätt prototyp (the strategic web designer, 2012, Butler, Christopher s64) jag gå efter till att börja med. Sen är det nog mycket väl så att jag ändrar om helt. Jag är en som hoppar fram och tillbaka i arbeten, men genom att göra en modell på hur det eventuellt ska och kan se ut ger en bra grund.
Får se när jag väl börjar dra igång med grafiska element osv. Men jag kan tänka mig en webbsida som täcker sig över hela sidan som jag har sett blivit trendigt de senaste åren med stora bilder som täcker sidan.

I2 -A5

caroline_thallauer0018 — 2017-12-01 17:56:06 UTC

Meny
Började på menyn, brukar ta den delen innan layouten men i det här läget var det bekvämast att göra tvärt om för att jag skulle veta va som kändes bäst, en vågrät eller lodrät variant. Det vart en vågrät med rull undermeny som kommer fram när man har musen på menyn. Osäker på färgen däremot men det får jag klura på lite mer.
Lätt med en < märke som hover och aktiv variant.
Huvudmenyn är aktiv genom understreck i grönt samt hover.
pga den så pass många undermenykategorier som finns så valde jag lite text, all är times new roman regular. Font som så gott som alla användare har oavsett dator mobil eller tablet.

I2 - A 5

caroline_thallauer0018 — 2017-12-01 18:01:26 UTC

Meny
Om man väljer att gå in på undermenyer ska det finnas en "väg" (så kallad brödsmulor) där man ser vart man är och kan lätt klicka sig tillbaka (Krug Steve, 2014, sid 79) texten är vanligtvis liten och har tecknet > som visar vägen som en liten pil framåt ju djupare man går in på sidan. tex utbildning & omsorg>barnomsorg>information
Den syns inte om man är på startsidan men alla andra sidor samt undersidor. Om man nu väljer tex barnomsorg så kommer den att komma som nästa bredvid lilla "utbildning & omsorg" texten. På så sett är det lätt att se vart man är med tanke på att sidan är så pass stor.
(bilden visar barnomsorg som hover, alltså inte aktiv än)

I2 - A 6

caroline_thallauer0018 — 2017-12-04 14:00:06 UTC

Knappar

Designade knappar till hemsidan.
Typsnitt arial, vanliga rektangulära knappar och är mycket lätta att förstå.
vart placerad i högra översta hörnet på hemsidan som är det vanligast stället att placera sådant på och därmed lätt för en van internetanvändare att hitta.
Likaså sök funktionen.

I2 - A7

caroline_thallauer0018 — 2017-12-05 13:11:54 UTC

Arbetar med texten på sidan just nu. Ligger lite dåligt till gällande schemat så jag måste lägga på ett kål. Det ska in mer element som facebook knapp och eventuellt lite annat. Jag skulle vela ha någon grafisk del överst på sidan med texten om eda men få se om jag hinner med det.
Jag försöker få sidan att inte bli allt för mycket information och väljer att ta bort vissa delar som finns på den aktuella idag. Även för att inte göra den så snarlika.
Jag kommer även visa sidan nedscrollad en bit men har inte börjat med den delen än, få se om jag hinner med det.
Är lite smått osäker på den blåa boxen högst upp på sidan. Funderar på att lämna vitt där med endast text eller inramat på något sett så inte allt ser för mycket ut. När det är så pass mycket info på en sida är det bra ide att försöka få fram tomma eller vita utrymmen.

(Kommentera gärna på vad ni tycker, alltid öppen för feedback)

I2 - A8

caroline_thallauer0018 — 2017-12-05 18:16:16 UTC

Favicon och adress, återskapande från loggan är kugghjulet. Adress i Arial 14pt

Jag valde att minska det blåa fältet över på sidan och lämna mer vitt utrymme och gjorde en bord istället av boxen. Kändes som att boxen tog över så mycket på hemsidan.

I2 - B9

caroline_thallauer0018 — 2017-12-05 20:30:15 UTC

Mobilversionen ska ha en gemensamhet med hemsidan och vara snarlik och igenkännande. Jag har dragit ner på mycket text här som man faktiskt kan läsa när man väl går in på sidan. Man får använda sig mycket av menyerna för att hitta informationen då den blir så pass begränsad i en mobil.
Det ska gå och scrolla ner för mer info som på hemsidan.
Igenkännande knappar längst upp
menyn med sträcken till vänster, settings och sök till höger och en del av loggan i mitten.

I2 - B 10

caroline_thallauer0018 — 2017-12-07 12:52:49 UTC

Gjort i illustrator, Lade till lite extra grafiska finesser än skissen visade.
Man känner igen färger ifrån hemsidan samt bilder, det ska gå och dra neråt på mobilen som det är på hemsidan, menyn visas när man klickar på figuren till vänster som är igenkännande för mobila enheter där samlade jag huvudmeny och några knappar som är på hemsidan och är rett så relevanta.
Då slipper man scrolla ner ända ner till footer på mobilen för att hitta dessa länkar.

På förstasidan valde jag att flytta på "Lediga jobb" till kanten av sidans första bild. För att få den mer aktuell och spara på plats på bredden.

Sidan är helt i times new roman olika storlekar texten endast, samt radavstånd är lite olika beroende på vart de sitter.
Det enda som skiljer sig är logga som man inte ska ändra på för det är edas signum samt grafisk profil.
Det viktigaste står först som deras egna sida, vad som är mest aktuellt för tillfället därefter kommer de mindre relevanta och ännu mindre längst ner på sidan.

Jag gav sidan lite vita utrymmen men inte allt för mycket. Men det är så pass så jag tycker inte det känns som man tryckt ihop det. Man skulle kunna göra bilden mindre men jag ville lägga en del tyngd på bilderna som också hemsidan har tyngden på.

I2 - B11

caroline_thallauer0018 — 2017-12-07 13:58:39 UTC

Exempel på mockup mobilvy i riktig utseende på mobilen.

I2 - B12

caroline_thallauer0018 — 2017-12-07 14:28:34 UTC

Mockup bild 2
(mockupen vart inte helt 100% pga skevningen som jag hade svårt att få till men man ser i helhet)

Gällande menyn som kommer upp valde jag att ha en nästan helsida pga alla menyalternativ samt att dölja loggan. Man vet redan vilken sida man är på så den är inte ett måste att ha den synlig just här. Ett alternativ är att flytta menyrutan lite nedåt under den första delen men då får man för lite plats för texten.

I2 - B 13

caroline_thallauer0018 — 2017-12-07 14:59:09 UTC

För en lättare och snabbare hjälpfunktion valde jag att ha med uppläsningsfunktionen även om personer som har det behovet kanske har det igång på sin telefon redan.
Settings ser liknande som på hemsidan, rutan fick en skugga för att sticka ut lite.
klickanr på man sidan om rutan kommer den att stängas. Som är rett så vanligt i mobiltelefoner och andra enheter.
Där hittar man språk och få sidan lättläst.

I2 - B 14

caroline_thallauer0018 — 2017-12-07 15:02:55 UTC

Sök funktion, lätta att förstå. ruta med skugga, trycker man på söktexten kommer tangentbordet fram alt att den redan kommer fram när man trycker på förstoringsglaset. Trycker man utanför kommer rutan stängas.

I2 - B 15

caroline_thallauer0018 — 2017-12-10 12:12:28 UTC

Lade till en länk för snabbåtkomst av användbara och populära länkar. Den kommer inte finnas med i mobilvyn för den onödigt med plats, alla dessa går att surfa sig till inne på sidan.
Det är en popup fönster, trycker man på "Gå direkt till" så kommer denna upp.
Jag gjorde den för att det inte skulle vara en fast ruta på sidan och störa den layouten. Det vart allt för mycket och trångt. Det är relativt nära huvudmenyn så den kommer att vara lätt att hitta.

I2 -B 16

caroline_thallauer0018 — 2017-12-11 17:39:29 UTC

Jobbat på med mobila vyn och gjorde en lång exemplar. Det är meningen att det ska scrollas ner. Vilket denna bild visar fast hela. Strecken är bara exempel på mobila vyn så de ska inte finnas där när sidan är aktiv.

Jag har bantat ner sidan relativt mycket men ger ändå plats för lite vita mellanrum och en del bilder. Det är meningen att man ska gå in på sidorna och hitta det man söker just i det mobila versionen.
Det är en del återkommande saker så som blåa knapparna finns även i popuppmenyn längst upp till vänster, Det är mest för att ge det en ännu snabbare åtkomst till just dessa och att det passar webbsidan.
Footer kom med även om jag lade till en "kontakta oss" i popupp menyn. Alltid bara att ha snabb åtkomst till kontaktinformationen.

Jag tänkte att den vita delen längst upp med meny, logga och setings/sök ska få följa med sidan när man scrollar ner (eller att sidan går under den remsan) så man slipper dra uppåt igen för att få åtkomst till den. Just nu är sidan rett så kort men det är ett bra sett att få användaren att snabbt byta sida. Man scrollar tillräckligt på en mobil och att göra det så det blir mindre är bara bra.

I2 - B17

caroline_thallauer0018 — 2017-12-13 08:39:47 UTC

Test av färgblindhet, bara av nyfikenhet testade jag inbyggd funktion som visar hur vissa färgblinda kan se hemsidan. Inget av det jag illustrerade stör eller missvisar någon av informationen när jag testar de alternativ som finns i programmet. Man kan tydligt ändå se vad man ska klicka, vart informationen är och vad bilderna ska förställa.

I2 - B17.2

caroline_thallauer0018 — 2017-12-13 08:42:50 UTC

Likaså den mobila vyn.

I2 -B18

caroline_thallauer0018 — 2017-12-15 10:40:48 UTC

Webbsida 1

I2 - B19

caroline_thallauer0018 — 2017-12-15 10:42:59 UTC

Webbsida scroll 2

I2 -B20

caroline_thallauer0018 — 2017-12-15 10:43:40 UTC

Webbsida scroll 3

I2 - B21

caroline_thallauer0018 — 2017-12-15 10:50:15 UTC

Mobilvy
Valde att ta bort "Lediga jobb" som var på första bilden för den finns redan som knapp men det som jag visade förut kan vara ett alternativ om de söker akut efter folk så kan man lägga till den igen.

I2 - PDF

caroline_thallauer0018 — 2017-12-18 21:46:58 UTC