3. Semester Mul-A PROJEKT 3 Louise Marie Bonke harlotte Bruhn Stine Dorry Meulengracht Madsen http://cbruhn.dk/cfunding
Projekt 3 Indholsfortegnelse Idéudvikling Indledning Målgruppeanalyse Moodboard Funktionalitet Funktionelle krav Use-case ER-diagram Attribut beskrivelser Funktionelle krav Nonfunktionalitet Nonfunktionelle krav Flowchart Designvalg og udvikling Bilag Skitser Wireframes Mockups Farvevalg Typografi Logo Ikoner Burn-down chart Kildeliste 2
Idéudvikling Indledning Funding-IT er et lille mediebureau lokaliseret i centrum af København. Firmaet fokuserer på at levere webbaserede løsninger af høj kvalitet og har altid kundens behov i fokus. Firmaets management-afdeling anser crowdfunding for at være et indbringende felt indenfor business og bestræber sig derfor på at firmaet i fremtiden skal kunne tilbyde deres kunder en crowdfunding web-template. Firmaet har tidligere testet forskellige MS-systemer, men ingen af dem har kunne leve op til firmaets høje standarder. Derfor skal der nu skabes en hjemmeside som kan håndtere forskellige crowdfunding projekter. Løsningen skal være et showroom for potentielle klienter og skal demonstrere at Funding-IT er i stand til at udvikle professionelle løsninger for kommercielle hjemmesider. 3
Idéudvikling Målgruppeanalyse Alder Køn 16-60 år Mænd og kvinder Geografi Danmark Storbyer Provinsbyer Økonomi Donere penge: Middel - høj indkomst Indsamler penge: Lav indkomst Psykologi Interesse for fællesskaber Nytænkende og udadvendt Sætter stor vægt på medmenneskelighed Mere moderne end traditionelle 4
Idéudvikling Moodboard 5
Funktionalitet Funktionelle krav Bruger (reciever og backer) skal kunne oprette, opdatere og slette deres bruger. Brugeren (reciever) skal kunne uploade opslag indeholdende valg af kategori, overskrift, tekst, billede, ønsket beløb, status på indsamlet beløb, tidsramme. Brugeren (backer) skal kunne donere et beløb til recieveren. Beløbet går fra backerens bankkonto til den valgte recievers konto hos -Funding IT. Dette beløb holdes tilbage indtil recievers opslags slutdato er nået. Herefter udbetales beløbet til recievers bankkonto. 6
Funktionalitet Use-case I use-case modellen kan det ses hvad brugeren skal kunne via vores website samt hvad admin/online-systemet skal kunne. I dette tilfælde har vi intet adminpanel på vores hjemmeside, men holdet bag skal kunne gå ind i databasen og rette i kategorier, hvis brugeren har lagt et opslag op under en forkert kategori samt slette upassende opslag. Brugeren skal kunne oprette, redigere og slette en bruger på websitet. Derudover skal de have mulighed for både at oprette indsamlinger samt at donere til andres indsamlinger. 7
Funktionalitet ER-diagram 8
Funktionalitet Attribut-beskrivelser 9
Non-funktionalitet Non-funktionelle krav Siden skal være enkel, men farverig. Overskueligt indhold inddelt i kategorier. Det skal være nemt at navigere rundt på hjemmesiden. Hjemmesiden skal kunne tilgås via en søgemaskine. Det er vigtigt, at ikoner valgt til kategorierne bliver bedst muligt genkendelige vha. kendte symboler, så der ikke opstår tvivl om indholdet af kategorierne hos brugeren. Det skal være muligt at følge med i, hvor langt indsamlingen er nået. Sikkerheden på sitet skal være optimal, så brugeroplysninger/kontooplysninger beskyttes. 10
Non-funktionalitet Flowchart 11
Designvalg og udvikling Skitser 12
Designvalg og udvikling Skitser 13
Designvalg og udvikling Wireframes 14
Designvalg og udvikling Wireframes 15
Designvalg og udvikling Mockups 16
Designvalg og udvikling Farvevalg Til dette projekt har vi valgt at arbejde med forskellige grå nuancer: lys grå, medium grå samt mørkegrå og stærke farver, der bryder med de neutrale grå nuancer. Vi har brugt en turkis, en magenta og en gullig orange for at skabe liv og en stemning der spejler positivitet. Turkis symboliserer velstand og gavmildhed, magenta symboliserer samvær og lykke og orange er en farve, der symboliserer varme og glæde. Der er brugt mørkegrå skrift på sitet, så det er mere behageligt for øjnene at se skriften på den hvide baggrund. 17
Designvalg og udvikling Typografi Vi har valgt at bruge skrifttypen Segoe UI, som eneste skrifttype på vores website. Grunden til dette er, at vi bruger nogle meget stærke farver og ikke vil gøre sitet mere uroligt med flere forskellige skrifttyper. Segoe UI er en letlæselig sans serif. Vi har brugt skrifttypen i versionerne semilight, regular og semibold. Fontstørrelserne benyttet er 24, 20, 18 og 16 px. I længere tekster er der brugt en linieafstand på 21px. Linielængder er begrænset til ca. 70 tegn pr. linie, hvilket gør teksterne letlæselige på en skærm. Der er brugt venstrejusteret tekst, der også bidrager til letlæselighed. 18
Designvalg og udvikling Logo Det endelige logo er udarbejdet i Adobe Illustrator. Impact er benyttet for at skabe et solidt udtryk af bogstavet. Den lettere Lucida Sans Unicode er valgt for at skabe en kontrast til det meget kraftige udtryk Impact giver. Forskellige foreslag til logo blev først udarbejdet på papir og senere indtegnet i illustrator. I logoet er der arbejdet med det negative rum for at skabe illusionen af et i en firkant. Farverne bidrager til at styrke firmaets visuelle identitet, og går igen i designet af andet grafisk materiale samt selve hjemmesiden. Impact Lucida Sans Unicode 19
Designvalg og udvikling Ikoner MUSIK SPORT KUNST TEKNIK SUND HED ANDET Ikonerne er udarbejdet i Adobe Illustrator. Da vores hjemmeside skal være i stand til at indeholde store mængder information (i form af forskellige indsamlinger) har vi opdelt indholdet i forskellige kategorier. Fokuspunktet har været at lave genkendelige symboler til de forskellige kategorier, således at brugeren ikke kommer i tvivl om kategoriens betydning. Dette er med til at skabe et bedre overblik for brugeren og gør det nemmere for brugeren at finde, hvad de søger. 20
Bilag Burn-down chart 21
Bilag Kildeliste http://www.farvesymbolik.dk/ http://w3schools.com/ http://thisisdallas.github.com/simple-grid/ 22