PROJEKTRAPPORT GRUPP 10

Transkript

1 PROJEKTRAPPORT GRUPP 10 AD/ID: Oskar Kiviniemi Projektledare: Mikaela Olsson Teknik-/ljud-/bild-ansvarig: Filip Edde Martinsson Manusansvarig: Emilia Wahlström Inledning Mikrobryggerier har på senaste tid blivit väldigt populärt i Sverige. Exklusiv öl har fått samma status som fina viner tidigare haft och de små bryggerierna ökar i snabb takt. Många mikrobryggerier börjar i hemmet och utökar sedan sin produktion allt eftersom efterfrågan blir större. John Wedin är en av de som hakat på trenden och har i sin studentlägenhet startat ett mikrobryggeri, 19 Kvadrat. Vi ska hjälpa honom att utveckla en grafisk profil och en snygg webbplats som han kan använda. Våra slutsatser i relation till den ursprungliga projektplanen Att Wordpress har visat sig vara ett utmärkt verktyg för personer med vår kunskapsnivå att utveckla en hemsida från grunden. Att jobba för en riktig kund har hjälpt oss att hålla ambitionsnivå på en god nivå. Att arbeta i grupp har inneburit många utmaningar, men främst har det hjälpt oss att uppnå de mål vi satte upp i början av vårt projekt. Att vi tidigt upptäckte att det var väldigt bra att ha en tidsplan. Varje vecka kunde vi stämma av vad vi gjort, vad som fanns kvar att göra och hur vi skulle se till att allt blev gjort. Sedan delade vi upp det mellan oss, men hjälpte även varandra när det behövdes.

2 Vad som blev som vi tänkte och vad som inte blev det Vi hade räknat med att det skulle ta lång tid att bygga själva webbplatsen. Dock upptäckte vi ganska snabbt att så inte var fallet. Själva grundstrukturen gick snabbt att få till, och vi stötte inte på några större problem med den. Det här gjorde att vi kunde fokusera mer på detaljer. Några saker visade sig också vara mer tidskrävande än vi hade räknat med. Vi fick därför ägna extra tid åt att åtgärda dessa. Till exempel hade vi problem med att få innehållet på sidan, och särskilt menyraden, centrerad. Det var också en utmaning att få alla sidor på webbplatsen att fungera väl responsivt. I vissa lägen hoppade menyraden ner och i andra hamnade brödtexten på konstiga ställen. Det här har vi arbetat mycket med för att det skulle bli både snyggt och funktionellt. I prototypen som vi gjorden tidigare hade vi en bildkarusell som visade upp ölflaskorna med beskrivande texter. Det här var en funktion som vi verkligen ville få med på vår riktiga webbplats. Vi försökte därför hitta en fungerande plugin som kunde göra detta, men det visade sig vara väldigt komplicerat. Efter åtskilliga timmar utan tillräckligt tillfredställande resultat valde vi att ge varje öl en egen undersida, inne på själva sidan. Den valda lösningen visade sig vara både snygg och funktionell. Det hade sparat oss mycket tid om vi tillämpat denna lösning direkt. I projektplanen skrev vi att vi ville skapa en sidan präglad av stilren enkelhet. Vår prototyp gick helt i svart och vitt, både webbsidan och illustrationerna saknade färg. För att ge vår webbplats lite mer liv, något som vi också blev rekommenderade att göra i samband med prototypopponeringen, valde vi att lägga in röd färg i vår logga och även i illustrationerna på som kan återfinnas på öletiketterna. Vi tycker att den röda färgen lyckas bra med att göra sidan lite mer spännande, utan att den ursprungliga idén om stilren och enkel design äventyras. Illustrationerna får fortfarande mycket fokus, men utan att ta över. Vi tog också bort de svarta linjerna som vi hade i prototypen, eftersom vi tyckte att sidan såg snyggare ut utan dessa. Vi har också valt att ändra vårt typsnitt till ett med bättre läsbarhet.

3 Vi valde att ta strunta i nyhetsflödet i footern för att det tog upp för mycket plats och tog uppmärksamhet från webbsidans innehåll och störde syftet. Istället la vi till en nyhetssida som vi döpte till Följa John. Vår logga har fått ett nytt utseende sedan prototypversionen. Istället för en vanlig kvadrat har vi en illustration i form av en skrikande mun. Vi har låtit personer ut vår målgrupp se den gamla och den nya loggan, och samtliga tyckte att den nya var bättre. En annan förändring som vi gjort i loggan är att lägga till en slogan. Detta var något som vi blev uppmanade att göra i samband med prototypopponeringen. Loggan visas hela tiden överst på webbsidan och fungerar som vårt signum. Den visas också i våra banners som vi gjorde i Flash, samt på varningssidan som kommer upp före man kan komma in på startsidan. Med andra ord är den vår röda tråd genom hela projektet. I vår projektplan nämner vi även att vi vill använda en JavaScript-varning som uppmärksammar användaren på att sidan innehåller alkoholhaltiga drycker. Vi hittade en bra plugin-funktion för detta som vi har anpassat efter våra egna profilfärger och önskemål, vilket sparade in lite tid. I mobilversionen av sidan ligger innehållet vänstercentrerat för att det inte ska bli för mycket luft på sidorna och för att man enkelt ska kunna navigera med tummen. Vi har också tagit bort den klickbara funktionen i loggan då det kan resultera i oönskade feltryckningar. Precis som vi nämnt i projektplanen är vår målgrupp en mobil grupp av människor som använder smartphones i stor utsträckning. Därför har vi valt att lägga mycket tid till att få en fungerande mobilversion av webbsidan. Bland annat har vi på sidan Vår öl har vi lagt till en ankarpunkt för att användaren ska slippa scrolla ner för att kunna se ölerna. Arbetssättet i gruppen När vi planerade arbetet bestämde vi oss för att arbeta som grupp, men ha olika fristående projekt. Dessa skulle vi hjälpas åt med och ge varandra respons på. Vi tänkte detta arbetssätt skulle göra alla gruppmedlemmar lika delaktiga och ge projektet en enhetlig profil. Alla gruppmedlemmar fick ett särskilt ämnesområde att ansvara för, men vi bestämde att vi

4 skulle hjälpas åt med alla delar i projektet. Detta fungerade precis som vi tänkt oss. Alla gruppmedlemmar har tagit ansvar för sina områden och även arbetat över gränserna. Lista över plugins vi använder på webbplatsen Akismet förhindrar skräppost. All In One Favicon lägger till favicon och apple touch-symbol. WP Editor förenklar CSS-kodning i CSS-dokumentet. Pre Loading visar varningsmeddelande innan startsidan kan visas. Alpine Photo Tile For Instagram skapar Instagram-flöde. WP Responsive Menu skapar meny för mobil/surfplatta. Individuella reflektioner vad vi jobbat med och vad vi lärt oss Oskar ville utveckla sin förmåga att kundanpassa webbsidor. Samtidigt ville han utveckla sina kvaliteter att jobba effektivt i grupp. Han ville också samla på sig tekniska erfarenheter av redigeringsprogram, CSS och HTML. Oskar upplever att han lärt sig att föreställa sig i hur det är att mottagaranpassa en hemsida. Längst med hela projektet har han försökt reflektera över både negativa och positiva funktioner med hemsidan, layouten samt sambandet mellan funktion och estetik. Han har även tänka sig in i hur en eneventuell kund skulle uppfatta hemsidan utifrån dessa aspekter. Utöver detta har han samlat på sig kunskaper i CSS och HTML. I CSS förstod han hur man arbetar genom Wordpress men också innebörden och funktionen av child themes. I HTML mognade Oskars förståelse i hur man bygger en riktig webbplats från grunden. Han har också insett hur programmet Flash används i internetsammanhang och hur olika redigeringsprogram i adobe-serien kan hjälpa att utveckla en estetisk hemsida. Mikaela ville göra ett bra jobb som projektledare. Hon ville också vara kreativ i de olika programmen som vi arbetat i under kursen samt vara med och bygga snygga grejer i CSS och HTML. Som projektledare försöker man vara överallt hela tiden och ha ett finger med i allt. Det var intressant att jobba med det och ansvara för att saker blir gjorda. Parallellt med det övergripande ansvaret för att alla arbetsuppgifterna skulle bli gjorda hade hon egna mindre projekt i CSS, på Wordpress och i de kreativa programmen som t.ex. Photoshop.

5 Filip ville bli bättre på att realisera kunders önskemål och omsätta detta i HTML och CSS. Då fokus främst legat på CSS så känner Filip att han utvecklats mest inom detta område. Efter mycket trial and error så fick gruppen tillsammans grepp om CSS processen, så det är svårt att säga att endast en person har haft mest att säga till om. Filip känner dock att han har utvecklat sina CSS och HTML kunskaper. Han känner också att projektet hade varit mer stimulerande om uppgiften hade varit att gruppen skulle skriva HTML-kod helt från grunden, då detta hade ökat förståelsen för CSS dokumentet. Filip tycker också att arbetet med gruppen har flutit på väldigt bra, då gruppen hela tiden har arbetat tillsammans och kommunicerat för att få fram ett så bra resultat som möjligt. Emilia ville utveckla sina kreativa kunskaper i InDesign och Illustrator och samtidigt dra nytta av de andra gruppmedlemmarnas kunskaper i HTML och CSS-kodning för att åstadkomma en välfungerande helhet. Precis som de andra gruppmedlemmarna känner Emilia att hon utvecklat sina kunskaper i CSS då mycket fokus har legat där. Trots att det från början var en tanke om att hon skulle vara manusansvarig låg mycket ansvar i att göra illustrationerna till webbplatsen, vilket hon också tycker har varit mycket givande. Att jobba med Wordpress har också varit en utmaning i sig, men Emilia tycker sig ha lärt sig mycket av arbetet som gått. Föreslagen lämplig webbadress för sidan om den vore på riktigt Var sidan ligger just nu Referenser till allt material vi använt Vi har gjort allt själva på vår webbsida. Även illustrationerna. Vi har också gjort egna ikoner för de sociala medierna Instagram, Facebook och Twitter. Förslag på hur vi skulle meta-märka sidan för sökmotorer <head> <meta name= Description content= 19 Kvadrat är ett mikrobryggeri beläget I en studentlya

6 i Riksten. En himla god öl! <meta name=keywords content= Ö,. Mikrobryggeri, 19 kvadrat, Bröl, Herr Nilsson, Farton, F18, John Wedin, Riksten, Bärs, Pilsner, Bira, Starköl, Lager, Ale, American pale ale, APA, Indian pale ale, IPA. </head> Vårt visuella styrdokument där färgval och typsnitt redovisas: