Semesteroppgave – Vi designer WEB

Ferdig produkt – www.videsignerweb.no

For semesteroppgaven til mediedesign 2012 valgte jeg og Michael og samarbeide om å lage en portal for webdesignere. Tanken var å bryte dagens uheldige mønster med rådyre websider fra reklamebyråer, slik at selv små bedrifter med begrenset budsjett kan få en god webside.

Samarbeidet kom ganske naturlig ettersom vi den siste uken før vi startet hadde kommet opp med et konsept som gikk ut på at vi som enkeltdesignere kunne ta imot psdfiler for kunder og gjøre dem om til websider. Mye synsing rundt temaet førte til at vi gjorde konseptet bredere. Istedet for å gjøre websiden personlig, tenkte vi at vi kunne lage en portal hvor webdesignere kunne tjene penger på sidene de lagde utifra ferdige pakketilbud som vi presenterte for kundene som trengte webtjenester. Designeren får 80-90% av inntektene, mens vi tar 10-20%. Grunnen til at vi kan ta så mye er fordi vi tilbyr stedet hvor de møtes.

Her er noen sider fra notatboken som vi skrev før vi startet på semesteroppgaven:

Prosjektfeed

Enkeltprosjekt

Designerfeed

Ulike skriblerier rundt prosjektet

De ulike typene jobber vi tenkte i starten av prosjektet

Forretningsmodell.

Forretningsmodellen bygger på at vi formidler webdesignjobber elektronisk via videsignerweb.no. Vi regner med å ta mellom 10-20% av fortjenesten til designeren for formidling av jobbene.

Hva vi tilbyr oppdragsgiver:
Vi går igjennom alle arbeider designeren viser til at de har gjort for å se at de har de kvalifikasjonene de sier at de har og at sidene de lager er estetisk pene. For å sikre at designeren sender en portfolio som faktisk er deres, ber vi dem om å legge en kommentar i header på index.html med «Vi designer web».

Dette gjøres for å skape trygghet for oppdragsgiver, slik at de kan vite at de får kvalitets sider tilbake. Dette systemet vil også skape være med å mindre klager som vi da måtte bruke tid på å løse.

Oppdragsgivere får tilgang til en database med dyktige designere å velge mellom som de kan kontakte for å bygge deres sider. Men vi har også gjort det mulig for våre godkjente designere å søke på prosjekter som blir lagt ut på siden vår. Ingen som ikke er godkjente designere kan søke opp og påta seg oppdrag.

Kort fortalt vil videsignerweb.no fungere som et kvalitetssikrende ledd mellom oppdragsgiver og freelance webdesignere.

Hva vi tilbyr designeren:
Vi håper å kunne tilby en jevn strøm med nye oppdrag til våre designere. Vi sikrer at de får betalt etter fullført oppdrag ettersom vi tar betalt på forhånd av oppdragsgiver. Hos oss sitter designeren igjen med stordelen av betalingen fra arbeidsgiver i motsetningen til et reklamebyrå. Skulle det oppstå problemstillinger mellom oppdragsgiver og designer vil vi være behjelpelige med å løse dette.

Tanker rundt

Logo

Logoen har utviklet seg en del fra da vi startet å jobbe med den. Vi tenkte en del over de tre stadiene et prosjekt som går igjennom portalen vår har.

  1. Start – Oppdragsgiver legger inn inn ett oppdrag på siden vår.
  2. Under arbeid – En designer starter å jobbe med oppdraget.
  3. Ferdig nettside – Designeren er ferdig med å lage siden og oppdragsgiver har fått et ferdig produkt.

Dette er grunnen til at vi har de 3 pilene som går mot høyre. I starten var disse fra venstre rød, gul og grønn. Med dette håpet vi på å symbolisere de tre stadiene som i et trafikklys ligner på de tre stadiene som vi har fra start til slutt på oppdraget. Fargevalget vårt ble diskutert i klassen og vi fikk tilbakemelding om at mange fikk assosiasjoner til rastafari og Jamaica, og ikke trafikklysene som vi hadde håpet på. Det ble også foreslått at vi forsøkte oss med rødt hvitt og blått siden vi kun rettet oss etter norske designere og oppdragsgivere. Denne tanken likte vi godt ettersom vi håper på å skape trygghet ved at dette er side med kun kvalifiserte norske designere. Det er dette budskapet vi ønsker å formidle.

Vi har lagt en søm i kanten på vår logo for å symbolisere at vi skreddersyr websider for våre kunder.

Vi beholdt den formen på logoen, men endret fargene. Dette føler vi fungerer meget godt. Vi har mens vi har jobbet med prosjektet blitt meget glad i logoen vår på godt og vondt.

Når vi valgte font, ønsket vi å finne at den skulle være myk, leken og innbydende, men samtidig med en viss tyngde. Nettopp dette føler vi at den fonten vi har valgt til vår logo gjør.

Design på siden
De første tankene vi gjorde om siden vår var at den skulle være ren og luftig med så få forstyrrende elementer som mulig. Vi har valgt å bruke en del blått på siden vår fordi blått er en farge som er med på å skape ro hos brukeren. Blåfargen går igjen i header, toppnavigasjonen og i logoen.

Vi har valgt å bruke bruke oransje i nav-baren og på de viktige knappene på siden vår fordi dette er komplementærfargen til blått. Dette gjør at disse elementene kommer tydelig frem.
Toppnavigasjonen har vi stylet med den lyse og mørke blåfargen fra logoen. Med dette har vi forsøkt å gjøre den synlig uten å gjøre den overveldende i kontrast til headerens lyse blåfarge.

En av de viktigste elementet på siden vår er «Opprett Oppdrag». Vi har forsøkt å gjøre den godt synlig ved å gjøre den stor, oransje og med mye luft rundt seg. Dette føler vi at vi har fått til.

Vi ønsket med headeren å vise at vi designer web, uten å ta for mye oppmerksomhet vekk fra innholdet på siden. Dette har vi prøvd å illustrere ved å legge CSS-koden til headeren vår i en brett slik at brukeren kan se kodene som ligger bak siden vår.

Selve innholdet på siden vår har vi plassert i en lysegrå boks med avrundede kanter. Dette står i stil med grunntanken som vi gjorde oss i starten av prosjektet, med mye luft og og et rent design.

Brukere

Det er to hovedbrukere på siden: “Oppdragsgiver” og “Designer”. Vi har også en tredje bruker som vi har kalt “prospekt” som er mellomleddet for brukere som har søkt om å bli webdesigner. “Prospekter” har ingen rettigheter før vi har godkjent dem og endret brukerstatusen deres til “Designer”.

Oppdragsgivere har mulighet til å legge ut oppdrag, se alle oppdrag, se CV til designere og motta søknader om jobber de har lagt ut. De har også et eget Dashboard hvor de kan se “Live” jobber, “Avventende jobber”, “Avsluttede jobber” og “jobbpakker” som de har kjøpt. I tillegg til dette har de en forenklet profil som viser deres oppdrag i en feed og de har også mulighet til å se gjennom CVer som er postet av webdesignere.

Designere har mulighet til å se oppdrag, favorisere oppdrag, lage sin egen CV som automatisk legges ved når de søker om en jobb. De har også et eget Dashboard hvor de ser “favorittjobber”, “nylig viste jobber” og “jobbanbefalinger”. I tillegg har designere mulighet til å konfigure jobbvarsler. Jobbvarsler kan konfigures til deres ønske. De kan skrive inn nøkkelord, lokalisering, krysse av for hvilke jobbtyper de vil følge med på.

De forskjellige jobbtypene

Som tidligere nevnt endret vi konsept fra “psd til web” til ulike jobbpakker som oppdragsgivere kan velge mellom. Disse jobbpakkene er:

  • Idé til Photoshop (Brukeren velger denne pakken hvis han/hun har en oppfatning om hvordan siden skal være og vil ha en ren designjobb (Photoshop-fil/mockup) av siden). | kr 1500,-
  • Idé til HTML/CSS (Brukeren velger denne pakken hvis han/hun har en oppfatning om hvordan siden skal være og vil ha den laget ferdig i HTML og CSS). | kr 4500,-
  • Idé til WordPress (Brukeren velger denne pakken hvis han/hun har en oppfatning om hvordan siden skal være og vil ha den laget ferdig i et fullt WordPress CMS-system). | kr 7000,-
  • Photoshop til HTML/CSS (Brukeren velger denne pakken hvis han/hun allerede har en ferdig designjobb i Photoshop og vil kodet ferdig i HTML/CSS). | kr 3500,-
  • Photoshop til WordPress (Brukeren velger denne pakken hvis han/hun allerede har en ferdig designjobb i Photoshop og vil ha den laget ferdig i et fullt WordPress CMS-system). | kr 6000,-
  • HTML/CSS til WordPress (Brukeren velger denne pakken hvis han/hun allerede har en ferdig kodet HTML/CSS-side og vil gjøre den om til et fullverdig WordPress CMS-system). | kr 3900,-

Seks hovedkategorier følte vi var akkurat perfekt mengde, i tillegg har brukeren mulighet til å velge ekstra funksjonalitet til sidene ved å kjøpe ekstrapakker. Disse lagde vi for å øke inntjeningsmulighetene på siden:

  • Java (Inkluderer Javascripthandlinger og elementer slik som slidere, osv.) | kr 1500,-
  • SEO (Søkemotoroptimalisering er kjempepopulært og er like omfattende som den er viktig for hvor mange treff siden får – større publikum = mer fornøyde oppdragsgivere) | kr 4000,-

Utvikling

Først vil jeg starte med å si – PHP kan forandre en ung glad gutt til et slitent nervevrak som ser koder overalt rundt seg.
PHP er ikke lett, men sitter man lenge nok så synker det utrolig nok inn.

Vi startet prosjektet med å kjøpe et WordPresstema som het Gratitude, men overraskende nok ble fort takknemlighet til frustrasjon! Dagen etter ble temaet fjernet fra nettbutikken – vi ante ugler i mosen! Etter halvannen uke møtte vi problemer overalt i temaet som var lovpriset på utallige sider for å være det beste responsive Buddypress temaet som man kunne få tak i til dags dato. Men sidetemplatene var upresise, det var usynlige sidebarer som blokkerte innhold, ingenting ble sentrert, det var flere problemer med Buddypress og fire fem ganger fikk vi “the white screen of death” som gjorde at vi mistet flere dager med arbeid for hver gang. Jeg har vært nøye på å hele tiden tatt backup av prosjektet, dette har vi hatt bruk for opptill flere ganger.

Vi har valgt å konkludere med at grunnen til at temaet ble fjernet fra temabutikken var nettop at det var kvalitetsproblemer med temaet.

Fire dager før innlevering tok vi en tung, men viktig beslutning; gå bort fra temaet, bort fra Buddypress og det såkalt responsive temaet og starte på nytt. Nesten da. For vi hadde innhold, vi hadde alle skjemaene vi lagde ved hjelp av Gravity Forms, vi visste hva ville ha og vi var merkbart bedre til å designe og kode!
For den nye starten valgte vi et tema som vi hadde søkt oss frem til – JobRoller. Et tema som lister ut jobber. På utviklerdelen var det ikke en dum start. Den hadde mange funksjoner, men veldig mye måtte skreddersys og endres i de over 150 phpfilene som fugte med temaet. I første omgang startet jeg med å oversette siden fra Engelsk til norsk. Alle variabler/tekstbiter/lenker/funksjoner, absolutt all tekst ble oversatt til norsk. Videre endringer gikk på funksjonaliteten – ekstra felt til CV og jobber, jobbpakker og Paypalintegrering, mm.

 Vi har på disse fire dagene klart å forelske oss i dette nye temaet. Det har vært lett å jobbe med, style og det har hatt god dokumentasjon. Det so tok oss flere uker med Gratitude har vi nå fått til på fire dager, mm.

Arbeidsfordeling

Gjennom hele oppgaven har jeg og Michale jobbet som et team. Selv om vi har hatt ulike oppgaver som vi har tatt oss av har vi alltid vært sammen om de viktige beslutningene. Vi har hjulpet hverandre når en av oss har stått fast. Valg av fargepalett og fontvalg ble vi enige om sammen.

Ser vi bort fra dette så har arbeidsfordelingen i hovedsak vært fordelt slik:

Michael:

  • Endring av funksjonalitet på teamet i PHP kodene.
  • Oversettelse av temaet fra engelsk til norsk.
  • Oppsett av Gravity forms og BuddyPress.
  • Installasjon og oppsett av plugins.

Dragan:

  • Endring av design i CSS kodene.
  • Design av logo
  • Design av visittkort og flyer
  • Design av header.
  • Styring av database i Sequel Pro; Kopiering og oppsett av tabellelementer i databasen.
  • Backupansvarlig

Planene videre
Vi vil selvfølgelig fortsette å arbeide med siden og forbedre den. Prisene vi har satt på de ulike produktpakkene på siden er ikke satt, men noe vi må jobbe med. Det må undersøkes hvor mye kundene er villige til å betale og prisene må justeres etter dette.
I høst har vi planer om å starte jobben med å finne designere til siden vår. Vi håper å kunne bruke andre- og tredjeårs design- og webstudenter fra høyskole og universitet i Norge. For å få til dette regner vi med å måtte reise litt rundt i landet og besøke skoler.

 Håpet er at vi kan bruke sosial markedsføring for å reklamere for siden vår. WordPressiden vår er klargjort for å implementere en Facebookplugin som poster alle oppdrag på Facebook. Denne har vi ikke aktivert siden vi ikke skal lansere siden før vi har alle designerne vi trenger til å starte opp. Utover dette regner vi med å måtte oppsøke bransjemessene som holdes rundt om i østlandet. Ettersom vi kvalitetssikrer alle våre designere håper vi på at ryktene vil spre seg etterhvert som flere får gode erfaringer med Vi designer WEB.

 Her er noen skjermbilder fra prosessen:

 

Første utkast til landings side.

 

Dette er logoen vår horisontal.

 

Dette er den vertikale logoen vår

 Her prøver vi ut ulike headere.

 

 

 Slik så landings siden vår ut før vi måtte begynne på nytt.

 

 

 Dette er brosjyren vi har å sende og dele ut til potensielle oppdragsgivere.

 

 

 Dette er visittkortet forfra

 

 

 Slik endte visittkortene med å se ut.

 

 

 Dette er det vi startet med

 

 

Her er noen av de tidligere postene.

De siste dagene har vi prøvd å få satt opp WordPresssiden. Vi har blant annet kjøpt domene (videsignerweb.no) og satt opp siden så vi kan jobbe live med den.

Vi har funnet et tema som heter Gratitude – dette temaet er responsivt og Buddypresskompatibelt. Buddypress er teknologien som vi skal bruke for å bygge det sosiale aspektet på siden (brukere, private beskjeder, rating). Vi har også funnet andre plugins som vi skal integrere i siden:

 

- Gravity Forms

- Gravity Forms + Custom Post Type

- Gravity Forms + Paypal

 

Disse to pluginsene gir oss muligheten for brukere å sende oss data uten å gå gjennom WordPressdashboardet. Det vil si at våre brukere vil poste innlegg som er ferdigstilt i stil og innhold av oss. Dette vil brukerne bruke for å poste oppdrag til siden.

 

Paypal-pluginen til Gravity Forms gir oss muligheten til å implementere Paypal på siden. I første omgang vil vi bruke paypal for å motta betaling fra kundene, etterhvert vil vi prøve å finne flere betalingsløsninger. Vi kommer etterhvert til å implementere et betalingssystem som ligner på Finn betalingsgaranti. Kundene betaler for oppdraget, men betalingen går ikke gjennom før produktet er ferdig.

 

Videre må vi finne en måte å vise informasjon fra disse pluginsene på sider bestemt for de ulike brukerrollene.

 

Her er noen enkle mockups av hvordan vi tenker layoutet skal være:

Mockup 932x1024 Vi designer web   tilbakeblikk

Forventet plan som vi prøvde å følge gjennom prosjektet

Som avsluttende semesteroppgave har vi valgt å gjennomføre en ide for en businesswebside.

Idéen er å lage en webside som blir som et slags jobboard for webdesignere/kodere.

Norske firmaer som ikke har budsjett til å engasjere reklamebyråer for å få laget en god webside kan velge designere på jobbportalen. Der poster de jobben som et prosjekt hvor de skriver inn info om jobben og velger mellom fire forskjellige “pakker”:
- Idé til HTML/CSS
- Idé til WordPress
- PSD til HTML/CSS
- PSD til WordPress

Disse blir da postet under jobber hvor “designerne” kan velge oppdragene.

Etter fullførte jobber kan kundene gi designerne ratings og de vil etterhvert få en riktig rating som representerer nivået. Faller designeren utenfor en viss rating, vil arbeidet deres bli gjennomgått og de kan miste muligheten til å være registrert som designer på siden vâr.

Såkalte “designere” vil vi engasjere fra skoler rundt omkring i Norges land.
Vi vil ta revenues fra designernes arbeider fordi vi tilbyr stedet hvor de finner jobbene. 5-10%?

Navn

Da vi i første omgang kommer til å sikte oss inn på det norske markedet har vi laget en liste over navnforslag som også har ledige domener:

Webkonsulentene
Webkreatørene
Webfreelance
Findfreelance
Webjobbportalen
Designportal
Norgeskreative
Vilikerweb
Vielskerweb
Webhammeren
Knakendegod
Webvillage
Weblandsbyen
Weblandsby
Webopolis
Webinator
Cityofweb

Utfordringer

For et relativt ambiøst prosjekt vil vi møtes med mange utfordringer.
Den største vil være å skape blest rundt produktet. Det finnes utallige reklamebyråer som tilbyr de samme tjenestene (men for en ganske høy pris). Det finnes også mange internettbyråer i utlandet som tilbyr de samme tjenestene, men med en ulik forretningsmodell. Vi tror kundene vil finne trygghet i å se arbeider og anmeldelser av “designere”, mens designere vil finne trygghet i å vite at det alltid er jobber. Derfor vil markedsføringen av denne siden være avgjørende. Tryggheten blir altså også svakheten. Dvs uten designere vil det ikke være jobber og uten jobber vil det ikke være designere.

Videre utfordringer vil være alt som innebærer lover og regler, spesielt i kreative arbeidsmiljøer ser vi ofte at det kan by på problemer. Vi vil derfor lage inngående og detaljerte elektroniske kontrakter som både kunder og designere må signere (Rights and Terms) slik at vi unngår lovlige/økonomiske konflikter mellom kunde og “designer”.

Tidsplan

Uke 16: Planlegging

Uke 17: Skisser

Uke 18: Design

Uke 19: Psd til WordPress

Uke 20: Database

Uke 21: App/Widget (vi har planer om å lage en tilhørende jobbportalapp for “designerne”)

Uke 22: Troubleshooting + brosjyremateriell

Uke 23: Sideawareness – Reise til skoler, finne kompetente “designere”