Gebruikte skills: Tedde Consult: Startersservice Thomas More Samenwerken ICT-geletterdheid Communiceren De vraag naar een website Tedde Consult is een onderneming geleid door studenten Bedrijfskunde van Thomas More. Ze helpen klanten die vragen hebben omtrent bedrijfszaken. Klanten vroegen al enige tijd achter een website waar ze informatie konden vinden, maar die was niet ter beschikking. Mevrouw Van Orle vroeg daarom aan 1IMD-studenten of ze zich hiervoor wilden inzetten en zo ook een bewijsstuk gebruiken voor het vak Professionele Ontwikkeling. Deze kans wou ik niet laten liggen en dus stelde ik me kandidaat. Hieronder zie je het mailverkeer voor onze aanvraag. Afbeelding 1: Screenshot mail
Afbeelding 2: mail Afbeelding 3: mail
Afbeelding 4: mail Afbeelding 5:mail Meeting met studenten Tedde Consult Onze eerste (en enige) meeting ging door op 11 april 2016. Hieronder vind je de mailoverdracht.
Afbeelding 6: mail Afbeelding 7: mail
Afbeelding 8: mail Afbeelding 9: mail
Verslag 1 Datum en uur meeting: 11/04/2016 18:00u Eind uur meeting: 18:50u Deelnemers Aanwezig: Sander, Karim, Mario, Niels, Jonas, Dana, mevrouw Van Orle (tussenpersoon) Verslag Ontmoeting & uitleg opdracht Verslagdatum: 11/04/2016 Afwezig (verontschuldigd?): / 1. Algemene uitleg over Terra Consult en Start [HI]er Mevrouw Van Orle legt de bedoeling uit achter het bouwen van de website. 2. Beide partijen stellen vragen aan elkaar We vragen naar een reeds gemaakte huisstijl, logo of andere informatie waar we rekening mee moeten houden. Start [HI]er toont hun huidige logo, Karim gaat enkele schetsen maken voor een nieuw logo. We overlopen de verschillende webpagina s alsook de algemene inhoud. Het staat vast dat ze een invulformulier willen dat wordt verstuurd naar hun e-mailadres. De gevraagde webpagina s zijn: - Wie zijn wij? ( over ons / team ) - Wat doen wij? - Welke diensten bieden we aan - Missie/visie/waarden - Newsfeed - Links naar sociale media - Sponsors - Contactformulier - Adres 3. Nadenken over een deadline Beide partijen zoeken een deadline voor de website. Deze deadline staat eind april, ten laatste tegen het einde van de eerste week van mei (week van 2 tot mei). 4. Rondvraag Beide partijen hebben geen vragen meer. Einde van de meeting. 5. Volgende (aparte) vergadering 12/04/2016
Verslag 1: Ontmoeting & uitleg opdracht De eerste vergadering met deze studenten en mevrouw Van Orle vond plaats op campus Fay d Herbe om 18.00u. (zie verslag vorige pagina). Tweede vergadering De volgende dag (12 april 2016) zijn Mario, Karim en ikzelf reeds gretig aan de slag gegaan met de info die we verkregen. We hebben een tweede vergadering gehouden. (zie verslag volgende pagina). Dana Van Rompa (studente Tedde Consult) heeft ons via mail nog enkele bestanden gegeven waarmee we aan de slag konden zoals het logo, teksten en een vragenlijst ingevuld voor Designosource. Hieronder de mailoverdracht. Afbeelding 10: mail
Verslag 2 Datum en uur meeting: 12/04/2016 13:00u Eind uur meeting: 13:25u Deelnemers Takenverdeling & overleg opmaak van de website Verslagdatum: 12/04/2016 Aanwezig: Sander, Karim, Mario Afwezig (verontschuldigd?): / Verslag 4. We verdelen in grote lijnen de taken om tot ons eindresultaat te komen - Karim: logo designen lay-out PSD/AI maken (mock-up) - Sander: leidt de vergadering, notulist - Sander & Mario: uitwerking in code (HTML, CSS, Javascript, jquery) 5. We bekijken de gekregen bestanden van Dana via mail De bestanden die we hebben gekregen zijn: - Logo starter.png - Website Concept.docx - Website start[hi]er vragenlijst.docx 6. Bespreken van de verschillende webpagina s Na het bekijken van de gekregen bestanden hebben we de informatie opgedeeld in verschillende webpagina s: - Home - Ons team - Bedrijfsfilosofie - Diensten (wat doen wij? (+ kunnen we hier een overzicht weergeven van reeds afgewerkte opdrachten?)) - Newsfeed - Contact 6. Bespreken logo Karim gaat enkele logo s schetsen en voorstellen. Indien dit goedgekeurd word, maakt hij hier ook een favicon voor. Het logo moet volgende kenmerken hebben: - Transparante achtergrondkleur - Kleuren van het logo (voorgrond) zijn zelf te bepalen
7. Bespreken website Na een brainstorm van mogelijke bruikbare elementen kwamen we op volgende zaken: - Fixed header (wit of witgrijs) - Lijntje onder de actieve pagina - Smooth scroll bij het navigeren - Responsief maken - Hamburger menu met openklapbare navigatie (enkel mobiele versie) - Op desktop gebruik maken van kolommen (bv. Missie/visie/waarden) - Footer met sociale media, adres en een copyright ( + jaar) 8. Rondvraag Geen vragen meer. Einde van de meeting. 9. Volgende (aparte) vergadering 19/04/2016 Actielijst WIE - Karim - Sander - Sander & Mario - Iedereen WAT - Logo + mock-up - Formulier in HTML zetten - Algemene HTML maken van de tekst - Kleurenpallet zoeken DEADLINE - 20/04-18/04-18/04-15/04 Verslag 2: Takenverdeling & overleg opmaak van de website
Het begin van ons design proces Karim nam de taak van designer op zich. Omdat ik toch wat wou meezoeken naar een logo en de lay-out van de website, zond i mijn schetsen reeds naar Karim. Afbeelding 11: schets Afbeelding 12: schets Afbeelding 13: schets Afbeelding 14: schets Afbeelding 15: schets Afbeelding 16: schets Na een week designen kwam Karim af met zijn logo en lay-out voorstel, gebaseerd op mijn schets.
Afbeelding 17: lay-out Afbeelding 18: kleurgebruik
Afbeelding 19: logo Start [hi]er Het begin van ons develop proces De taak van developer werd verdeelt tussen Mario en mezelf. Mario verzorgde de opmaak van de mobiele versie, ik had reeds de html geschreven en schreef nu dus de jquery en Javascript voor de interactie met de gebruiker samen met de code voor het hamburgermenu. Afbeelding 20: website enkel html Afbeelding 21: mobile version v1
Afbeelding 22: jquery v1 Afbeelding 23: Javascript v1 Van mobiel naar desktop Nadat Mario de mobile version heeft gecodeerd, heb ik mijn jquery en Javascript code geïmplementeerd en de media query s toegevoegd zodat alles mooi zichtbaar wordt in bredere versies. Als je op de link hieronder klikt, word er een filmpje gedownload met daarin de mobiele versie 1. http://swappdesign.com/sideprojects/startersservice/images/mobile.mov Video 1: werking mobile version Afbeelding 24: Media queries v1
Eerste feedback van Tedde Consult Na ons eerste iteratie wilden we wel eens horen wat Tedde Consult reeds van ons voorstel vond, daarom stuurde ik hen reeds een filmpje met de werking van de mobiele versie op. (zie link hierboven) Afbeelding 25: mail Afbeelding 26:mail Afbeelding 27: mail
Afbeelding 28: mail Afbeelding 29: mail Afbeelding 30: mail Afbeelding 31: mail
De website is bijna af Dana Van Rompa heeft ons nog enkele artikels doorgegeven die we in de Newsfeed konden steken, foto s voor in het element ons team te zetten komen nog. Afbeelding 32: mail Afbeelding 33: Uiteindelijke versie newsfeed
Na verder alles juist zetten ziet onze uiteindelijke versie er nu als volgt uit. (screenshot van één deel van de gehele website; desktop versie) Afbeelding 34: Uiteindelijke versie desktop Nadat ik dit alles had aangepast, moesten er nog maar een paar dingen gebeuren, namelijk de foto s van ons team en een icoon voor de back-to-top button. Daarom stuurde ik de website met al zijn bestanden naar mijn collega s. Dit ging via een facebook gesprek genaamd Website PO1 en hier kwamen allerlei zaken in over de website zoals wat we kunnen aanpassen, een verslag van de mails en nog veel meer. Afbeelding 35: facebook bericht Website PO1
Reflectie Ik ben mezelf ontzettend dankbaar, alsook mevrouw Van Orle en Tedde Consult voor de vraag en het vertrouwen in ons. Ik wilde, samen met Mario en Karim er een verzorgde en professionele website van maken met interactie met de gebruiken, waar je ook nog eens met plezier naar kan kijken. Het samenwerken met mijn medestudenten was een succes dat ik zeker nog eens over wil doen! In teamverband projecten maken geeft je nog altijd een bredere kijk op het geheel waardoor je betere aanpassingen kan maken dan wat je ervoor had. Ze hebben dit zeer goed gedaan en ik hoop dat ik meerdere projecten met hen mag uitvoeren. Dit was een zeer goede kans voor ons 3 om een product te maken voor klanten dat ook nog eens commercieel kan gebruikt worden. Met de kennis die we al hadden, alsook de code die we hebben moeten opzoeken, hebben we een mooi ogende website op poten gezet. Ook de communicatie ging zeer vlot. In het begin was het was onwennig, we hadden nog nooit samengezeten met klanten. Beide partijen waren eerder teruggetrokken, maar tijdens de vergadering ging het steeds beter waarna we hun idee van de website goed hebben kunnen nagaan. Uit dit bewijsstuk leid ik af dat samenwerken zeker iets voor mij is, zeker als het gaat over iets dat ik graag doe namelijk websites maken. Ook de communicatie tussen de verschillende partijen ging zeer vlot en professioneel te werk.