PROJEKT WOCHE 1 - Eric Marty
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
DOKUMENTATION. REDESIGN KARTE 3 12/2 ter 14 8 Mus 48 6 32 Max 84 1 48 40 900 CH2 PROJEKT WOCHE Eric Marty Noel Walter 1
Inhalt EINLEITUNG. 3 THEMENWAHL. 4 ZIELSETZUNG. 5 PLANUNG. 6 Konzept 6 Ressourcenplanung 6 Zeitplan 7 Entscheidung 7 56 4 45 8 8 321 6355-7 CI/CD. 8 D : 5 1 - 5 I to: 2 Kon Farben 8 Schrift 8 REALISIEREN. 9 Phasen 9 Kar te 9 Print 9 Format 10 Umsetzung 10 Web 11 Konzept 11 Mobile Section 12 Umsetzung 12 QUALITÄTSICHERUNG. 13 Backups 13 Feedback 13 REFLEXION. 14 Soll/Ist 14 Eric 14 Noel 14 BESTÄTIGUNG EIGENLEISTUNG. 15 QUELLEN & ANHANG. 16 Quellen 16 Anhänge 16 2
EINLEITUNG. P R O J E K T W O C H E D E R M E D I A M AT I K E R BZZ HORGEN, JUNI 2020 Im 6. Semester unserer Zeitplanung nach dem durchgeführt. Während Mediamatikerlehre, soll GANT-Schema erstellt, dem ganzen Prozess des eine Basis gelegt werden, ein klares CI/CD und das Erstellens, soll dabei die welche für das Fachge- Konzept der beiden Ar- Vorgehensweise nach spräch im 8. Semester beiten beschrieben. Be- IPERKA nochmals ver- verwendet wird. Dieser stehend aus einem Print tieft werden, was wir auch Grundstein wird innerhalb und Web Produkt. Dieses in dieser Dokumentation der Projektwoche im 6. Vorprojekt half uns dabei wiederspiegeln wollen. Semester erstellt. Das er- reibungslos in die Projekt- Der IPERKA Prozess ist stellte Vorprojekt, stellte woche starten zu können, uns bereits von anderen dabei der erste Teil für die da die essentiellen Teile Projekten, wie auch der kommende Projektwoche bereits festgelegt wurden. ersten Projektwoche be- dar. Dort wurden bereits Aufgrund der aktuellen kannt, somit können wir erste Punkte der Arbeit Situation mit dem Coro- uns voll auf die Produkte behandelt. Unter ande- navirus, wird die Projekt- konzentrieren. rem wurde eine genaue woche von zuhause aus 3
POSTFINANCE BANKKARTE REDESIGN. THEMENWAHL. Für die Projektwoche boren. Daraus resultierte Damit sich die jugendliche wollten wir Produkte er- die Idee für ein Redesign Kundschaft angesprochen stellen, die uns beide als der PostFinace Bankkar- fühlt, haben wir uns für Jugendliche schnell an- te. Da wir beide in einem die Vertriebskanäle Flyer sprechen und uns im All- Berufsumfeld tätig sind, in und Web entschieden. So tag von Nutzen sind. So dem schnelllebige Trends können die Flyer zum Bei- entstand die Idee bei und Veränderungen gibt, spiel in einer Passage im einem gemeinsamen Mit- gefällt uns die Bankkar- Zürcher Hauptbahnhof tagessen im Cindys Diner te persönlich nicht, noch verteilt werden. Mehr In- in Wädenswil. Beim Be- erscheint uns diese als formationen können sich zahlen an der Kasse be- zeitgemäss. Gewisse Kar- Interessierte dann über merkten wir, dass wir die ten der PostFinance sind die Website holen und gleiche Karte der PostFi- noch immer nicht kontakt- gegebenenfalls die Karte nance in der Hand hiel- los. Das wollen wir mit un- bestellen. Damit die Karte ten. Wir schauten uns an ser Arbeit ändern, sodass ansprechender wirkt ha- und diskutierten über das jede neue Karte über die- ben wir uns für moderne Design. Es stellte sich he- se Funktion verfügt. Des- Elemente entschieden. raus, dass wir es beide halb präsentieren wir die- Wie zum Beispiel leuch- nicht sehr ansprechend sen Vorschlag auf unseren tende Farben, Farbverläu- fanden. Die Idee war ge- beiden Produkten. fe oder neue Funktionen. 4
ZIELSETZUNG. Um präzise Ziele definieren zu können haben wir uns zuerst an den Pro- jektvorgaben orientiert. Anschliessend, was uns auf der zwischenmensch- lichen Ebene als wichtig erscheint. Hierzu definierten wir die untenste- henden Ziele: 01 02 03 Jeder in der Gruppe soll Für ein einheitliches Sämtliche Arbeiten sol- sich zu einem gleichen Design unserer Pro- len nach den genauen Teil beteiligen. Gewis- dukte, soll das im Vor- Anforderungen an die se Arbeiten können bei projekt definierte CI/ Projektwoche erstellt ausgeprägter Fähigkeit CD bestmöglich um- werden. Hierzu wird das eines Gruppenmitglie- gesetzt werden. Das von Herrn Obi bereit- des aufgeteilt werden. heisst, Schriftarten gestellte Bewertungs- Dies ist jedoch nur mit und Titel werden nach raster zur Kontrolle ver- einer proaktiven Kom- der definierten Grös- wendet. Nur so kann munikation möglich. sen eingesetzt, Farben eine gute Note erzielt Hiermit lassen sich Un- entsprechend einge- werden. Das Feedback stimmigkeiten schnell halten und das Logo anderer soll dabei als lösen. mit den korrekten Ab- Geschenk angesehen ständen platziert. Falls werden und hilft dabei Änderungen notwendig für den letzten Schliff. sein sollten, sollen die- Die erstellten Produkte se präzise begründet sollen dabei alle not- werden. Abweichungen wenigen Informationen sind somit erlaubt, so- enthalten. Zusätzlich fern sie die Arbeit ver- sollen sie einfach zu bessern. verstehen sein und den Anforderungen an ein modernes Design ent- sprechen. 5
PLANUNG. MANCHE PLANEN, UM NICHT ZU VERSAGEN. ANDERE VERSAGEN, WEIL SIE NICHT PLANEN. Peter e. Schuhmacher Konzept eine benutzerfreundliche backs. Sämtliche Abwei- Die Planung enthält unter Struktur fest, bei der der chung sind in der Doku- anderem das Erstellen Benutzer möglichst wenig mentation beschrieben. eines Konzeptes, welches beeinträchtigt wird. Trotz- ein sehr wichtiger Schritt dem haben wir bemerkt, Ressourcenplanung darstellt. Dieser Schritt dass noch einen Teil fehlt. Für die gesamte Um- erfolgte bereits im Vor- Aus diesem Grund haben setzung des Projektes projekt. Wir wissen aber wir eine Mobile Section wurde nicht viel Mate- auch, dass es immer zu hinzugefügt. Zweitens, bei rial benötigt. Für unsere Abweichungen vom Kon- unserem Flyer haben wir Produkte, werden ledig- zept, während der Rea- bei unserem Konzept zu- lich unsere Laptops und lisierung kommen kann. erst keine Rückseite ein- entsprechende Software Hierzu zwei Beispiele von geplant. Diese erstellten verwendet. Zudem haben unseren Produkten: So wir erst im Prozess der wir einen Zeitplan erstellt, legten wir für das Web Realisierung aufgrund welcher mit Meilensteinen Produkt unter anderem eines gegebenen Feed- versehen ist. 6
KONZEPT ZEITPLAN CI/CD PLANUNG. Zeitplan sentation bezogen. Für ten, haben wir die Idee mit Den erstellten Zeitplan die Kontrolle der aufge- der PostFinance Bankkar- basiert auf den aktuellen wendeten Zeit haben wir te entschieden. Aufgrund Gegebenheiten. Das be- eine Soll-Ist Spalte hin- dieser Entscheidung er deutet, die verkürzte Vor- zugefügt. Abweichungen stellten wir ein genaues bereitungszeit, das Home- vom Zeitplan zur Soll-Ist Konzept für die beiden Office und Anforderungen Planung haben wir mit Produkte. Ein dazuge- an das Projekt. Er er- Rot gekennzeichnet. Der hörendes CI/CD wur- streckt sich über einen genaue Zeitplan befindet de ebenfalls erstellt. Zeitraum vom 08.06.2020 sich ebenfalls im Anhang. - 26.06.2020. Der Zeitplan ist nach dem GANT-Sche- Entscheidung ma mit Meilensteinen auf- Nachdem wir für unsere gebaut. Die Meilensteine Produkte grobe Skizzen sind hauptsächlich auf die angefertigt haben und die Abgaben sowie die Prä- Umsetzung geplant hat- 7
CI/CD. Farben Das CI/CD orientiert sich an den bisherigen Farben von PostFinance. Diese wurden mit einem Grau und einem Orange ergänzt. Das Orange ermöglicht uns unterande- rem einen Verlauf zu kreieren und Kontrast zum Gelb herzustellen. Logo Das Markenzeichen der PostFinane wurde auch als Vorlage für unser Logo genom- men. Das Logo kann auf verschiedenen Hintergründen verwendet werden, muss aber stehts leserlich sein. Die Abstände zum Logo müssen immer beachtet werden. Schrift Wir entschieden uns bei der Schrift für "Helvetica Neue". Die Schrift muss immer 8 gut leserlich sein und einen guten Konrast abgeben. Die Schrift wird von uns auf sämtlichen Medien eingesetzt.
REALISIEREN. Phasen Das Realisieren bestand bei uns aus drei Phasen. Das Vorprojekt, das Realisieren und die Qualitätsicherung. Die Voraussetzung, um in die erste Phase starten zu kön- nen, war das unser Vorprojekt von Herr Obi angenommen wurde. Dieses beinhaltete bereites eine detaillierte Ressourcenplanung, ein Konzept und ein Zeitplan nach dem GANT-Schema. Nachdem dieser Schritt erfolgreich geschafft war, konnten wir mit der eigentlichen Arbeit der Realisierung beginnen. Diese beinhaltete das Web und Printprodukt. Die Produkte haben wir mit den entsprechenden Arbeiten, Än- derungen und Herausforderungen in den jeweiligen Abschnitten noch detaillierter beschrieben. Das erhaltene Feedback während der Realisierung und danach wird im Bereich "Qualitätssicherung" näher erläutert. Kar te Die physische Bankkarte ist ein Produkt, dass nicht von uns produziert wird. Unsere Aufgabe bestand darin ein neues Design der Karte zu erstellen. Dieser Teil gehört dabei nicht zu den eigentlichen Arbeiten, sondern ist nur Bestandteil unserer Pro- dukte. Aufgrund der Nachfrage von Herrn Obi lassen wir den Schritt des Redesign ebenfalls in unsere Dokumentation einfliessen. Die Realisation der Karte erfolgte in Illustrator. Zuerst massen wir die üblichen Masse einer Bankkarte nach, sodass die Grösse stimmte. Bei dem Farbschema folgten wir einem aktuellen Trend von Farbverläufen. Diesen erstellten wir mit den Farben Gelb und Orange. Das Gelb ist bereits eine Farbe der PostFinance. Das Gelb und das zusätzlich verwendete Oran- ge sind auch in unserem CI/CD definiert. Zusätzlich bearbeiteten wir das Logo, die Kontoinformationen und fügten einen Chipleser hinzu. Nun war unsere neue Bank- karte erstellt. Print Für den ersten Schritt der Realisierung unseres Print-Produktes, was dem Flyer ent- spricht, haben wir zuerst Skizzen angefertigt, welche wir im Anhang angehängt ha- ben. Mit den Skizzen konnten wir genau visualisieren, was unseren Vorstellungen entsprach. Der Flyer soll dabei auf der Vorderseite alle notwendigen Details ent- halten und in erster Linie informell sein. Er soll die Leute auf die neu designte Karte aufmerksam machen. Dieser kann dabei auch sehr gut als Werbemittel bei diversen Verkaufsstandorten oder Events verteilt werden. So enthält er unter anderem einen passenden Titel. Wenig zusätzliche Informationen und natürlich eine besondere neue Funktion. Diese stellt auch zugleich unsere Infografik dar. In diesem Fall ist es die Fähigkeit nun auch immer kontaktlos mit der Karte bezahlen zu können. Auf der Rückseite hingegen sind sämtliche Vorteile noch genauer beschrieben und ein ent- sprechender 9
REALISIEREN. "Call to Action" ist auch vorhanden. Er wirbt dafür noch mehr Informationen über das Produkt auf der Website zu erfahren. Natürlich darf auf beiden Seiten das effektive Produkt nicht fehlen, klar die Karte! So befindet sich auf der Vorderseite die Front und auf der Rückseite der hintere Teil der Karte. Format Um das ganze praktisch zu gestalten ha- ben wir uns bewusst für das Format A5 entschieden. So bleibt auf einer kleinen Fläche genügend Platz, um alle wichtigen Informationen zu präsentieren. Das Ganze soll natürlich dem vorab definierten CI/CD entsprechen. Hier gab es jedoch eine Än- derung bzw. Abweichung im Prozess des Erstellens. Beim Fertigstellen der Karte viel uns jedoch auf, dass der Flyer nicht genügend attraktiv gestaltet war. So ent- Flyer mit neuem Farbschema schieden wir uns sämtliche Grössen der Schriften, Abstände etc. beizubehalten. Nur die Hintergrundfarbe änderten wir. Die- se beiden Farben entsprechen nicht dem CI/CD. Diese Veränderung hat den Flyer jedoch aufgewertet. Umsetzung Zu Beginn wurde natürlich auf das kor- rekte definieren der Voreinstellungen in Illustrator geachtet. So wurde der Farb- raum "CMYK" gewählt. Zweites erstell- ten wir ein Grundlinienraster, sodass sich das Design einheitlich aufbauen lässt. Sämtliche Titel, Logos und die Karte be- finden sich somit auf beiden Seiten am gleichen Ort. Dies wurde durch den Ein- satz von Hilfslinien noch weiter verein- facht. Beim Export wude noch den Farb- kontrollstreifen, die Anschnittmarken Abb: Raster in Illustrator usw. angefügt. Für das Papier soll ein 300mg Offset Weiss verwendet werden. Der Flyer wird dadurch ein wenig dicker und robuster und wirkt hochwertiger. 10
WEB SECT und verständlich aufge- taillierter beschrieben baut sein. So können sich - Mobile Section: Hier die Kunden innert kürzes- wird die Mobile App ge- ter Zeit mit den wichtigs- nauer vorgestellt. IONS ten Informationen einde- - Formular : Ein einfaches Konzept cken. Die Website hat eine Anmeldeformular, um die Bei der Realisierung des klassische Struktur eines Karte zu bestellen Webprodukts achteten Onepagers. Die einzelnen - Footer : Das Ende der wir vor allem auf ein kla- » N avigation Bereiche sind in verschie- Website res Konzept und die Um- Enthält wichtige Sec- dene Sections aufgebaut, setzung des CI/CD. Denn tions d.h. einzelne Abschnitte. mit einer klaren Struktur, » H ero Section Diese bestehen aus: vereinfacht es die Web- Karte wird präsentiert - Einer Navigation: Ent- site, schafft Benutzer- » V or teile hält die wichtigsten Ab- freundlichkeit und erspart Mehr Details über schnitte enthält in der Realisierungsphase das Produkt - Hero Section: Hier wird mühselige Arbeit. Unser » Mobile Section die Karte präsentiert und erstelltes Konzept basiert Präsentation App stellt das wichtigste Ele- auf einem Onepager. Die- ser besteht wie der Name » F ormular E infaches Bestell- ment Website. - Vor teile: In diesem Be- 11 schon sagt aus einer Seite formular reich werden die drei Vor- und sollte daher einfach teile der neuen Karte de-
WEB SITE Konzept der Website Ergänztes Mockup Mobile Section Umsetzung Das Element der Mobile Section ist aus Der Onepager erstellten definieren und dann ganz Feedback entstanden. Es war nicht Be- wir dem CMS Webflow. Es einfach wiederverwen- standteil Konzeptes und ist aus diesem ein webbasiertes online den. Ebenfalls konnten wir Grund auch nicht darin zu finden. Wir Tool, mit dem man Design so das Logo genau nach entschieden uns deshalb ein Mobile und die Basics der Infor- den im CI/CD definier- Mockup für eine mögliche App der Post- matik sehr gut kombinie- ten Vorgaben platzieren. Finance zu erstellen. Das Mockup stellt ren kann. Für uns war dies Nach dem der Grossteil eine Budgetfunktion in der App dar, in das erste Projekt mit Web- der Arbeit umgesetzt war der man für verschiedene Kategorien flow. Es schreckte uns und die entsprechende verschiedene monatliche Ausgaben fest- nicht ab, im Gegenteil. Wir Struktur vorhanden war, legen kann. Bei der Realisierung achte- wollten etwas Neues aus- begannen wir Feinanpas- ten wir deshalb erneut darauf, dass wir probieren und dazulernen. sungen vorzunehmen. Der strikt nach dem CI/CD arbeiteten. Dar- Für Webflow gibt sehr vie- wohl schwierigste Teil an aus lässt sich ein kongruentes Design le Kurse und Tutorials, die der Umsetzung, war die über alle Medien umsetzen, der einen einem bei der Umsetzung Website responsive für entsprechenden Wiedererkennungswert helfen und entsprechende Mobile zu gestalten. Das schafft. Probleme aus dem Weg bedeutet, dass sich die Der ganze Prozess der Umsetzung wurde räumen. Website einem kleineren mit den Programmen Figma und Photos- Mithilfe unseres vordefi- Bildschirm anpasst und hop erledigt. Figma ist eine Anwendung, nierten Konzepts legten seine Struktur beibehält. welche für das Designen von User Inter- wir einzelne Klassen fest. In der Theorie einfacher faces geeignet ist. Das erstellte Mockup Wie H1, H2 oder Buttons. als in der Praxis. wurde anschliessend mit Photoshop das Diese Klassen kann man iPhone eingesetzt. einmal 12
QUALITÄT - SICHERUNG Backups : Feedback : Um sichergehen zu kön- Es ist immer sinnvoll ein Feedback von aussenste- nen, dass unsere bereits henden Personen einzuholen. Oftmals ist man zu erledigte Arbeit nicht sehr auf seine eigene Arbeit konzentriert und er- durch einen Computerab- kennt banale Fehler nicht mehr. Aus diesem Grund sturz verloren geht, haben haben wir die Produkte der Mutter von Noel und wir sämtliche Arbeiten di- dem Vater von Eric vorgeführt. Beide haben uns rekt in der BZZ-Cloud ab- sehr positives Feedback gegeben. Sie finden, dass gespeichert. Lokale Doku- es klar verständlich ist und es ein modernes "look mente wurden ebenfalls in and feel" trägt. Der Vater von Eric gab uns während einer eigenen Cloud ge- dem Erstellen den Tipp, wir sollen auf dem Flyer speichert. (z.B. Onedrive- das Wort "contactless" auf "kontaktlos" abändern. Swisscom, Mycloud). Eine Der Ganze Flyer besteht aus deutschen Wörtern. Sicherung auf einer ex- Ein solcher Begriff auf englisch störe den Gesamt- ternen Festplatte erschien eindruck. Aus diesem Grund änderten wir dieses uns als veraltet und nicht Wort ab. Die Mutter von Noel gab uns ebenfalls ein besonders sinnvoll. Die- wertvolles Feedback. Sie erwähnte den Vorteil, dass se kann beim Transport nun alles online einsehbar sei, nur sehe man davon beschädigt werden. Falls nichts auf der Website. Aufgrund dieser Rückmel- man sie nicht auf sich dung entschieden wir uns ein Mockup eines Smart- trägt, hat man keinen Zu- phones zu erstellen, welches die Möglichkeit der griff auf die Daten. Hinge- Onlineverwaltung aufzeigt. Diese Änderung haben gen bei einer Cloud, kann wir im Bereich " Web-Produkt" näher beschrieben. man von überall auf die Nach der Fertigstellung zeigten wir die Produkte Daten zugreifen. Die Absi- weiteren Personen aus unserem Freundschafts- cherung der Website war kreis. Alle hatten die Produkte zuvor noch nie ge- einfach, da Webflow ein sehen. Wir erhielten sehr positives Feedback. Der webbasiertes Tool ist und neu hinzugefügte Teil mit der Visualisierung des alle Änderungen online Handy Mockups fanden alle sehr ansprechend. Es bei sich auf den Servern wäre sehr schade gewesen, hätten wir dieses Feed- abspeichert. So konnten back von Noels Mutter nicht umgesetzt. Zusätzlich wir überall und zu jeder wurde erwähnt, dass der Flyer mit den Farben sehr Zeit an unserer Website ansprechend gestaltet sei und die Website einfach arbeiten. zu bedienen sei. 13
REFLEXION. Soll/Ist Wir konnten unsere Zeitplanung sehr Unter anderem das MMT-Portfolio und gut umsetzen und verlieft fast immer wie die Deutsch Abschlussprüfung. Diese gewollt. Die Realisierung des Flyers ver- beeinträchtigten unsere Arbeiten jedoch schob sich jedoch um eine Woche, da nicht. Genauere Informationen sind im wir in der Woche zuvor noch einige Ter- Zeitplan festgehalten, der im Anhang zu mine einzuhalten hatten. finden ist. Eric Die Projektwoche stellte für mich eine Tagesziele, welche auf dem im Vorpro- spannende Erfahrung dar. Zum ersten jekt erstellten Zeitplan basierte. Diesen Mal findet solch eine spezielle Woche haben wir im zuvor detailliert aufgestellt. von zuhause aus statt. Eine teils unge- Dies verhalf uns dabei immer im Zeitrah- wöhnliche Situation, da es in gemein- men zu bleiben. In Zukunft werde ich mir samen Arbeiten wichtig ist, sich genü- wohl diese Vorgehensweise zu Herzen gend auszutauschen. Meiner Meinung nehmen. Unklarheiten, welche zu Beginn nach gelang uns dies jedoch sehr gut, des Projektes noch bestanden, haben da Noel und ich stets im gemeinsamen wir bereits am ersten Tag zusammen mit Austausch via Microsoft Teams standen. Herrn Obi aus dem Weg geräumt. So er- Unser tägliches Briefing am Morgen hat achte ich die Projektwoche zusammen uns jeden Tag die notwendige Struktur mit dem erhaltenen Feedback als eine verliehen, welche uns den Arbeitstag gelungene Woche. vereinfachte. So setzten wir uns Noel Ich freute mich auf die Projektwoche, da Briefings, sodass wir unsere Ziele nicht ich die letzten Male gute Erfahrungen aus den Augen verloren. Die Arbeit an gemacht hatte. Ich startete also zuver- den Produkten hat mir persönlich viel sichtlich in die Woche. Da wir von Zu- Spass gemacht, da ich ein neues Tool hause aus arbeiteten, was zu diesem kennengelernt habe und es in Zukunft Zeitpunkt Normalität war, waren wir häufiger einsetzen werde. Wir haben gu- nicht an fixe Zeiten oder Orte gebunden. tes Feedback von verschiedenen Perso- Unsere Kommunikation fand hauptsäch- nen bekommen, was positive Anzeichen lich via Microsoft Teams statt. Wir trafen sind. In Zukunft werde ich mich wieder uns aber zwei Mal in Zürich da man bei gut auf ein Projekt vorbereiten, dass half gewissen Dingen schneller vorankommt, in dieser Woche sehr, um den Überblick wenn man zusammen daran arbeitet. nicht zu verlieren. Zusätzlich machten wir tägliche 14
BESTÄ- TIGUNG EIGEN- LEISTUNG Hiermit bestätigen Noel Walter & Eric Marty, dass wir die Arbeit während der Projektwoche ohne die Hilfe anderer erstellt haben. Nur die unten die im Quellenver- zeichnis aufgeführten Objekte haben wir als Hilfsmittel verwendet. Eric Marty Noel Walter Arni AG, 12.06. 2020 Lachen, 12 .06. 2020 15
QUELLEN & ANHANG Quellen » Icons auf Flyer: www.flaticon.com » PostFinance Logo: www.PostFinance.ch » Handy Mockup: geschäftsinterne PSD Datei Anhänge Sämtliche Anhänge befinden sich in einem separaten Ordner. Hier eine kurze Auflistung der Anhänge: » Zeitplan » Risikoanalyse » Journal » Konzept Flyer » Konzept Website » Mockup Mobile 16
Sie können auch lesen