LADE DIE ÜBUNGSDATEIEN HIER HERUNTER

Kursprojekt 01 – Wireframe-Startseite und Kontakt-Seite

Sieh dir das Briefing und die Persona für den Kunden an: Maynooth-Möbel.
1. Übungsdateien > Kursprojekte 1 > Kurzanleitung – Maynooth Furniture.pdf
2. Übungsdateien > Kursprojekte 1 > Persona – Maynooth Furniture.pdf
Homepage
1. Mit den Fähigkeiten, die wir bisher gelernt haben, kannst du die Startseite mit der in der Kurzbeschreibung aufgeführten Startseiten-Funktion wireframeen:
  1. Logo
  2. Nav
    1. Wohnzimmer
    2. Schlafzimmer
    3. Küche und Essen
  3. Warenkorb
  4. Kontakt
  5. Suchfeld
  6. Hero Slider
  7. vii.Neu im Shop
  8. viii.Inspirationsideen
  9. Clearance Deals
  10. Fußzeile
Kontaktiere uns
1. Erstelle eine zweite Zeichenfläche mit dem Namen „Kontakt“.
2. Entweder du verwendest Beispiele aus der XD-Vorlage „Wires“ oder du erstellst deine eigene Version. Erstelle ein einfaches Kontaktformular.
3. Sieh dir andere Websites nach Beispielen an.
Erstelle JPG der fertigen Arbeit.
1. Datei > Alle Zeichenflächen exportieren > Jpeg
Teile deine Arbeit in einem oder allen dieser Dinge:
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º

Kursprojekt 02 – Prototyp

Verbinde deine Startseite mit deinen Kontakt-Zeichenflächen.
Deine Kontakt-Seite kann entweder eine Seite oder ein Popup-Modal sein.
Erstelle einen Screenshot deines Prototyps.
1. Stelle sicher, dass du dich im Prototyp-Modus befindest.
2. Bearbeiten > Alles auswählen
3. Screenshot erstellen
  1. Mac
    1. CMD + Shift + 4
    2. Ziehe dann ein Feld um deine Zeichenflächen.
    3. Dein Screenshot wird auf dem Desktop angezeigt.
  2. PC
    1. Windows-Logo-Taste + PrtScn
    2. ODER Windows-Logo-Taste + Strg + PrtScn
      1. ODER Windows-Logo-Taste + Fn + PrtScn
    3. Dein Screenshot wird in einem Ordner namens „Screenshots“ in deinem Standardordner „Bilder“ angezeigt.
Teile deine Arbeit in einem oder allen dieser Dinge:
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º

Kursprojekt 03 – Symbole und Raster wiederholen

Lösche dein Asset-Panel von unbeabsichtigten Assets.
Erstelle deine Navigation und Fußzeile ein benanntes Symbol in deinem Assets-Panel.
Erstelle eine neue Zeichenfläche mit dem Namen „Kategorieseite – Wohnzimmer“
Verwenden deiner aktuellen Wireframing-Fähigkeiten, einschließlich des Wiederholungsrasters, um eine Seite zu erstellen, die alle Produkte auflistet, die in dieser Kategorie vorkommen.
1. Liste die Dinge auf, die du auf dieser Seite brauchst. Wenn es Karten gibt, was sollte in den Karten stehen. Benötigt es eine linke Navigation wie das InstructorHQ-Mockup? Denk daran, Katherine im Hinterkopf zu behalten!
2. Sieh dir bestehende E-Commerce-Websites an, um Ideen zu finden, wie eine Kategorieseite funktionieren kann.

Z.B.: www.ikea.com, www.dfs.co.uk, www.habitat.co.uk, www.amazon.com, www.ebay.com.

Erstelle eine neue Zeichenfläche namens „Produktseite“
1. Erstelle eine Seite, die Details zum Endprodukt zeigt, mit deinen aktuellen Wireframing-Fähigkeiten.
2. Wie oben aufgelistet, liste alle Dinge auf, die du der Meinung bist, dass sie auf dieser Seite sein sollten, um Katherine beim Kauf zu helfen.
Prototyp aller Seiten.
1. Verbinde sie alle zu einem funktionierenden Mockup.
Erstelle einen Screenshot und teile ihn mit den oben aufgeführten Optionen.
1. Nachdem du deine Arbeit geteilt hast, schau dir bitte die Versionen anderer Personen an und biete Ermutigungen und konstruktive Kritik.

Kursprojekt 04 – Wireframe-Feedback

Erstelle einen öffentlichen Prototyp.
1. Gib ihm einen Namen: Maynooth Prototype V1.0
Teile den Link mit jemandem, den du kennst, und bitte ihn, einen Kommentar zu hinterlassen.
Nimm dich mit einer einfachen Demo auf.
Teile deinen Link und Video in einem oder allen dieser Dinge:
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º
Achte darauf, das Mockup einer anderen Person zu kommentieren, damit du verstehst, wie es ist, der Kunde zu sein. Jemand wird das Gleiche für dich tun, damit du sehen kannst, wie es ist, Feedback zu erhalten.

Kursprojekt 05 – Moodboard

Mit den Maynooth-Möbeln im Hinterkopf kannst du ein Moodboard für Stil, Schriftart, Farbe und Layout-Ideen erstellen.
Füge das Mood-Board zu deiner Zeichenfläche oder niiice.io hinzu.
Erstelle einen Screenshot deines Moodboards.
Teile dein Moodboard in einem oder allen hier:
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º

Kursprojekt 06 – Farben

Option 1: Verwenden der vorhandenen Farben.
1. Importiere das Maynooth-Logo.
  1. Übungsdateien > Kursprojekt 1 > Logos > Logo-Maynooth-Option1.svg
2. Füge die Farben aus dem Logo in dein Assets-Panel hinzu.
3. Füge die Farben des Logos in dein Farbfeldbedienfeld hinzu.
4. Ordne beide Farbsätze nach.
Option 2: Verwenden deiner eigenen Farben.
1. Wähle deine eigenen Farben und aktualisiere das Logo.
2. Importiere das Maynooth-Logo.
  1. Übungsdateien > Kursprojekt 1 > Logos > Logo-Maynooth-Option1.svg
3. Die Gruppierung des Logos aufheben.
4. Aktualisiere mit deinen eigenen Farben.
Teilen
1. Teile deine Arbeit nur im Moment, wenn du deine eigenen Farben ausgewählt hast.
2. Screenshot deines neuen farbigen Logos und Share:
  1. Aufgabenbereich dieser Website
  2. Zu Kommentaren der Seite hinzufügen.
  3. Soziale Medien und Dan taggen
    1. Instagram: @bringyourownlaptop
    2. Twitter: @danlovesadobe
    3. Facebook-Gruppe hier.
  4. Alle oben genannten â˜º

Kursprojekt 07 – Text und Schaltflächen

Erstelle deinen Textstapel.
1. Überschrift 1, Überschrift 2 usw.
Füge deinen Figurenstilen hinzu.
Erstelle deinen Heldentext (Überschrift 1 und Haupttext).
1. Da deine Website eine E-Commerce-Website ist, wirst du feststellen, dass es im Hero-Space mehr um Specials und Werbeaktionen und weniger um Markenentwicklung geht, sodass wir ein saisonales Heldenimage haben.
  1. Z.B. Frühling, Weihnachten, Black Friday usw.
2. Suche nach Inspiration nach bestehenden Möbelwebsites.
Erstelle einen Button im Heldenbereich
1. Was auch immer zu der Promotion passt, für die du dich entschieden hast.
  1. Z.B. Beginne mit dem Einkaufen, kaufe jetzt, weitere Details.

Kursprojekt 08 – Zeichne deine eigenen Symbole

Mit einem der Tools lernst du bisher im Kurs (Stift-Tool oder Boolean) kannst du Folgendes erstellen:
1. Kontosymbol.
2. Einkaufswagensymbol.
3. Plus ein weiteres Symbol deiner Wahl.
Füge deinem Maynooth Furniture Mockup hinzu.
Screenshot der Symbole aus deinem Mockup und Share.
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º

Kursprojekt 09 – Vollständiges Hi-Def Mockup

Dies ist eine große für dich! Wir haben viel über die Erstellung von Bildern und Grafiken gelernt. Jetzt ist es an der Zeit, die Tools in die Praxis umzusetzen, um dein Mock-up in ein fertiges Design zu verwandeln. Ich möchte, dass du alle unten aufgeführten Tools/Techniken in deinem Maynooth-Möbeldesign verwendest. In einigen Dingen bist du besser als in anderen. Ich möchte, dass du dich auf die Dinge konzentrierst, in denen du nicht gut bist â˜º

Kompiliere die Desktop-Website-Ansichten für die folgenden Seiten. Wir arbeiten später im Kurs an den Mobile-/App-Versionen. Denk daran, dass du für Katherine designst!
1. Homepage
2. Kategorieseite, z.B. Wohnzimmer
3. Produktseite, z. B. 3-Sitzer-Sofa
Achte darauf, dass du alle Funktionen des Briefings einschließt (Übungsdateien > Kursprojekt > Brief – Maynooth Furniture.pdf).
1. Hinweis: Wenn du etwas auf der Liste findest, dass du die Bedeutung von Notiz nicht verstehst, ignoriere es einfach und mache weiter. Normalerweise würdest du vom Kunden eine Erklärung erhalten, aber es ist wahrscheinlich, dass ich nicht schnell genug auf dich zurückkommen kann und du von mir aufgehalten wirst.
Verwende mindestens eine Instanz der folgenden Tools/Techniken in deinem Design.
1. InDesign
  1. Erstelle mindestens ein Objekt/eine Grafik in InDesign und bringe dies in dein XD-Mockup.
2. Unsplash
  1. Lade mindestens 1 Bild von Unsplash herunter, das du in deinem Design verwenden kannst.
  2. Füge das Bild über Photoshop oder Illustrator oder InDesign zur CC Library hinzu und finde visuell ähnliche Bilder.
    1. Es liegt an dir, ob du das Adobe Stock-Bild mit Wasserzeichen in deinem Design verwendest, aber stelle sicher, dass du deine Ergebnisse in der CC Library per Screenshot festhältst und sie mit deinen eigenen Hausaufgaben teilst.
3. Photoshop
  1. Öffne eines deiner Unsplash-Bilder in Photoshop.
  2. Füge es deiner CC Library hinzu.
  3. Dann füge du dies zu deinem XD Mockup hinzu.
  4. Dann öffne das CC-Library-Element (nicht das Original)
  5. Denk daran, dass du zum Öffnen des CC Library-Elements von with in XD die Bibliothek öffnen musst: Datei > CC Libraries öffnen und mit der rechten Maustaste darauf klicken und „Bearbeiten“ auswählen musst.
  6. Anpassen des Bildes in Photoshop
    1. Z. B. Maskierung, Level/Kurven, Filter, Inhalts-Aware Scale – Alles.
  7. vii.Speichern und schließen Sie das aktualisierte Bild und sehen Sie es schließlich in XD aktualisieren...
4. Maskiere mindestens ein Bild.
5. Passen Sie die Unschärfe oder Dunkelheit mindestens eines Bildes an.
  1. Vielleicht als Hintergrundbild, wie wir es für die FAQ-Seite getan haben.
Screenshot der 3 Seite aus deinem Mockup und teile.
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º

Kursprojekt 10 – Mobile APP/Website

Der Kunde hat nach einer APP-Version seiner E-Commerce-Website gefragt.

Erstelle mobile Versionen der 3 Seiten, die du für die Desktop-Ansicht der Website erstellt hast.
1. Homepage
2. Kategorieseite, z.B. Wohnzimmer
3. Produktseite, z. B. 3-Sitzer-Sofa
Da es sich um eine App handelt, möchte ich, dass du eine Anmelde- und Anmeldeseite erstellt.
Mach dir in diesem Stadium keine Sorgen um Prototyping. Wir schauen uns das mobile spezifische Prototyping in kommenden Videos an.
Screenshot der mobilen Version deines Mockups und Share.
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º

Kursprojekt 11 – Mikrointeraktionen

Erstelle mit deinem Maynooth-Möbelprojekt mindestens 3 Beispiele für deine Mikrointeraktionen. Du kannst jede der bisher im Kurs gelernten Techniken verwenden oder deine eigenen erstellen.
Nimm dich auf, um die Animationen zu testen.
Erstelle eine animierte GIF-Version deines Prototyps
1. Du kannst Adobe Media Encoder oder https://ezgif.com/video-to-gif verwenden
Teile dein animiertes GIF:
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.
4. Alle oben genannten â˜º

Kursprojekt 12 – Nutzertests

Ich möchte, dass jeder einen moderierten Test macht. Dies erfolgt persönlich. Mache Notizen und Änderungen auf der Grundlage ihres Feedbacks.
Registriere dich für ein Testkonto bei usertesting.com und lasse dein Maynooth-Design testen.
In dieser Übung möchte ich, dass du deine Erfahrungen mit allen teilst, anstatt Screenshots oder Prototypen zu erstellen. Sag uns, wie es gelaufen ist. Was du gelernt hast. Was du beim nächsten Mal anders machen würdest. Stelle Fragen.

Kursprojekt 13 – Brüllzyklen

Dies ist eine große. Dies kann so groß oder klein sein, wie du es nehmen möchtest. Es wäre ein perfektes Projekt für dein Portfolio. Verwende alle Fähigkeiten, die du in dem Kurs gelernt hast, um eine Website und/oder mobile App für Roar Cycles zu erstellen.

Sieh dir das Briefing und die Persona für den Kunden an: Roar Bikes.
1. Übungsdateien > Kursprojekte 2 > Kurzanleitung – Roar Bikes.pdf
2. Übungsdateien > Kursprojekte 2 > Persona – Roar Bikes.pdf
Logo ist in Übungsdateien > Kursprojekt 2 > Logo verfügbar
Du musst Wireframes und Hi Fidelity-Prototypen erstellen.
Schriftarten, Farben und Bilder liegen ganz bei dir.
Lass deine HiFi-Prototypen testen.
Erstelle und teile:
1. Wohnungen
  1. Screenshots sowohl deiner Wireframes als auch deiner HiFi-Versionen.
2. Öffentliche Links zu deinen Hifi-Beispielen.
3. In situ Mockups
  1. Beispiele für deine Arbeit an Ort und Stelle, die verwendet wird.
  2. Wie die Versionen, die wir mit intelligenten Objekten in Photoshop mit den Grafiken „Adobe Market > For Placement“ erstellt haben.
4. Mikrointeraktionen x3
  1. Ich möchte, dass du jede deiner Mikrointeraktionen oder Zeichenflächenübergänge animierst und über MP4 oder animiertes Gif teilst
  2. Extrapunkte: Beispiele für After Effects oder Proto Pie.
Teile deine Arbeit in einem oder allen dieser Dinge:
1. Aufgabenbereich dieser Website
2. Zu Kommentaren der Seite hinzufügen.
3. Soziale Medien und Dan taggen
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Facebook-Gruppe hier.

Alle oben genannten â˜º