Lerne unseren UI-Design-Prozess – Prototyp-Apps und Websites.

1. Kurseinführung: Was ist los, alle? Es ist gerade in von Black Bear Creative. Ich bin der Lead-Designer Ah, und Besitzer und Betreiber von BlackBerry kreative. Und heute bekam eine andere Klasse, die ich gerne mit Ihnen teilen würde und es heißt Sie I Design Prozess. Also diese Klassen, um Ihnen das Framework beizubringen, das wir verwenden, wenn wir Prototyp verschiedene Tops von Softwaresystemen für Websites und APS. Also, bevor ich noch weiter gehe, was bist du? Ich entwarf Ihre I Design steht für User Interface Design. Also Benutzerschnittstelle, oder Sie ich ist der Raum, wie Menschen und Computer interagieren, so dass ich auch tatsächliche physische Geräte wie Computer, mobile Geräte, The'Keeper Board, der Bildschirm, mit der Maus. Aber es kann auch auf Softwaresysteme ah beziehen, Websites und Karten, die verwendet, Form, Aufgabe oder Aktionen ausführen helfen Form, . Also in dieser Klasse werde ich mehr über den Buchstaben Ah diskutieren, also mehr über die Softwaresystem-Websites in APS. Dieser Kurs ist mehr für den freiberuflichen Designer, der neu im digitalen Design ist. Das Entwerfen von Websites, die Schnittstellen auf und ist eine Art von Blick toe. Fügen Sie Ihr Design zu ihrer Design-Toolbox hinzu oder möchten Sie einfach nur verbessern oder eine Art Fundament haben . Welche Art von Prozess zu verwenden, wenn Sie tun, Sie sind Projekte. Also, was wirst du in dieser Klasse lernen? Grundsätzlich in dieser Klasse beibringen, möchte ich euch in dieser Klasse beibringen,wie man die endgültigen Projekte durchführt. Probleme in den Zielen. Wie planen und skizzieren Sie den Benutzerprozess? - Was? Unser Draht stellt einige zeitsparende Tipps für kreative interaktive Prototypen ein, die wir in den letzten drei Jahren gelernt haben , dieses Framework zu nutzen, den Feedback-Prozess und die Vorbereitung des Projekts auf die Entwicklung. Wenn Sie mich nicht kennen und Sie noch keine meiner Klassen zuvor auf dem Besitzer Betreiber von Black Creative gesehen haben, ist es ein Beauty ik Haus basierte Studio mit Sitz in der schönen Australien. Also bin ich in der Design-Industrie für immer ein halbes Jahrzehnt und lief schwarz, backbereit, voll und fast Angst Jahre. Nun, ähm, wir verwenden dieses Framework für diese freie Leichtigkeit, und wir haben mit Kunden gearbeitet, die so seltsam sind, weil Banken, innovative Startups, komplizierte Softwaresysteme und sogar lokale Business-Websites. So ist es sehr vielseitig und kann überall in der Anwendung verwendet werden oder egal wie Komplexität sein kann. Also, was ich dir beilehre, ist nicht neu. Es basiert auf einem typischen Design-Sprint, der in der Branche verwendet wird. einem typischen Design-Sprint, Aber diese Version ist eine sehr gekürzte Stromlinie. Um, leicht zu verstehendes Framework, das jeder verstehen kann, dass jeder innerhalb seiner täglichen Design-Praxis verwenden kann . Indem Sie diese Klasse machen, sollten Sie ein besseres Verständnis haben, wie Sie ein You I Design-Projekt abschließen , wenn Sie eine Spitze von Softwareprojekten übernehmen. Diese Klasse ist also nicht wirklich für den Fortschritt. Sie sind Designer. Ich werde mich auf eine Menge grundlegender Dinge über Sie berühren, sind es entworfen. Diese Klasse ist mehr für jemanden, der in der Branche neu ist. Hat nicht noch nie an einem, ähm, Sie Ich entwerfen Projekt vor oder irgendwie in der Druckseite der Designbranche gearbeitet ähm, und möchte das irgendwie in das Arsenal der Fähigkeiten hinzufügen. Also, das ist für dich. Ich bin ich sehr empfehlen, dass Sie dieses Framework gelernt haben, damit Sie weitermachen können und einen zusätzlichen Service für DA bieten alle anderen Dinge, die Sie tun. Also dieses Klassenzimmer, jedes Band Nach 60 Minuten werde ich mein Bestes versuchen, durch zu gehen und eine Menge Informationen in nur Schlüssel zu verdichten. Nehmen Sie Punkte weg, sagte, dass dies keine Design-Tutorial-Klasse ist. Wenn Sie also noch nie zuvor eine Designsoftware verwendet haben, empfehle ich dringend, dass Sie einige andere Klassen machen, die Ihnen beibringen, dass die grundlegenden Grundlagen die Werkzeuge verwenden, da diese Klasse nicht durchlaufen wird, dass ich einfach davon ausgehen werde, dass Sie haben,wissen Sie, die Adobe-Softwareprodukte verwendet wissen Sie, . Ähm, das wird sich wirklich darauf konzentrieren, Adobe Eckstine zu verwenden, denn das benutze ich, und das weiß ich. Aber es geht mehr um das Framework, das wir für das Projekt verwenden, im Gegensatz zu den komplizierten Werkzeugen oder wie zwei und solche Sachen. Also nur sehr verstand, wenn Sie nach mehr von einem Tutorial suchen, das basiert, wie Sie die Werkzeuge verwenden, dann vielleicht versuchen, quer. Aber wenn Sie die Grundlage lernen wollen, die Grundlagen gehen für ein U. I Design-Projekt, dass diese Klasse ist für Sie. Also, wenn Sie interessiert sind, schauen Sie sich die erste Klasse an. So können Sie auch unsere kostenlose kreative Kurzbeschreibung herunterladen, die im Grunde eine Vorlage Gott ist. Also, wenn Sie in das erste erste erste Treffen mit Kunden gehen, das auf der letzten Seite von Angesicht zu Angesicht ist und Sie versuchen, all diese Informationen zu sammeln, Ähm, für das Projekt. Dies wird Ihnen im Wesentlichen helfen, die richtigen Fragen zu stellen und diese Informationen zu organisieren. So ist es für Sie leicht zu verstehen und zurückzublicken, während Sie für Ihr Projekt gehen. So hoffentlich weckt das Interesse für Sie. Wenn ja, was ist die erste Klasse und ich werde dort sehen? 2. Kurs 1 – Definieren: In Ordnung, also willkommen in der ersten Klasse, alle. Diese Kosten sind, wie Sie die Projekte, Probleme und Ziele definieren . So haben wir jede Art von Software-Projekten gesehen, wo Wurzeln, eine Website, App oder jede Art von kompliziertem Softwaresystem. Es gibt bestimmte Dinge, die Sie wissen müssen, bevor Sie Designentscheidungen treffen können. Sie müssen mit Ihren Kunden kommunizieren und so viele Informationen über das Projekt erhalten, wie Sie können. Sie müssen also verstehen, wie diese Software ein Problem oder eine Herausforderung für den Endbenutzer lösen wird. Also, als ich sagte, dass der Endbenutzer, ich spreche nicht über die Quien, über die ich spreche, wer die letzten Leute waren , die diese Software benutzen? Es kann nicht unbedingt bedeuten, dass der Kunde mehr der Kunde oder die Person war, an die er das Produkt verkaufen möchte. Also offensichtlich sind Sie still, diese Software aus einem Grund zu bauen und die meisten Tommy weil sie ein Sie wissen, ein Problem in ihrem Geschäft haben oder sie haben eine Herausforderung, die sie irgendwie erreichen wollen , ob , die mehr Nutzer gewonnen werden, mehr Gehirnbewusstsein aufbauen oder bestimmte Produkte oder Programme verkaufen, von denen Sie wissen, dass sie ihre eigenen Probleme haben , die Sie identifizieren müssen, damit Sie wissen, was Sie zu lösen versuchen. Von dort aus können Sie und diskutieren Sie wissen, wie man erfolgreich einen Sieg sowohl für das Unternehmen als auch für den Endbenutzer liefern kann, denn an einem Tag müssen Sie die Sie ziemlich glücklich ihre Probleme lösen, aber die meiste Zeit können Sie nicht lösen ihre Probleme, es sei denn, Sie lösen die Probleme des Endbenutzers . Wenn Sie eine App erstellt haben, die die Ruhe mag, aber der Endbenutzer sie möglicherweise zu schwer zu verwenden finden, sagt Unreliable. Dann wird es mehr Probleme für Ihren Kunden schaffen und umgekehrt. Also brauchst du Teoh. Offensichtlich, identifizieren Sie die Probleme für beide Parteien, und dies wird auch sicherstellen, dass Ihre Design-Lösungen basierend auf dem gemeinsamen Missverständnis ist mit Ihnen entworfen, dass es sich ausschließlich auf die Visuals auf die Blicke auf die Ästhetik konzentrieren, ist ein Teil des You are Design-Frameworks. Das Beste, was Sie entwerfen, ist immer auf Lösungen basiert, so dass es immer darauf konzentriert, wie wir dieses Problem für den Benutzer lösen werden, wie wir dieses Problem für den Kunden mit einem bestimmten Spread lösen werden. Die Verwendung einer bestimmten Art von Design, wenn Sie Designentscheidungen treffen, basiert ausschließlich auf der Lösung eines Problems im Gegensatz zu dem, was Sie sich fühlen. Er hat eine gute Farbe. Gutes Layout. Es ist mehr für das, was am besten für den Benutzer ist. Was ist am besten, um die Projekte Probleme zu lösen. Wenn Sie also die Ziele Ihres Kunden definieren möchten, müssen Sie wissen, warum Sie in dieser Software-App und Website aktuell sind? Was wollen Sie damit erreichen? Was sind Ihre Projektziele oder Mar-Steine? Dies ist besonders nützlich, wenn Sie versuchen, den Umfang des Gesamtprojekts zu erstellen . Finden Sie heraus, welche Ziele Ihr Kunde erreichen möchte. Laz, du musst einfach den Umfang bestimmen, wie viel du aufladen wirst, wenn die Dinge fertig sein sollen . Dies auch, L A. Um die Zeitachse für das Projekt als auch zu organisieren. Wer wird die eigentliche Software Apple-Website verwenden. Wir müssen wissen, wen wir bauen. Diese Software für einen Zit wird in unsere Design-Entscheidungsfindung und auch ein praktischer Tipp reflektieren. Sie können auch unser you I design Kurzformular verwenden. Sie können am Ende der Klasse herunterladen, um Ihnen einen besseren Rahmen zu geben und diese Fragen zu stellen und sie für Ihren Brief zu strukturieren. Okay, also müssen wir die Schmerzpunkte und Ziele der Endbenutzer definieren. Um dies zu tun, müssen wir herausfinden, was seine Hintergrundgeschichte verwenden soll. Und wenn ich über Hintergrund meine, Geschichte ist so ziemlich eine Art Art, wie Benutzer in ihrem aktuellen Lebensstatus ist, weißt du? Sind sie verheiratet? Haben sie Kinder? Wo arbeiten sie? Ah, was wollten sie sein? Alle Informationen, die die Kaufentscheidungen so beeinflussen können, wie sie Software verwenden. Also werden wir diese Hintergrundinformationen verwenden, um ein Bild dieser Person zu malen, um ihn so realistischer zu machen, mehr als eine Person zu sein, im Gegensatz zu dieser imaginären fiktiven Entität. Wir wollen Zeh, bringen Sie alles zusammen, damit wir uns diese Person in unserem Kopf in Ihrer Fantasie leicht vorstellen . Also, wo gehen sie und wie lebten sie? Also, wo in der Welt leben sie? Wohnen sie in einem wohlhabenden Gebiet? Wohnen sie in einem sozial wirtschaftlich gefährdeten Gebiet? Wer sind die Nachbarn, die die Menschen sind, die interagieren, die wir haben. Und wie haben diese Faktoren ihren Entscheidungsprozess beeinflusst? Eins. Das Wichtigste, was Sie wissen müssen, ist, was sind Ihre Benutzer brauchen? Verwendung dieses Backers und Informationen wird Ihnen helfen, das tatsächliche Gold zu identifizieren Ihr Benutzer erreichen möchte, und natürlich, wie das seine zugrunde liegenden Probleme lösen wird. Wenn Sie also ein Produkt kaufen möchten, können wir die Hintergrundinformationen verwenden, um zu verstehen, warum sie dieses Produkt kaufen möchten . Was ist das? Es ist beabsichtigt. Wie möchten sie das Produkt kaufen? Was sind die Dinge, die sie davon abhalten, dieses Produkt zu kaufen und so weiter? Und wenn wir dann die Bedürfnisse des Nutzers aufdecken, müssen wir verstehen, wie wir diese Bedürfnisse übertreffen können. Es ist also eine Sache, Ihrem Benutzer zu erlauben, eine Aufgabe mit Senior Software zu erledigen, aber es gibt eine andere Sache, die Sie über und darüber hinaus hinausgehen und die gesamte Erfahrung verbessern können. Also müssen wir auch verstehen, welche Spitze der ähnlichen Software absolute Websites sie verwenden, damit wir sie als Benchmark verwenden können. So ist es eine gute Möglichkeit für uns, die verschiedenen Software im absoluten Einsatz zu vergleichen. Finden Sie heraus, was am besten mit diesen Beispielen funktioniert und finden Sie heraus, was von diesen Beispielen nicht funktioniert und dass in unser eigenes Software-Design aufgenommen wird. Also nutze diese Ziele und Schmerzpunkte als dein Nordstern. Wenn Sie eine Top-Design-Entscheidung treffen, stellen Sie sicher, dass sie rein auf dem basiert, was für den Benutzer am besten ist. Es hilft auch, wenn Sie jemanden mit technischem oder Software-Engineering-Hintergrund in das Projekt involviert haben , da sie Ihnen dabei helfen können, die praktischste Methode zur Entwicklung Ihrer vorgeschlagenen Lösung zu finden. Das ist super wichtig. Wenn Sie jemand wie ich sind, der keinen Code hat oder keine Software-Engineering-Erfahrung hat, ist es großartig, jemanden mit diesem Hintergrund zu haben, um zu überwachen, was Ihr Plan ist und Sie wissen zu lassen , wenn es eine einfachere Möglichkeit gibt dies zu erreichen oder wenn es technische Einschränkungen gibt , die bei der Erstellung einer Lösung berücksichtigt werden müssen. Wenn Sie also alle Informationen haben, ist es an der Zeit, alles zusammenzubringen und in eine Art Dokument zu bringen. Wir verließen das Gericht Mehrheit der kurzen Dokument Sie können unsere vorausgesetzt, Sie sind entworfen , um Art bringen Sie alle Informationen in einem zusammenhängenden, leicht zu verstehendes Dokument, So können Sie zurückblicken und beziehen sich auf die Spitze der Anwendungen, für die Sie entwerfen. Es ermöglicht Ihnen auch, Abfall zu finden, ist die Verwendung von Prozessen vereinfacht und alle technischen Einschränkungen, Off-Plattformen und integrierte Software zu finden Einschränkungen, . Und es kann auch verwendet werden, um sowohl Sie als auch Ihren Kunden auf der gleichen Seite zu halten. Und das ist ein sehr wichtiger. Wie Sie durch das Projekt gehen. Es ist leicht für beide Parteien, an neue Ideen zu denken, neue Sachen zu denken, dort zu hören. Aber dann möchten Sie nicht auf das Problem aus dem Bereich kriechen, wo Ihr Kunde beginnt mehr und mehr verschiedene Lösungen vorzuschlagen, von denen Sie wissen, dass Sie beide zu diesem Anfang nicht einverstanden sind , und dann machen Sie am Ende mehr Arbeit, dann haben Sie zu Beginn des Projekts zugestimmt. Es ist also super wichtig, alle auf dem richtigen Weg zu halten, um alle auf der gleichen Seite zu halten und etwas, auf das Sie zurückverweisen können, damit Sie nicht mit gekratzter Kiste enden und mehr Arbeit tun als Sie tun sollten 3. Kurs 2 – Plan und Skizze: In dieser Klassewerden wir über Plan und Skizze reden. In dieser Klasse Bevor wir also auf irgendeine Art von Designprogramm springen, brauchen wir Teoh. Habe ein gutes Verständnis abgehalten. Diese Software wird funktionieren. Welche Prozesse sind involviert? Wie der Benutzer von Punkt A zu Punkt B. Eso fließt Was Sie in dieser Phase benötigen, ist ein guter altmodischer Stift und Papier. Es spielt keine Rolle, wer gelehrt hat. Es spielt keine Rolle. Welche Art von Stift bedeutet nicht, dass es eine Amortisation war. Oder Sie können ein Whiteboard verwenden, das sehr praktisch ist, besonders wenn Sie mit mehr als einer Person arbeiten, Meinung aller an Bord bekommen können, um, und haben mehr eine Art Gruppe Diskussion oder etwas, um Ihre Arbeit aufzuzeichnen. Also, wo es Post sein oder am Ende jeder Art von Whiteboard-Sitzung, Sie machen ein Foto und Sie haben das im Herbst. Und Sie können dieses Foto als Referenz verwenden, wenn Sie die Drahtrahmen entworfen und die späteren Prozesse durchlaufen . Also der wichtigste Teil, wenn Sie dies tun, ist die Karte aus der Reise und wann wessen Reise? Ich spreche von den Benutzern, die die Endnutzungsreise reisen, also beginnen Sie, indem Sie die Endbenutzer-Reise für den gesamten Prozess von Anfang bis Ende abbilden . Also von dem Moment, an dem sie auf der Seite leihen, von dem Moment, in dem sie in die App schauen, bis zur letzten Phase, wo sie ihre Verwendung ein Ziel vervollständigen. So erweitern Sie weiter in Abdeckung all diese Ziele von Schritt eins. Jede Aktion, die Sie am Anfang identifiziert haben, macht also einen Bohrungsbenutzer-Fluss, bis Sie jede einzelne Aufgabe abgeschlossen haben . Von ihm aus sollten Sie in der Lage sein, mögliche Hürden oder Probleme zu identifizieren, auf die der Benutzer während jedes Prozesses stoßen kann . Das ist also eine gute Möglichkeit, jeden Schluckauf auf dem Weg zu sehen oder angeblich zu erweitern Inbrunst, um mögliche Probleme zu vermeiden, auf die sie stoßen können. Dies ist ein guter Weg, um sich in die Schuhe des Benutzers zu setzen und Empathie zu verwenden, um einen Prozess zu erstellen , Studien einfach und nahtlos für das gesamte Softwaresystem. Um Ihnen ein Beispiel zu geben, wovon ich spreche, haben Sie das Bild oben, das wir für eine Art Admin-System getan haben, um Ihnen ein einfaches, einfaches Beispiel für einen Benutzerfluss zu geben . Werfen wir einen Blick auf Instagram, also werde ich mich in das Instagram einloggen. So kann dies von hier aus noch weiter ausgebaut werden. Wenn ich mein Passwort vergessen oder möchte mich über Facebook oder Google einloggen, was auch immer die Option ist, die Inbrunst erweitern kann. Aber vorausgesetzt, dass ich mich zuerst einlogge, werde ich auf meinen Newsfeed springen, wo ich scrollen und nach den verschiedenen Tonhöhen suchen kann. Aber dann, von dort auf einem Foto oder aus Video, sobald ich mein Foto hochgeladen, kann ich die Beschreibungen Adama, Hashtags und überhaupt eine andere Art von Informationen hinzufügen . Dann, sobald ich das getan habe, kann ich meine Beiträge überprüfen. Vergewissern Sie sich, dass ich alles richtig geschrieben habe. Vergewissern Sie sich, dass ich mit dem Foto zufrieden bin. Also, wenn ich es einfach abbrechen will und vielleicht nicht das Foto so zugeschnitten, wie ich das mag, es nur so, dass sie mich gebeten haben, zurück zu gehen und einfach wieder hochgeladen, oder vielleicht einige Änderungen an der Beschreibung vornehmen. Aber sobald ich vor glücklich bin und es so posten, dass im Grunde ein sehr vereinfachter Benutzerfluss ist, nur um Ihnen eine Vorstellung davon zu geben, wovon ich spreche, so wird dies auch L. A. Um den Umfang des Projekts zu bestimmen. Wenn Sie also ein Projekt preisen, ist es sehr schwer herauszufinden, wie lange es dauern wird. Wenn Sie keine dieser Art von Planungs- oder Skizzierfläche durchgeführt haben, weil Sie nicht wissen wie viele Bildschirme das beinhaltet, wissen Sie nicht, wie viele Aktionen beteiligt sind, um diese Benutzerprozesse abzuschließen. Also verwende ich gerne dieses Planungs- und Skizziergesicht, um mir zu helfen, ein Projekt auszuarbeiten und zu verstehen, dass Helen mich nehmen wird und wie viel Arbeit beteiligt ist, um dieses Projekt tatsächlich abzuschließen . Sobald wir die Planung durchgeführt haben und wir verstehen, wie der Benutzerfluss auf die Arbeit geht, können wir anfangen, die Bildschirme zu skizzieren, also sollte dies die Layouts, Schaltflächen und Navigation enthalten . Es muss nicht perfekt sein. Du musst nicht verzerrt sein, um das zu tun. Es ist sehr rau. Es ist sehr Entwurf, und indem Sie dies tun, können Sie den besten Weg finden, um die Navigationsfunktionalität zu erstellen. Was ich damit meine, ist, dass es Ihnen ermöglicht, den besten Weg herauszufinden, Ihre Navigation oder Ihre Navigationsleiste zu erstellen , aber Sie verwenden, wird für jeden Bildschirm navigieren. Sie werden Ihnen auch helfen, zu sehen, wie der gesamte Prozess kommen wird, um uns Bildschirm für Bildschirm zu geben. Wenn Sie also die besten Ergebnisse erzielen möchten, sollten Sie mehr als eine Person mitmachen. Ich sehe, dass die Ideen anderer Leute Ihnen helfen, Ihr Denken zu erweitern und Ihnen helfen, bessere Lösungen schneller zu finden . Deshalb, wenn ich diese Arten von Projekten mache, sind meine Junior-Designer bekommen oder sogar einen Freund fragen, ob ich niemanden zur Verfügung habe. Wenn Sie mit mehr als einer Person arbeiten, auf jeden Fall diese Strategie verwendet. Es hilft Ihnen, die Prozesse viel schneller zu erstellen, und Sie können auch Probleme mit den Prozessen des anderen aussuchen, und Sie können Lösungen einfach viel schneller bekommen. 4. Kurs 3 – Wireframes: wenn wir Drahtrahmen entwerfen wurden die Struktur aus dem Layup entworfen, und es gibt einige Beispiele, die wir in der Vergangenheit getan haben. So Drahtrahmen ist im Grunde das Rückgrat oder dieses Skelett von jedem Software-Prozess, so dass es zu schnell zu lösen . Karte aus einem Low Fidelity Mock up, und was diese Low Fidelity bedeutet, ist im Grunde super Basic nackte Knochen Design. Sie sich also keine Sorgen um Bilder, Schriftarten, Farben oder ein Design. Elemente in diesem Stadium verwenden Felder und Formen, um das Layout darzustellen. Mit diesen Boxen können sie also als Platzhalter verwendet werden, um die Struktur aus dem Design zu schaffen. Sir, von ihm ist es wichtig, dass Sie Feedback von den Benutzern und Kunden erhalten, und dies wird Ihnen helfen, Änderungen vorzunehmen, die sicherstellen, dass Sie Ihre Benutzerziele erreichen . So nützlicher Tipp konzentriert sich auf die Erstellung der Kernfunktionen aus der Software. So, zum Beispiel, die Hauptnavigation. Wie können Sie also eine Verschiebung zwischen Punkten außerhalb des Prozesses verwenden? So verwendet Zeilen und Dummy-Texte Platzhaltertext, um die Inhaltsabschnitte darzustellen, so dass Sie nicht zur Hölle und Ihren Client für Inhalte in Bezug auf Urheberrecht und so brauchen. In diesem Stadium, Wir müssen uns keine Sorgen über Typografie machen. Wir wollen nur wissen, OK, ein Text wird er überschreiben. Er wird er sein. Wir müssen nicht wirklich wissen, was zu sagen ist. Weißt du, was für Dinge? Also halten Sie es einfach. Sie können alle diese Zeilen oder Platzhaltertext und denken Sie daran, die Bildschirmsauce zu berücksichtigen. Dies ist sehr wichtig, also müssen Sie wissen, ob es auf einem Tablet, iPad Mobile oder Desktop oder einer Kombination im Jahr 2020 sein wird. Alle Ihre Designs sollten reaktionsschnell sein, daher müssen Sie überlegen, wie das Layout auf mehreren verschiedenen Bildschirmgrößen funktioniert. Also muss die Schicht aus dem Inhalt offensichtlich der Scheidung entsprechen. Also habe ich einige Zeit sparende Tipps für dich. Da sich die Designsoftware im Laufe der Zeit verbessert, nutzen wir gerne vieles, was wir können, um Zeit zu sparen, wenn wir diese interaktiven Drahtrahmen und Prototypen einrichten , also erstellen Sie Komponenten. Also beziehe ich mich auf mehr db x t für Abschnitte, die für das Out-D-Design wiederholt werden. Also, was wir danach tun werden, ist für einen X d Fall gehen, und ich werde Ihnen zeigen, was ich mit Komponenten in der Art der Hölle meine ich sie erstelle und wie ich einen Sturz eingerichtet . So gebräuchliche Komponenten sind Navigationsmenüs. Fuß ist Zeugnisse, Schaltflächen, Schaltflächen, Viertel-Aktionsmenüs in Feature-Abschnitten. Also, wenn es mehr als einmal für den Prozess verwendet wird, dann als Komponente erstellt. Also eine weitere wichtige Sache zu tun, wenn Sie Ihren für immer erstellen H Bildschirm einrichten, die Hauptnavigation verwenden und Ihre interaktiven Links hinzufügen, bevor Sie mit der Gestaltung des Layouts beginnen . Sobald Sie also alle Bildschirme und Seiten erstellt haben, werden sie dieses Projekt verwenden. Korrigieren Sie also Ihre Hauptnavigation. Fügen Sie die Links hinzu, die zu jeder einzelnen Seite gehen, und erstellen Sie diese dann als Komponente und kopieren und fügen Sie sie dann auf jedem Bildschirm oder jeder Seite ein, und jede einzelne Seite wird bereits verknüpft. Dies erspart Ihnen also, jeden einzelnen Link hinzuzufügen. Teoh jeden Knochen auf jeder Navigation auf jedem Bildschirm, also das ist super wichtig. Das erspart Ihnen eine Tonne Zeit. Grundsätzlich erstellen Sie eine Komponente vor den Verknüpfungen, und kopieren und fügen Sie diese auf allen verschiedenen Bildschirmen des Prozesses ein. Und warum machen wir das? es spart Zeit, die wir aktualisieren, um Design automatisch gilt für Stall auf oder die untergeordneten Komponenten. Also alle diese einzelnen Komponenten, die alle kopiert und eingefügt wurden, haben wir automatisch auf einmal geändert . Sie ändern einfach den Master und würden sie alle ändern. Und das ist sehr, sehr hilfreich. Einer arbeitet auf vielen Bildschirmen. Also einige Projekte vielleicht fünf Screen einige Projekte, vielleicht 50. Und wenn Sie an diesen 50 arbeiten, möchten Sie nicht jedes Mal 50 Bildschirme wechseln. Wissen Sie, der Client möchte Änderungen an einer bestimmten Sache in der Navigation vornehmen, eine Komponente erstellen, die Master-Komponente, und das wird sie alle auf einmal ändern. So viel einfacher, alle interaktiven Links auf diese Weise zu verwalten. Also, wie ich bereits sagte, diese Klassen in einem Tutorial zur Verwendung von Adobe X'd oder wie man eines dieser Top-Programme verwendet . Dies ist mehr über das Framework selbst, aber abgesehen von dem, was ich einige zeitsparende Techniken wähle, die auch angewendet werden können, egal welche Art von Programmierung verwendet wird, sondern speziell für Adobe X Teak, das ich die ganze Zeit verwende. Es sind nur einige entscheidende Tipps, die einfach so viel Zeit und unnötige sparen, wenn Sie sehr komplizierte Kurta-Typen in interaktiven Drahtrahmen bauen. Beispiel ZumBeispiel dies für dieses Beispiel eine Website. Wir werden das aufmachen und das Haus anrufen. Dies ist die Homepage, und ich gehe nur Teoh, erstellen Sie die Seiten über die Notwendigkeit Frage Dienste nennen diese gebaut. Sie werden diesen einen Kontakt machen. Okay, also müssen wir Seiten, die wir für diese Website brauchen. Die erste entscheidende Komponente, die ich erstellen muss, ist das Navigationsmenü. Das Navigationsmenü wird auf der gesamten Website verwendet werden. Und so für Angriff wie dieser ist nicht so schlecht, um eine zu erstellen und kopieren und fügen Sie es auf die anderen Seiten. Und dann, wenn ich es ändern muss, ändern Sie jede 11 nach dem anderen. Aber Sie haben seine Website gespeichert war 100 Seiten, 20 Seiten, weil Kran, ein Projekt, das über 20 Seiten hatte. Ich möchte nicht einzelne Teile in der Navigation einzeln für jede 20 Seiten ändern . Was ich also tun möchte, ist eine andere Seite zu erstellen. Er und ich werden diese eine Komponente nennen. Richtig buchstabieren. Also diese Seite. Er ist nicht Teil vom Weg oder der Benutzer schwebt von dieser Website. Diese Seite wird rein alle Hauptkomponenten haben, die ich für jede einzelne Seite verwenden werde . Und jetzt werde ich sie alle kontrollieren, von dem er jemand die Navigation erstellt. Also machen Sie ein wenig Navigationsbücher. Er wird nicht weniger aussehen, aber nur um dir zu zeigen, was ich meine, wir haben ein Lager. Er so wird einige nie Links zu schaffen. Neil, rufen Sie das einmal an und ich werde wiederholen drücken, grüßen, was oben rechts ist. Und ich denke, ich brauche nur volle Verbindungen, um die Art des Streichelns zwischen ihnen zu erhöhen. Und sobald ich fertig bin eine UN-Gruppe dieser Link und benannte falsch Dienste Bounce Kontakt. Und das ist meine Nie Bar. Das wird also über die ganze Seite gehen. Und wie ich schon sagte, ich will dich nicht ständig ändern. Was ich also tun möchte, ist zum Prototyp zu gehen und ich kann dies sogar auf die Seite ziehen. Ich wollte gehen oder klicken Sie auf dieses kleine alles. Er ist verrottet. Wählen Sie Ziel und ich werde zu Dienstleistungen gehen. Dasselbe mit Kämpfen. Waren, die geschmiedet haben. Denk an verdammte Klicke auf. Ich könnte es auf dem Weg ziehen. Also will ich gehen. Aber in diesem Fall war es gut, in schnellen Kontakt zu fallen. Also jetzt, wenn ich auf die kleine Play-Schaltfläche hier oben gehe, die Vorschau-Schaltfläche, wird es zu diesen Seiten gehen. Ich kann sowieso nicht gehen, weil es keine Navigation auf den anderen Seiten gibt. Das ist also, wo das Logo sein wird und auch wollen, dass jedes Mal nach Hause gehen. Also von hier aus möchte ich das tatsächlich als Komponente erstellen. Ich bin mir nicht sicher, was sie in anderen Programmen über irgendein X'd nannten. Sie nannten Komponenten. Jemand mit dem Mauszeiger über so in einem Klick und ziehen Sie alles, wählen Sie alles aus. Kannst du einen Rechtsklick haben, um Komponente oder Steuerung zu machen? K, oder ich kann hier zu Objekten gehen und eine Komponente erstellen. Weißt du, es ist eine Komponente, weil es einen kleinen Diamanten oben E hat. Also das ist die Hauptkomponente und was ich auch tun kann, wenn ich zu diesem kleinen Boxen unten links gehe , sehe ich es hier gespeichert. Also, wenn ein Doppelklick auf diese und Kolobnev Bach. Also weiß ich, was es ist. Das ist also unsere erste Komponente. Und wenn Sie es bekommen, können Sie sagen, dass alles schön ist, um die alte verbunden. Also, was ich tun würde, ist kopieren und fügen Sie es auf all diesen Seiten. Er so oder perfekt in der Rechtsposition. Und jetzt sind die Links immer noch verbunden. Alles ist miteinander verbunden. Sie haben bemerkt, dass, was auch immer die Hauptseite ist, sie läuft. Die Links werden offensichtlich nicht verfügbar sein, weil sie bereits auf der Seite sind. Aber wenn ich nach Hause gehe und sie sich erinnern, bin ich im Moment im Prototyp. Also, wenn ich gehe und ich mache dies die eigentliche Homepage, das kleine Zuhause wie da drauf, habe ich eine Vorschau, die Sie wollen? Sicher, alles Weil es nichts anderes auf jeder Seite gibt, um Ihnen zu zeigen, dass zurück zum Design gearbeitet hat, setzen Sie jetzt Hallo, damit Sie tatsächlich sehen können, dass sie Dienste über Kontakt ändern. Es geht für jede andere Seite, so dass Ihre Dienste klicken Sie auf das Logo wird mich zurück nach Hause bringen. Der andere Grund, warum wir das tun, ist, wenn ich Änderungen sagen wollte. Logo darauf, um die Farbe dieses zu ändern, Sie können sehen, ich habe gerade die Master-Komponente geändert und es geändert oder die anderen Komponenten, die damit verknüpft sind. Ich musste nicht durchgehen und jeden einzelnen ändern. Ich ändere es nur von ihm und es würde sich ändern, was ich dir gesagt habe, nur daran erinnern müssen , dass du die Master-Komponente ändern musst. Und die Master-Komponente hat ein wenig Griechisch am grünen Diamanten in der oberen linken Ecke. Sie sehen bei diesen anderen untergeordneten Komponenten, dass sie einen weißen Diamanten haben. Also diese, wenn Sie eines von diesen ändern, wird es die anderen nicht ändern. Also, wenn ich das ändere, werden Sie nur das Individuum verändert. Sie wurden nicht alle anderen geändert, weil nur eine untergeordnete Komponente zurückgehen wird. Also nur sehr daran, dass Sie immer die Master-Komponente ändern müssen. Deshalb lege ich gerne alle Master-Komponenten auf einem Bildschirm Kernkomponenten, weil ich weiß, dass sie die Master-Komponente sind. Okay, von Tag an werde ich einen Fuß nach oben erstellen, weil der Fuß nicht nur auf jeder einzelnen Seite ist, genau wie bei der Navigation. Es ist immer da. Sohn von machen kühlen kleinen Fuß aus machen. Also mein Lego Parikh eine dort Tante. Für den Moment werde ich nur ein paar gefälschte Zeilen setzen, die Text darstellen werden. Also, das ist mein Fuß sind, so dass ich sogar diese Gruppe erstellen kann es vollständig kopieren und einfügen auf jeder Seite. Aber wenn der Kunde mich gefragt hat, dass irgendetwas auf dem Fuß nach oben ändern müssen daher von jedem einzelnen zu löschen oder sie zu löschen oder auf einem und einem Copy Paste wieder zu ändern, was kann ärgerlich sein, wenn man 20 Bildschirme hat. Sie sind also wie bei der Navigation. Wir werden wie alles schleppen und dann werde ich mit der rechten Maustaste klicken, Komponente machen. Und dann haben wir eine andere Komponente gemacht, und Sie können hier in Ihrem Assets Tab sehen, die ein wenig Boxen dort ist, Sie sehen ein Assets und Sie haben Komponente zu jeder guten NFL, die zuvor erstellt wurden. Also nenne ich das einen Fuß hoch. Also, jetzt gehen wir nabob und einen Fuß hoch, ich gehe, Teoh, nur für diesen Zweck, nur für den Zweck dieses Tutorials, das Logo mit der Homepage verknüpft wird. So, jetzt kann ich kopieren fügen Sie es auf jeder Seite, Haben wir so andere Dinge, die Sie innerhalb von Komponenten erstellen können, Zeugnisabschnitte, Feature-Abschnitte aufgerufen Aktion Abschnitte, Zeug, die für die Website wiederholt wird. Sie können sogar Tasten als auch tun. Also, was werde ich auf einem kreativen Knopf machen? Großer Knopf. Okay, das ist also mein Knopf. Ich werde einen Furz aussuchen. Also, wenn ich das eine sehr Autoboot 40 nenne, ist das mein erster Knopf. Ich werde einen anderen Knopf wie einen sekundären Knopf erstellen. Es wird großartig. Ich mache 1/3 Knopf. So gibt es so viele Dinge, die Sie tun können, um zu zeigen, wie der Prototyp in Bezug auf die Farbe funktionieren würde die Bindungen aussehen, wenn das gedrückt oder einfach nur ein an den Entwickler mitgeteilt wie es aussehen wird, wenn Sie mit dieser Website interagieren. Also, jetzt, dasselbe, wie wir es wollten, schaffen Leichtigkeit in Komponenten, machen Komponente, natürlich, aber eine Make-Komponente. Aber ich sprach, dass Raum und machen Komponente kann es knöpfenfrei beschweren. Also, wenn ich diese Schaltflächen verwende, kopiere und füge sie einfach ein, wohin sie gehen müssen. Und dann, wenn ich die Farbe von den Knöpfen für die ganze Seite ändern muss. Ich habe den Master auf dem Komponentenbildschirm geändert, und es ändert die anderen. Nein, ich habe nur Farben. Wenn ich den Fronttresor ändere, ändere ich mich zu se Gunship fett. Der Rest wird sich auch ändern. Es ist Staking, sagen Sie, wie nützlich es ist, wenn Sie ein A tragen. Also, wenn Sie einen interaktiven Drahtrahmen erstellen, ich kenne das große Knochenskelett davon. Holen Sie sich die Genehmigung. Dann können Sie immer tun müssen, ist im Wesentlichen fügen Sie Ihre Stände auf die Komponentenseite, und die gesamte Website wird in dem Stall entworfen, die Sie wollen, ohne für jedes einzelne Teil gehen zu müssen , einige mehr Zeit sparende Tipps Erstellen Zeichen Stände innerhalb jedes Asset-Abschnitts. Zum Beispiel waren humane Überschriften und Textkörper Friedhof Dokument, in dem Sie Ihre eigenen Charakterstände erstellen können . Du kannst das tun. Wir haben Adobe X'd gesehen. Also, sobald die Drahtfreunde genehmigt. Es ist so viel einfacher, die Telefonabsatzeinstellungen auf dem bestimmten Stand zu ändern, wodurch Donald die Bildschirme ändern wird, auf denen Sie diesen Stall so ähnlich pikant angewendet haben, ähnlich wie die Komponenten funktionieren. Wann erstellen Sie einen Master? Stall es auf. Sie ändern alle Stände, die für das gesamte Design angewendet wurden. Also, wenn Sie diese spezielle Front für eine Körperkopie für auf der ganzen Website ausgewählt haben und dann der Kunde den Spaß ändern will, anstatt auf den H-Bildschirm gehen und die Vorderseite einzeln ändern zu müssen, ändern Sie den Stall und es würde ändern oder automatisch eine Tonne Zeit gespeichert. Wie gesagt, ändert es automatisch die ausgewählte, so dass über das gesamte Design Zeit spart, wenn der Kunde entscheidet, Stände während der späteren Phase des Designs zu ändern. Es ist auch einfacher, mit dem Softwareentwickler zu kommunizieren, sobald Sie die Assets absenden. Es ist einfach einfacher für einen Softwareentwickler, die verschiedenen Stände zu sehen und sicherzustellen , dass sie ihnen folgen, wenn sie sich tatsächlich entwickeln. Sie kennen Ihre Website oder Ihre APP. Die letzte wichtige Sache, um Ihnen zu zeigen, ist, wie Sie Zeichenstände verwenden, die so ähnlich wie ich d. Wenn Sie die Komponenten verwenden, wenn Sie korrekte Zeichenstände verwenden, steuern Sie die Schriftarten verwenden. Es ist ähnlich, wenn Sie es, Toby im Design oder sogar Microsoft Word, erstellen Sie Ihre Stände und wird für jeden verknüpften Text Bücher gelten Abschnitt für unsere ganze Sorte nehmen . Also, zum Beispiel, werde ich machen, schlagen Sie einen. Und ich möchte diesen kleinen genial machen 30 Punkt seit dem Schlagen frei auf ihre meine Überschriften treffen und sagen, Wollte eine Körperkopie erstellen uh, Teoh, jemand Copy Regula erstellen und würde nicht machen, dass 16 Punkte Nein zu einem etwas kleiner. Die Linie Hot 20 voll wurde erhöht. Und das wird meine Körperkopie sein. Das ist so ziemlich, wie ich den Text auf der Website aufhalten möchte und ich möchte nicht durchgehen und die Front für jeden einzelnen Teil ändern. Also, was ich tue, klicke ich auf den Text, den ich als Stall speichern möchte. Also, wenn es so ist, leitet es eine so große Figur Stände in meiner Asset Sidebar. Nun, meine Komponenten sind klicken Sie auf diesen Plus-Button und dann wird es speichern. Speichern Sie die Details Default den Zeilenabstand der Schriftgröße So kann ich sogar den Namen von diesem Stall auf was ich will ändern . Sogenannte Überschrift Gleiches, was wir auch getroffen haben. Nennen Sie das auch essen. Nein. Dasselbe, wenn dieser frei wird und das Gleiche mit meiner Körperkopie. Also, jetzt kann ich die ganze Website gestohlen. Also, wenn ich zu den anderen Seiten gehe und sage, dass ich diese Überschrift machen möchte, gehen Sie schnell auf die Überschrift, die ich ändern möchte. Ich werde auf die schnelle auf den Text, den ich ändern möchte, und klicken Sie dann auf den Stall und Sie werden es automatisch ändern, das ist immer noch so wissen nur, dass. Sagen Sie, die Stille will sich ändern. Was man trifft, sieht so aus, als wollte ich tun. Er ist gut schlagen ein böses links schnell oder Kontrolle Klicken Sie auf den Charakter Stall eine schnelle beleuchtet und wir können sie alle von er so machen es 60. Oh, machen Sie es düster und ich werde ein breites Rosa machen und jetzt ändern sich auch alle meine Überschriften und dasselbe wird passieren, wenn ich zwei Treffer in der Körperkopie bearbeiten kann, damit ich es vom Asset-Panel ändern kann? Nein, nur das kann ich machen. Ich kann sogar Farben speichern zwei Assets, so dass Sie finden, welches Objekt ich wähle, welche Farben es gibt. Wenn ich auf die Plus-Taste klicke, fügen Sie sie in den Farbwert und die Hex-Farbe zu den Farbanlagen hinzu, so dass Entwickler den exakten Hex-Code verwenden können, wenn sie die Website entwickeln. Ich hoffe, Sie finden diese Bänder nützlich, wenn Sie anfangen. Ähm, wie ich schon sagte, wenn du mawr lernen willst, sieh einfach auf YouTube an. Es gibt Tausende von verschiedenen Tutorials zur Verwendung von Adobe XT A in einem der anderen Programme, die ich in dieser Klasse erwähnt habe. Aber ich hoffe, das gibt Ihnen eine Vorstellung davon, wie Sie den Prototyp wirklich verwenden können , und wie Sie es irgendwie verrückte Fundamente am Anfang richtig erstellen, um Ihnen viel mehr Zeit für den Prozess zu sparen . 5. Kurs 4 – Prototyp: Sobald Sie Ihren Drahtrahmen getan haben, Sie dem Client gezeigt, dass Sie durch die Art von Überprüfungsphase gehen Wichtige Änderungen der Client genehmigt, dass glücklich, fortzufahren, Dann sind Sie auf dem Weg zum Prototyping. Wir machen uns Sorgen um Framing Sie brauchen nicht unbedingt Designsoftware zu haben, aber wenn Sie Prototyping sind, benötigen Sie eine Art Design-Software. So Software-Optionen L A, um interaktive Links hinzuzufügen. Ich benutzte Adobe X'd, Ähm, das ist, was aus entlasten nur verwendet. Aber es gibt andere, die Sie Sketch Zeppelin verwenden können und diese Menge mehr da draußen, zu denen alle sogar ich als Referenz verlinken würde, wenn Sie suchen, gibt es andere Möglichkeiten, Art von Showcase, den Sie entworfen sind. Es gibt so wenige Optionen, die nicht l. A sind interaktive Links, wissen Sie, die sind, Sie wissen, Adobe Illustrator für den Shop und im Design zurück, wo Pro-Topping-Software nicht existierte. Wir verwenden meist Fotoshop, so dass diese Klassen mehr auf interaktive Teil Ihres Designs konzentriert. jeden Fall können Sie immer noch Fotoshopped verwenden, um diese Top-Projekte zu entwerfen, aber Sie sind darauf beschränkt, die Hölle des Kunden zu zeigen. Es wird tatsächlich verwendet werden. Sie können kein Feedback aufzeichnen. Sie verpassen eine Menge wichtiger Funktionen, die diese neuere Art von Ihnen, die ich bestimmte Programme entwickelt habe , Ihnen geben kann. Also, wie ich schon sagte, er kann immer die anderen Beispiele verwenden. Aber zu B'more, wettbewerbsfähig in dieser Branche sind dringend zu empfehlen. Sie haben Mawr irgendwie benutzt. Sie sind entwickelt fokussierte Programme wie Adobe XT, ein Sketch Zeppelin und dass dies geht weiter. Also im Grunde, in dieser Phase, werden Sie beginnen, ein High-Fidelity-Design zu erstellen. So hohe Wiedergabetreue. Wir wollen also, dass Zehe im Grunde das entworfen wird, um wie die echte Sache aussehen zu lassen. Also ohne Code, ohne die Einbeziehung von Software-Engine Leichtigkeit, wollen wir etwas schaffen, das so ziemlich wie die reale Sache funktioniert. Jetzt bekommen wir die anfänglichen Design-Elemente, Logo-Farben, Schriftarten und Bilder, und wir können anfangen, mit der Wende der Stimme und der Sprache zu experimentieren, die wir benutzen werden , ähm, mit der Schaltflächen und Gerichtsverfahren. Also werden wir diesem Ding mehr Zehenleben bringen. Wir werden sogar anfangen, einige Kopie schreiben eso hinzuzufügen. Wenn Ihr Client zu diesem Zeitpunkt bereit ist, ist es besser, mit dem Hinzufügen der echten Kopie zu beginnen. Ah, anstelle des Platzhaltertextes, den wir während der Drahtrahmenfläche einfügen. Also denken Sie daran, wir werden diesen Prototyp verwenden, wenn wir die endgültige Lösung verwenden. Es muss nicht 100% perfekt sein. Wir wollen nur sicherstellen, dass wir klar zeigen, wie die Software verwendet wird und wie der Benutzer die Software verwenden wird , um den Trichter zu vervollständigen. Uhm, benutze ein Ziel. Bauen Sie es so viel aus, wie wir sehen können, wenn wir es innerhalb des Benutzers testen. Weißt du, wir beschränken die Chance, dass sie verwirrt werden, nur weil du weißt, dass einige Links nicht funktionieren. Wir wollen diese Erfahrung so einfach machen, und es ist Gleichheit möglich. Also, um das zu tun , wissen Sie, müssen Sie es manchmal so viel bauen, wie Sie sehen können. Begrenzen Sie diese Verwirrung, wenn Sie auf Wieder aloft Benutzer verwenden. Vergessen Sie also nicht, alle Kernfunktionen einzubeziehen, die es dem Benutzer ermöglichen, seine Ziele zu erreichen . Und auch, ein hilfreicher Tipp ist immer auf die Endbenutzer-Ziele und die Ziele Ihrer Kunden zu verweisen. Erhalten Sie Feedback von einem Software-Ingenieur, um zu sehen, ob es eine bessere, praktischere Möglichkeit gibt , Ihre vorgeschlagene Lösung aus Entwicklungsperspektive zu implementieren . Wenn wir mit einem Software-Engineering-Unternehmen arbeiten, werden wir auch Entwürfe an sie senden, um ihr Vertrauen zurück zu bekommen, wie sie sind, diejenigen, die Schönheit in der eigentlichen Software sind. Wir wollen ihren Import bekommen, wie sie aus Software-Engineering-Sicht wissen werden. Was ist der einfachste Weg, um tatsächlich zu erstellen? Die Lösung am Tag könnte uns Feedback in Bezug auf Aussehen geben, wissen Sie, es auf diese Weise zu tun, kann nicht der wird uns viel zu viel Zeit nehmen. Viel zu viel Ressource ist. Also, wenn wir es auf diese Weise tun, können wir die Hälfte der Zeit sparen, können wir immer noch das gleiche Ergebnis erzielen. Und dann müssen wir das vielleicht in El New Design ändern. Ich bin zu reflektieren Sie wissen, dass Feedback und halten alle glücklich und tatsächlich eine Lösung, die machbar ist und tatsächlich in der realen Welt arbeiten kann. 6. Kurs 5 – Feedback: Ok, sagen Sie Feedback. Feedback Ost Super wichtig. Sophie Beck ist entscheidend. Erhalten Sie so viel Feedback wie möglich von echten Menschen. Ah, verwendet, um Feedback, um diese kostenlosen Fragen zu beantworten. Löst der Prototyp also ihre Probleme und erreicht ihre Ziele? Und haben sie Interesse an dem Softwareprodukt? Das hier ist also ein wichtiger. Was wir also in vielen dieser Top-Projekte finden, ist, dass unsere Kunden sie benutzen. Diese Prototypen als Proof of Concept. Also werden sie reingehen, diese perfekten Konzepte verwenden und Menschen zeigen und sagen, dass es nützliches Produkt gibt, jede Verwendung für die Software, ähm , wissen Sie, innerhalb des Marktes und eine Art Idee von Okay, sollten wir mehr Geld investieren und tatsächlich anfangen, alles zu bauen? Vielleicht können wir etwas investieren Teoh erstellen, um dieses Projekt weiter auszubauen Um sich dessen bewusst zu sein und warum Sie diesen Prototyp in der meisten Zeit entworfen haben, ist es ein Proof of Concept für den Kunden und wie er verbessert werden kann. Also im Grunde, wenn Sie Menschen Ihren Prototyp zeigen, können Sie sehen, wie sie ihn verwenden. Sie können die falschen Dinge sehen, die sie tun, Sie können sehen, wie sie einen völlig anderen Prozess verwenden könnten , um in Aktion zu tun, als Sie ursprünglich für sie gedacht haben. Es ist sehr nützlich, verwendet Perspektive zu sehen, und Sie können Anpassungen vornehmen, um es ihnen einfacher zu machen, offensichtlich vollständig Benutzerziele . Ich denke, das größte Missverständnis ist, dass Sie wissen, man könnte denken, dass dies am einfachsten gewartet wird, um diese Aktion zu tun, aber seine Einheit an jemand anderen übergeben. Sie werden 10 andere Wege finden, es zu tun, und manchmal ist es vielleicht sogar heiß. Sie könnten es am härtesten machen. Aber das ist, wo Sie wissen müssen. Nehmen Sie das Feedback an Bord und erstellen Sie eine Lösung, die für alle funktioniert. Eine weitere nützliche Teepees, die I Design Software messen, ermöglicht es Kunden, dieses Feedback an bestimmte Abschnitte des Designs anzuheften . Versuchen Sie also, diese diese Tools in diesen Funktionen so viel wie möglich Insassen zu nutzen, die Kunden-Feedback ein Kinderspiel bekommen . Also weiß ich aus Erfahrung mit Adobe X'd die Pflicht. Also, was? Ich würde es tun. Ich werde den Link an die Münze senden, um Feedback zu erhalten. Öffne den Link nicht und dann werden sie den Prototyp suchen und ihren Glauben an zwei bestimmte Abschnitte auf der Website festhalten und du weißt, dass ich durchgehe. Schauen Sie sich den Pin an, nehmen Sie die Änderungen vor, dass der Link in der markierten eine Notiz als aufgelöst. Es ist nur Asien für, Aber wenn Sie auf dem Client, es ist viel schneller arbeiten mit Feedback auf DWhite, nicht verwenden Sie alle diese Tools so viel wie möglich und machen Sie Ihr Leben einfacher. Also, was machst du? Wir Feedback Also bekommen wir ein Feedback, und dann machen wir natürlich die Änderung. Wir testen, und dieser Prozess wird rückwärts und vorwärts gehen, offensichtlich, bis wir testen und der Kunde glücklich ist. Und dann, wenn die Kunden glücklich sind, ist es genehmigt. Das ist also eine Art Rückkopplungsschleife. Wir haben diese Top-Projekte gesehen, Also im Grunde erhalten Sie das Feedback, das Sie Änderungen vornehmen, Sie testen das Feedback, und dann müssen Sie möglicherweise eine weitere Änderung vornehmen. Testen Sie Feedback, und dann das ganze Ziel. Er wird es über die Linie genehmigt und mit dem Kunden super glücklich 7. Kurs 6 – Asset: wir müssen alle Bilder oder die Symbole in allen Schriftarten organisieren und in Adobe x T. Ich werde Ihnen zeigen, wie das geht und die Art von Paket und Art zeigen Ihnen, was ich tue. Also bereiten wir die Entwicklungsspezifikationen für den Software-Ingenieur vor. Die coole Sache, die ich weiß. Wenn es 60 ist, können Sie tatsächlich die Entwicklungsspezifikationen exportieren. Andi im Wesentlichen zeigen. Grundsätzlich wird das die Software Ngeny oder die Polsterung oder die Größen aller Boxen, Bilder, Abschnitte der Website zeigen Bilder, . Ähm, weißt du, es ist so, dass sie es pixelgenau bekommen können. Und ich zeige Ihnen ein Beispiel in einem toten 60. Vergessen Sie also nicht, Ihre Charakterstände einzuschließen, und dies wird die Konsistenz mit dem Pro Top und der realen Sache gewährleisten. So sind Sie Ihr gehen in dieser Phase ist Toe Organizer Sache so sauber wie und so kohärent möglich ist. Also, wenn Sie es dem Software-Ingenieur geben, gibt es eine Art zweite Vermutung oder machen ihre eigenen Annahmen besser vorbereitet. Je organisierter Sie sind, desto einfacher ist es für den Software-Ingenieur, es aufzuheben und mit dem Aufbau und dem Programmieren zu beginnen und es wie das Gleiche aussehen zu lassen. Ah, häufiges Problem, dass Sie diese Hafenprojekte finden, ist vom Konzept bis zur tatsächlichen realen Sache. Das erste, was kommt, um Ihr Verständnis von Gesundheitscode zu verwenden, funktioniert. Die 2. 1 ist die Fähigkeit von den Software-Ingenieuren Nun, wenn Sie also etwas verrücktes Design machen, das sind 100 verschiedene Arten von Schichten, und es ist ein wenig anders organisch geformt und all diese Art von Sache, und Sie geben Sie es einem Junior-Entwickler. Wahrscheinlich wird es nicht so aussehen, wie du aussehen willst, ähm, ähm, also musst du den Verstand begraben. Und wem gibst du es? Wer wird eigentlich Ihre Arbeit weiterentwickeln? Ihr Ziel ist es, es zu schaffen. Dieser Übergang ist einfach wie möglich. Erstens, weil Sie ganz sind, ich werde glücklich sein, ist, weil Ihr Design khweis es zu bekommen, was es sein sollte. Denn es gibt nichts Schlimmeres, wenn man es einem Entwickler gibt und man sieht das tatsächliche Leben gesucht und es sieht nichts so aus, als ob man es wollte. Es sieht schrecklich aus, und es gibt nichts, was du tun kannst. Vergessen Sie also nicht, irgendwelche Notizen hinzuzufügen, die der Entwickler kennen muss, zum Beispiel animierte Interaktionen, also bewegen Sie den Mauszeiger über Staaten oder alle Gerichtsanimationen, die Sie für das Design, das Sie sind, passieren möchten . Wir müssen zeigen, wie es aussehen wird, oder eine Notiz für den Entwickler hinterlassen, um sicherzustellen, dass sie nicht vergessen, een hinzuzufügen. Denn wenn Sie es einfach als statisch lassen, würde der Entwickler nur denken, dass Sie ästhetisch wollen. Sei also sehr spezifisch. Vergessen Sie nicht, diese Notizen in der Software Engineer hinzuzufügen ist kein Gedankenleser, also müssen Sie sicherstellen, dass Sie diese Notizen hinzufügen und es so klar wie möglich machen. Wie Sie aussehen und was Sie in So in diesem Teil der Klasse wollen, wird Ihnen zeigen, wie Sie Ihre Assets für Ihre Website vorbereiten oder zeigen oben auf Software Ihre Gestaltung für die Entwicklung. Es gibt also mehrere Möglichkeiten, dies zu tun. So machen wir es und was in der Vergangenheit mit uns gearbeitet hat, also im Wesentlichen werde ich einen Ordner erstellen, in dem alle meine Assets gehen, damit ich es packen kann , es schön und ordentlich machen, bevor ich es über den Entwickler verschicke. Also, auf dem Foto, werde ich einen anderen Ordner erstellen. nenne ich nicht Navigation. Auf diesem Foto werde ich nur die Assets hinzufügen, die in der Navigation verwendet werden. Also sind die Hauptnavigation und das Essen so offen, X'd. Dies ist ein Projekt, das wir in der Vergangenheit und aus gemacht haben, wäre ein großartiges Beispiel, um Ihnen zu zeigen, wie wir dieses Design vorbereiten werden. Wenn wir also in dieser Hauptnavigation das Logo benötigen, brauchen wir Symbole. Wir brauchen alles, was der Entwickler nicht mit Code erstellen kann Wählen Sie das Logo, klicken Sie mit der rechten Maustaste Export ausgewählt. Und ich möchte, dass als PNG-Herbst-Export für Web. Wenn ich es war, wenn ich eine IOS-App oder Android-App machen würde, ist es wie diese Option. Aber das ist eine Website, und es wird mir das geben, um den Vermögenswert als die ursprüngliche Größe und auch die doppelte Größe, so dass ich es höher machen kann. EDS. Also, wenn das beim Exportieren getan ist und dann, wenn ich zurück zu meinem Navigationsordner gehe, kann ich die beiden Fälle sehen. Er so die ursprüngliche Sauce und die doppelte Quelle. Also springen wir zurück in X D. und wir müssen diese Symbole bekommen. Er ist so das CART-Symbol und das Suchsymbol, damit ich sie auf den Seitentopf schieben konnte. Er Rechtsklick Export ausgewählt. Und anstelle eines Schmerzes J, Ich will sie als s V g falsch. Nur damit wir ein bisschen höhere Auflösung und ein bisschen reaktionsfähiger haben können. Ähm, in Bezug auf die Störung oben, damit Sie wählen können, was Sie wollen. Sie konkurrieren P und G pdf und J Schweine werden. Aber wir gehen spg und exportieren die. Und wenn Sie hier zurück gehen, können sie auf dem Foto sehen. Irgendetwas ist. Ich brauche sie nicht doppelt so groß, weil es V G fällt. Sie verlieren jetzt keine Entschlossenheit. Ich muss das Vermögen vom Fuß holen. Sind so dasselbe, was er geht, dieses Logo explodieren. Es besaß als Schmerz G Web. Ich muss es etwas anderes nennen. Ändern Sie den Namen und wir brauchen auch die Social Media Icons, die reich und subtil waren. Spg beeinflussen die Stürze und brauchen auch dieses E-Mail-Symbol hier. Also, in einem wählen Sie alle die richtigen schnellen Exporte ausgewählt und in einem ausgewählten SPG und Export. Also jetzt habe ich alles, was nötig ist, um diese Hauptnavigation und das Essen aus zu erstellen. Und das ist gut. Springt zurück in X'd. Also brauchen wir keine statischen Bilder von Text. Wir müssen nichts davon exportieren. Dies ist dies kann alles für die Tat Entwicklung Gesicht erstellt werden. Wir brauchen nur diese Elemente, die der Entwickler konkreten freien Code. Also, einer der Typen geht hierher zurück, ich werde einen anderen Ordner erstellen. Ich werde diese Homepage in all unseren Homepage-Assets nennen, werden hier gehen. Geh zurück zu 60. Also nadel wir die Bilder. Also dieses Heldenbild, er hat eine Moschee als strahlende Moschee dort. Also, wenn ich das abschalte, siehst du die große Masse dort. Ich möchte das Grau und die Moschee nicht als Vermögenswert auswählen, weil das für die Entwicklung geschaffen werden kann . Ich will aber das Foto darunter . Wenn ich also auf die Ebene darunter klicke, die das Foto ist, kann ich diesen Export als ah PG Web exportieren. Stellen Sie sicher, dass ich das auf der Startseite gefaltet speichern. Jetzt konnte ich einen Export hören. Ich habe jetzt die Stürze bereit im Homepage-Ordner. Jetzt werde ich die ganze Seite durchgehen und sicherstellen, dass ich alles habe, was die Entwicklung brauchen wird , sobald ich die mehr hervorgehoben habe, auf meine Seitenwand gehen. Er und Exporte ausgewählt. Ich wollte sie. Ist PNG Web hier unten gut? Muss sich innerhalb dieser Bild-Funktion schnell verdoppeln, da es sich um ein Komponenten-Objekt handelt. Ich muss ein wenig mehr Arbeit machen, indem ich auf die tatsächlichen Fotoexporte klicke. Ausgewählte P und G. Denken Sie daran, dass ich das quadratische Element nicht brauche. Der Backer und das Element müssen nicht texten und ich brauche den Button nicht. Ah, auch Elemente, die durch Entwicklung geschaffen werden. Ich muss mitteilen, welche Schriftart? Irgendwelche zu verwenden, wie man die Topographie einrichtet, welche Farben zu verwenden sind und all diese Art von Sachen. Aber ich werde Ihnen zeigen, wie das nach jetzt zu tun, wenn der Kerl frei gleiche Sache mit diesen Exporten ausgewählt und wir haben Wiederholraster wie dieses Beispiel, Ich muss auf jeden einzelnen klicken, um jedes einzelne Foto Cool, dass kostenlos zu bekommen. Wir brauchen dieses Foto. Er und wir brauchen auch diese individuellen Fotos. Also, wenn diese wiederholen Gier. Wenn ich nur Sie erlauben mir, eines der Fotos auszuwählen. Also, wenn ich es auswähle, um es scheint, als hätte ich das bereits in diesem Ordner. Ähm, Anita ist tatsächlich auf jedes einzelne Foto klicken, exportieren Sie sie großartig dafür. Dieser hier und das sollte alle Assets für die Homepage sein. Also geh zurück nach Hause, verschwinde. Also gehe ich zurück zum Homepage-Ordner und all meinen Assets. Oh, er für den Entwickler. Und was Sie tun, ist, diesen Prozess zu wiederholen. Kiste jeden Ordner für jede Seite. Ähm, also würde ich die über Seite erstellen, welche Seiten wir hier haben. So entstand es über Programme, Team-Fallstudien, Tipps und Tricks. Kontakt sind glaubwürdig diese Ordner und tun den gleichen Prozess. Also, sobald Sie das getan haben, alles ist schön und ordentlich, Irving in alles einfach an der richtigen Stelle, können Sie gehen, um zu teilen. Und wenn du willst, kannst du das. Wenn Sie bereits einen Link erstellt haben, können Sie über diesem Link speichern, oder Sie können einen eigenen Link erstellen. Sie können einen völlig neuen Link und seine anstelle von Design-Review erstellen, die nur Ihnen erlaubt, Feedback zu erhalten Für den Prototyp können Sie Entwicklung auswählen, die sowohl die Option zum Hinzufügen von Notizen erstellt als auch die Dev-Spezifikationen zum Entwickler. Ähm, Sie haben die Möglichkeit, herunterladbare Assets hinzuzufügen, wenn Sie ein großes Projekt haben, manchmal kann es stopfen. Also, ähm, es ist, wenn Sie schnellere Ladezeiten wollen. Ähm, das ist nicht wirklich notwendig. Wenn Sie getan haben, was wir gerade getan haben und alle Dateitypen in den richtigen Ordnern organisiert haben, werden Sie das separat senden. Ähm, das sind dankbare kleine Projekte. Ich möchte das abnehmen, und wir können einfach jedem erlauben, es mit dem Link zu sehen und einen Link zu erstellen. Okay, also einmal, wenn es den Link erstellt hat oder kopieren und einfügen, oder Sie können auch auf diesen Link klicken und den Kerl, den Sie den Prototyp sehen , der ein Zoo normal ist. Dort können wir auch Ihre Notizen hinzufügen. Aber am wichtigsten, jetzt, wenn ich auf diese kleine rechte Seite hier klicke, heißt es sehen Sie Spezifikationen. Ich kann mehr Informationen sehen. Ich kann sehen, dass die Entwicklungsspezifikationen benötigt, um diese Website zu entwerfen. Wie Sie sehen können, können Sie die Farben sehen, die in diesem speziellen Design verwendet werden, es ist alles dort gespeichert. Alles, was sie tun müssen, ist Kopieren und Einfügen. Und weißt du, es ist viel einfacher für sie zu verstehen und zu sehen, wie man diese Art tatsächlich baut. Es sagt, Sie können für Klicken auf bestimmte Objekte sehen Sie das Meer CSS-Eigenschaften sehen. Grady in Optionen ist whoa mit Größen. Wie erstelle ich die Schaltflächen? Was sah, wie sie sein müssen, Sie wissen, die Layout-Eigenschaften in nur Sachen, die Entwickler brauchen. Ich werde nicht so tun, als wüsste ich, was das alles bedeutet, weil ich kein Entwickler bin. Ich entwerfe es nur und bereite es für die Entwickler vor, ihr Ding zu tun. Sie können sehen, dass Sie wissen, welche Inhalte sie kopieren und einfügen müssen. Welchen Spaß sie brauchen, um zu verwenden, welche Größe es braucht, um eine Verbündete Minute zu sein. Das muss es sein. So funktioniert das alles. Also schickst du das an den verwendeten Entwickler. Dann gehst du, wir fühlen Mappe. Dieser Ordner wird als Tutorial, aber Sie komprimiert diese erstellen eine schönere macht es fällt Ordner für sie und senden Sie für E-Mail, Dropbox oder was auch immer auf sie haben alles, was sie brauchen. So ist es, wie ich sagte, es gibt andere Möglichkeiten, es zu tun. Es gibt auch viel schnellere Wege, aber das funktioniert. Wir befestigen uns, was wir normalerweise in Ihrem Prozess verwenden, also hoffe ich, dass das hilft, und das war's. Also gehen Sie da raus und laden Sie Ihre kurze Vorlage herunter und beginnen Sie mit der Arbeit an einigen neuen weißen Projekten. Wenn Sie Fragen haben, lassen Sie es uns wissen. In der Tat, Diskussion Abschnitt oder E-Mail. Ich sagte Info bei einem schwarzen Bär kreative dot com dot au. Ah, hoffe, du hast diese Kosten nützlich gefunden. Ich hoffe, du hast ein paar coole Dinge gelernt. Ich hoffe, Sie lernen viel. Bitte geben Sie uns Feedback. Wir wollen sicherstellen, dass diese Klasse in der Zukunft noch besser ist als zuvor. Aber das können wir nicht tun, wenn wir nicht wissen, was ihr denkt. Also lassen Sie uns wissen, wird es auch wirklich zu schätzen wissen. Wenn Sie denken, dass dies nützlich ist, teilen Sie es mit Ihren Freunden. Teilen Sie es mit Leuten, von denen Sie denken, dass Sie dieses Zeug wissen müssen, und wir sehen uns im nächsten Video