Caroline_Thallauer Del3 by Caroline

caroline_thallauer0018 — 2017-12-19 10:32:58 UTC

Vad omedvetet påverkad man blir. Jag valde ordet grön i företagsnamnet men kom på att en annan i kursen hade det. Vart man då omedvetet påverkad av detta? Nackdelen med att se andras arbeten även om det är extremt intressant och roligt. Men har man snarlika tema så är inte konstigt.

Själv så älskar jag växter och plantor. därför vart det ett tema jag gillar.
Bokblad ska sälja endast böcker om växtlighet, allt som har med växter (inne och ute) att göra men även lite natur så som djur för det ingår i cirkeln på ett sett.

Namnet Bokblad kan man tolka som man vill
bok = läsbok eller bok = trädsort
blad = blad i böcker eller blad = löv

Valde 4 random typsnitt och det känns som någon av de två första blir aktuellt. Båda rett så intressanta stilar, gillar den understa lite bättre då jag gillade b i blad, ser nästan ut som bågen där skulle kunna vara ett blad.

2

caroline_thallauer0018 — 2017-12-19 11:26:41 UTC

Logga ex 1
Kändes som att Nueva std var passande typsnitt för denna logga. Lite lekfull och inte så stel

3

caroline_thallauer0018 — 2017-12-19 11:27:07 UTC

Logga ex 2
Lutar mest mot denna

4

caroline_thallauer0018 — 2017-12-19 11:37:21 UTC

Logga ex 3
Lite mer lekfull, kan också tolka bokomslagen som växtblad. Frågan är denna eller den innan, kanske blir för mycket med det vita i boken.

Testar

caroline_thallauer0018 — 2017-12-19 11:43:16 UTC

Testar på ett annat upplägg på denna padlet, hoppas det är okej. Det var svårt att inte få det rörigt med den som var innan.

5

caroline_thallauer0018 — 2017-12-19 12:54:34 UTC

Helt ärligt känns det lite stressigt eftersom uppgiften är ganska stor (jul och allt med) så började jag snabbt och direkt med hemsidan, utan skissande på papper som jag brukar göra. Lekte (skissa) i programmen genom att flytta och ordna om boxar och kom på att jag ville ha så kallad bladliknande menyflikar (så som markeringslappar i böcker) som jag tyckte var passande till just denna sida s

6

caroline_thallauer0018 — 2017-12-19 13:18:53 UTC

Inspiration från http://www.adlibris.se
Deras topplista såg väldigt händig ut och jag kommer nog göra en snarlika. Den tar inte så pass stor plats på bredden därför passar den på min sida då jag kan få plats mer lite annat också.

referenser/inspiration

caroline_thallauer0018 — 2017-12-19 13:20:07 UTC

http://www.adlibris.se
http://www.bokus.se
Gill Sans - wikipedias sida
Banner size - google sök banners
http://capdesign.se/radda-barnen-byter-olyckligt-typsnitt/
http://www.raddabarnen.se/
https://www.akademibokhandeln.se/

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).

7

caroline_thallauer0018 — 2017-12-19 14:35:33 UTC

Pågående jobb med startsidan, hann mer idag än jag trodde. Det här var riktigt roligt måste jag säga. Intressanta att få testa på att göra som en webbshop. Lite extra roligt eftersom jag gillar temat med växter. Hoppas bara jag har bra böcker att ta kort på för att använda. Texten till böckerna skriver jag efter jag skaffat bild så det blir passande. Vänster del ska det vara en banner troligen. Jag valde att göra sidan vit stället då det gråa tog över för mycket. På så sett kan jag lägga in lite mer färgstarka delar också.

caroline_thallauer0018 — 2017-12-19 14:39:27 UTC

Lätt flik meny, den har inga undermenyer som ploppar upp men eventuellt mer som sidfotsmeny på vissa flikar.
Man ser vilken sida man är på genom färg, aktiv flik är vitt och smälter in på själva sidan, de andra är ljusgråa. Här ska inte någon hover finnas med. Det är inte alltid det är nödvändigt alla gånger, det är viktigare att veta vilken sida man är på.
(vilken sida man är på syns tydligare på hela hemsidan än på denna bild)

8

caroline_thallauer0018 — 2017-12-19 15:33:29 UTC

Illustration i form av en samling av cirklar i samma färgtema, blå rosa och grön. Vilket kommer vara sidans färgpalett.
Illustrationen är en person som läser en bok och alla cirklarna ska vara klickbara och göra så man kommer till respektive sida.
En lite mer färgstark bild av böcker gjorde jag också.
Gjorde en "önskemål" cirkel med. En sida är ju helt beroende av vad användaren tycker och tänker så jag tror nog att en sida för sådant är inte helt fel. Då får man in lite användar information/-interaktion svar. Vilket kan få en sida att växa enormt och bli mer användarvänlig.

caroline_thallauer0018 — 2017-12-19 17:07:05 UTC

Bannern hamnade på första sidan
Vilket är ganska vanligt med annonser. http://raddabarnen.se/
Texten som Rädda barnen använder sig av är troligen Gill Sans ( http://capdesign.se/radda-barnen-byter-olyckligt-typsnitt/). jag försökte skapa deras cirkel de använder. Deras budskap när jag googlar är oftast ganska tomma och ibland är det bara text. Jag valde mig av liknande design eftersom det är rett så igenkännande från dem.
Det ska få läsaren att tänka efter att andra kanske inte får sin middag alls. En bild skulle kunna klargöra saken med ett tom tallrik men jag ville att budskapet skulle nås fram endast via textens budskap samt hela poängen med tomheten jag lämnade. Frågan är om folk förstår den?
Bannern är en så kallad "wide skyscraper" (160x600) som är en standard storlek på banner.
Googlar man Banner size kommer det en uppsjö av bilder om vad för standardstorlekar det finns. Vilket är bra att följa.

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

Gjorde en liten karta, Valde inte att ha något avancerat då 99% av användarna idag (som en i annat student i kursen nämnde) använder oftast google till sådant här. Så en karta på det här viset är rett så onödigt. Jag länkade till google maps under kartan för få en bättre funktion för besökarna. Allara helst hade jag velat ta google maps direkt på sidan som man kan navigera på sidan istället för att bli omdirigerad.

caroline_thallauer0018 — 2017-12-20 14:09:26 UTC

Lite extra fiffel med menyn, lade till skygga för att man lättare ska se vilken sida man är på. Ser mer ut som det ligger framför resterande flikarna.

caroline_thallauer0018 — 2017-12-22 12:34:13 UTC

Hover på produkter, när man har musen över text så ska det bli understruket och man ska komma till den produkten. Bild ska också vara klickbar.

caroline_thallauer0018 — 2017-12-22 14:51:40 UTC

En till reklam banner gjorde jag på ovansidan för att försöka med merköp. Allt i Arial förutom själva presentkorten som brukar ha ett mer kursivt utseende, detta med Brush Script MT Italic 15pt. Dekorativ grafisk del som har själva loggas bok med för att känna igen företaget även om namnet inte syns just på denna sida om kortet. Det står mer utförliga uppgifter på baksidan om kortet.

22/12

caroline_thallauer0018 — 2017-12-22 15:10:27 UTC

Ibland är det så svårt att se förman blir så pass blind på sitt arbete man glott på i flera timmar så det är bra att gå ifrån. Jag brukar låta programmet stå på eller öppna bilder på det man jobbat med och genom hela dagen kolla på den lite då och då i flera dagar och lägga till eller ta bort delar som man märker inte är bra.
Om man har den tiden brukar jag göra så och slutresultatet blir ganska lyckat.
Nu när jag nästintill är klar med hemsidornas sidor så känns det som att det är behövligt.

caroline_thallauer0018 — 2017-12-22 15:13:27 UTC

Hela hemsidas grund är Arial men i olika storlekar, huvudrubrik mellanrubrik(alt. ingress) och brödtext.
Vissa moment fick smalare mellanrum eller bredare text för att få det passande till den plats det sattes på.
På sidan produkter fick texten tillhörande boken "stora örtläkarboken för kvinnor" en kursiv del för att fördydliga namnet och som vad även skrivet i själva boken.
boxen med texten "Bokblad top 10" som ska ha en handskriven stil "Tinet" regular 24pt för att sticka ut i mängden men även passa till fonten Arial.

Även själva presentkorten har fonten "Brush Script MT italic 15pt för att ge det ett lyxigt kursivt skrift som får ett presentkort att kännas lite mer exklusivt än enkelt Arial.

caroline_thallauer0018 — 2017-12-27 18:12:20 UTC

Kontaktsidan med kartan på. En lätt text på sidan med info, karta och en liten bild för att inte göra sidan helt tom. Ett formulär för ett alternativ sätt att kontakta företaget med.
Även facebook länk där man även kan skriva till företaget via chatten/meddelande.
Jag väljer att reklamen ska hänga med varje sida. Alterativet är att ha olika reklamer på varje sida. Rädda barnen kanske på start och från något annat företag på nästa sida osv.

caroline_thallauer0018 — 2017-12-27 18:17:06 UTC

Startsidan börjar med logga och stor reklambanner på höger sida för företaget själva. Just då är det presentkort de gör reklam för.
Nästa gång kanske det är en stor bokrea tex.
Ikoner med text för kundvagnen, egna sidor och settings för personer med nedsatt syn eller annat.
Information i mitten och illustration till höger om text. Bredvid finns topp 10 lista med böcker och den ska vara scrollbar så man ser alla 10 böckerna.
( Jag har inte lagt till footer i nuläget men det kommer)

caroline_thallauer0018 — 2017-12-27 18:21:08 UTC

Produktsidan är samlad sida med lite random böcker längst ner. rekomendation bok samt populär bok som som syns först på sidan för att få kunder att bli mer intresserade av dessa.
Sidan ska vara scrollbar. Underkategori på vänster sida, klickbara så klart. De ska ha vanliga länkutseende men med en < för aktiv länk.
Hover med understruken text ska finnas på varje produkttext, bilderna ska också vara länkar till produkten.
En blå knapp för köp finns med pris ovanpå. Samma färg som hela sidans tema, blå magenta och grön.

caroline_thallauer0018 — 2017-12-27 18:24:01 UTC

Meny kvar på vänster sida, Brödsmuor på sidan ovanför undermenyn för att se vart man är någonstans.
Stor produktbild med text, Pris och köptknapp under texten, Jag valde att lägga in en favoritknapp för att köparen ska ha möjlighet att spara böcker som de kanske vill köpa.
stjärnor för betyg och recensioner är länkbart och då kommer man till en annan sida där det står mer utförligt, ev en mindre popupruta.
Under kan man själv skriva recensionstext och betyg om just denna bok.
En box till höger för merköp, folk som köpt på denna bok har köpt eller kolla på de böcker som visas och det kan leda till merköp för konsumenter. Vi antar då att denna sida använder sig utan någon form av analytisk program kanske ett alternativ från google. (Butler, Christopher (2012), The strategic web designer, s93)
Men som det nämndes i boken är kan det vara en falks visning då vissa sidor går direkt till böckerna och besökaren kanske inte klickar sig vidare. Även det listas och kan ge en lite falsk analys, men eftersom listan är både en köp och besöka böcker så är det en kombination vilket kan ge en lite mer rättvis lista.

caroline_thallauer0018 — 2017-12-27 18:32:36 UTC

Produkthover visas på boken längst ner till höger.

27/12

caroline_thallauer0018 — 2017-12-27 18:36:16 UTC

Arbetet rullar på men det är frågan om jag kommer bli klart i tid. Jag har lite problem med in vision (lekte lite innan jag är klar för att testa på det, har inte provat det förr) där hover och klickbar del inte vill funka samtidigt. Då väljer jag bort hover men jag tycker det är konstigt att det inte kan funka tillsammans.

caroline_thallauer0018 — 2017-12-28 14:45:09 UTC

Footer tillagt, längst ner blå flik med enkelt vit text. Syns på alla sidor.
adress och favicon i adressfältet längst upp.

caroline_thallauer0018 — 2017-12-28 15:05:05 UTC

Bilden visar nu med tjock markering och ett < vid den aktuella kategorin.

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

Började med storm på mobilen, många moment att tänka på som man ville ha med.
Jag gjorde en sida som är ganska lik hemsidan och snålade inte på bilder eller andra moment. Jag lade även här till reklamen men på en annan placering.
Övre fältet fick en bågad look för att sticka ut i mängden och inte ha det raka som är vanligt att se. Liknande ljusblåa bakgrundseffekt fick sidan längre ner. Det temat kommer jag hålla under hela den responsiva delen.

Lätt med sök högst upp, egna sidor och kundvagnen med sifferantalet synligt. Även settings för folk med dålig syn eller hörsel.
En menyknapp som är mer bågad än rak som ska passa till den övre designen.

caroline_thallauer0018 — 2017-12-28 15:11:40 UTC

Lika här med den bågade designen. Kontakt text först och därefter en stor karta med länk till google.
Lite info efter det sen likadan info på resterande delar med liten text om företaget och snabblänkar.

caroline_thallauer0018 — 2017-12-28 15:13:19 UTC

Produktsidan fick underkategorier i blå fältet, lätta att se och komma åt. De blir tjocka och en större storlek när de är aktiva.
Liknande på hemsidan men staplad lista med rullning. Däremot är rullningen här lite felplacerad, den måste mer till vänster för att inte vara ivägen för själva mobilrullningen vilket jag ska fixa till för det ser lite knasigt ut.

Under det kommer rekommendationslistan med sidorullning.
Reklamen borttaget här, den syns bara på första sidan för att inte reklamen ska ta över hela mobilsidan.

caroline_thallauer0018 — 2017-12-28 15:17:46 UTC

Här ser man aktiv kategori, som är tjock. Stor produktbild och info under.
Lämnade kvar rekommendationslistan som tidigare sida.

caroline_thallauer0018 — 2017-12-28 15:18:55 UTC

Meny, en mörkare grå färg med svarta sträck som delar av menytexten. Skuggeffekt för att inte få den så platt.

caroline_thallauer0018 — 2017-12-28 15:19:54 UTC

Den här gjorde jag innan jag tänkte mig för. Men visar den i alla fall.
Man ska kunna komma till produkter och den här var då meningslös eftersom underkategorin står på själva sidan istället. annars var detta ett alternativ. Pilen var vriden på menyn ovanför minan men togs bort när jag valde bort denna meny.
Annars så var själva idén bra och jag fick den ifrån Bokus sida som hade något liknande.

caroline_thallauer0018 — 2018-01-02 11:18:27 UTC

Ett färgstarkt och glatt tema med blå rosa och grön. Återkommer genom hela sidan.

caroline_thallauer0018 — 2018-01-02 11:20:40 UTC

Alla köpknappar är blåa och har vit centrerad text. Priset står ovanför knappen, även nedsatt pris står med med synligt överstruket originalpris.
Knappen fick en skuggning som ger det en mer knappkänsla.
Den är större när man går in på sidan om just den specifika boken.

caroline_thallauer0018 — 2018-01-02 11:27:58 UTC

https://www.akademibokhandeln.se/
En tanke från akademibokhandelns sida där footer är rett så liten och inte smockad med text och info. Vilket var rett så stilrent och fint. Ändå fick de in de mest väsentliga vilket jag gillar. De visar att man inte måste ha med så mycket info i footer varje gång som man ser på många andra sidor. Jag valde att ha lite info i footer.

caroline_thallauer0018 — 2018-01-02 11:50:50 UTC

Skiss, illustration.
Började med ett moln som jag utvecklade till runda former istället med text och illustrationer i dessa. Illustrationen vart lite som 3 samlade knappar kan man säga, varje leder till respektive sida om ämnet.

caroline_thallauer0018 — 2018-01-02 11:51:23 UTC

Skiss Knapp, Det lutade sig emot skuggning på knappen istället för att göra knappen 3d.

caroline_thallauer0018 — 2018-01-03 09:34:37 UTC

Här har vi en bra anledning varför användartest är så viktigt även till responsiv vy.
Detta såg eller tänkte jag inte när jag gjorde sidan men upptäckte det snabbt när jag väl la in den i in vision för att se hur det ser ut med scrollningen på en mobil.
Man ser att scrollningen på mobilen är ivägen rejält.

caroline_thallauer0018 — 2018-01-03 09:45:31 UTC

Nytt alternativ med pilar som visar att man kan dra upp eller ner istället för en scrollning på sidan. Vill man scrolla ner på själva sidan till footer lämnade jag lite vitt utrymmen på höger sida.

caroline_thallauer0018 — 2018-01-04 11:46:39 UTC

skisser

4/1

caroline_thallauer0018 — 2018-01-04 11:47:26 UTC

Problem med in vision som gör så det hindrar mig väldigt mycket att gå vidare. Tydligen har det vart så att det inte går att ha två projekt nu utan att betala. Mailade om problemet men jag har inte tid att sitta och vänta, jag gjorde då en marvelapp istället för den mobila vyn så låter jag webbsidan få vara i invision. Länkar till dem båda i ett spearat worddokument när jag lämnar in allt. Att ladda ner filer från invision går men det är alldeles för stort för att kunna lämnas in.

caroline_thallauer0018 — 2018-01-04 13:32:55 UTC

Lite extra hur settings ser ut, möjlighet till utökning av behov.