Detaillierte Anleitung zum Erstellen von Wireframes mit Balsamiq

1. Über mich: Hi. Willkommen in meinem Kurs. Mein Name ist Sadat und entwarf seit fast einem Jahrzehnt Produkte und Lösungen. Ich begann in der Automobilindustrie, neue Werkzeuge und Technologien zu entwerfen, die ein direktes Ergebnis auf die Sicherheit, Zuverlässigkeit und Effizienz außerhalb der Produktionslinie und auf den Endbenutzer sowohl, dass ich in den Technologie-Raum Vollzeit wo ich Teil des Aufbaus von integrierten High-End-Technologielösungen und -services für große Idee-Organisationen war. Die Lösungen, die ich bereitgestellt habe, umfassten maschinelles Lernen, Automatisierung, Cloud-Technologien und vieles mehr. Später begann ich mein eigenes Formular und erstelle eine Cloud-basierte mobile App und eine Musik-Lernplattform. Ich habe auf dem ganzen Weg viele neue Konzepte zu Design, Prototyping, Unternehmertum gelernt. Ich liebe es, Produkte zu entwickeln und Lösungen für Mobilgeräte, Web und sogar für die reale Welt zu entwerfen. Die bisherige Reise war lustig, einnehmend und empörend. Schließlich, und wenn nicht der wichtigste Aspekt ist die Tatsache, dass ich liebe es zu lehren. Begleiten Sie mich auf dieser wunderbaren Reise, um Ihre Ideen zum Leben zu erwecken. 2. Warum nimmst du diesen Kurs: Warum sollte er diesen Kurs nehmen? Nun, lassen Sie mich beginnen, indem Sie Ihnen ein paar Fakten und Zahlen nach Gehalt dot com, Sie ein Design uns heute auf einem durchschnittlichen Gehalt von rund $72.000. Das niedrige Ende der Lohnskala ist für etwa $50.000, während die High-End-Spitzen von $90.000 Ich bin eine Größe Job. Posting Analytics zeigt, dass es 2017 in den USA rund 9000 einzigartige Stellenausschreibungen für Sie in Ihren Ex-Designern pro Monat sind , und der Lead wird wachsen. Die globalen Top-Unternehmen sind alle entworfen, zentriert und haben engagierte Design-Teams in verschiedenen Phasen für eine Vielzahl von Produkten blühende und bereichernde Kundenerfahrung finden . Ich habe diesen Kurs entworfen, wobei alle doppelten Faktoren im Auge behalten werden. Am Ende der Partituren, werden Sie über verschiedene Design-Methoden wissen, wie Benutzer Personas verwenden flott und vieles mehr. Sie werden wissen, wie man Blaupausen des Schreibens an uns baut und sie in schöne Drahtrahmen verwandelt . Sie könnten Drahtrahmen in interaktive Frames übersetzen, ohne eine einzelne Zeile zu schreiben . Natürlich können Sie diese interaktiven Nachnamen mit Kunden, potenziellen Arbeitgebern oder sogar Angel Investoren teilen . Zementieren Sie Ihre Ideen, greifbare klickbare Produkte, beschleunigen Sie Ihr Wachstum und Ihren Ehrgeiz. Also kommen Sie mit mir auf diesem Kurs , der feine Einheit prägnante Informationen aus der Industrie, relevante Konzepte und Röhren mit großartigen Visuals gefüllt ist , um den gesamten Lernprozess Spaß und einen Ruck zu machen und vor allem, um Sie haben schnell angefangen. Mein Name ist Sadat. Bitte kommen Sie an Bord. 3. Die Tools bereit für Balsamiq machen: wir brauchen ein paar Werkzeuge, die Ihnen helfen, Ihre Phantasie auf den digitalen Bildschirm zu bringen . Der erste Stuhl ist balsamisch. Es ist eine tolle Frau. Framing würde es Ihnen ermöglichen, erstaunlich durch Frames zu bauen. Drahtrahmen ermöglichen es Ihnen, einen Fluss zu bekommen und sich von Ihrer Website zu fühlen. Gehen Sie rüber zu www. Dieser Balsamico kommt nicht und lädt ihn herunter. Die guten Leute bei BALSAMIC haben eine 30-Tage-Testphase und die Lizenz kostet $89 zu kaufen. Ich denke, es ist eine großartige Investition, die Ihnen auf lange Sicht große Vorteile bringen würde. Es verfügt über einen Mac in einer Windows-Version, und laden Sie bitte die für Ihr Betriebssystem spezifische Version herunter. 4. Section tendenziell:: Ziel abseits der Partituren ist es, Ihre Website zu gestalten. Als Web- und Mobile-App-Designer werden Sie diese Website von Grund auf neu gestalten. Sie beginnen mit dem Bau von Drahtrahmen ihrer Website und in dem Prozess, verstehen verschiedene Design-Grundlagen wie Benutzerfluss und verwenden Sie eine Personas gipfelt mit der Feinabstimmung Design bereit, über was Aleppo übergeben werden. Also, ohne weitere Umschweife, lasst uns anfangen. 5. Design zuerst lernen: eine häufige Frage, die mir gestellt wird, ist, Warum sollte ich lernen? Entworfen? Zuerst möchte ich mit dem Codieren beginnen. Und dazu, sage ich, als Unternehmer, gibt es niemanden sonst, der Ihre Idee kennt. Und was willst du besser bauen als du? Sie könnten die Art und Weise, wie der Benutzer auf Ihre Website zugreift, Mund nehmen, wie er oder sie und verfolgt mit Ihrer Website, wie der Dienst an sie geliefert wird. Jedes Produkt ist ein Endergebnis aus einer Reihe von Iterationen auf. zuerst entwerfen, würden Sie in der Lage sein, Design, Bellen Hälse, Service-Einschränkungen und verschiedene andere Herausforderungen vorherzusehen Bellen Hälse, , die Sie vielleicht nicht am Anfang selbst ausgestiegen haben . Wenn dies in einem späteren Stadium der Entwicklung auftaucht, wird es Sie zurück im wesentlichen in Bezug auf Zeit und Geld, fügte hinzu, die meisten Entwickler stundenweise berechnet. Wenn Sie Änderungen am Design vornehmen, sind das Produkt während der Entwicklung, es wird Sie sehr viel kosten. Denken Sie auch daran, dass die Entwickler Ihnen Feedback geben und Sie über Produkt- oder Website-Design-Hindernisse informieren können , aber es ist nicht die Verantwortung, es für Sie zu lösen. Die Besitzer, sie zu lösen, ruhen nur auf dir. Und schließlich, wenn Sie einem Entwickler ein komplettes Design geben, wäre er in der Lage, schneller zu arbeiten und viel einfacher zusammenzufassen. Entwickelt, First entwickelt Next Principled hilft Ihnen, ein großartiges Produkt viel schneller zu einem viel optimierten Preis zu bauen . 6. Design-Grundlagen: verschiedene Aspekte wie Typografie, Farbpalette, Grafikdesign, Grafikdesign Benutzerpersona, Benutzerflüsse, Seitenlayout und vieles mehr sind alle Teil des Webdesigns. Während das Tom Webdesign und die Webentwicklung oft austauschbar verwendet werden, ist Webdesign technisch eine Teilmenge. Aus der breiteren Kategorie, Off-Web-Entwicklung Codierung, oder Programmierung, fällt unter die Kategorie der Web-Entwicklung. Es gibt eine weißere Beziehung zwischen repräsentieren und Web-Entwicklungsentwicklern. Nehmen Sie das Design, das Sie erstellen und in einer Sprache neu erstellt, die Computer verstehen können. So haben wir Website A Sticks an einem Ende und Website-Usability und Funktionalität auf der anderen . Das Ziel des Webdesigns ist es, ein Gleichgewicht zwischen beiden zu finden. Der Benutzer muss in der Lage sein, auf die einfachste Weise zu finden, wonach er sucht, und das Design sollte optisch ansprechend sein. Es scheint, als würde man versuchen, einen quadratischen Stift in ein rundes Loch zu passen, aber es ist nicht schwierig und sehr möglich. Also lassen Sie mich Sie zu ein paar Jagans benutzen. Der erste Dome heißt Sie I oder User Interface Design. Auf der grundlegendsten Ebene ist die Benutzeroberfläche eine Reihe von Bildschirmen, Seiten und visuellen Elementen wie Schaltflächen oder Symbole, die Sie verwendet, um mit dem Gerät oder einem Bildschirm zu interagieren . Die generell ausgeschaltet Interaktion derzeit ist durch die Mittel aus einer Berührung oder einem Klick. Ja, Sprachinteraktion nimmt Dampf auf, aber es wird eine Weile dauern, um mich davon zu überzeugen, dass ich mein Telefon öffentlich auspeitschen und damit reden kann. Der andere Begriff, den ich Ihnen vorstellen möchte, heißt User Experience oder Sie X User Experience, Auf der anderen Seite, ist die interne Erfahrung, die ein Benutzer hat, wie er oder sie mit jedem Aspekt eines Unternehmens interagiert Produkt und Service. Sie sind eine Teilmenge von Ihnen x, Sie überschüssige breiter und hat eine Menge von kognitiven Wissenschaft wird darauf angewendet. Es ist ein Interesse des Prozesses, ein Ergebnis von Forschung und Analyse. Zum Beispiel, Candy zerquetschen das beliebte Handy-Spiel. Man sieht Leute, die überall herumspielen, hat sein UX-Design in einer Weise, damit Sie immer wieder für mehr zurückkommen . UX ist eine ganz neue Domain und ist derzeit außerhalb des Geltungsbereichs von diesem Kurs, also lassen Sie uns ein paar Beispiele der Website überprüfen und deren Design analysieren. Ah, hochfunktionale Website mit wirklich schlechtem Design ist diejenige, die Sie hier auf Ihrem Bildschirm sehen . Dies ist eine regionale Website von den größten Telekommunikationsanbietern in Indien. Diese Website ist vollgepackt mit Funktionalität, erhält aber ein riesiges Upgrade und Design. Sie können auf der linken Seitenleiste ausmachen. Es gibt enorme Menge an Informationen und Tools weit nach unten. Wir haben die Social-Media-Icons, aber leider haben sie wenig oder gar keine Auswirkungen. Diese Website im Großen und Ganzen, mit all den Bling Bling, Sternsymbolen und allem, kann in einem Wort beschrieben werden. Abstoßend. Dies ist ein Beispiel dafür, was Ihre Website nicht sein sollte. Lassen Sie uns nun einen Blick auf die Website der Muttergesellschaft werfen und sehen, wie ihr Design viel besser geht . Sie können die relevanten Details sehen und es sieht auch gut aus. Sie können das auf der Landing Page beobachten. Es gibt einen schönen Zeitschieberegler. Der Schieberegler hat wichtige Ankündigungen und wichtige Informationen darüber, wo Ihre Dienstleistungen und Angebote. Dies wird einer der wichtigsten Aspekte Ihrer Website sein. Haben Sie bemerkt, dass ich einen neuen Begriff namens Landing Page verwendet habe? Nun, eine Landing Pages, eine Webseite, auf die Benutzer zuerst landen, wenn sie hier auf einen Link klicken. Die Zielseite ist die Startseite unten. Sie können Links beobachten, die die unmittelbaren Anforderungen der Nutzer klar adressieren. Der Header der Website enthält in der Regel das Unternehmenslogo, Kontaktinformationen und verschiedene andere Links. Diese Elemente werden Menüelemente genannt, und jeder aus dem Menüelement hat einen Untermenüeintrag, der den Benutzer auf die entsprechende Seite unten umleiten würde. Wir haben die Fußzeile von der Website. In der Regel finden Sie schnelle Informationen Quicklinks auf der Sitemap von der gesamten Website. Du kannst diesen Pfeil hier rausfinden. Ich klicke darauf. Es bringt den Benutzer sofort in den oberen Teil der Website. Ich möchte Ihren Hinweis auf diesen speziellen Link hier drüben bringen, das BS in El Hindi Portal. Dies leitet den Nutzer grundsätzlich auf eine Version von der Website in der Landessprache um. Warum ist das wichtig? Nun, laut British Council können nur 25% der Weltbevölkerung Englisch sprechen. Das bedeutet, dass es weitere 75% der Weltbevölkerung gibt, die den Inhalt Ihrer Website nicht lesen können . Ja, Google Chrome hat eine ausgezeichnete Arbeit bei der Übersetzung von Websites, aber es ist nirgends schließen Sie den Aufbau einer komplett nativ gebauten regionalen Website. Schauen wir uns ein weiteres Beispiel aus Great Website-Design an. MIMO ist eine ausgezeichnete App, die Gamma Phi schimpft nur für Neugier. Gamification ist das Konzept der Anwendung von Spielmechanik und Spieldesign-Techniken, um Benutzer zu motivieren und ihre Ziele zu erreichen. Im Allgemeinen handelt es sich um einen Flug in einer Nicht-Spielumgebung. Sie können sehen, dass diese Website nur einen Zweck hat, und dieser Zweck ist es, Benutzer zu Donald App zu bekommen. Diese extra tater sagen, das ist, was die Abdo und es gibt eine Markierung außerhalb der Luft, direkt am Landungsstrand. Download-Links für den Apfel deutlich erwähnt, zusammen mit dem schönen Schild sagen, Werden Sie benachrichtigt, wenn die APP für Android unten verfügbar ist, können wir ausmachen. Es gibt Social-Media-Symbole, die leicht zu folgen sind. Dies ist ein Beispiel für ausgezeichnete minimale Design-Website wirklich für Zweck gebaut 7. Responsive Vs dynamische Websites: Sie würden den Begriff voll responsive Website Statische Websites usw. für das Wasser pro Tag gehört haben. Eine responsive Website ist eine einzige Website, die sich an jede Bildschirmgröße anpasst, sodass sie einfach auf einem mobilen Tablet und Desktop-Gerät verwendet werden kann. kein Kneifen oder Crawling von Websites erforderlich. Das Design passt sich instinktiv an das Gerät an, auf dem es angezeigt wird, so dass es auf allen Plattformen gut aussieht. Eine dynamische oder eine responsive Website verwendet Silber-Site-Technologien und -Datenbanken. Wir werden sie sehr bald berühren. Einige Vorteile der Responsive Website umfassen einfachere Design-Update und einfachere Content-Updates . Eine statische Website konzertiert aus einer Reihe von Webseiten mit festen Inhalten, wo jeder basiert zeigt die gleichen Informationen für jeden Besucher. Statische Website-Seiten enthalten festen HTML-Code auf den Inhalt jeder Seite ändert sich nicht es sei denn, es wird manuell vom Designer oder einem Web-Master aktualisiert. So wurden vor ein paar Jahren vor der Smartphone-Explosion Websites erstellt. Eine statische Website passt sich nicht an die Bildschirmgröße an. Wenn Sie die Website auf einem mobilen Gerät anzeigen, würden Sie benötigen, um Side Buggy Prise out, wenn Sie eine Blogging-Website erstellen, wo Sie regelmäßig neue Inhalte erstellen würden. Statische Websites sind nicht der richtige Weg zu gehen. Schauen wir uns einige echte Beispiele an. Lassen Sie uns also unsere Lieblings-Website für Design-Inspiration nochmals besuchen und versuchen zu überprüfen, ob diese Website verantwortlich ist, nicht was sind Ihre Vermutungen? Nun, wir können überprüfen, ob eine Website verantwortlich ist oder nicht, indem wir tatsächlich eine mobile Bildschirmgröße in der Distributive simulieren . Dies kann getan werden, indem man zum Beispiel mit dem Browserfenster herumspielt , das würde die Größe des Browserfensters auf die tatsächliche Größe eines mobilen Geräts reduzieren. Sie können sehen, dass ich Scroll zitieren muss, um auf die andere Seite von der Webseite zu gelangen und auch zoomen, um Inhalte zu sehen, die für mich relevant sind. Dies ist keine ansprechende Website. Besuchen wir die Website der Muttergesellschaft und prüfen Sie, ob es sich bei dieser Website um eine responsive Website handelt oder nicht. Um das zu tun, lassen Sie mich einfach den Kopf über zu den Rändern in meinem Browserfenster und versuchen, eine mobile Bildschirmgröße zu simulieren Ah ha Sie machen können Diese Website ist eine responsive Website. Der Inhalt des Objekts hat es klar auf die Bildschirmgröße ausgerichtet. Es wird angezeigt, auf können Sie auch das Menü ausmachen. Artikel wurden alle in etwas komprimiert, das wir das Hamburger-Menü nennen, weil es so ziemlich aussieht wie ein Hamburger gerade jetzt. Lassen Sie mich erneut versuchen und überprüfen, ob es für ein Tablet funktionieren kann. Also ändere ich die Bildschirmgröße, um für ein Tablet-Gerät zu funktionieren. Ja, wir können sehen, dass der Inhalt automatisch verantwortungsvoll ist. auf dem Bildschirm auszurichten sagt, dass es auf diesem angezeigt wird, ist ein Beispiel für eine responsive, dynamische Website. 8. Fallstudie für Drahtrahmen: Lassen Sie uns versuchen, mehr zu verstehen, indem Sie ein echtes Leben Beispiel aus einem Drahtrahmen in der Form für Website zum Leben erwacht. Dies ist ein Drahtrahmen von Hemingways Expedition, freundlicher Genehmigung von Aaron von Follow Bright Consulting Partners. Hemingway's ist ein Unternehmen, das Expeditionen in Afrika organisiert, also lasst uns das analysieren. Wo frei, können Sie feststellen, dass die obere linke Ecke mit dem Logo und oben rechts begonnen haben. Sie haben ihre gebührenfreie Nummer unmittelbar unter ihrer Stärkung ihrer Glaubwürdigkeit, indem sie ein Textfeld mit der Anzahl der Jahre anzeigen, die sie im Geschäft waren . Sie stellen sicher, dass der Kunde weiß, dass Hemingway's eine vertrauenswürdige Marke ist, und es ist die Zeit, sie zu kontaktieren. Das Menüsystem ist sauber, und es hat alle wichtigen Links, jeder bringt den Besucher auf eine andere Seite auf der Website mit relevanten Informationen, da es eine Expeditionsfirma, sie sind im Geschäft des Verkaufs -Erfahrungen. Visuelle Bilder zu haben, die einen Wandfaktor in ihren potenziellen Kunden hervorrufen, ist sehr wichtig. Daher haben sie einen Satz Schieberegler Bilder. Klick auf ein bestimmtes Schieberbild würde den Benutzer auf eine andere Seite bringen, mit mehr Details in Bezug auf dieses bestimmte Bild, Hemingway will seine Benutzer wissen, was das Unternehmen bieten kann. Sehr, sehr klar. Die Decks Box auf der linken Seite des Schiebereglers. Stellen Sie sicher, dass dies sehr effektiv unter dem Schieberegler kommuniziert wird. Wir haben eine persönliche Notiz vom Eigentümer. Dies ist, um die Bild-Schulden zu erzwingen. Hemingway's ist keine große, undurchsichtige Firmen-Touren und Reiseorganisation, sondern ein personalisiertes Unternehmen, das sich um die persönlichen Erfahrungen eines Einzelnen kümmert. Aktuelle Blöcke, die in der Tiefe Informationen über Reisen oder wie führen oder müssen Websites sehen würde unter den Besitzern Notiz mit großen Thumbnails präsentiert werden. Unterhalb der Blockposten sind Testimonials von echten Kunden. Direkt neben diesem Abschnitt befindet sich die Karte von der Region, in der sie arbeiten, und selbst darunter. Der gesamte Hauptkörperabschnitt liegt im Fußzeilenbereich. Dieser zweite Käufer hat Keeling's und Kontaktinformationen erhalten. Dies für die Region ist hartnäckig. Es bedeutet, dass dieses Foto auf allen Seiten der Website angezeigt wird. Nicht nur die Homepage. Denken Sie daran, wie Ihre E-Mail-Signatur. Lassen Sie nun die endgültige Version von der Website analysieren. Sie können sehen, dass die endgültige Version der Website fast der anfänglichen für Frame ähnelt . Damit ein paar kleinere Änderungen, hat sich die jahrelange Erfahrung über den Kontakt der geringste Abschnitt bewegt mit scheinen, wie im Drahtrahmen unter dem Schieberegler entworfen. Wir haben die Nachricht des Eigentümers, der einen Namen hinter das Geschäft legt, zusammen mit der Karte auf der rechten Seite, die die Regionen darstellt, in denen sie dienen. Wir haben blockiert verfügt über eine Linie in einem etwas anderen Layout mit kleineren Thumbnails stehen im rechten Rahmen. Die Kunden-Testimonials sind vollständig in einen neuen Bereich umgezogen. Wie Sie sehen können, gibt es einige Modifikationen an der Nahrung oder unten getan. Sie enthalten einige Social-Media-Links, die nicht im ursprünglichen Drahtrahmen berücksichtigt wurden. Zum Schluss ist das Endprodukt 90% ähnlich wie die ursprünglich konzeptualisierte Version. Dies ist die Pore off Drahtrahmen. Es hat Sie, sagte der Präsident auf höherer Website, oder APP wird aussehen und welche Funktionen es erfüllen wird. Y-Frames geben Ihnen ein Gefühl von den Herausforderungen, die bewältigt werden müssen, wenn Sie eine funktionsgesteuerte Website erstellen . Y-Frames geben Entwicklern auch Klarheit darüber, was getan werden muss. Um es alle Drahtrahmen zusammenzufassen. Geben Sie Ihr Fundament, auf dem Sie Ihre Träume und Ideen aufbauen können. Denken Sie immer daran, unser Gebäude ist nur so stark wie sein Fundament. Wenn das Fundament schwach ist, als das Gebäude zusammenbricht, der gleiche Geist, Ihre Website oder Produkt. Wenn das Fundament schwach ist, haben Sie vielleicht die beste Idee oder App im Auge, aber es wird nicht erfolgreich sein. 9. Benutzerpersonen verstehen: Wir wagen uns gerade ein bisschen ins UX-Gebiet, aber ich denke, es ist wichtig, dass Sie das Wesentliche aus diesem Konzept kennen. Also, was ist eine Benutzer-Persona? Ah, Benutzerpersona als hypothetischer Benutzer, der ähnliche Gold und Verhaltensweisen von Ihrem Zielbenutzer hat , AH, fiktionaler Charakter, der die wesentlichen Merkmale und Eigenschaften darstellt, die Ihre Kunden kaufen von. So werden Nas oder Benutzerpersonas durch Forschungsumfragen und Interviews von Ihrer Zielgruppe erstellt . In Bezug auf Laien identifiziert die Benutzerpersona, wer Ihre primären Benutzer sein werden und stellt ihre Persönlichkeiten dar. Nehmen wir an, Sie bauen eine kleine Spar-Website. Lassen Sie uns diese Website benny setzen dot com Diese Website automatisch belasten eine voreingestellte einige von Ihrem Bankkonto jeden Monat und investieren das gleiche in Investmentfonds. Wer würden die Zielbenutzer von Penny Teil B. Werden es Kinder sein? Wird es Schüler nennen, oder wird es Großeltern sein? Der wichtigste Faktor für Penny Porter Buch ist, dass sein Zielsegment, oder Zielgruppe muss eine Quelle aus Regelmäßiges Einkommen Kinder sind abhängig von ihren Eltern, so dass sie nicht die Zielgruppe. Studenten sind teilweise abhängig von den Eltern, arbeiten aber immer noch in Teilzeit. Sie sind immer noch nicht die Zielgruppe, weil diese Einkommen sporadische und saisonale Großeltern älter sind. Folk leben in der Regel von einer Rente oder Investitionen, die bereits in der Vergangenheit getätigt. So sind sie nicht Ihre ideale Zielgruppe für die Sicherung von frischen Investitionen gehen durch Versuch und Irrtum, können Sie isolieren die Zielgruppe für Penny Port wird Menschen, die eine stetige Verdienst haben und einen Job haben, der sie regelmäßig bezahlt. Das Zielsegment wären frischere junge arbeitende Paare, die wieder aus oder verheiratet sind . Dies basiert auf einer Messstab-Umfrage und ist eine Selbstverständlichkeit, da alle Annahmen Fehler einschleichen könnten. Und die am besten empfohlene Methode zur Validierung des Stargate-Segments ist die Validierung. Sie gehen davon aus, dass Sie eine Stichprobenumfrage durchführen und direkt mit Ihren Endkunden sprechen. Für dieses Beispiel gehen wir davon aus, dass das Zielsegment Männer und Frauen im Alter von 20 bis 30 Jahren sein wird mit einem stetigen Einkommen, das für die Zukunft investieren will. Sie haben einen College-Abschluss und unsere Internetheilung von Tyrus, einer ganzen zwei Städte außerhalb eines bestimmten Landes. Lassen Sie mich Ihnen eine Beispiel-Benutzer-Persona zeigen. Treffen Sie sich in Eire in Iowa, arbeitet als Ausbildung in der Personalabteilung von einem Startup. Sie begann ihre Karriere erst vor einem Jahr. Das Startup, für das sie arbeitet, eine gute Menge an Risikokapital aufgebracht und hat ein gutes Erfolgspotenzial. Beziehung weise, sie ist in einer engagierten, ernsthaften Beziehung. Die Ehe ist definitiv im Kopf in Iowa, dieses Weibchen bei seiner Rückkehr im Alter von 22 zu 28 Jahren. Ihr durchschnittliches Einkommen beträgt etwa 15.000 US-Dollar US-Dollar , oder ich in unseren 10 Millionen. Und sie neigt dazu, einen normannischen Lebensstil zu führen. Sie hat ein ruhiges Verhalten und hat eine Region für das, was die Zukunft ist? Sie versteht den Wert des Geldes und hat den Drang zu sparen. Sie hat aktive Hobbys wie Reisen, Schreiben und Gartenarbeit, die n reicher, emotional und geistig. Sie ist in den sozialen Medien aktiv, aber es ist sich bewusst von ihrem Ruf. Sie teilt Nachrichtenartikel, die mit einem Arbeits- oder Hobby-Bereich verbunden sind. Sie teilt nichts. Sie hält diese Fälschung für sogar Bilder von Hunden, Katzen und Prominenten. Ihr Gold umfasst, um einen anständigen Korpus zu bauen, wenn es Zeit ist, eine Familie zu gründen oder mit einem Partner zu leben , den sie in den frühen Jahren von einer Arbeit, die sie Probleme beim Verständnis des technischen Jargons über Investitionen in maximieren will , wird bombardiert mit dem kostenlosen Rat, den sie von ihren Gleichaltrigen bekommt. Sie will eine einfache, einfach zu bedienende Lösung für ihren Lebensstil, auch wenn sie will, dass die Lösung automatisiert wird. Sie möchte Dashboards sehen, wie sich ihre Investitionen entwickeln. Dies ist, was viele Port Dot com tut. Es automatisiert Investitionen auf der Grundlage von Zielen und Risikoappetit. Es gibt einen prägnanten Bericht, hat ein schönes Dashboard mit relevanten Metriken und ist auch auf Mobilgeräten zugänglich, ein Produkt und Kundenmatch im Himmel gemacht. 10. Die Referenz-Website analysieren: Wenn Sie eine Design-Idee haben, suchen Sie immer nach Referenzen, indem Sie andere ähnliche Website suchen. Man lernt Wasser da draußen kennen und was man anders machen kann. Außerdem kann es in die andere Richtung zu Ihnen funktionieren. Erfahren Sie, was funktioniert und Sie können das gleiche implementieren. Empfehle ich erstere als letzteres? Einer der besten Orte, um nach Referenzen zu suchen? ISP-Interesse. Pinterest gibt Ihnen eine Menge Design-Inspiration. Sie können sehen, was andere Designer da draußen machen. Ich habe ein Boot namens Industrial Light and Magic. Was ist passiert? All das erstaunliche Zeug, das ich über das Internet finde, fand ich eine Website, die wir später auf Pinterest analysieren werden. Ich fand einen Lebenslauf, eine Website-Vorlage für Pixel Geist die beste Plattform für Sie zu sein, mit. Die Website hat eine saubere und minimalistische Herangehensweise. Diese Website folgt einem einzigen Seitendesign. Grundsätzlich kann auf alle verschiedenen Abschnitte durch Scrollen zugegriffen werden. Dies ist eine großartige Design-Technik. Wenn Sie diese Website auf einem mobilen Gerät anzeigen, ist es viel einfacher, zu scrollen, als rechts zu klicken. Jede Website, die Ihre Rechnung muss mobil freundlich sein, da sie es Ihnen ermöglicht, Ihre Arbeit einer zukünftigen Anlage sofort auf Ihrem Smartphone zu zeigen . Also lasst uns das Layout analysieren. Es gibt ein großes Cover Bild sofort ein Gesicht auf den Namen der Hamburger setzen. Manu wird hier verwendet, da es eine linke Seite königlich mit allen wichtigen Website-Abschnitten auf der rechten Seite gibt , können Sie die sozialen Medien ausmachen. Symbole werden ziemlich überwiegend angezeigt. Dies ist wichtig, weil Sie als Freiberufler für die Generierung Ihres eigenen Unternehmens verantwortlich sind , und es gibt keinen besseren Weg als Social Media. Direkt unter dem Coverbild befindet sich der Name. Zusammen mit dem Kern Skill Set. Das ist entscheidend. Vorbei sind die Tage der Fastenzeit Ohren Menschen in großen Mengen von Text. Die menschliche Aufmerksamkeitsspanne ist rot, mit drastisch am Tag. Sie müssen Schlüsselwörter setzen, wenn Sie effektiv kommunizieren möchten. Wenn die Person mehr wissen will, gibt es einen Button Um einen detaillierten Lebenslauf herunterzuladen, lesen Sie bitte die Tipps und Tricks Abschnitt des Kurses für Richtlinien und wie man eine attraktive ein bezahltes CVI oder Izumi zu machen. Dies gipfelt den Landungsabschnitt oder in diesem Fall der Begrüßungsbereich eine Landingpage ist die erste Seite von Mr Sees, wenn sie auf Ihrer Website landen . Es gibt verschiedene Arten von Landingpages. Wir werden über sie im späteren Abschnitt diskutieren. Der nächste Abschnitt ist der Abschnitt über mich. Ein kurzer Abschnitt über mich ist der beste Weg, um sich mit einigen begrenzten Textzeilen vorzustellen . Es gibt ein Miniaturbild mit einigen relevanten Kontaktdaten und einigen glaubwürdigen Kennzahlen, wie z. B. die Anzahl der abgeschlossenen Projekte. Wie viele Kunden gewartet wurden, und wenn Sie die Anzahl der Kaffeetassen fertig bemerken können, ist dies keine relevante Metrik überhaupt, aber dies wird verwendet, um einen leichteren, nicht-Corporate Ton auf die gesamte Website zu setzen . Dies geschieht, um den Freiberufler zu humanisieren und zu versuchen, den Besucher zu fühlen. Der Freiberufler ist ein engagierter Arbeiter, weil Kaffee in der Regel das Stimulans verwendet wird, wenn das Gehen hart wird und man braucht, um das Mitternachtsöl richtig zu verbrennen. Der nächste Abschnitt ist die Karrierezusammenfassung. Auch hier gibt es eine Überschrift, die den Abschnitt Titan erfasst, zusammen mit ein paar Zeilen, die die beruflichen Leistungen zusammenfassen. In diesem Abschnitt können Sie hervorheben, was Ihre Bildungsabschlüsse sind und ob Sie zuvor Berufserfahrung haben. Der nächste Abschnitt ist der Fähigkeitenabschnitt in einer Welt, wenn Sie ein Jack aller Trades sein müssen, es basiert, um ehrlich zu sein, welche Stärke Sie haben. Dies wird durch einen kreisförmigen Graphen bezeichnet, obwohl ich gesehen habe, wie Leute ihre Fähigkeiten beurteilen, weil sie sich selbst Bestnote für alle geben . Ich schlage dringend vor, dass Sie das nicht tun. Dies wird am besten bevölkert, indem Sie eine Umfrage von Ihren Kunden durchführen. Nachdem Sie ein Projekt abgeschlossen haben, denken Sie es wie ein C-Set oder eine Kundenzufriedenheitsbewertung aus. Schauen Sie sich die Tipps und Tricks Abschnitt an, um herauszufinden, welche Autobahn am besten für eine Kunden- oder Kundenzufriedenheitsumfrage geeignet ist. Der Abschnitt nach dem Abschnitt „Meine Fähigkeiten“ ist der Kern der Webseite, der Portfoliobereich. Der Abschnitt hat das gleiche Layout wie zuvor, mit der Überschrift kündigt den Abschnittsnamen und ein paar Zeilen Text, um die Arbeit unten zusammenzufassen , dass Sie eine Sortierung Barton, die die andere Art von Arbeit beginnt, die Sie getan haben. Wenn ich eine wiederaufnehmende Website erstelle, lasse ich meine Online-Kurse hier anhand von Themen sortieren. Vielleicht ist das UX, das du bist, ich entwerfe. Welche Brustentwicklung, Unternehmertum? Crash-Kurs , etc. Hier werden originale Great off Bilder mit zusätzlichen Funktionen verwendet, wie sie als Favorit markieren oder eine detailliertere Ansicht aus dem gleichen öffnen. Der letzte Abschnitt ist der Abschnitt „Kontaktieren Sie mich“. Dies ist einer der wichtigsten Abschnitte Ihrer Website. Dies ist, was wird einen Lead für Sie zu generieren tatsächlich verfolgen. Dieses Kontaktformular enthält alle relevanten Felder und enthält auch alle relevanten Kontaktdaten um sicherzustellen, dass Ihre perspektivische Anlage Sie sicher in ihrer bevorzugten Weise erreichen kann . Lassen Sie uns unseren Fokus zurück nach oben auf der Seite und zum Hamburger-Menü, wenn Sie darauf klicken . Sie können einen Trocknertyp der Animation von links herausstellen. Ebenfalls beobachtet, gibt es einen Schatten an der Ecke des Zerstörers. Dies ist, um ein Gefühl von Tiefe aus Gefühl zu schaffen, dass dieses Menü über eine Webseite auf einer anderen Ebene. Sie könnten feststellen, dass die Abschnittsüberschriften in dieser Schublade Manu vorhanden sind, Manu vorhanden sind, und der Mauszeiger über sie hebt sie hervor, und eine darunter liegende Animation erscheint direkt unter ihnen, um jetzt auf eine beliebige Abschnittsüberschrift zu klicken und der Mauszeiger über sie hebt sie hervor, und eine darunter liegende Animation erscheint direkt unter ihnen, um jetzt auf eine beliebige Abschnittsüberschrift zu klicken der Besucher dieses bestimmten Abschnitts auf der Webseite. Dies geschieht durch die Verwendung von Ankern. Grundsätzlich legen Sie einen Anker am Anfang eines bestimmten Abschnitts ab und weisen ihn dem Abschnittskopf Oh, aber in die Entwicklungsseite zu Abschnittskopf Oh, . Aber ich dachte, du solltest davon wissen. Es gibt auch bestimmte Animationen, wie zum Beispiel die Hamburger-Speisekarte, die sich in quer und quer verwandelt in ein Hamburgermenü. Auch hier können Sie die Abschnitte bemerken. Folgen Sie einem Standardformat. Es gibt eine Überschrift und darunter haben Sie ein paar Textzeilen. Es ist für alle Arten von Abschnitten gleich. Hier drüben. Die Textfarbe ist meist gree, und der Hintergrund ist groß und weiß. Es gibt ein Gefühl der Einheitlichkeit im Design, und dies wird als Design-System von Typografie, Layout und Körnungen, zwei Farben, Icons, Icons, Komponenten und sogar Codierungskonventionen zur Stimme bezeichnet. Und nicht den Stil, Anleitungen und die Dokumentation. Ein Designsystem bringt alle zusammen, so dass das gesamte Team lernen, bauen und wachsen kann lernen, . zukünftigen Lektionen werden wir mehr über Designsysteme lernen. Jetzt, da wir die Website verstanden haben, bauen wir unseren Drahtrahmen 11. Einführung in Balsamiq Mockups: Ball Bauch ist eine erstaunliche App, die Sie sowohl schön durch Frames ermöglicht. unten IQ öffnen, werden Sie mit dem Anwendungsfenster begrüßt. Die untere IQ-Benutzeroberfläche besteht aus fünf primären Bereichen. Die Symbolleiste, die U-I-Bibliothek, die Arbeitsfläche, das Navigator-Bedienfeld und das Eigenschaftenfenster. Die Symbolleiste besteht aus einer Reihe von Symbolen, die jeweils zum Ausführen von Aktionen in anderen Bereichen der Benutzeroberfläche dienen. Sie können sehen, eine Hamburger manuelle Position in der oberen linken Ecke sind nicht klicken Sie auf diese erhalten Sie eine Dropdown-Liste. Dieses Drop-down-Menü besteht aus einigen Optionen. Die 1. 1 ist Mock ups. Die zweite 1 ist Asset, die dritte Einheit Symbole, und die letzte ist Müll. Die Markups sind diejenigen, die Sie richtig auf der Leinwand einrahmen werden. Hier drüben, sind Vermögenswerte die Bilder, die er in Ihren Frauen-Rahmen verwenden würde. Wenn es alles, was Sie verwenden, kann es sich um ein bestimmtes Bild oder sogar um ein Logo handeln, das Sie in Ihre Frau integrieren möchten. Für ihn sind die 3. 1-Symbole ein wichtiges Konzept im Bereich Design. Ein Symbol ist eine Gruppe von Ihnen. Y-Objekte werden gesteuert, die einen einzelnen Funktionsteil darstellen. Es wird oft für Teile der Benutzeroberfläche verwendet, die wiederholt auf mehreren verschiedenen Bildschirmen angezeigt werden. Andere Softwareprogramme beziehen sich manchmal auf diese Funktion als Vorlagen, Masterseiten, benutzerdefinierte Komponenten oder sogar Widget. Zum Beispiel, wenn Sie Gmail-App auf Ihrem Smartphone verwenden, ist das schwebende Plus Barton in fast allen Bildschirmen zu sehen. Der Designer beim Erstellen eines Mocks aus dem gleichen, hätte beim Erstellen eines Mocks aus dem gleichen,ein Symbol aus dem Plus-Symbol erstellt, um mehrere Male wiederzuverwenden. Bauen Sie Öfen, Wiederverwendung wie und wenn nötig. Im Wesentlichen können Sie mithilfe von Symbolen wiederverwendbare gemeinsame Elemente erstellen, die Sie über verschiedene Markierungsbildschirme hinweg verwenden können . Papierkorb ist im Grunde alle Elemente, die Sie gelöscht haben, und Sie möchten möglicherweise wiederherstellen. Die Gruppe von Symbolen in der Mitte der Symbolleiste ist für häufig ausgeführte Canvas-Funktionen vorgesehen . Dies sind die Aktionen, die Sie wahrscheinlich zuvor in Texteditoren wie Kopieren, Einfügen, Gruppieren, Ausrichten und Zoom verwendet haben Einfügen, Gruppieren, Gruppieren . Der letzte Abschnitt der Symbolleiste befindet sich ganz rechts und enthält die Schnellschaltflächen für das Projekt-Infofenster der U. Y-Bibliothekseigenschafteninspektor und den Vollbildpräsentations-Bone, die U Y-Bibliothek oder die U I Control Elements Library ist ein langer Streifen von U. Y-Steuerelementen direkt unter der Symbolleiste. Es listet alle U Y Steuerelemente oder Objekte, die mit den Mock Ups kommen können, sowie Assets und Symbole und Symbole auf. Das Hauptziel der U. Y-Bibliothek ist es, dich an dich zu lassen. Ich steuere Elemente auf die Markup-Canvas, die jetzt in den Mockup-Canvas-Bereich kommen. Dies ist der wichtigste Arbeitsbereich von ultimativen Mock Ups. Hier wird Ihr Markup zum Leben erweckt. Sobald Sie IhreObjektehinzufügen, Objekte können Sie sie verschieben, die Größe ändern, mit ihnen nach Herzenslust spielen, können Sie sie verschieben, die Größe ändern,mit ihnen nach Herzenslust spielen,bis sich Ihre Markup-Elemente genau richtig anfühlen. Das Navigator-Bedienfeld auf der linken Seite zeigt die Liste von Markup-Bildschirmen oder -Leinwänden an. Das aktuell ausgewählte Objekt wird hervorgehoben. Sie können viele coole Dinge mit dem Navigator-Bedienfeld machen, wie das Einrichten von untergeordneten Leinwänden usw. Wir werden das gleiche in den kommenden Lektionen erkunden. Das Bedienfeld auf der rechten Seite neben der Anwendung, verschobene Eigenschaften für ein ausgewähltes Steuerelement oder Objekt, je nachdem, welches Symbol ausgewählt ist. Es zeigt entweder den Eigenschafteninspektor oder das Projekt-Info Piano. Mit dem Eigenschafteninspektor können Sie einige allgemeine Eigenschaften wie Ausrichtung, Position, Größe usw.festlegen , Position , Größe usw. . Lassen Sie mich einfach einen Knopf hier fallen, und Sie können sehen, dass ich verschiedene Funktionalitäten hier drüben bekomme, um diesen speziellen Knopf zu transformieren . Das Fenster „Projektinfo“ enthält einen Bereich, in dem Sie einige Notizen zum Projekt hinzufügen und auch den Skintyp auswählen können . Ich werde die verschiedenen Arten von Skins erklären und wo man sie im Kurs ein wenig weiter verwenden kann. Nun, da Sie die verschiedenen Paneele aus dem Balsamico verstanden haben, bauen wir diesen Drahtrahmen. 12. Wire-framing – 1: beim Öffnen des Balsamic Kopf über die U A-Symbolleiste zur gemeinsamen Registerkarte und ziehen Sie ein Browserfenster nach unten . Also lassen Sie uns diese Website nennen. Mein fantastischer Lebenslauf eine Website, richtig? Und dann gehen wir zu der Größe und dem Inspektor und ändern Sie es auf 10 zu 42 576 Lassen Sie uns ein wenig verkleinern . Fantastisch. Dies gibt uns eine schöne weiße Bildschirmdarstellung aus einem Browserfenster, das wir für White-Screen-Geräte bauen . Vorbei sind die Tage der Schrottmonitore. Habe ich Recht? Also, bevor wir überhaupt anfangen, eine Anzeige zu transformieren, Sie Elemente. Es gibt ein wichtiges Konzept, das ich Ihnen vorstellen möchte. Und das nennt man Sperren eines bestimmten Elements. Lassen Sie uns genau richtig wie und klicken Sie auf Lock Browser. Im Grunde, was passiert, ist, dass, sobald Sie dieses bestimmte Sie Element gesperrt haben, sich dies nicht frei bewegen. Das ist sehr wichtig. Wenn Sie viel bauen, sind Sie Elemente. Sie wollen nicht, dass sie verwirrt werden, während Sie so systematisch arbeiten. Wann immer Sie bauen Ihre Frau Rahmen, gesperrt die Elemente, die Sie nicht aktiv interagieren. Minze. Gehen wir zurück auf die Website. Wir können sehen, dass wir hier auf der linken Seite ein Hamburger-Menü haben, gefolgt von einigen Social Media Icons auf der rechten Seite. Versuchen wir also, die Naht auf Balsamico zu replizieren. Gehen wir zu Containern und wählen Sie Rechteck aus der U-I-Symbolleiste. Ziehen wir es hier runter und lassen Sie es uns transformieren, so dass es wie ein Hamburger-Menü aussieht . Das ist es, was früher ein bisschen Größe hat. Ausgezeichnet. Jetzt möchte ich, dass Sie Option und Mac und Alt und Windows halten und nach unten gezogen, wodurch eine weitere Kopie aus dem U-Element erstellt wird. Wir können die gleichen Schritte wiederholen und die dritte Zeile erstellen, um alle drei Rechtecke auszuwählen und eine Gruppe aus der gleichen erstellen. Sie können dasselbe tun, indem Sie Befehl G drücken. Dies ist ein sehr wichtiges Konzept, und Entwurfsgruppen ermöglichen es Ihnen, eine Gruppe von einigen Elementen zu , setzen und dann als Gruppe zu arbeiten, anstatt auf sie einzeln. Jetzt bin ich älter, um Ihre Verwicklungen zur gleichen Zeit, ich bin ein wenig unbequem mit der Länge, also lassen Sie mich versuchen, die Länge ein wenig und auch den Kapitän zu reduzieren. Zwischen ihnen können wir sehen, dass es bestimmte soziale Media-Symbole hier auf der rechten Unterseite gibt. Es macht es uns wirklich einfach, Social-Media-Icons zu integrieren. Lassen Sie uns zum schnellen Anzeigenfeld gehen und in der Symbolleiste nach Facebook suchen. Das sieht ziemlich schön aus. Ziehen wir es hier nach oben, und wir können auch die Größe auswählen. Ich fühle mich, dass em besser oder gefüttert ist, um zu reflektieren, wie die ursprüngliche Website aussieht. Wir können auch die anderen Elemente hinzufügen, um Twitter zu mögen. Ich habe mit dir zusammengezogen und wieder bereit, an Seiss gewöhnt haben wir in Aufgereiht wieder verbunden. Hübsch. Ist das Eis und ich bekomme das letzte war Instagram wieder? Ich habe ihr Studium zum Eis gemacht und es hier hochgezogen. Bringen wir sie alle in einer einzigen Nacht. Ja, ja. Und jetzt wählen Sie alle diese Symbole und bewegt sich zu den Inspektoren und wählen Sie Raum aus vertikal . Dies wird einen gleichen Abstand zwischen den Symbolen bringen. Wir können sehen, dass es ein riesiges Coverbild unter den Social-Media-Symbolen gibt, also gehen wir auf den Medien-Reiter auf der Sie eine Bibliothek und ziehen Sie das Bild nach unten, das dieses Coverbild genannt wird, und ziehen Sie es den ganzen Weg hinüber , Sie könnten mich fragen, Warum haben wir ein Bild und Stroh nach unten gezogen ein Rechteck, können Sie parken, dass ich dachte, ich würde es zu einem späteren Zeitpunkt bekommen? Gehen wir zurück zu unserer Referenz-Website. Wir geben zu, dass es ein riesiges Lehrbuch direkt oben auf dem Coverbild gibt. Gehen wir also zurück zu den Containern und wählen Sie Rechteck und legen Sie es oben auf das Coverbild . Bevor ich anfange, irgendetwas zu tun. Ich will nur zurückgehen und nachsehen. Das Coverbild, so dass jede Art von Aktion, die ich hier mache, keinen Einfluss auf die Position des Coverbildes dahinter. Lassen Sie uns die Größe der Textfelder ein wenig transformieren, so dass sie besser auf das ausgerichtet ist, was die Referenzwebsite hat. Wir haben einen Überschriftentitel, gefolgt von einem Untertitel und einer Schaltfläche. Lassen Sie uns versuchen, dasselbe auf Balsamic zu replizieren, also lassen Sie mich zum Text gehen und einen großen Titel eingeben. Nun nehmen wir einen Untertitel und geben Sie den Text, den Sie Augen Schrägstrich Sie X-Balken. Welche Presse langweilig Android? Das ist die Position. Dies nur ein wenig für den großen Titel, der an der Taste mit Drag down der Barton und positionieren Sie es direkt unter dem Untertitel, die die Größe ein wenig erhöhen. Siri Talg. Herzlichen Glückwunsch. Du hast gerade das erste Grün auf Balsamic abgeschlossen. 13. Wire-framing – 2 Teil 1: lassen Sie uns ein wenig nach unten scrollen und wurden mit über mich Abschnitt begrüßt. Der Abschnitt über mich besteht aus unserem Titel oder, in diesem Fall, politisch dies ein Header, zusammen mit ein paar Zeilen Text darunter. Es hat auch ein paar Rechtecke übereinander platziert, wobei einige Metriken auch oben erwähnt werden. Also komm zurück nach Balsamico. Lassen Sie uns mit der rechten Maustaste klicken und den vorherigen Bildschirm duplizieren. Also lasst uns das Zeug löschen, das wir nicht benötigen. Lassen Sie mich das Coverbild entsperren und das gleiche löschen. Lassen Sie mich das Rechteck löschen, den Text auf der Schaltfläche. Wir brauchen den großen Titel, also nehmen wir ihn in die Mitte unter dem großen Titel. Wir haben einen Textblock, also ziehen wir den Text nach unten. Du kaufst Element. Gehen wir auf unsere Website und kopieren Sie diesen Text. Bringen wir es zurück in flüchtige Mick und fügen Sie es ein. Ausgezeichnete Reha sind Untertitelzeile fast fertig. Positionieren wir es in der Mitte, indem wir den Text verwenden. Transformationstools im Inspektor werden wir lernen, sind sehr wichtiges Konzept namens Symbole und wie man einige gebaut in Baltimore zu erstellen. Im Moment ist ein Symbol ein Set aus Ihnen Elemente, die wiederverwendet werden können. Das spart Ihnen viel Zeit, wenn Sie viele Bildschirme mit dem gleichen reparativen Element bauen , und in diesem Fall ist es der Titel auf diesem kleinen Absatztext darunter. Wählen wir also den großen Titel und das Textelement aus und gruppieren Sie sie. Jetzt werden wir es in ein Symbol konvertieren, also gehen Sie zur Inspektorzeit, und hier können Sie es als Titelsymbol benennen und Sie können auf Konvertieren in Symbol drücken. Die Farbe hat sich von Popo zu Grün geändert. Symbole können über das Symbol zugegriffen werden. Treten Sie hier rüber. Wir werden dies zu einem späteren Zeitpunkt wiederverwenden. Nun lassen Sie uns hier ein neues Rechteck hinzufügen, also gehen wir zu den Containern und klicken Sie auf Rechteck und lassen Sie uns die Größe ändern. Lassen Sie uns ein weiteres Rechteck oben ziehen. Also haben wir die Basis für die Metrikanzeige erstellt. Denken Sie immer daran, dass sich alle Elemente auf verschiedenen Ebenen befinden. Zum Beispiel befindet sich das längliche Rechteck oberhalb des gestreckten Rechtecks. Lassen Sie mich das längliche Rechteck nehmen und es zurückschicken. Sie können feststellen, dass das gestreckte Rechteck auf dem länglichen sitzt. Lassen Sie mich es zurückbringen, und jetzt können Sie sehen, dass das längliche oben auf dem gestreckten Rechteck ist. Nun, um die Dinge in die Perspektive zu bringen, lassen Sie mich Ihnen ein weiteres Beispiel geben. Nehmen wir an, Sie sind auf einem ausgefallenen Hubschrauber, oder? Und du blickst unten auf einen bestimmten Block vor deiner Stadt. All diese verschiedenen Gebäude sind wie verschieden Sie durch Elemente. Einige Gebäude sind größer, einige Gebäude kürzer, aber wenn sie von oben betrachtet werden, sehen sie alle aus, als wären sie auf der gleichen Höhe, obwohl sie in verschiedenen Ebenen existieren. Lassen Sie uns also die restlichen Details auf den Rechtecken vorgeben. Wir haben kein Bild einen Untertitel, eine Textzeile, ein paar Symbole auf ein paar, sowohl Text als auch Frauen in diesen Rechtecken. Also lasst uns zurück in Balsamico springen. Die schnelle bei zwei unserer macht es wirklich einfach für uns, Elemente zu ideo, Also lassen Sie uns dieses Bild verfolgen. Lassen Sie uns nach Untertiteln suchen. Ziehen Sie es hier rüber. Geben wir Text ein. Lassen Sie uns das Etikett auswählen. Lassen Sie mich einfach dasselbe auswählen. Lassen Sie mich die Option halten und das gleiche duplizieren. Lassen Sie mich das etwas nach oben bewegen, damit es eine bessere Position ist. Lassen Sie mich die Verschiebung halten und reduzieren Sie die Größe vom Bild, so dass wir mehr Platz haben. Lassen Sie mich diese Elemente ziehen. Oh, lassen Sie mich dieses Rechteck abschließen. Sehr selektiv, sagte Titel und etwas Text und ziehen Sie in einer anderen Kopie aus dem gleichen. Das ist wieder Zentrum. All das sieht gut aus. 14. Wire-framing – Screen 2 Wire-framing: Ich habe Ihnen gezeigt, wie Sie die Bibliothek und die Quick-At-Werkzeugleiste schnell am Rest der Symbole verwenden, um den Bildschirm zu vervollständigen. 15. Wire-framing – Screen 2 Wire-framing für Screen 2: Herzlichen Glückwunsch. Wenn Sie es nun erfolgreich gemacht haben, suchen wir nach den Symbolen in der U. Y-Bibliothek . Das erste Symbol ist ein ähnliches Symbol, also versuchen wir es zu finden. Ja, wir haben einen Daumen nach oben skizziert, der an diesen Punkt heraufzieht. Das nächste Symbol, das wir haben, ist ein Benutzerplus-Symbol, also gehen wir zurück, um es zu benutzen. De Vito. Wir haben kein Benutzersymbol hinzugefügt. Die nächste ist eine Tasse Kaffee. Mal sehen, ob Baltimore es jetzt für uns hat. Es hat eine Trophäe. Ja, ausgezeichnet. Wir können feststellen, dass es hier einige Titelnummern gibt. Gehen wir zum schnellen Feld und Typ Big Title 10. Und damit der Untertitel für Ebene gewählt wird, lassen Sie uns dies in der Mitte mit den Text-Transformationswerkzeugen platzieren. Lassen Sie uns die Option halten und kopieren Sie die Zahlen erneut. Lassen Sie uns die Option halten und es kopiert. Untertitel unten. Nun lasst uns das ein wenig ausrichten. Wir können die automatischen Richtlinien als Referenz Deborah verwenden, so dass wir vorherige Objekte auf dem Bildschirm ziemlich einfach ausrichten können. Ausgezeichnet. Wir haben auch den Bildschirm abgeschlossen . Hoffe, du hast Spaß 16. Wire-framing – Bildschirm 3: der Karriere-Zusammenfassungsbildschirm ist etwas länger in der Natur. Es folgt der gleichen Struktur aus voraus. Oh, und ein Text unten. Also lassen Sie uns Bildschirm auch duplizieren , Sie die Elemente löschen, die wir nicht brauchen. Lassen Sie uns dieses Rechteck transformieren und den Graduierungshut hinzufügen. Ja, lassen Sie uns das in die Leinwand verfolgen und auch die Größe ändern . Double X. Nun lassen Sie uns einen Untertitel hinzufügen. Positionieren Sie es direkt unter dem Symbol, das ist. Erweitern Sie dieses Rechteck ein wenig und positionieren Sie es direkt neben dem Symbol. Gehen wir zurück zu einer Referenz repräsentieren. Wir können feststellen, dass es eine Zahl, gefolgt von einem Titel mit einem Untertitel, anderen Untertitel auf einer Reihe von Text, also können wir zurück zu Balsamico gehen und den Anzeigentitel ändern lassen , dass eine Zahl, die einen anderen Titel hinzugefügt. Ändern Sie es. Teoh String Bass sind textbasierte Titel Das ist ein bisschen zu groß. Bringen wir es auf 24 runter. Positionieren Sie das direkt neben der Nummer. Gehen wir zu einem Untertitel zu einem anderen Thema. Lassen Sie uns etwas Text hinzufügen. Lassen Sie uns Elemente auswählen und reduziert auf Seiss. Lassen Sie uns es an Ort und Stelle ausrichten, wählen Sie alle Elemente und erstellen Sie eine Gruppe Extender Gewirr ein wenig und halten alte sind Option auf Duplikat über abgesetzte Elemente, die wir erstellt haben. Ein Doppelklick auf die Gruppe ermöglicht es Ihnen, einzelne Elemente aus dem gleichen zu bearbeiten, und Sie Escape treffen, gelangen Sie zurück zur Leinwand. Lassen Sie uns alle Elemente im Rechteck auswählen und eine Gruppe erstellen, so dass wir in der Lage wären , sie ein wenig besser auf der Website auszurichten. Sie können feststellen, dass es einen Aramark gibt, der auf das Graduierungssymbol zeigt. Mal sehen, ob wir es finden können. Ziehen Sie das Symbol bis zum Punkt und platzieren Sie es so, dass es mit dem Rechteck in Kontakt steht. Ausgezeichnet. Wir haben Bildschirm drei abgeschlossen. 17. Wire-framing – Bildschirm 3 – Teil 2: können wir sehen, dass das Erlebnissegment außerhalb der Website eher anders als das vorherige Segment ausgerichtet ist . Hier können Sie feststellen, dass alle Elemente auf der rechten Seite liegen und das Symbol auf der rechten Seite des Bildschirms ist . Gehen wir zurück zum Balsamico und duplizieren Sie den Bildschirm. Lassen Sie uns die Elemente löschen, die wir nicht benötigen. Lassen Sie uns das Graduierungssymbol auf dem Untertitel auswählen und es ein wenig von der Leinwand verschieben. später Wählen Siespäterdas Aramark-Symbol aus und verschieben Sie es auch ein wenig außerhalb der Leinwand. Lassen Sie uns nun das gesamte Segment nach rechts bewegen und es hier drüben positionieren. Lassen Sie uns das Graduierungssymbol auf dem Untertitel und mehr auf der rechten Seite des Bildschirms . Doppelklicken Sie auf das Symbol und suchen Sie nach einer Nikon, die einer Krawatte ähnelt. Ausgezeichnet. Wir haben das Symbol durch ein anderes neues Symbol ersetzt und geben Sie den Untertitel Löschen Sie diesen Adam Mark und lassen Sie uns einen anderen Aramark finden, der auf uns nach rechts zeigt. Ziehen Sie das Symbol nach oben und positionieren Sie es direkt in der Mitte, so dass es in Kontakt mit dem Rechteck, das eine Linie Icahn ein wenig ist. Wir müssen den Inhalt auf der rechten Seite des Rechtecks ausrichten. Also gehen wir zurück zu Balsamico-Salat auf Gruppe alle Elemente in diesem bestimmten Rechteck. Kein Lachter Gewirr Jetzt, das dieses Rechteck gesperrt hat. Nun lassen Sie uns alle Elemente in diesem bestimmten Rechteck auswählen und zum Steuerbereich gehen und auf eine Linie streichen. Im Moment sind alle Elemente auf die rechte Seite verschoben. Aber sie sahen ein wenig verwirrt aus, also ziehen wir es zurück an den Rand und lassen Sie sie herausziehen. Lassen Sie mich nun diese Position in die Mitte nehmen und es so ausrichten, dass es auf Augenhöhe mit dem Untertitel Lassen Sie mich dasselbe mit dem nächsten Absatz machen, der in der Mitte formatiert ist, und richten Sie es dann so aus, dass es im Einklang mit den Untertiteln steht. Wählen Sie den Titel und reduzieren Sie die Größe, so dass es auf Augenhöhe mit Untertiteln zu Ausgezeichnet ist. Wenn du mir bis jetzt gefolgt bist, ist das großartig. Sie haben Bildschirm drei abgeschlossen. Wir gratulieren 18. Wire-framing – Bildschirm 4: Also lassen Sie uns beginnen, Bildschirm zu bauen, denn wir haben eine Grafik der Wissensmetrik. Also lassen Sie uns sehen, wie wir das gleiche in Balsamico duplizieren können. Gehen wir zurück zu Balsamico und duplizieren den Bildschirm. Lassen Sie uns Elemente löschen, die wir nicht benötigen. Entsperren Sie dieses Rechteck, und löschen Sie es. Gehen wir nun zum schnellen Aktiv und suchen Sie nach einem Kreis. Das sieht gut aus. Warum nicht erreicht Drogen es bis zur Mitte und halten Verschiebung und vergrößern Sie es. Wir können sehen, dass wir einen Titel zusammen mit etwas Text haben, Also gehen wir zurück zu einer vorherigen Seite. Kopieren Sie dieses Symbol und fügen Sie es erneut ein. Nun, das ist schnell ein paar Titel hinzufügen. Bringen Sie es in die Mitte und ändern Sie es in Zahlen. Positionieren Sie es in der Mitte. Gehen Sie zurück zu den schnellen Rindern und suchen Sie nach einem Etikett. Geben Sie Skill Set ein. In diesem Fall werde ich meine Fähigkeiten ausprobieren. Das heißt, trocken. Humor positionierte uns mit Hilfe der Textformatierungswerkzeuge in die Mitte. Lassen Sie uns dies ein wenig in die Mitte des Bildschirmauswahlrahmens verschieben und es in ein hellgrau ändern , das die Größe von der Beschriftung auf 20 erhöht. Positionieren Sie es entsprechend. Ja, jetzt wählen wir alle diese drei. Andi, setzen Sie sie zusammen und drücken Sie Ault oder Option und erstellen Sie Duplikate aus der gleichen, die Sie in den Waffen bemerken können , die wir haben. Paginierung Imaginationen ermöglichen es dem Benutzer, auf eine andere Seite oder einen Abschnitt außerhalb der Website zu gehen . Nehmen wir an, Sie haben mehr als doppelt so viel für Fertigkeiten. Auf diese Weise kann der Benutzer durch die Fertigkeiten blättern, die Sie haben. Erfahren Sie mehr darüber, wie Sie diese hochinteraktiven Prototypen in meinem Perlen-Schreibkurs machen können. Gehen wir zurück zu Balsamico und fügen Sie die zwei Kreise und einige Formen hinzu, um die Paginierung zu bezeichnen , wählen Sie alle diese Gruppen aus und reduzieren Sie einfach die Größe ein wenig und richten Sie sie zu dissenter. Gehen wir nun zum Bach in Toolbar und suchen Sie nach Pfeil mit einem Kreis. Sind Klein ausgezeichnet? Bringen wir es in die Mitte. Das ist in ein paar Kreisen. Wir sind gewohnt, Größe zwei s. Gehen wir zurück zu der schnellen und suchen nach Kreis skizziert und bringen es. Teoh s auf Position es direkt neben dem anderen Kreis, der Option gesagt und erstellen Sie einen anderen . Und gehen wir zurück zur schnellen Werkzeugleiste und suchen nach einem anderen Pfeil, der auf die andere Seite zeigt. Fantastisch. Der gefüllte Kreis bezeichnet im Grunde den Benutzer, welche Seite er gerade sieht, und der ganze oder große Kreis bezeichnet die anderen Seiten, zu denen Benutzer innerhalb der Website navigieren können . 19. Wire-framing – Bildschirm 5 – Teil 1: Lassen Sie uns den Bildschirm duplizieren und alles andere löschen, außer dem Titel und einer kleinen Zeile aus Text. Ausgezeichnet. Wenn Sie die Website besuchen, können wir feststellen, dass es eine tabellarische Schnittstelle gibt. Dies ist wie eine Sortierfunktion, also gehen wir zurück zu Balsamico und suchen nach der U-Element-Schaltflächenleiste. Ziehen wir es nach oben direkt unterhalb der kleinen Textzeile. Lassen Sie uns zurück zu unserem Referenzrep Seite und Zedernüberschriften, alle Web-Design drucken ein APP-Design. Also lasst uns hierher zurückkommen und alte Rep Design Print Design AP entscheiden. Sie können feststellen, dass ich die Tabs trenne, indem Sie das Koma verwenden. Die Tastenleiste hatte standardmäßig nur drei Registerkarten, aber ich habe ein anderes Mal hinzugefügt. Mal sehen, ob es kommen wird. Ausgezeichnet. Um weitere Spalten hinzuzufügen, sollten Sie ein Kommazeichen direkt neben dem Element haben, in dem Sie trainiert sind. Also nach dem Druckdesign, hatte ich ein Komma und trat in Design, wodurch Balsamic verstanden, dass es eine zusätzliche Spalte braucht. Gehen wir zurück zu einer Portfolio-Website und Sie könnten feststellen, dass es eine Reihe von Bildern hier gibt , also gehen wir zurück zu unserer schnellen Werkzeugleiste und suchen Sie nach Bild jetzt halten Sie die Ault Optionstaste und duplizieren Sie diese, wodurch Erstellen eines Formulars aus einem großen lassen Sie uns Verbündeten in allen ist ein wenig in die Mitte und halten Sie Option wieder und ziehen Sie nach unten und erstellen Sie eine andere früher, die meisten ein Raster. Wählen Sie nun alle aus und erstellen Sie eine Gruppe. Herzlichen Glückwunsch, Ihr vollendeter Bildschirm fünf. 20. Wire-framing – Bildschirm 5 – Teil 2: Kommen wir zurück zum nächsten Grün. Sie können sehen, dass dieser Bildschirm besonders fehl am Platz ist, seine Unterstützung nicht in der Grippe. Aber dieser Bildschirm ist wie ein Call-to Action-Bildschirm. Stellen wir uns vor, der Besucher wird wirklich aufgeregt. sich all die Arbeit ansehen, die Sie geleistet haben und Sie wirklich kontaktieren möchten, sollten Sie ihm oder ihr die Bereitgestellte geben, dies zu tun. Die nächste mögliche Aktion für den Benutzer, nachdem er sich von einer Arbeit begeistert, sollte sein, Sie einzustellen oder zu kontaktieren. Und das ist, was diese Website versucht, mit dem Big Blue Hire me Button zu tun. Die Platzierung dieser großen blauen Taste ist perfekt, also gehen wir zurück zu Balsamico und versuchen, dies neu zu erstellen, die die vorherige sauber duplizieren und löschen Sie alle Elemente, die wir nicht brauchen. Lassen Sie uns auf die U I gehen, um Bar und Suche nach Untertiteln, die zieht die Mitte und die zurück zu einer Website gehen und kopieren Sie diesen Text. Doppelklicken Sie auf Befehl oder Steuerelement. Sei verarscht. Ich hoffe, Sie haben einen leichten Unterschied in unserer Website bemerkt. Sie können feststellen, dass es einen Zeilenumbruch gibt, dass IHS mich anheuern beginnt in einer anderen Spur , aber in Balsamic will es basted. Sie können feststellen, dass es in einer einzigen Zeile ist, Sie können es und unten reparieren. Es ist erstaunlich in dieser Hinsicht. Warum bist du gerade in die Leitung gegangen und musst hineingehen? Backslash sind und drücken Sie Enter und Sie könnten herausfinden, dass Balsamico verstanden hat, dass mich einstellen sollte von einer neuen Linie beginnen. Schlagen wir es in die Mitte und stellen sicher, dass alles aussieht. Also gehen wir zurück zum ersten Bildschirm und kopieren Sie diesen CV-Download-Button und bringen Sie ihn zurück hierher und fügen Sie ihn ein. Das ist bitte in der Mitte. Ausgezeichnet. Gehen wir nun zur Bildleiste und laden Sie ihn herunter. Gehen wir auf die schnelle Werkzeugleiste und suchen Sie nach Bild. Nun, das ist ziehen Sie es vollständig nach oben und platzieren Sie es direkt unter das höhere Ich. Aber herzlichen Glückwunsch. Sie haben Bildschirm 5.5 abgeschlossen, und es gibt nur einen letzten Bildschirm zu erobern, und dann werden wir mit dem Aufbau des Menüsystems 21. Wire-framing – Bildschirm 6: also lassen Sie den vorherigen Bildschirm duplizieren und entfernen Sie alle Inhalte. Jetzt werden Sie das Symbol verwenden, das wir erstellt haben. Also lassen Sie uns in die Bibliothek gehen und wählt Symbol und ziehen Titel in Text auf die U. S. Bildschirm. Sie können einzelne Elemente aus einem Symbol bearbeiten, genau wie Sie es bei Gruppen tun. Alles, was Sie tun müssen, ist Doppelklicken und den Textteil ein wenig neu ausrichten. Sie können die Quelle auch aus bearbeiten. Ein Symbol für die Änderungen, die Sie vornehmen, würde in allen vorherigen Symbolen widerspiegeln. Das hier. Stellen Sie sicher, dass Sie nicht doppelt arbeiten müssen, gehen Sie zum Bach in der Symbolleiste und suchen Sie nach dem Texteingabebereich und geben Sie relevante Felder da wir ein Kontaktformular erstellen. Lassen Sie uns die Felder duplizieren, die wir erstellt haben, gehen Sie zum letzten Teil und hatte Texteingabe-Bereich und ziehen Sie es nach oben, um die Nachricht Teil des Kontaktformulars zu erstellen . Obwohl auf der Website können Sie sehen, dass die Namen von den Schnickschnack sind über das Textfeld aus empfehlen Sie den Feldnamen innerhalb des Textfeldes selbst auf lassen Sie es verschwinden wenn der Benutzer beginnt, etwas Text in die gleiche einzugeben. Dies wird als Platzhaltertext bezeichnet. Lassen Sie uns die Polizei ältere Nachricht eingeben, weil das ein Nachrichtenbereich ist. Nein. Lassen Sie uns zurück auf die schnellere Symbolleiste gehen und eine Schaltfläche hinzufügen. Lassen Sie uns die Schaltfläche nach unten unter den relevanten Ehefrau-Rahmen des Textfelds ziehen und ein wenig nach oben verschoben und das ganze Feld richtig ausrichten. Das hat den Namen geändert zu kontaktieren, und wir haben unser Kontaktformular. 22. Wire-framing – Screen 6 Challenge: Jetzt, da Sie wissen, wie man erstaunliche Ehefrau-Frames baut, möchte ich, dass Sie den Bildschirm vervollständigen, indem Sie die entsprechenden Symbole und alle verbleibenden Inhalte einfügen. 23. Wire-framing - Screen 6 Wire-framing: Also lassen Sie uns Berlin, einen kleinen Titel Untertitel und ziehen Sie es nach oben und geben Sie den Text ein. Kontaktieren Sie mich Jetzt haben wir ein Standortsymbol, gefolgt von etwas Text, also lassen Sie uns einfach diesen Textstandort kopieren. Eine Karten-Markierung. Ausgezeichnet. Lassen Sie uns einfach die Kartenmarkierung fallen und fügen Sie diesen Text direkt daneben ein. Wir haben ein Handy vorwärts durch ein paar Zahlen zeigen Kontaktieren Sie mich per Handy, obwohl ich sehr empfehlen. Setzen Sie Ihre Handynummer nicht auf eine gemeinfreie E-mail. Dies ist ein Umschlag geschlossen so und dann mit dem geschlossenen sollte auch das basiert ein Text wieder direkt neben dem Icon und einer Faxnummer. Oder lassen Sie uns den Vorteil des Zweifels eine Festnetznummer geben. Nein, es ist Fax und fügen Sie die Nummern direkt daneben ein. Sie können herausfinden, dass wir einen wichtigen Teil vom Bildschirm vermissen, und das ist das Essen der Sektion. Die Fuß-Dissektion ist ein Ort, der verschiedene Daten, wie Ihre Social-Media-Links, wenn Sie möchten oder haben können, zum Beispiel, oder andere Websites können Ihre letzten Beiträge haben. Es ist in der Regel der letzte Abschnitt auf der Rückseite. Lassen Sie uns schnell eine Fußzeile mit verknüpft hinzufügen und kopieren Sie einfach diesen Text für die Buchstaben entsperrt den Browser und leicht verlängert Lassen Sie uns ein Rechteck nehmen. Platzieren Sie es genau richtig. Hier ist und lasst uns den Text. Tauschen Sie es ein wenig zu fett, aber um es in die Mitte zu nehmen und entlang Excellent ziehen, haben Sie alle Bildschirme abgeschlossen. Jetzt gehen wir zu dem Mann, der Abschnitt. 24. Was ist ein Hamburger-Menü?: wir werden das Hamburger-Menü bauen, sagte Duplizieren Sie das erste Grün und erstellen Sie in Ihrem verheddert Lassen Sie uns ein wenig herauszoomen und ziehen Sie es aus, so dass es einen Abschnitt vom Bildschirm füllt, Kopf über zu den Tech-Mitarbeiter und ziehen Sie das Listenelement auf ihre Gewirrtheit. Was ist Gehen Sie zu unserer Demo-Website und öffnen Sie sich zu Rechteck und sehen Sie die Art und Weise diese Listenelemente haben wir. Willkommen bei mir. Berufliche Fähigkeiten. Setz dich zum Narren und kontaktiere. Also lasst uns eins nach dem anderen gehen und das bearbeiten. Willkommen bei mir Korea Skill. Voll Sie und Kontakt. Also lassen Sie uns bitte hier sitzen und es hochziehen. Sie können feststellen, dass die Lücken zwischen den Listenelementen nicht ausreichen, daher müssen wir dies erhöhen. Gehen wir also zurück zu unseren Listeneigenschaften und erhöhen Sie die Länge zwischen diesen Elementen. Ich denke, das ist gut, was wir brauchen, um die Größe ein wenig zu erhöhen. Also, das ist eine Erhöhung der Größe ein wenig 24 und erhöhen die Lücke zwischen den Elementen. Lassen Sie seine Traktoren ein Gewirr außerhalb dieser üppigen mit dem Bildschirm und das ist fügen Sie das Kreuzzeichen . Ausgezeichnet. Wir haben den Menüpunkt abgeschlossen. Jetzt müssen wir dies interaktiv machen 25. Anchor Punkte verstehen: wenn Sie von Upside booten, sind besonders eine einzelne Seite Website wie dieses Kernelement, das Sie wissen, nachdem Sie sich erinnern, wird Ankerpunkte genannt. Ankerpunkte sind im Grunde Anker, die den Benutzer zu einem bestimmten Abschnitt Ihrer Website leiten. zum Beispiel Lassen Sie michzum Beispielüber mich nachsehen. Es wird mich zum Abschnitt „Über mich“ bringen. Lassen Sie mich den Abschnitt Kontakt sehen. Es wird mich den ganzen Weg hinunter in die Front Act Abschnitt, weil wir erstellt haben oder besser gesagt, Designer hier hat Ankerpunkte für das gleiche erstellt. 26. So machst du den Wireframe interaktiv - Teil 1: Jetzt werden wir dies per Frame Interactive machen, ohne eine einzige Codezeile zu schreiben. Aber davor müssen wir sicherstellen, dass für sehr wichtige Artikel. Und das heißt, wir müssen unsere Bildschirme umbenennen. Also lasst uns dies schnell umbenennen, um Über mich willkommen zu heißen. Cardia Curry sind ein Fertigkeiten Port Folio Kontakt und benennen Sie den vorherigen Bildschirm Fragen Sie alle zu Lassen Sie uns diese löschen. Der letzte Bildschirm, den wir nicht brauchen, und kommen Sie zurück zum Menüpunkt und erstellen Sie unsere Verknüpfungen. Also willkommen ist, um auf den Willkommensbildschirm Über mich zu gehen. Geht zu gehen, um die über mich Bildschirm Karriere geht auf den Karriere-Bildschirm zu gehen. Die Fähigkeit wird auf den Skill-Bildschirm gehen. Ah, das ist ein Zungen-Twister-Portfolio geht auf den Portfolio-Bildschirm Kontakt geht auf den Kontaktbildschirm zu gehen. Nein, lassen Sie uns dieses Projekt sehen und lassen Sie uns es im Vollbildmodus sehen. Jetzt wollen wir sehen, wie interaktiv dieses Gewehr M iss. Ja, wir haben zurück zum Karriere-Bildschirm gegangen ist einfach zurück, das heißt, gehen Sie auf den Kontaktbildschirm und wir sind auf den Kontaktbildschirm gekommen. Lassen Sie uns jetzt zurück, lassen Sie mich sehen, ob ich zum Geschicklichkeitsbildschirm gehen kann. Ausgezeichnet. Also haben wir die Bildschirme grundsätzlich auf die Bavis-Elemente abgebildet und ein interaktives Erlebnis geschaffen , ohne eine einzige Zeile des Gerichts zu schreiben. Aufregend, nicht wahr? Lassen Sie uns dies also für Frame noch interaktiver machen, indem wir es ermöglichen, neue Links zu öffnen. Gehen wir also zum Facebook-Symbol hier und wählen Sie aus. Fügen Sie einen neuen Think oder Link zu einer Webadresse hinzu. Lassen Sie mich zu den Notizen gehen und kopieren Sie den Link zu meinen Facebook-Gruppen, die Lone Log genannt wird. Von Sadat. Du wirst in der Lage sein, viele neue Sachen zu lernen, wenn du der Gruppe beigetreten bist. Erhalten Sie Zugang zu Aktionen und Coupons, Trainer. Also gehen wir zurück zum Balsamico. Und dabei gehen wir zurück zu Twitter. Das ist richtig. Ein nackt und kopieren Sie meinen Twitter-Handle, der behandelt hat oder com Schrägstrich. Also, das ist 89. Kopieren Sie dies und wie die Möglichkeit, hier mit New rep verknüpft hinzuzufügen. Atriss hat es gegründet. Kommen wir zurück zur Lincoln-Ikone. Kopieren Sie mein Längenprofil. Sie können feststellen, dass es ein schmales mit dem Facebook-Profil gab, weil es hier kein Symbol gab , das einen Hyperlink anzeigt. Also gehen wir zurück zu den Notizen. Kopieren Sie mein Facebook-Profil erneut. Kommen Sie zurück zu den Gebühren. Buch-Symbol, Wählen Sie Link zur Rep. Adresse aus. Ich habe OK getroffen, genau. es nie repariert. Und gehen wir zurück zum letzten, was mein Instagram ist, aber nur Instagram dot com Schrägstrich Log. Also hier werden Sie eine Menge von Videos und Fotos, sowie eine Minute Videos von verschiedenen Design-Techniken. Ausgezeichnet. Gehen wir zurück zu der Ansicht politische rektale Vollbildpräsentation und sehen, ob wir diese Social Media Icons zu tun bekommen , was wir wollen, dass sie tun. Das sind offene Social-Media-Seiten. Also lasst uns Facebook probieren. Ausgezeichnet. Stimmt, Ritter. Fantastisch. Das versucht Lincoln. Ausgezeichnet. Versuchen wir es mit Instagram. Ausgezeichnet. So können Sie auch diese Schaltfläche verknüpfen, um tatsächlich einen CV-Download für ein wenig out of the box zu aktivieren , denken Sie können tatsächlich einen Drahtrahmen selbst als Ihren Lebenslauf verwenden 27. WireFrameInteractive erstellen – Teil 2: Wenn Sie darauf geachtet haben, könnten Sie es schaffen, dass uns ein wichtiger Aspekt fehlt. Und dieser Aspekt besteht darin, Interaktivität zwischen den Bildschirmen aufzubauen, so dass wir Interaktivität zwischen dem Bildschirm schnell mit einer Pfeilmarkierung aufbauen können , was ziemlich einfach ist. Also lasst uns den Winkel runter nehmen. Eins. Kopieren Sie dies für alle Bildschirme. Dinge kopieren und fügen Sie einfach den Aramark, auch. All die verschiedenen Bildschirme, die wir so entworfen haben, dass wir MAWR-Interaktivität im Drahtrahmen aufbauen können. Wir brauchen das nicht, weil hier der Bildschirm endet. Also müssen wir einen Pfeil haben, der uns nach oben führt. Lassen Sie uns einfach diesen Pfeil kopieren, so dass wir in der Lage sein, eine andere Ebene der Interaktivität hinzuzufügen, dass IHS den Bildschirm nach oben zwei auf den anderen Bildschirmen, auch. Fantastisch. Ich war es einfach schnell retten. Und nun lasst uns die Interaktivität aufbauen. Das geht also zum Abschnitt „Über mich“. Der Abschnitt über mich geht zum Karrierebereich. Die Karriereabteilung geht auf die Karriere ein Abschnitt und Korea. Ein Abschnitt geht nach unten zum Skill-Abschnitt. Diskettenabschnitt geht runter zum Boot, der Ihre Sektion voll ist. Der Portfolio-Abschnitt wird zu den Kult-Aktionen Grün gehen und der Kultur-Action-Bildschirm wird nach unten zum Kontaktbildschirm gehen und der Kontaktbildschirm wird den ganzen Weg zurück gehen . Teoh der Willkommensbildschirm, dass der Kult-Action-Bildschirm geht zurück zum vorherigen Abschnitt, der die Portfolio-Abschnitt ist. Als wir Arrow abgeholt haben, geht das Portfolio zurück zum Fähigkeitsbereich. Die Fähigkeitsabschnitte von Pyro gehen zurück in die Karriere. Ein Abschnitt, der Korea eine geht zurück Teoh die Korea Sektion und die Cardio-Sektion wird zurückgehen Teoh über mich Abschnitt über mich Abschnitt Geht es zurück zu der Begrüßungsabteilung ? Es mag ein bisschen verwirrend jetzt scheinen, aber lassen Sie uns sehen, wie diese Bücher, wenn wir in Vollbild-Präsentationsmodus gehen Ausgezeichnet, schön. Wir haben eine zusammenhängende, interaktive Erfahrung. Äh, huh. Wir haben hier eine Straßensperre getroffen. Dieser Abschnitt geht auf das Portfolio der Sektion. Der Portfolioabschnitt geht zurück zum Skill-Abschnitt, anstatt zur Kulturaktion zurückzukehren . Jetzt schauen wir uns einfach die Verknüpfungen an. Ausgezeichnet. Aber gehen wir zurück zur Ansicht. Wir haben viele Elemente darauf durch die Freeman-Richtlinie gemacht. Es ist noch ein kleines Element übrig und Sie haben es erraten. Das ist die Hamburger-Speisekarte. Bevor wir das tun, müssen wir alles Wichtige tun, und das ist die Umbenennung unserer Bildschirme. Also, das hat dies umbenannt Mai neue heraus auf ausgewählten Hamburger-Menü hier und verknüpfen Sie es unserem Menü aus Bildschirm, so dass Sie die rote Farbe Symbol machen können, die Verknüpfung anzeigt. Jetzt wissen wir, dass beim Klicken auf diesen Hamburger, Manu, wir öffnen das Hamburger-Menü und tun, wie verschiedene Hyperlinks zum Radius verankert vor dem Red Beach. Jetzt müssen wir das Kreuzzeichen hier aktivieren, damit wir zum vorherigen Bildschirm zurückkehren können und das wird der Willkommensbildschirm sein. Ich hatte eine Rettung. Gehen wir zurück zur Präsentationsansicht und sehen Sie unsere Verknüpfungen beim Klick auf den Hamburger. Manu, wir holen das Hamburger Menü raus und ich klicke auf das Kreuz grün. Wir gehen zurück zum Hauptmenü Herzlichen Glückwunsch. Sie haben diese Frau wirklich aus interaktiv gemacht, ohne auch nur eine einzige Codezeile zu schreiben, und damit werden Sie in der Lage sein, dies Ihren Investoren zu demonstrieren. Ihre Projektleiter, Ihre Eltern, Ihre Freunde, Ihre Kunden, wer und sie werden in der Lage sein, ein umfassendes Gefühl zu bekommen. Was genau du versuchst, für sie oder für dich selbst zu bauen. Aber es gibt noch einen letzten Trick in meinem Ärmel. Lassen Sie mich es Ihnen im nächsten Video zeigen. 28. So machst du den WireFrame Look Professional: Sie haben Ihre Frau Rahmen mit großen Ebenen der Interaktivität abgeschlossen. Sie müssen dies Ihrem Management-Kunden präsentieren, oder sogar Investoren würden es tun. Kannst du das Gleiche präsentieren? Ich sagte, weiß es einfach. Obwohl Bottom Acquise-Rahmen wie Skizzen sein sollen, kann es definitiv einen Anzug anziehen Um direkte Leute zum Eigenschaftenfenster zu blenden und Projektdetails auszuwählen. Es ist immer eine gute Praxis, eine kleine Beschreibung von Ihrem Projekt zu geben. Geben wir ein paar Worte ein. Meine erstaunlichen Stiefel Folio Trauben, richtig? Schreckliche Teoh Rencher Kapitalisten. Das ist sehr nützlich. Wenn Sie diese Frau Frame an jemand anderen senden und eine kurze Lektüre über das Projekt, Informationen bringen sie zu beschleunigen, was genau sie jetzt sehen. Kopf nach unten zum Hautbereich und ändern Sie es in Drahtrahmen. Heute haben Sie eine skizzenhafte umgewandelt, Cartoony, Ebene aus Draht Rahmen Zehe professionelle suchen erstaunlich entworfen rechten Rahmen, und Sie haben dies getan. Wenn Sie auf die Bühne gekommen sind, müssen Sie stolz auf sich selbst sein. Jetzt sind Sie bereit, Ihre Fähigkeiten der Welt zeigen und zeigen, wie Amazing Website zu bauen . Lassen Sie uns einen Blick aus diesem schönen professionellen Ebene Drahtrahmen in der Vollbild-Präsentationsansicht Sieht toll aus. Ich sage dir, ich bin wirklich, wirklich glücklich mit und heiß. Komm und du solltest es auch sein. Dies ist bereit, auf einem riesigen Projektor für jeden angezeigt werden, den Sie wollen. Hervorragende Arbeit. Herzlichen Glückwunsch. 29. Interaktive Wireframes in die Welt teilen: jetzt, da wir Ihren gesamten Drahtrahmen fertiggestellt haben, möchten Sie mit der Welt teilen. Aber nicht jeder hat balsamische Malcolm's auf dem System installiert, und der beste Weg, Markups für Rezensionen für Diskussionen für Vorschläge und Feedback zu teilen , ist, den Markt als PDF zu exportieren. Gehen wir also zum Projektfenster und klicken Sie auf Export in PDF. Jetzt haben wir alle Markup alle Bildschirme ausgewählt, die für Ihre ing auf dem Bildschirm optimiert sind, und Sie können auch verschiedene Anpassungen hinzufügen. Sie können auch Markup-Notizen einschließen die Verknüpfungshinweise anzeigen, damit sie verstehen können, welche Links zu welchem . Also lassen Sie uns das aktivieren und klicken Sie auf Export to Pdf, und ich werde es auf meinen Desktop nehmen. Lassen Sie uns warten, bis es die Bildschirme exportiert. Ausgezeichnet. Werfen wir einen Blick auf unser Schicksal. Ich werde Auto Acrobat Reader verwenden, weil das ist, was die meisten Leute haben werden und lassen Sie uns in den Vollbildmodus gehen. Sie können feststellen, dass die Verknüpfungen deutlich über die Verknüpfungen erwähnt sind bereits hervorgehoben und auch aktiv sind. Schön. Die Person ist in der Lage, mit einem PDF zu interagieren. Er braucht nicht einmal Bart Magenmarkt. Ausgezeichnet. Und wie gesagt, wenn Sie aus der Box denken möchten, können Sie tatsächlich den CV-Download-Button programmieren, um Ihren Lebenslauf A herunterzuladen 30. Ein Recap: was für eine erstaunliche Reise es bisher gewesen ist. Lassen Sie uns schnell zusammenfassen, was alles, was Sie gelernt haben, Sie gelernt haben, was Y-Frames sind und warum sie wichtig sind . Sie haben gelernt, die Bedürfnisse des Kunden zu verstehen und darauf basierend Drahtrahmen zu bauen. Mit einer eingehenden Fallstudie, Sie verstanden, was ich eine Geldbörse Besitzer und wie Sie sie zu fertigen. Sie haben eine Portfolio-Website analysiert und verstanden, warum Drahtrahmen wichtig sind. Wenn Sie einen auf Ihrem Zimmer bauen, haben Sie Balsamico heruntergeladen und verstanden die verschiedenen zwei Balsamico-Balsamico-Balsamico-Balsamico-Bars und welche Funktionen sie auf den Tisch bringen. Sie haben schöne Drahtrahmen aus den müden Bildschirmen der Portfolio-Website erstellt und im Prozess gelernt, wo Ihre Hocker und Techniken wie Gruppen, Symbole, etc. Sie haben Interaktivität zwischen den Bildschirmen und den U-Elementen erstellt, ohne auch nur einen einzigen Zeilenausgangscode zu schreiben . Eugene ist die Haut aus der gesamten Frau Rahmen, um es professionell und Fleisch aussehen zu lassen. Schließlich haben Sie gelernt, wie Sie interaktive PDFs erstellen, um Ihre Ehezimmer mit Freunden, Investoren und Kunden zu teilen . Das war bisher eine erstaunliche Reise, und ich genieße es, euch beizubringen. Ich freue mich darauf, hier wieder in verschiedenen Kursen und diversen weiteren Möglichkeiten in Zukunftzu unterrichten Zukunft