Insite Design

Gull Design & Media

Praktijkopleiders:

25 januari - 24 juni2016

Ivan PakanBauke Couperus

Mijn naam is Esmé Couperus. Ik ben een 21 jaar oude studente aan de opleiding Mediavormgeving op het Friesland College Leeuwarden.Mijn interesse voor dit vak is gewekt door mijn vader, die zijn eigen bedrijf Insite Design vorm & code heeft in Franeker. In januari 2015 ben ik begonnen aan deze opleiding en sindsdien heb ik hier erg veel plezier in. In het eerste jaar zijn we vooral bezig geweest met het leren kennen van de programma’s door middel van verschillende opdrachten. In het tweede jaar hebben we 20 weken stage en na de zomervakantie komen we terug op school.

Op 25 januari 2016 ben ik mijn stageperiode begonnen bij Gull Design & Media in Sexbierum. Bij dit bedrijf ga ik in samenwerking met Insite Design in Franeker een nieuwe website ontwerpen en bouwen voor de sportvereniging BeQuick Franeker. In dit stageverslag zijn al mijn werkzaamheden, ontwerpen e.d. te bekijken. Hierin zal ik alles bijhouden en zo goed mogelijk proberen te beschrijven.

VOORWOORD & INLEIDING

INHOUDSOPGAVE

1234567

Gull Design & Media

Insite Design

Hoofdopdracht BeQuick

Integrale Product Ontwikkeling

Autobedrijf Terpstra

Leerdoelen

Vitablend

Synaeda

Cathrine Ockernahl

Reflectie

Kritische Beroeps Situatie

Kerntaken & Werkprocessen

89

10

1213

11

Programma’s

GULL DESIGN & MEDIA BV

Gull is gevestigd in het oude groene kruis gebouw in Sexbierum. Ivan Pakan is de eigenaar van het bedrijf, samen met zijn vrouw Roeselinde Muntingh beheert hij de projecten en voert deze zelf uit of in samenwerking met andere bedrijven.

Ik ben met dit bedrijf in contact gekomen via mijn vader.Het is een ontwerpbureau in Sexbierum, waar met mij erbij 3 mensen werkzaam zijn. Mijn eerste indruk van het bedrijf; ik vind het fijn dat het een klein bedrijf is, zo wordt er veel aandacht besteed aan jou, en ben je niet één van de vele stagiaires die daar rondloopt. Het bedrijf ziet er netjes en professioneel uit. Ivan is zelf een industrieel ontwerper. Binnen het bedrijf ben ik de ‘nieuwe’ vormgeefster.Ik voer verschillende opdrachten uit die te maken hebben met vormgeving. Ik ga veel nieuwe dingen leren zoals; video en de bewerking daarvan, websites ontwerpen en bouwen, en vooral het echt leren ‘ontwerpen’ op de computer.

INSITE DESIGN VORM & CODE

Insite Design is opgericht in 2002, maar is sinds 2009 gevestigd in Franeker. Mijn vader, Bauke Couperus, is de eigenaar van het bedrijf. Het is dan ook een eenmanszaak. Hij is vooral gespecialiseerd in het coderen van websites, maar houdt zich ook bezig met het ontwerpen van logo’s en dergelijke.

Insite Design zit samen met WMMedia in het pand, ook een eenmanszaak. Ze werken apart maar ook samen aan verschillende projecten. Mijn functie binnen het bedrijf is stagiaire vormgeving. Zoals eerder gezegd zal ik in samen werking met Bauke de nieuwe website gaan bouwen voor BeQuick Franeker.Hierdoor zal ik heel veel gaan leren over het coderen van websites.

INTEGRALE PRODUCT ONTWIKKELING (IPO)

Bij Gull Design & Media werken we altijd volgens het IPO - schema.Op de volgende bladzijde kun je zien hoe dat er uit ziet.Je gaat altijd te werk volgens dat schema.Eerst doe je research, dan maak je een pakket van eisen, je bedenkt het concept en maakt het ontwerp/prototype. En als allerlaatst presenteer je het product en realiseer je het.

Als je volgens dit model werkt, sla je geen stappen over en kom je tot een professioneel ontwerp/product.

BEQUICK FRANEKER

BeQuick is een sportvereniging uit Franeker. Deze is opgericht op 4 oktober 1933. Er word les gegeven in verschillende disciplines. Zoals: ritmische gymnastiek, turnen, jazzdans, kleutergym, senioren fit en conditietraining. Deze lessen worden gegeven in sporthalen ‘de Trije’ in Franeker. Op dit moment telt de vereniging bijna 300 leden en wordt er les gegeven door 11 leidinggevenden.

Er moet een nieuwe website komen voor de sportvereniging BeQuick.In de komende periode ga ik in samenwerking met Gull Design & Media de indeling en het ontwerp maken, en met Insite Design zal ik de website gaan programmeren. Er is nu een website online via Joomla, maar deze is onhandig en ouderwets. Op de oude website staat veel informatie wat eigenlijk wel weg gelaten kan worden. Of wat bij een ander kopje in kan worden gezet zodat het overzichtelijker word. Ook is deze website niet responsive dus lastig te bekijken via smartphones en dergelijke.

PAKKET VAN EISEN

Wat is het doel van de website?Het is de bedoeling dat we een overzichtelijke en veilige website maken, die de oude Joomla website kan vervangen. De Joomla website is non-responsive en heeft een slechte beveiliging.

Wat willen we bereiken?We willen dat elk onderdeel makkelijk te bekijken is voor een ieder die deze informatie nodig heeft. En dat de website ook op kleinere schermen goed te bekijken is.

Voor welke doelgroep is de website?Het is een website voor de leden, leiding en geinteresseerden van BeQuick. Voor de leden en leiding is vooral het lesrooster belangrijk, de wedstrijden en de uitslagen daarvan.Voor bijvoorbeeld familie van de leden is het leuk om de foto’s en uitslagen te kunnen bekijken. Waar de geinteresseerden (potentiele leden) waarschijnlijk belang hebben bij hoe ze lid kunnen worden, de contributie, kleding en dergelijke.

FLOWCHART

ANALYSE

Wat heb ik gedaan?Ik heb onderzoek gedaan naar websites van verschillende sportverenigingen in Nederland.Dit zodat we kunnen kijken naar wat andere sportverenigingen doen met hun website en welke onderdelen er sowieso in ‘moeten’ komen. Zo kunnen we voor de nieuwe website van BeQuick een pakket van eisen opstellen en uiteindelijk een mooie moderne en gebruiksvriendelijke website neerzetten.

Hoe?Ik heb de websites geanalyseerd en hier heb ik de goede en minder goede punten van opgeschreven en een screenshot gemaakt van hoe het eruit ziet.Ook heb ik gekeken naar welke functionaliteiten de websites hebben.Uiteindelijk heb ik een conclusie getrokken en deze beschreven.Daarna heb ik een pakket van eisen opgesteld.

SYNTHESE

Wat heb ik gedaan?Ik heb wireframes opgezet van hoe we vinden dat de website er uit moet komen te zien. De website moet responsive worden dus ik heb in 3 verschillende maten laten zien hoe de website er uit ziet, en hoe deze reageert bij kleinere schermen.

Hoe?Op internet heb ik de responsive website formaten opgezocht.In het programma Illustrator heb ik in 1200 px (desktop), 768 px (tablet) en 320 px (smartphone) ontwerpen gemaakt.Hierbij heb ik zoveel mogelijk rekening proberen te houden met de functionaliteit en wat je wilt zien op de kleinere schermen.

Resultaat?Een duidelijk beeld van hoe de website er ongeveer uit moet komen te zien qua indeling.

1200 px768 px

320 px

MATERIALISATIE

Wat heb ik gedaan?We hebben besproken wat er nou uiteindelijk echt belangrijk is op de website. Dus de kopjes en menu items zijn aangepast.Ik heb de interface ontworpen met kleuren, lettertypes en iconen.Daarna heeft Ivan de ontwerpen meegenomen naar de vergadering van BeQuick, en de bestuursleden waren enthousiast. Alleen de kleur moest echt veranderd worden. De kleur is aangepast van paars naar cyaan. Een stuk frisser!

Hoe?Wederom een responsive website, dus in verschillende formaten heb ik weer de interfaces gemaakt. Deze keer met de nieuwe kleur cyaan!

Resultaat?Strakke ontwerpen die ik mee kon nemen naar Insite Design zodat we wisten hoe we moesten programmeren.

1200 px768 px

320 px

OPTIMALISATIE

Wat heb ik gedaan?De ontwerpen heb ik meegenomen naar Insite Design, besproken en van daar uit zijn we gaan programmeren in PHPdesigner en FileZilla.Voor de website hebben we gebruik gemaakt van UIkit.Dat is een framework en daar kun je verschillende onderdelen uithalen, zoals iconen, grids, sliders en dergelijke. Zo kun je sneller een strakke website developen.Dit was nog best lastig voor mij, want ik had nog weinig verstand van HTML. Maar na een tijdje lukte het prima! Met behulp van Bauke natuurlijk.

Hoe?In PHPdesigner hebben we samen de codering gedaan, en doormiddel van FileZilla hebben we de website op de server gezet.

Resultaat?De interface is klaar om aangesloten te worden op de database en CMS. Daarna kunnen de teksten toegevoegd worden.

Wat heb ik gedaan?We hebben in grote lijnen de website interface gecodeerd.De tekst die erin moest komen heb ik uitgezocht vanaf de oude website.Daarna heeft Bauke een database gemaakt op de WIE manager.Zo kon ik via de database en CMS de tekst gemakkelijk in de pagina’s plaatsen.

Hoe?Via WIE manager kon ik als admin inloggen op de database, zodat ik alle pagina’s kon aanmaken met tekst en kon aansluiten op de gecodeerde website.

Resultaat?Alle tekst staat netjes in de pagina’s en we hebben er een overzichtelijke website van weten te maken, die ook nog responsive is.

BREAKPOINTS ICONS

LOGO

MENU

BREAKPOINT 1 / MOBIEL 320 x 767 pxBREAKPOINT 2 / TABLET 768 - 1199 pxBREAKPOINT 3 / DESKTOP 1200 - 1999 px

Alignment: leftSize: Header height: 120 pxFile:

Menu Menu items Mouse over#2BABE2 #FFFFFF #CCCBCB

BREAKPOINT 1

BREAKPOINT 2

BREAKPOINT 3

EINDPRODUCT

Wat heb ik gedaan?Alle pagina’s zijn aangesloten en ingevuld via de WIE manager.Foto’s zijn uitgezocht voor de verschillende pagina’s en de tekst is toegevoegd.

Hoe?Ik heb eerst de teksten van de oude website afgehaald, naar mate de website online staat zullen de teksten nog veranderd worden.De foto’s heb ik toegestuurd gekregen van Roesalinde.

Resultaat?Een strakke responsive website voor BeQuick. In de frisse nieuwe cyaan kleur.