Wireframing für Website-Design für Anfänger:innen

1. Einführung: begrüßen die Drahtrahmen für Designer in dieser Klasse, werden Sie die Grundlagen des Drahtrahmens auf lernen. Wir werden analoge, Low-Fi- und Hi-Fi-Stile erforschen . Sie werden in der Lage sein, auf Papier, Bleistift und Skizzenbücher, gepostete Notizen, Illustrator-Foto-Shop und Online-Web-Browser-Acts zu arbeiten Bleistift und Skizzenbücher, gepostete Notizen, gepostete Notizen, . Sie werden die vielfältigen Werkzeuge sehen, die Sie verwenden können und wie diese Art der Arbeit tatsächlich profitieren und Ihre Design-Fähigkeiten verbessern kann . Drahtrahmen ermöglicht es Ihnen, mit der Skelettstruktur Ihres Website-Designs umzugehen, anstatt sich von den Details direkt von der Fledermaus, die ich weiß, manchmal sind wir passend zu dio. Also in dieser Klasse werden Sie lernen, die Grundlagen, wie Abschleppdraht Rahmen, wann Sie es verwenden und wie es wie üblich mit meiner Klasse zu verwenden, Ich möchte, dass Sie erkunden und Spaß haben 2. Course: In Ordnung, lassen Sie uns einen Blick auf die Vorräte werfen, die Sie für die Drahteinrahmung benötigen. Für eine Art von Drahtrahmen brauchen Sie nur eine Art Papier. Dies könnte einfach sein, wissen Sie, grundlegende Drawling Tablet Computer Papier, Post es Notizen und eine Art Stift Bleistift-Marker. Ein Schreibgerät. Wenn Sie mehr als ein digitaler Worker sind, können Sie den Computer auch für diese Klasse verwenden. Entweder Illustrator oder Photoshopped funktionieren perfekt dafür. Wenn Sie im Design mögen, können Sie das in einem Swell ersetzen, aber ich werde Illustrator und Foto dafür einkaufen zeigen, und ich habe Vorlagen für jeden von ihnen für Sie zur Verfügung gestellt, auch für dieses Klassenprojekt. Sie können Online-Drahtrahmen-Sites wie Besame IQ verwenden. Sie funktionieren großartig. Der hier hat eine einmonatige Verhandlung. Einige von ihnen sind frei. Einige von ihnen sind nicht eso. einfach heraus, welche Sie experimentieren in welchem, wenn es Ihre wirtschaftlichen Bedürfnisse und sehen, was sie dio. Aber die freien sind ziemlich anständig. Also würde ich sagen, Start dort. Alles klar, lasst uns weitermachen und loslegen 3. Das Projekt!: Alles in Ordnung. Zeit für das Klassenprojekt. In diesem Projekt werden Sie Websites Drahtrahmen entwerfen. Nun, das könnte eine sein, die du gerade erfunden hast. Dies könnte Ihre eigene Website sein. Oder es könnte eine Neugestaltung einer Website sein, die Sie glauben, braucht nur ein wenig Liebe dafür . Wir werden drei seiner Seiten entwerfen. Auf diese Weise können wir ihre Konsistenz und ihre Einheit auf allen drei Seiten sehen. Was Sie tun werden, ist grün die wählen, welchen Stil Sie am meisten interessiert scheinen. Magst du das Analogon? Skizzieren Sie es. Schnappen Sie sich Ihr Papier, greifen Sie Ihre Bleistifte, greifen Sie Ihr Skizzenbuch und sehen Sie, wie Ihre Seiten aussehen können. Mit, dass Sie mögen posten es Notizen. Geh drauf. Sie haben eine Tafel oder ein Whiteboard? Skizzieren Sie es da drauf. Gefällt Ihnen das Lo FI System? Wir machen uns noch nicht ganz Sorgen um zu viele der Gitter. Dann versuchen Sie Illustrator oder Fotoshop und sehen, was dort passiert. Vielleicht warst du daran interessiert, die Hälfte zu lernen. Bauen Sie es auf dem Online-Browser-Stil an, dass, Entdecken Sie ein paar von denen und sehen Sie, welche funktioniert am besten für Sie. Wie üblich ist die Erkundung immer der Schlüssel. Vielleicht wissen Sie in diesem Stadium nicht einmal, was Sie mögen. Wenn das der Fall ist, versuchen Sie ein bisschen von allen. Denken Sie daran, dass wir nicht von den Farben verdrängt werden. Wir werden nicht von dem Typ verdrängt. Wir werden nicht von endlichen Details verdrängt. Wir machen uns nur Sorgen um das Skelettsystem. Und wie interagiert dieses Framework und überträgt die Nachricht auf Ihrer Seite? Also haben wir keinen richtigen Text geschrieben, wir werden sie benutzen. Lauren, es ist drin. Wenn Sie es ziehen, könnte es nur die Box mit einigen Kritzeleien darin sein. Also mach dir keine Sorgen um Fleisch und Kartoffeln, wenn du dir Gedanken darüber machst, was der Teller eigentlich ist. Also dafür, entspannen und Spaß haben. Experimentieren Sie und sehen Sie, welcher Stil am besten für Sie passt. Wann immer Sie Ihre drei Seiten vollständig haben und welchen Stil Sie interessiert haben, gehen Sie weiter und laden Sie sie in das Klassenprojekt hoch. Sie können auch einige der Schritte anzeigen, die Sie dafür unternommen haben. Ich finde immer, dass das Sehen des Prozesses immer hilft, und was ist großartig mit Fähigkeiten teilen ist, wenn Sie sehen, was jeder tut, erhalten Sie eine breitere Vorstellung von den Optionen, die da draußen so teilen. Teilen Sie Ihr Projekt und teilen Sie Ihren Prozess. Und dann können wir in den folgenden Kursprojekten Ihre Arbeit sehen und sehen, wie Ihre Entwürfe aussehen. Wie immer, viel Spaß. 4. Was ist ein Wireframe?: In Ordnung. Was genau ist der Grund, warum du einrahmst? Vielleicht stellen Sie eine gute Frage, und deshalb sind wir hier. Drahtrahmen ist ein erstaunliches Werkzeug für das Design. Und für Webdesigner bringt es uns die Zeit, die wir brauchen, um unsere Gedanken nachzudenken und unseren Aktionsplan sozusagen herauszufinden bringt es uns die Zeit, die wir brauchen, um unsere Gedanken nachzudenken und unseren Aktionsplan sozusagen herauszufinden. Ich weiß, dass es diese Versuchung gibt, die du immer kennst, es muss dieses enge Gesicht sein. Es muss diese Farbe sein, die ich gerne haben würde, um X, y und Z alle, die es zur Seite schieben. Wir machen uns keine Sorgen um die Details zu diesem hier. Wir machen uns Sorgen um die Funktionalität. Betrachten Sie es also als eine Blaupause. Wenn Sie also ein Haus bauen, werden Sie wahrscheinlich nicht direkt reinspringen und sagen: Das ist der Ball. Das ist die andere Mauer dort. Oh, es wird rosa und gelbe Unterschrift sein. Oh, es wird wunderschön sein. Mach dir keine Sorgen um die Details. Sie sich keine Sorgen über die tatsächliche Struktur, lassen Sie es einfach ziemlich gut aussehen, das ist nicht, wie es funktioniert. Sie müssen die Blaupausen haben, damit Sie wissen, wie man funktioniert und alles abbildet. Wie groß ist seine Größe? Was ist sein Inhalt , usw. Anstatt sich Gedanken über die Farbe des Hauses zu machen, wir uns Sorgen um das eigentliche Fundament und die Unterkonstruktion davon. Das ist also unser Skelettsystem. Wir müssen uns letztendlich darauf aufbauen. Aber das ist der erste Teil. Dies ist der Teil, der ihm seine Wirbelsäule und seine Struktur geben wird. Betrachten Sie es also als das, was ich liebevoll nennen werde, ist die schicke Skizze. Sie könnten mit ein paar Thumbnail Lee Doodles beginnen, nur um Ihre ersten Ideen in Gang zu bringen. Aber um in den eigentlichen Drahtrahmen in der Bühne zu gelangen, werden Sie mit den grundlegenden Details arbeiten, so dass Sie die Struktur um diese herum bauen können . Also keine Farbe, kein Typ. Ich werde das viel sagen, also mach dir keine Sorgen um die Details. Sorgen Sie sich um die Muschel. Also dafür gibt es ein paar Möglichkeiten, wie Sie natürlich den analogen Stil machen können , wo Sie einfach auf Drawl sitzen, unraftete heraus. Sie können es tun, die lo fi, die Photoshopped Illustrator Skizzen Ups und ebenso können Sie gehen Hi fi, das ist ein wenig schicker für Illustrator und Photoshopped. Dies ist, wo wir es mehr mit Spalten und Rastern zu tun haben und auch. Sie sind Online-Werkzeuge für Drahtrahmen. Ich werde jedes dieser Kapitel in ihren eigenen Abschnitten in den nächsten Kapiteln eingehend . Aber jetzt denken Sie an Drahtrahmen als diese Skizze die erste Skizze, die Ihnen erlauben wird, zu sehen, wie alles fließen wird? Was ist mit was verbunden? Wohin gehst du hin? Wie soll die Aussicht durch das Baustellenhaus manipuliert werden? Seine Strömung? Ist es einfach zu bedienen? Ist es offensichtlich, ein intuitives Design? Oder gibt es Schluckauf? Dies ist die Stufe, die Sie vorarbeiten können, damit, wenn Sie tatsächlich in den kodierenden Teil davon gelangen , diese Schluckauf zum größten Teil bereits ausgearbeitet werden sollten. Anstatt skizzierten Code zu gehen, ist es vielleicht schön, einen Schritt dazwischen zu haben, was der Drahtrahmen ist. Dafür werden wir eine Vielzahl von Optionen und Arbeitsstil erkunden, so dass Sie diejenige finden können, die für Sie richtig ist. 5. Arten von Wireframes: Werfen wir einen Blick auf die verschiedenen Arten von Drahtrahmenoptionen, die Sie haben. Einer von ihnen wird zu Ihrem Besten passen. Und wie immer, wenn du meine anderen Klassen absolviert hast, weißt du, was ich als Nächstes sagen werde. Wie immer experimentieren, versuchen Sie jeden von ihnen und finden Sie heraus, welche tatsächlich das Beste für Sie und Ihren Arbeitsstil sinken . Die erste 1, mit der wir uns beschäftigen werden, ist das Analogon für Analog. Sie können eine Vielzahl von Materialien dafür verwenden, und das alles wird Hand auf Stil sein, so dass Sie mit dem klassischen Papier und Bleistift gehen können . Es wird nicht viel einfacher als das. Ich genieße es immer, mit einigen Post-It-Notizen oder den Haftnotizen zu beginnen, so dass ich irgendwie neu arrangieren und Dinge mischen kann . Kreidetafeln funktionieren großartig. Sie können auch Papierausschnitte verwenden, die ähnlich wie die Haftnotizen. Manche Leute verwenden gerne Schablonen. Dies ist mehr für, wenn Sie in die U. S. U X Drahtrahmen so mobiles Design, etc. auch auf. Weißes Boarding, das ist, weißt du, wie das Chop Boarding. Aber du weißt schon, es ist ein bisschen interaktiver, als du mit deinem Team daran arbeiten kannst. Eso wird sich auf Ihren Arbeitsstil, das Papier und den Bleistift verlassen . In der Regel werden Sie das sein. So niedrig, klebrige Notizen das hacken in Richtung der weißen Bretter, usw.. Das ist wahrscheinlich mehr Teamarbeit nach analog, wir werden uns mit Low Fi auf beschäftigen. Das ist nur ein wenig, ich werde sagen, schickere Version von Analog. Aber wir halten es immer noch locker, rau und etwas gestisch dafür. Ah, du kannst Illustrator benutzen. Sie können auch Fotoshop dafür verwenden. Und wenn Sie oder Ihr Unternehmen Skizze hat, können Sie auch Skizze für diese Klasse verwenden. Ich werde nur Demo Ing Illustrator und Foto dafür einkaufen. Uh, wenn du das in der eher lofi Art von Sicht machst, wirst du nicht mit Gittern dran hängen. Sie ordnen nur die Elemente der Seite an und sehen, wie sie funktionieren. Uh, wenn wir in die High Five kommen, dann haben Sie angefangen, sich mit den Griffen zu beschäftigen und jetzt Zeit für die hohe Strafe, während Sie sich umrahmen. Äh, das hier. Du gehst, Teoh, verarbeite dich mit den Gittern. Du wirst ein modulares System haben, von dem du es abstützen wirst. Ich habe eine Vorlage für Sie eine Version gebaut und Illustrator One wird im Fotoshop sein , so dass Sie die hi fi ausprobieren möchten. Die Shell wird bereits für Sie existieren. Also, was wir mit Kurs mit hi, fi zu tun haben werden . Ich habe die beiden einfach weggegeben. Wir werden es immer noch durch Illustrator und Fotoshop zu tun haben. Uh, Sie können auch einige Online-Webkarten dafür verwenden. Ähm und ich werde das auch demonstrieren. In einem Abschnitt, der es wert ist, auf diese Weise zu kommen, können Sie sehen, wie sicher Sie wissen, dass APS für diese Arbeit im Vergleich zum Erstellen und Photoshopped einen Illustrator als auch. Dies bezahlte für Drahtrahmen-Software dafür. Ich würde empfehlen, wenn Sie wirklich anfangen würden, in das zu gehen. Das ist, wenn Sie sich dafür verpflichten. Ach, eins. Schöne Sache, die ich hinzufügen werde, um Adobe Creative Cloud gerade aus der Beta gestartet, das x d, das ist ein Ich werde es eher ein Mock up als ein Draht Framing nennen, weil Sie mehr mit den Details zu tun haben das hier. Aber wenn Sie bereits die kreative Cloud haben, verfolgen Sie diese App, so dass Sie irgendwie sehen können, wie Sie das für grobe Mock Ups als auch verwenden könnten . Aber für das hi fi, werden wir uns mit ein wenig mehr Gitterkonstruktion beschäftigen und die Elemente an der Stelle herausbekommen, durch die Details , wie Farbschriftarten usw. In Ordnung, wann haben Sie eigentlich Drahtrahmen oder, wissen Sie, wann verwenden Sie Ihre Drahtrahmen? Äh, in der Regel, wenn ich den Workflow durchmachen wenn ich den Workflow durchmachenwürde. Weißt du, du würdest mit einer kurzen Skizze anfangen und dann wirst du daran denken, dass das dieser Plan ist? Du baust ein Haus, aber erst musst du diese Blaupause haben. Du würdest nicht einfach reinspringen, weil viele Mauern waren und zusammenpassen und alles krumm wäre . Wir müssen es rauschen, damit wir wissen, wo die Türen in den Fußzeilen usw. sind . Bevor wir es bauen können, bevor wir uns entscheiden können, wissen Sie, ob es ein Haus war, bevor wir uns entscheiden, welche Farbe es ist, welcher Teppich? Also weißt du, wie sollen wir malen, tramp? Sie müssen herausfinden,wissen Sie, wissen Sie, wo es eigentlich irgendwas wissen wird, wie funktioniert das Skelettgerüst? Äh, auch, etwas zu beachten ist, ist einfach eine gute Teamkommunikation zu haben. Wenn Sie in einem Team arbeiten, ähm, wenn jeder den Entwurf sieht, wissen Sie, dass Sie Teile neu anordnen können, Sie können herausfinden, was wohin geht, und es ist immer noch in dieser flexiblen Phase. Sobald Sie in die Code-Phase gekommen sind, werden Sie ein bisschen mehr eingesperrt sein. Wenn Sie also nicht alleine arbeiten, wissen Sie, wenn Sie alleine arbeiten, dann sind es nur Sie und Ihre Klientin auf der Bühne. Sie müssen sich nicht so viel um die Kommunikation mit einem Team sorgen. Es gibt immer noch ein Team dennoch, aber mit einem Team von Paaren Leute, wissen Sie, dass diese Phase eine super hilfreich, weil es alle auf der gleichen Seite und erinnern Sie sich an alle Dinge und Design-Kommunikation wird entscheidend sein 6. Wireframe: Wie bei allen Dingen und Design, müssen wir herausfinden, welches System am besten für Sie funktioniert, das wird diejenige sein, die am effizientesten ist und das, das Ihnen die besten Ergebnisse liefert. Wir müssen also herausfinden, welches System am besten funktioniert und experimentieren, damit wir das herausfinden können . Am grundlegendsten wäre es, einfach mit einer einfachen Skizze zu beginnen. Lass deine Idee einfach rausreißen. Sie können sich das wie eine Ziehungsklasse vorstellen. Es würde als die gestische Drawling betrachtet werden. Von dort aus könntest du einfach voran gehen und in den Code springen. Dies wäre die einfachste und unkomplizierteste Version der Idee, die für Ihre Arbeit generiert . Dieser Schritt wäre, mit dem tatsächlichen Drahtrahmen zu beginnen, ob e high def für low def, und dann beginnen Sie, einige dieser visuellen Elemente zu spülen, nur um ein wenig mehr Konsistenz zu geben . Was sind die Bilder? Ob der Text, was ist die Kopfzeilen? Sobald Sie das herausgefunden haben, können Sie voran gehen und in den Codierteil Ihres Projekts springen. In Ordnung, für unsere dritte Version hast du es erraten. Wir fangen mit dieser Skizze an. Vielleicht fügen Sie auch eine Liste zu dieser Liste hinzu. Erstellen könnte eine gute Möglichkeit sein, Ideen für Ihre Projekte zu generieren. Danach hüpfen Sie ins Schlepptau. Drahtrahmen, High Def Low. Def. So oder so, je nachdem, was für Sie am besten funktioniert, und fügen Sie dann einige dieser visuellen Elemente hinzu. Was sind die Bilder? Was sind die Textteile für Ihre Website? Sobald du das ein bisschen rausgespült hast, hast du es erraten. Sie können einspringen und diesen Code starten. Ich wollte nur kurz auf die visuellen Elemente der Luft eingehen, die Details, die ins Spiel kommen werden, wenn wir anfangen, ein wenig mehr in unseren Prozess einzubeziehen. Eines dieser Details, auf die wir besonders achten müssen, wenn wir zur detailorientierten Phase kommen , ist die Typografie der Website. Was werden Sie für den Header verwenden? Was wirst du für die Leiche benutzen, usw.? Haben Sie Webschriftarten, die Sie aufspüren müssen? Wie bindet das wieder in das Branding? Diese kleinen Details werden ins Spiel kommen, nachdem Ihr Drahtrahmen beendet ist, sowie nicht durch die Farbe verdrängt werden. Die Farbe wird auch nach dem Drahtrahmen kommen. Werden Sie dafür einen Farbschema-Generator verwenden? Verfügen sie bereits über eine bereits bestehende Markenfarbe, mit der sie ihre Marke bereits verknüpfen ? Und welche Art von Bildern werden Sie für Ihre Website zu tun haben, oder sie werden größer sein? Werden sie in einer Art Blawg-Stil mehr quadriert? Sie wissen es? Binden sie in den Artikel oder wissen sie, dass sie mit anderen Quellen verknüpft sind? Diese Luft, die Details, an die Sie denken müssen, wenn es um die Bilder geht? Vielleicht ein Teil der Bilder ist, dass Sie sich damit beschäftigen müssen, all Ihre Tasten und Radios und all die Bits und Bobs, die in das geht. Ich werde das einfach in den netten kleinen Stapel stecken, weißt du? Wird es ein Video haben? Haben Sie Social-Media-Links, etc.? Die Kontakte, die Abonnenten. Das wird in diesen kleinen, du weißt schon, Topf mit Miscellany gehen du weißt schon, . Ich Also die Details werden Sie sich Sorgen machen, aber keine Sorge über die Art von endlichen Details von ihnen, denn mit Drahtrahmen, Sie sind nur auf der Suche nach den nackten Knochen. Du suchst nach dem Skelett. Nachdem Sie diese Phase durchgekommen sind, können Sie anfangen, mit Ihrem Design pingelig zu werden. 7. Design: bevor wir mit einem Designprojekt beginnen, haben wir ein paar Überlegungen, auf die wir achten müssen, bevor wir hineinspringen. Woran Sie denken müssen, ist das wer was? Warum und wie von Ihrem Designprojekt. Die 1. 1 der Wer Wer ist Ihre Zielgruppe? Wer wird auf diese Website kommen und wer ist der Fokus? Der nächste Bereich, auf den man sich konzentrieren muss, ist das was? Was ist das Ziel der Website und was werden Sie tun, um diese Aufgabe zu erfüllen? Das Warum ist ein Element auf der Seite, die wir nicht zufällig entwerfen und wir werden Elemente nicht nur zum Kichern herunterwerfen. Warum? Warum ist es auf der Seite? Warum lüften Sie es an dieser Stelle verankern? Welchen Zweck dient es? Wir liefern es mit Ihrer Entscheidung, diesen Abschnitt ermöglicht es Ihnen, diesen Teil herauszufinden. Und zu guter Letzt, wie sind alle Elemente auf Ihrer Seite und auf Ihrer Website? Vereinheitlicht. Wie willst du alles zusammenbinden? Wie werden Sie diese Elemente und Prinzipien nutzen? Was ist das Endziel der Einheit? Dies ist die Zeit, diesen Teil zu sezieren und herauszufinden, wie Sie diese Aufgabetatsächlich erledigen diese Aufgabe 8. Element: sobald Sie das Wer, was, warum und wie herausgefunden haben. Jetzt ist es an der Zeit, noch tiefer zu graben. Also, was sind die Überlegungen vor Ort, an die Sie zuerst denken müssen? Wie sieht deine Navigation aus? Was ist deine Kopfzeile? Was ist deine Fußzeile? Was ist der eigentliche Inhalt auf der Seite? Woher kommt es? Und welche Fristen müssen Sie für diese Bilder festlegen? Stellen Sie die Bilder zur Verfügung? Stellt Ihr Kunde die Bilder bereit? Willst du eine Sidebar haben? Eine Suche? Weit. Was ist mit interaktiven Elementen? Also, wenn du das bis zu deinem Drahtrahmen zerlegst, behalte diese Teile auch im Hinterkopf und überlege, wo sie sein werden? Wie werden sie sich miteinander verbinden und wie werden sie auf der gesamten Website einheitlich sein ? Also, wenn Sie ganz sicher waren, mit welchen Elementen Sie zuerst umgehen mussten, ist dies eine gute Starterliste für Sie. Für diejenigen von Ihnen, die neu in Webdesign verwendet sind, ist dies ein Kerl, um herauszufinden, welchen Teil Sie tun müssen, um Ihre gesamte 9. Lo Fi (Analog): Alles klar. Zeit für den Einstieg in diesen Abschnitt. Wir beschäftigen uns mit dem, was ich das Analogon nenne. Also das Papier, die Post, es notiert die Marker. Was auch immer Sie Hände haben, die Sie verwenden können, Sie können die Kreidetafeln verwenden und Sie können die weißen Bretter verwenden. Wenn sie es sind,stehen Sie für meine Demo zur Verfügung. Wenn sie es sind, Ich werde mich nur mit der Zeitung beschäftigen, weil sie hier vor uns ist. In Ordnung, also nehmen wir meinen praktischen Dandy Sharpie Marker, damit es leichter zu sehen ist. Aber du kannst deine Bleistifte haben. Sie können Themenmarkierungen, die Flare-Marker haben. Alles, was ein Zeichen macht, wird den Job erledigen. Also typischerweise alles, was sich um die Welt dreht, neigt Drawling dazu, Menschen zu erschrecken. Also, was wir tun müssen, ist etwas von dieser Art von Mythos wegzunehmen. Wenn Sie eine Skizze machen, Ihre Skizzen basieren nicht auf dem Konzept der Perfektion. Woran du arbeiten wirst, ist es nur damit umzugehen, von der Idee von hier auf hier zu bekommen . Also mach dir keine Sorgen darüber, dass alles perfekt und aufgereiht ist. Denk dran, deshalb machst du es. Wir bringen nur die Ideen runter, um zu sehen, ob sie fließen und ob sie arbeiten werden . Also für die 1. 1 in Drawling, können Sie tun, was man die Gestenskizze nennt. Also Geste Drawling ist nur, weißt du, du machst dir nicht unbedingt Sorgen darüber, dass alles nett, ordentlich und perfekt ist. Du machst dir Sorgen, die Idee runter zu bringen und nur diesen harten Moment in der Zeit einzufangen. Wenn dies also unsere drei Seiten sind, würde dies sagen, zum Beispiel die Homepage, über die sie im Kontakt gemacht haben. Beginnen wir also mit dem, was ich liebevoll als die drei Basics bezeichnen werde. Also, wenn Sie für Ihr Klassenprojekt, wenn wir unsere drei Seiten machen und dann nicht sicher sind, an welchen Sie arbeiten sollen, tun Sie das Haus über in Kontakt, weil sie ziemlich Standard und stabil auf jeder Webseite Homepage sind . Das ist diejenige, die sie zuerst sehen werden, das wird genau der Fledermaus sein. Also für unseren in diesem Fall, gestischen Stil, vielleicht werde ich meine Kopfzeile an der Spitze haben, und ich werde die Scrolling-Geschichten hier haben. Vielleicht ein Bild und eine andere Geschichte, und es gäbe eine kleine Scrollleiste und dann hätten wir vielleicht Social-Media-Links hier Videos . Oder lassen Sie uns einfach ein Video hier machen, weil wir etwas bewerben oder was haben Sie? Und das fühlt sich ziemlich gut an, weil du so bist, okay, ich weiß, wo du weißt. Ich denke, das muss in das,weißt du, weißt du, vielleicht in unsere Speisekarte. Vielleicht stellen wir unser Menü direkt unter unsere Kopfleiste. Und so wissen wir für unsere Abschnittsseite, dass wir diesen Teil haben, der zu übersetzen muss. Also unser Bild-Header und dann unser Menü. Okay, für die ungefähr, wir haben irgendwie die gleiche Haltung Echo gewonnen, weil wir aussehen wollten, als wäre es einheitlich dafür. Ich werde den Text die Geschichte des Über erzählen lassen. Und vielleicht wäre das ein Foto. Hier ist ein schönes Foto. Und vielleicht ist dies ein Bild ihrer Produkte, was auch immer es sein würde. Also bin ich nicht genau. Ich bin nicht, weißt du, mit meiner Marke absichtlich. Ich mache nur die Idee runter, damit ich es sehen kann, weißt du. Okay, vielleicht mag ich nicht, wie diese Fotos Luft funktionieren. Weißt du was? Wenn ich stattdessen drehe, oder ich mache diesen Teil zwei Spalte. Es ist also ein bisschen einfacher zu lesen. Es gibt Ihnen die Möglichkeit, es zu sehen und damit zu beginnen, es zu umgehen. Und Sie bekommen für die Kontaktseite. Da ist unser großes Banner, und da ist unsere Speisekarte. Und dann für die Kontaktseite wird wahrscheinlich eine Überschrift haben. Eins hier. Wir freuen uns, Ihnen zu helfen. Und dann haben wir unsere Eintrittsfelder. Also Name, Adresse, wissen Sie, überprüfen Sie. Ja. Wenn Sie in einem Submit-Button abonnieren wollen und dann vielleicht dafür werde ich es einfach leer lassen , weil wir einige der weißen, die Seite sehen wollen , also ist es nicht zu überwältigend mit dem Design, das Sie sofort bemerken werden. Es gibt etwas, worüber ich mir keine Sorgen mache. Keine Sorge um die Farbe. mir egal, was dort passiert. Wir sind noch nicht in dieser Phase. Ähm, ich mache mir keine Sorgen um die Details. Wie sieht dieser Header eigentlich aus? Was machen meine No-Knöpfe, Airmen. Du siehst aus und ich mache mir keine Sorgen um meine Schriften. Wir machen die Details nicht. Ich dachte nur in einem schnellen, skelettalen Rahmen darüber nach. Sichtweise. Ordnung, das ist also unser gestischer Stil, der ihn zur Seite wirft. Und wenn Sie etwas genauer werden wollen, können Sie unseren Freund das Lineal schnappen. Jetzt habe ich auch Pauspapiere und Zeichentabletten. Ich mag die Zehenarbeit auch auf Transparentpapier, weil es Ihnen die Möglichkeit gibt, Schichten darüber zu machen. Also, wenn Sie versuchen, Transparentpapier, das ist auch wirklich gut, und es ist nützlich. Ordnung, also für diesen nächsten Teil, lasst uns etwas genauer werden. Das wird also für diejenigen von Ihnen sein, die Sie kennen, wie ein bisschen mehr Ofen anspruchsvoller Stil, wenn Sie arbeiten. Und ich gehe nur Teoh, mache eine Schachtel, sie wird als meine Seite dienen. Ich werde nur eine auf jeder Seite, also werde ich eine nette kleine Marke dio, damit ich im Grunde mein Framework das gleiche bekommen könnte, das wäre das gleiche auf allen von ihnen, und ich werde nur dio vielleicht einen Zoll über. Also, auf diese Weise habe ich Gleichförmigkeit. Also für diesen, werde ich nur mit einer Demo, aber es wird das gleiche für alle drei Seiten sein. Also, wann immer Sie diese eine Muschel haben, ein Königreich aufzustellen. Fotokopieren Sie es, wenn Sie wollen oder bauen Sie die Box in Fotoshop sind illustriert und drucken Sie sie einfach aus. Und verwenden Sie es einfach als Vorlage ID Guide, dass dies auch gut funktioniert. Also bauen Sie diese Linien für die Box. Und dafür werden wir ein bisschen mehr bekommen,wissen Sie, wissen Sie, anspruchsvoll gegen Sie wissen, nur den rauen Freihandstil der Geste. Dieser hier, wir werden mehr Art Zeichner sein, wie bei unserem Arbeitsstil. Alles klar, übertrage es hierher. In Ordnung. Also, jetzt haben wir unsere Show, und das geht auf diese richtige Homepage, damit ich den Überblick über Sie behalten kann, wo ich damit bin. Tun Sie es für so viele, viele Seiten, die Sie mit ihm suchen. Ich werde bei den gleichen Konzepten bleiben, die Sie in diesem,wissen Sie, verschiedenen Arbeitsstilen sehen können wissen Sie, . Aber für diesen hier, lasst uns das verstehen. Wir werden nur die Bildkopfzeile an der Spitze irgendeiner Art haben. Also lasst uns weitermachen und das bauen. Also werde ich meinen holen, und ich glaube, ich gehe nur halb Zentimeter. Es tut mir leid, Viertel Greenwich und dann 3/4 ein Zoll, nur um ein schönes Verhältnis zu halten und wieder Echo mit dem, was wir da drüben gemacht haben. Und ich werde nur für diesen einen, habe es Bogen von Seite zu Seite. So wird die Seite zu füllen, wenn ich meine Design-Arbeit zu tun. Nun, wann immer ich Hut-Raum sage, also was auch immer mein Banner ist oder was auch immer hier passiert wie der Name der Homepage oder der Name der Website, was hast du? Es muss nicht unbedingt all das grafisch aufnehmen. Es wird nur in diesem Container leben. Das ist der Raum, in dem es seine Heimat dafür macht. Wir wollen zeigen, dass dies ein Bild von irgendeiner Art ist. Also müssen wir ein X über machen. Das X zeigt sich und Sie werden bemerken. Dies ist auch ein Illustrator und im Design, Wann immer wir mit einer Bildbox arbeiten, hat es dieses X durch es, es zeigt, dass der Container etwas hält, und dass etwas, in diesem Fall, ein Bild. Also, von unserem anderen, dann hatten wir unsere Speisekarte, und ich werde auch eine Zeile dafür machen. Nun, das sollte genug sein. Und dann würde das Menü natürlich natürlich auf jeder unserer Seiten konsistent bleiben. Und weißt du, du kannst diesen Teil einschattieren, wenn du willst, weil es dem ziemlich nahe kommt. Oder Sie können Ihre Ex machen. Einige Leute hier werden die Farben ändern. Deswegen habe ich die Koptiken raus. auch Das wirdauchan Ihnen liegen. Sie können, wissen Sie, vielleicht Navigationen Luft wird eine Farbe sein. Bilder werden ein anderes sein und Texas ein anderes, also wird es davon abhängen, mit welchem System Sie arbeiten. Ich werde es einfach ausfüllen, denn Zeit ist hier die Essenz. Aber auch hier hängt es von Ihrem Arbeitsstil ab. Okay, also wissen wir, dass das in der Speisekarte und auf unserer anderen Seite sein wird. Was wir hatten, war unsere Überschrift eins und ich werde nur die Ecke meines Lineals für diesen Teil benutzen . Alles klar, hier ist unsere Schlagzeile. Einer davon ist vielleicht, dass dies eine Blawg-Seite sein wird. Also für unsere Blawg, wissen Sie, wir wollen, dass unsere Artikel der Führer auf unserer Seite für unsere Zuschauer, für Publikum, für Leser sind. Also für dies kann aus dieser Art sein haben meine, denn für unsere höhere wissen wir, H ist der höchste. Es brauchen wir eine wählen Sie die nächste. Also weiter und so weiter eso dann auf diese Weise weiß ich für diesen Raum, der sein wird, was auch immer die Überschrift ist, und dann werden wir unseren tatsächlichen Artikel haben. Also lasst uns das hier drinnen entwerfen. Alles klar, geh weiter und erinnere dich daran, dass diese unsere Art von Scrollen sein würde. Also ich gehe nur Teoh machen es aussehen, als würde es von dem bluten, was die Falte der Webseite betrachtet werden würde . Die Falte bedeutet wie eine Zeitung, in der man sie umkippt. Aber in diesem Fall scrollen Sie die erste durch. Dann blättern Sie die zweite durch, um den Rest davon zu nehmen. Und ich werde das nur für Zeit freigeben, und das wäre unsere Bildlaufleiste. Da gehen wir. Also für Text, Sie haben ein paar verschiedene Optionen mit diesem, Sie können dio ein anderer stand hier unten die Sortierung kritzelnden Linien, wie Sie in Comics für Cartoons sehen würden , so dass sieht aus, als ob es die Linie impliziert, für Sie können einfach tun gerade Linien , um zu implizieren, dass der Text dort sein würde. Und ich denke, wir haben beschlossen, die beiden Spalten für diese hier zu versuchen. Also wird unser Container zwei Textspalten haben. Also für meine, ich werde nur die Straight machen und es wiederholen. Eins. Die zweite Spalte. Wir machen uns keine Sorgen um die Details. Wir wissen von der Farbe. Wir machen uns keine Sorgen um den Typ, aber wir wollen sehen, wie das fließen wird? Und dann werde ich nur die einen Bild-Dollar einlegen, die wir hatten. Wir hatten hier drüben ein Video, also lasst uns voran gehen und das in rauen. Und Sie können dafür geriebenes Papier verwenden. Auch das funktioniert großartig dafür. Auf diese Weise können Sie alles, was Sie wissen, ein bisschen gerader bekommen, als das, was ich mehr damit beschäftige . Dieser Teil, dieser Teil des Spiels und genau wie zuvor, mit dem, was auch immer von unserem Bild Header passiert, werden wir das X so machen, dass das X wird Bild oder Video Platzierung zeigen. Was haben Sie also für diesen, wenn wir eine Schachtel machen, die ein Bild von irgendeiner Art darin hat. Es ist die Box und Sie machen Ihre Ex, wenn es Text kritzeln liniert oder nur gerade Linien. Also dafür, weißt du, Marker, Papier, alles, was dir gefällt. Ich habe sogar meine Lieblings-gelben Notizblöcke, mit denen ich gerne auch arbeite, so dass, wann immer ich arbeite, also sagen wir, ich werde einfach diese wieder ausdrücken. Gleiche Regale. Da ist unsere Kopfzeile. Da ist unsere Speisekarte, und ich werde einfach darüber kritzeln, weil ich mir die Zeit für diese Demo nicht nehmen werde, um das ganze Detail zu machen. So gibt es unser Video oder Überschrift eins und dann unser aktueller Artikel mit unseren zwei Textspalten . Also, was ist schön daran, wenn Sie gerade wie ein Skizzenbuch oder einen Notizblock arbeiten? Dann kannst du anfangen, Notizen wie Okay zu machen, also vielleicht wird Unit One ein YouTube-Video auf diesem wird der Blawg sein. Blawg postet Artikel, und sie werden chronologisch sein, usw. So können Sie chronologisch. Tut mir leid, chronologisch. Da gehen wir. Dann können wir anfangen, Notizen zu machen und es auf diese nächste Art von Detailebene zu bauen. Also haben wir die Schale und dann können wir anfangen, dich zu verfolgen, woran wir denken . Also können wir anfangen zu sagen, okay, vielleicht für den Hintergrund, wissen Sie, sie wollen ihre Der Client will die Hex-Code-Nummer des Kunden. Was auch immer es für die Farbe im Hintergrund ist. diese Weise können Sie mit dem Ausfüllen dieser Details beginnen, ohne in die Details der Skizze zu gelangen. Und dann kann jeder es sehen, wenn man in einem Team arbeitet und seine Bits und Bobs hinzufügt . , Ein anderes System,das gut zu arbeiten ist, ist Posten es Notizen. So kleben. Notizen sind wirklich nett dafür auch, weil Sie es in die Systeme aufteilen könnten, die Sie suchen. In Ordnung, also haben wir jetzt eine Homepage, legen Sie einfach eine Seite auf, damit wir sehen können und was dann? Wir müssen auf das Homepage-Menü gehen. Und dann, was auch immer auf der Speisekarte stehen und nur, wissen Sie, die über Kontaktartikel, Baby, ein Portfolio Links, ich weiß es nicht. Was auch immer. Was auch immer Ihr Projekt mit sich bringen wird. Sie können das auf Ihrem Beitrag schreiben es Hinweis. auch Lassen Sie es unsauchein wenig hinlegen, damit sie sich nicht überlappen. Schlagzeile eins. Das wäre also für den Hauptartikel. Was? Und dann können Sie beginnen, in Details wie, Was sind die Artikel, die Ihr Kunde suchen? Neu? Ich kann nicht einmal von jeder Offhand wie Urlaub Shopping Spar-Gutscheincodes, etc. denken . Setzen Sie den nächsten Beitrag es notieren Sie das YouTube-Video, über das wir reden, und dies könnte das eine Intro-Video gewesen sein, so dass Sie nicht genau wissen, welches es ist, und das wird neben hier gehen. Nun, wenn ich mit Post it notes arbeite, neige ich dazu, Zeh Arbeit an einer Wand zu mögen, so dass ich irgendwie alles auslegen und pflanzliche bewegliche Teile damit neu anordnen kann . Und dann ist auch jemand wie Nun, weißt du, ich mag das YouTube-Video, aber was ich denke, muss passieren, ist, dass es hier gehen muss, und der Artikel wird auf der anderen Seite sein, so dass Sie Dinge herummischen können und vielleicht eine lose Skizze danach machen. Sobald Sie alle beweglichen Teile als Gruppe herausgefunden haben. Vermutliche Notizen sind erstaunlich mit Gruppen. Ich habe immer Stapel von Post es Notizen in meinen Klassenzimmern. Und dann, wenn wir zu dieser Bühne kommen, nehmen Sie einfach einen ganzen Topf von ihnen und gehen Sie in die Stadt und mögen und hilft Ihnen herauszufinden, welche Teile Sie brauchen. Wie viele Artikel, Wo werden sie positioniert werden? Was geht in die Portfolio-Seite? Welche Bilder müssen Sie aufnehmen oder haben Sie bereits? So hilft es Ihnen, gepostet zu organisieren, dass System wirklich nett ist denn dann kann das Team zusammenarbeiten, und dann können Sie alles vor Ihnen angelegt sehen und nach Bedarf neu anordnen, so dass dieser wahrscheinlich zuerst kommen wird. Das ist mehr als ich sagen werde, diese Idee, die Phase der Erzeugung, welche Teile brauchen wir tatsächlich, und dann könnten Sie gehen und einfach an Skizze Teil davon arbeiten. Also, wenn Sie die Tafel oder die Whiteboard Methode verwenden, es wird nur abhängen, welche Sie an Sie wissen, dass Sie bereit sind in meinem Haus, in meinem Home-Office, Ich habe eine der Wände mit der Tafelfarbe gemalt und dann Wann immer ich arbeite, kann ich einfach sitzen und schreiben oder zeichnen, was immer ich brauche und es dann löschen, wenn die Projekte fertig sind und dann bei der Arbeit im Klassenzimmer, ich habe die weiße Tafel und die Tafel. So können die Schüler, je nachdem, mit welchem sie sich wohler fühlen, beide verwenden. Und viele unserer Projekte sind gruppenorientiert für das Webdesign. Das ist also viel einfacher, wenn sie an Teams arbeiten. Also, was ich empfehlen werde, ist, wie immer, welches, glaubst du, wird dir das Beste gefallen? welchem haben Sie bereits die Werkzeuge, mit denen Sie experimentieren können. Also fangen Sie dort an. Also, wenn Sie sich mit Skizzieren wohl fühlen, gehen Sie voran und skizzieren. Wenn Sie keine Neugier haben, was das White Board ist, und Sie wollen versuchen, Auflistung und Zeichnung auf ihren Versuch, dass auch, egal was Sie tun, was ich werde es empfehlen, machen Sie Fotos von was auch immer Prozess ist es, an dem Sie arbeiten und in unseren Klassenprojekten weiter unten teilen, damit wir sehen können, was Sie experimentiert haben. Und Sie können uns auch mitteilen, welcher Ihrer Meinung nach am besten funktioniert und mit welchem Sie in Zukunft für Ihre Projekte weitergehen könnten. So wie immer, teilen, damit wir sehen können, was los ist. Und dann können Sie auf diese Weise alle Methoden des analogen Drahtrahmens erkunden, damit Sie herausfinden können , welche für Sie und Ihre Arbeitseffizienz am besten geeignet ist. 10. Hallo Fi Wireframing mit Illustrator und Photoshop: Alles klar. Jetzt ist es an der Zeit, die hochdef Website Draht-Framing-Optionen zu erkunden. Und dafür werden wir in Illustrator Pop, und wir werden auch überprüfen Fotoshop auf. Und dafür habe ich dir Vorlagen gemacht, und sie werden in unserem Klassenprojektbereich sein. Also, wenn Sie eine vorbestehende Shell verwenden wollten, wird eine für Sie bereit sein. In Ordnung? So wird High Def ein bisschen mehr involviert sein als unser Low Def, wo wir versuchen, nur die Grundlagen zu bekommen, wissen Sie , herauszufinden. Aber wir werden unsere Spalten verwenden und mehr von einem Organisationssystem dafür verwenden, genau wie unsere analoge Zeit. Ich werde das gleiche Konzept verwenden, das wir dort gemacht haben. Also, das ist nicht umschreiben im Rad. In Ordnung, also für meinen, fangen wir mit unserem Header an. Ob das die Website ist, nenne ein Banner. Dies ist der Raum, wo die wichtigsten Informationen für Ihre Website tatsächlich gehen, um jetzt für diese , was ich werde empfehlen, ist ein System Ah, ziemlich früh zu bekommen . Ähnlich wie unser Analogon. Also ein Analogon, wir sprachen über unsere Marker. Vielleicht war eine Farbe, Sie wissen schon, Sie wissen schon, repräsentative Schlagzeilen. Einer würde der Typ sein, der man Bildboxen usw. sein würde . Du hattest also eine Art System dazu. Dasselbe hier, weißt du, was wäre dein System? Vielleicht will ich in diesem Fallkeinen Umriss. Vielleicht will ich in diesem Fall Ich möchte nur in der Lage sein, die Farbe der Box zu sehen. Und dann vielleicht meine Boxen, äh, vielleicht mache ich dunkelgraue Haare wie ein mittelständiges Grau. Und dann wären das meine Bild-Boxen. Und dann wird mein Typ ein anderer sein. Also werde ich sagen, diese Farbe wird unser Bild sein. Ich werde zurück zu meiner regulären Auswahl wechseln und wie wir es hatten. Waas Wir hatten unsere Speisekarte darunter, also werde ich nur kopieren, und ich werde es einfügen. Alles klar, Freie Transformation. Ich werde meinen Brief E schlagen und auf diese Weise könnte ich dich kennenlernen, die Skala etwas mehr proportional dazu und wieder, weißt du, wird das eine Bar sein? Die heiligen Kreuze sind links? Ist es richtig? Weißt du, vielleicht wird dein Naff, wenn du es machst, jetzt bleiben, ähm, also wenn das der Fall ist, dann spielen wir hier irgendwie damit herum, sehen, was gut aussieht, was fühlt sich gut auf der Seite für uns und für unser Design. Wir hatten eine Menge Kaffee und fügen ein Bild hier drüben ein, also lasst uns das an seiner Stelle holen und wir hatten ein anderes drunter. Ich lasse das kleine Stück einfach über den Boden gehen. Also mache ich mir keine Sorgen um dieses kleine Detail, denn es geht nur so ein bisschen vorbei . Also keine Sorge darüber. Ordnung, also gibt es unsere Bilder, und wenn wir unsere Jungs ausschalten wollen, damit wir sehen können, was passiert, dann haben wir das. Wir haben unsere Image-Boxen an Ort und Stelle. Jetzt müssen wir anfangen, über unseren Typ nachzudenken. Also werde ich die gleiche Menge Platz für den größten Teil hier nutzen, und dieser wird für unseren Typ sein, schieben Sie es nur ein wenig nach unten, so dass sie in der Ausrichtung sind. Wenn du hier etwas pingelig machen willst, kannst du es dir überlassen. In Ordnung. Und dann wollen wir nicht, dass dies die gleiche Farbe hat, denn das wird wirklich verwirrend. Also vielleicht für meinen Typ, werde ich ein bisschen ein Feuerzeug haben. Grau. Alles klar, also wird das mein H sein. Also wird die H, wie wir wissen, wie wir wissen,die höchste Form unserer Hierarchie sein, Größe weise, Größe weise, und dann wird unser Artikel oder Sub-Header dorthin gehen und dann unser Artikel, und dann bauen wir einfach weiter von hier aus. Also, dass waas das Bild, das auf unsere YouTube ging, also werde ich es nicht wirklich mit dieser Rasterlinie verbinden. Aber dann würde der nächste Artikel, den wir hatten, hier unten kommen, und dann hatten wir einen weiteren Artikel darunter. Und das Schöne an Fotoshop und Illustrator ist, dass Sie, wissen Sie, Ihre Konzepte ziemlich schnell mit diesen eso bauen können , dass Sie wissen, wohin sie gehen, direkt von der Fledermaus. Sie verkleinern nur ein wenig. Wahrscheinlich ist er jetzt, dass wir in gewissem Sinne arbeiten, direkt gegen den Rand. Vielleicht will ich das nicht, also werde ich all diese auswählen, und ich werde sie rüber schieben. Und auch, ich wollte Platz für unsere Scrollleiste haben, und das fühlt sich besser direkt an der Fledermaus. Das ist also unsere Spielzeit. Was räumlich gut aussieht. Wie ist die Aussicht? Wir werden schweben,wissen Sie, wissen Sie, was ist der Fluss für den Betrachter? Ähm, was macht es ihnen am einfachsten, durch zu navigieren? In Ordnung, für diese werde ich den Führer einfach wieder verstecken, damit wir sehen können, was los ist. Wir haben einen seltsamen Raum da in der Mitte. Also, was ich tun würde, ist ein Limit mehr Zeit zu verbringen, zwischen , wissen Sie, vielleicht statt dieser, würde ich wollen, um oben oben zu haben, oder diese eine würde unterteilt. Und vielleicht ist das ein Bild. Aber hier drüben wird ah, Live-Feed von unseren Instagrammen sein. Und so können die Menschen sehen, was unsere neueste Post waas. Ähm, dann wird das helfen, dass die Struktur direkt vom Fledermaus schon besser aussieht. also Bei Rastern sind diesalsodie Grundlagen. Was? Ich werde von jedem Design mit Gitter sagen. Also in diesem Fall die Spalten, aber es ist ein Gitter wie System. Es gibt uns diesen Sinn für Ordnung, und dadurch können wir tatsächlich den Tanz auf der Seite didieren und sehen, was strukturell für uns und unsere Zuschauer gut aussieht . Das gibt uns also die Spielzeit, die wir normalerweise brauchen, um herauszufinden, was los ist. Und wie können wir dies zu einer Website machen, die wirklich nett und nutzbar ist für diejenigen, die kommen, um unseren Illustrator besuchen, wenn Sie den hohen Tod oder Fotoshop machen, wir schauen auf drei Seiten. Dieser war also repräsentativ für unsere Homepage und ich würde weitermachen. Und wie ich schon sagte, dass der Kontakt und über die Standardwerte, wenn Sie nicht ganz sicher sind, welche von Ihnen gebaut werden sollen, nicht einmal Header so weit haben müssen . Um, spielen Sie einfach herum und sehen Sie, welche Räume am besten für Sie und die Website, die Sie im Sinn haben. Dies ist ein wirklich vereinfachtes Design. Sie können alle möglichen verrückt mit diesem hier machen, also spielen Sie mit Illustrator um, wenn Sie wollen, können Sie reingehen, und vielleicht ist es in ein paar Nomenklatur. Damit wir wissen, dass dies die Schlagzeile ist. Vielleicht könnten wir einen haben, der besagt, dass du den Artikel kennst, und ich werde diesen Oops einfach duplizieren. Nicht die falsche dupliziert. Und dann auf diese Weise,weißt du, wenn du später nach vorne schaust, besonders wenn wir hier drüben Änderungen hatten. Und dann auf diese Weise, weißt du, wenn du später nach vorne schaust, Das war nun unser Instagram-Feed. Ähm, was? Ja, ich glaube, ich werde das ändern. Ich werde das als das dunklere Grau behalten, da zu füttern. Und vielleicht ist das Werbung oder so etwas. Also werden wir hier Werbung setzen und das Top-YouTube-Intro. Auf diese Weise können wir uns erinnern, wo wir mit allem waren. Sie auch, in der wahren und unsere Speisekarte. Also für die High Def ein, können Sie ein wenig mehr Label Lee und Struktur orientiert, aber die Boxen werden uns eine Art Vorform geben, mit der wir beginnen. Macht es ein wenig einfacher für diese s o spielen mit ihm und sehen, was für Sie funktioniert. Und ich werde auch kurz reinkommen und dir zeigen, wie das aussieht und auch weiter shoppen . Bevor wir in Feder Shop springen, obwohl ich Ihnen ein paar Beispiele für einige Studentenprojekte zeigen wollte, die Sie eine Vorstellung davon bekommen könnten , wo dies für Ihre eigenen Projekte führen könnte. Jede von ihnen, die ich zeigen werde, dass wir mit einer unserer Methoden fertig sind. Diese 1. 1 war eigentlich im Begriff zu tun, dass bietet Tomic, die wir gehen, um mit unserem Online-Bereich zu bekommen. Uh, dieser hier hat eine Art Zeichner wie Aussehen. Diese auch wurde online mit Online-Drahtrahmen Tools getan, so dass Sie sehen können, können Sie eine große Vielfalt mit dem tatsächlichen Ergebnis und Ausgang erhalten . Damit hängt es von Ihrem Arbeitsstil ab. Also, wie üblich, stellen Sie sicher, dass Sie experimentieren und sehen, welche Ihnen am besten gefällt. Wir haben in Illustrator gearbeitet. Sie können sehen, dass Sie wissen, der hier hat die anderen Texaner. Wir zeigen Ihnen, wie Sie das als Nächstes tun, also gibt es Ihnen eine Vorstellung davon, wie es aussehen könnte, wenn es tatsächlich etwas auf der Seite hat . Und das ist für diesen hier. Dieser wurde in Fotoshops getan, dass dies geht, um uns in unsere Demo wieder Segway. Es benutzt den Füllungstext. Wir haben unsere Boxen, diese Schülerin, aber die Exes drauf, anstatt die tollen Out-Boxen zu benutzen , damit Sie sehen können, dass es eine Vielzahl von Möglichkeiten gibt, dies zu tun. Experimente sehen, welche am besten für Sie geeignet ist. Du bist, weißt du, farbcodierte Kisten gegangen. Möchten Sie Füllstoff, Text und Bilder verwenden, um das Übermaß zu sein? Finden Sie heraus, welche am besten für Sie geeignet ist. Also jetzt lasst uns in den Einfülltext springen und sehen, was wir in einem Fotoshop tun können. Alles klar, jetzt machen wir eine andere Version von Ah, hi fi. Ah, Drahtrahmen-Technik. Mit dieser Zeit gehen wir in einen Fotoshop. Aber zuerst möchte ich einige lernen ipsum Text. Also für das, geh weiter. Geben Sie Lauren Epsom ein und bei der ersten Suche werden Sie wahrscheinlich dasselbe auftauchen. Sie wollen die Lippen des Generators, gehen Sie vor und klicken Sie darauf, und scrollen Sie nur ein wenig nach unten. Sehen Lehre von C sagt, wie viele Absätze Sie wollen oder Wörter oder Bisse oder Listen, und wollen Sie, dass es mit der Lauren beginnen. Es ist, ähm, also werde ich sagen, dass zwei Absätze ausreichen sollten und dann weitergehen, generieren und dann auswählen und auf diese Weise kopieren. Es ist in Ihrem Kunstbrett für wann immer es mir leid tut, Nicht Ihre Kunst Bord Ihre Zwischenablage für wann immer Sie bereit sind, es zu verwenden. Alles klar, jetzt sind wir bereit, in den Fotoshop zu springen, genau wie ein Illustrator. Ich habe bereits eine Vorlage für Sie eingerichtet. Das hier ist 1200 mal tausende. Es ist nur eine etwas andere Größe. Auf diese Weise haben Sie verschiedene Möglichkeiten, mit denen Sie arbeiten können, so dass Sie auch sehen können, wie Ihr Design in verschiedenen Maßstäben funktioniert, oder? Es wird also im Grunde dasselbe sein. Ich werde den gleichen Stil verwenden, wie wir über getan haben in, ähm, ähm, sind analoge Version. Also lasst uns weitermachen und hier oben ein Mock bauen. Wir werden brauchen sind geformte Bauherren. Also werde ich mein Rechteck-Werkzeug packen und weitermachen, und das wird dieser Raum sein , dem wir unseren Namen übernehmen werden, oder wird es sein, du Wissen Sie, ein Bild wird zentriert sein. Wird es übrig bleiben? Ist es richtig? Wir sind uns nicht ganz sicher. Aber das ist der Behälter, in dem es live geht. Ich gehe die Zehe. Ändern Sie auch die Farbe. Gehen wir vielleicht mit einem Dunkelblau und das wird repräsentativ für, Weißt du, was auch immer Bilder wir benutzen werden, wird so blau sein. Ordnung, wir werden auch unsere Speisekarte brauchen, und wir haben das direkt unter dem Ort, wo unser Website-Name sein wird. Und dann ist es in allen von ihnen konsistent. Und so denken Sie daran, unsere drei Seiten für ein Projekt zu tun, ziemlich die Navigation und unser Website-Name an der Spitze wird eine stabile Position zu halten , weil wir wollen, um Einheit in unserem Design haben. Okay, also von dort, was wir brauchen, um zu dio ist herauszufinden, wo ich denke, dass wir unsere YouTube hatten, also lasst uns unser YouTube-Video reinstellen. Vielleicht wird es hier leben, und ich werde einfach zu meiner regulären Auswahl wechseln, und ich werde halten und einen Mac wollen. Ich werde meinen Wahlschlüssel benutzen. Ah, das könnte ein Feed für Instagram sein. So könnten wir auch unsere sozialen Medien hier drin haben. Äh, von hier aus, gehen wir weiter. Gehen Sie zurück in unser Rechteck-Werkzeug. Äh, vielleicht werde ich es für diesen einen kleinen Teil zerbrechen. Wir haben viel Platz. Also denke ich für diesen, was wir diotieren werden, ist unsere Schlagzeile eins, und ich werde die Farbe ändern. So sind blau würde unsere Bilder sein. Und machen wir es zu einem hellblauen Text auf diese Weise, es ist irgendwie ähnlich, aber auch ein bisschen anders. Ähm, dannwissen Sie, wissen Sie, unsere Schlagzeilen werden eine schöne Konsistenz durch sie haben und Sie werden in der Lage sein, den Unterschied zwischen den beiden zu sagen , die die Optionstaste gedrückt halten, weil die Luft Seite an Seite lesen Artikel und lassen Sie uns voran und machen Sie die Box für unseren Text. Also, das ist, wo der Container für unseren Text wird es über Beautiful duplizieren. Also bekommen wir unsere Artikel darin platziert. Ähm, vielleicht hier unten, werde ich nicht alles durchmachen, aber vielleicht werden wir da unten weitergehen und herausfinden, du weißt schon, , weil sie mehr sein werden. Artikel, Fotos, weißt du? Ist es nur die eine Seite, oder wir werden weiter scrollen. sind alles Dinge, an die du denken wirst, wenn du in diesem Designprozess bist . In Ordnung, also hatten wir unseren Fülltext, also lasst uns weitermachen. Ich werde meine Werkzeuge schnappen. Ich werde eine neue Ebene oben machen, also mache ich nichts davon, und es wird ein Textfeld erstellen, und ich werde meinen Lauren ipsum Text dort hineinlegen, damit wir sehen können, wie es aussieht, sobald der Text tatsächlich dort und ich werde es einfach duplizieren und diesen auch gemacht, äh, äh, wenn ich zurück durch meine Ebenen scrolle und ich unsere Guides ausgeschaltet habe und ich einfach eine einfache Box darüber machen werde . Auf diese Weise werden wir es sehen können. Also lasst uns einfach eine Füllung aus Weiß machen. Alles klar, da gehen wir. Auf diese Weise können wir irgendwie ein Gefühl bekommen, wohin es jetzt geht. Wir haben hier ein bisschen seltsam Platz, also gefällt mir das nicht, also würde ich das nicht herausfinden wollen. Die Textfelder selbst sehen eigentlich ziemlich anständig aus. So verwenden Sie nur Ihre Formen und Dumping in einigen Füllstoff Text, Sie bekommen eine Vorstellung davon, wie diese Website könnte für diejenigen, die sie besuchen, fühlen. Eso Wenn Sie sich mit Fotoshop wohl fühlen, versuchen Sie Abneigung und Fotoshop, wenn Sie möchten. Illustrator, gehen Sie weiter und erstellen Sie eine Version und Illustrator wie gewohnt, gehen Sie vor und speichern Sie Ihre Dateien und laden Sie diese J-Pegs in unser Klassenprojekt, damit wir sehen können woran Sie arbeiten. 11. Online-Optionen: sowie unseren Fotoshop und Illustrator-Optionen. Es gibt einige kostenlose Websites, die es Ihnen ermöglichen, Mock ups auf dort zu machen. Außerdem werde ich nur ein paar von ihnen durchblättern, damit du sie sehen kannst. Und dann, wenn du willst, probiere das Reittier aus. Sehen Sie, welche am besten für Sie funktioniert. Diese Luft, der Frost oder die kostenlosen Demos. Einige von ihnen werden Kosten haben, aber diejenigen, die ich zeigen werde, haben keine Kosten. Die 1. 1 der Show ist Mock Flow. Dieser ist auf dem Grundplan. Es gibt also natürlich einige Einschränkungen. Aber wenn du wolltest, hättest du dich von Hand zeichnen können. Ich Gurtband. Sehen Sie, die Bootstraps, Äpfel , APS etc., oder einfach nur Leerzeichen können davon abhängen, was Sie haben. Wenn du willst,geh einfach voran und starte mit einem und rufe einfach diesen einen Test an , damit wir sehen können,was passiert. Wenn du willst, geh einfach voran und starte mit einem und rufe einfach diesen einen Test an , damit wir sehen können, Nein, zum größten Teil, alle sind ah, intuitiv. Was du siehst, ist das, was du mit diesen bekommst. Also, wie immer, würde ich nur empfehlen, mit ihm herumzuspielen und zu sehen, , wie würde das für Sie funktionieren und Ihre Drahtrahmen, es würde speichern, durch das nächste Element springen. Vielleicht füge ich dort einen Knopf hinzu. Und was schön ist mit den vorexistierenden Elementen. Sie können, wissen Sie, einfach so herumspielen und sich nicht um die Build-Phase kümmern müssen, denn größtenteils wissen Sie, dass sie für Sie da sein werden. Lasst uns etwas Text schreiben und einfach damit herumspielen. Vielleicht wird das wie eine Galerie-Seite usw. sein. Also werde ich einfach in die Elemente eintauchen. Sie können sehen. Wir haben Browser-Frames, Text-Kreise, Bilder , Schaltflächen, Banner, Scrollbalken , die Optionsfelder, Klammern so weiter und so weiter. Verschiedene Seiten Hinzufügen Ihrer Bilder, können Sie Ihren Fluss sehen. , Und wie immer, spielen Sie herum und sehen Sie, wohin das alles Sie wieder hinführt. Das ist nur die Basisversion, in Ordnung. Unsere nächste Freebie Seite, die ich werde einfach irgendwie schnell durch diese Mock ups gehen. Ähm, und wieder, alle Links werden in unseren Blättern in unserem Klassenprojektbereich sein, auf diesem ist auch ein Freebie . So können Sie sehen, dass Sie neue Seiten Umrisse haben. Du könntest mit Vorlagen, Bildern , Symbolen usw. anfangen , Bildern , Symbolen , . Und es funktioniert ziemlich ähnlich wie die letzte. Sie können sehen, es hat die Kopfzeilen, die Beschriftungen, die Absätze, Schaltflächen, Schecks, Radios, Texte. Ich werde das nicht zeigen,wissen Sie, das wissen Sie, eigentliche funktionierende Detail. Aber nur, dass man sehen kann, welche Elemente dort drin existieren. Es gab jetzt einige gezeichnete Formelemente von Teilen, ähm, Brille, Drop-Downs, Knöpfe, viele und viele viele und viele Optionen, um aus diesem auch zu wählen. Und genau wie die letzte, spielen Sie einfach herum und sehen, was es tut. Alles klar, ein anderer ist „go spotingbird dot com“ und du wirst einen Trend bemerken. Es gibt zum größten Teil viele Ähnlichkeiten zwischen all diesen. Sie werden Ihren Arbeitsbereich und Ihre Drachen fallen, die Sie von der linken Seite s ziehen können , so dass Sie Ihre Seite in eine schöne Notwendigkeit Skizze zu bekommen, sozusagen. Es sind Knöpfe. Wir haben die Schaltflächen hier eingeschaltet, dann könnten Sie auf diese Weise einige der Elemente auf der Seite haben, damit Sie herausfinden können, wie sie alle miteinander verknüpft sind? - Ein anderer ist Drahtrahmen dot cc, und Sie können die kostenlose Version sehen. Du bekommst nur einen einzigen Seitendrahtrahmen, , aber du wirst dieselben Werkzeuge haben, die die anderen haben. Diese, die Sie zwischen mobilen Geräten für die regulären Browserfenster springen können. Und es wird nur abhängen. Was ist Ihr Projekt und was ist Ihr Projekt braucht? Also ist es schön, aber diese hier ist Sie können wählen und wählen. Du weißt, mit welcher Basis du anfangen willst. Von dort aus ist es so ziemlich der gleiche Spülung und Wiederholungsstil. Äh, weißt du, du hast deine Form kann Werkzeuge gewinnen. Äh, Sie haben Ihre Art Füllstoffe. Sie können entsprechend anpassen. Ich lasse alles für diese Demonstration in der Standardeinstellung. Sie können Ihre Bilder in. Sie können Ihre Knöpfe usw. setzen. Es hängt nur von Ihrem Arbeitsstil ab. Der nächste ist glitzy dot com. kannst du sofort von der Fledermaus erzählen. Wir haben bereits Ähnlichkeiten. Wissen Sie, wir haben verschiedene Formen in diesem Fall, so dass er Bauherren in die Beziehungen geformt. Grundlegende Formen. Ähm, sie werden funktionieren. Genau. Weißt du, das Gleiche. Das hier. Sie können wählen, ob es sich um eine Form oder ein Textfeld handelt. Oder Sie können ein Etikett darauf hinzufügen. Auch, äh, Sie die Größe neu, ähm, abhängig von Ihren Bedürfnissen. Das Schöne daran ist, dass es, äh, äh, die Linealführer mit seinen aufgenommenen sieht Art von klugen Jungs mit sich hat, und du wirst die gleiche Funktionalität haben, die du gewohnt bist. Wenn Sie mit der Kreativ-Suite vertraut sind, können Sie Ihre Duplikate machen. Sie können Ihre Kopien machen und einfügen. Es hat viele Befehle, die Sie verwenden und navigieren können. Um, also werde ich nur ein paar Kisten wiederholen, damit du diesen Prozess sehen kannst. Ich mag die Guides auf diesem. Und wie man hier mit ihnen arbeiten könnte, hat eine gute Anpassungsfähigkeit damit. Ähm, Sie können alle möglichen Werkzeuge, Formen, Container, Formulare, Schaltflächen, Radio sagen Formen, Container, Formulare, Schaltflächen, Schaltflächen, , Sie nennen es. Sie werden es haben. Die letzte, die ich zur Demo gehe, ist Freimaurer. Beides so sanftmütig. Mühe. Beide, Ähm, leiten Sie das weiter. Ich lasse es einfach so schnell, Pesthintergrund. Warum darüber reden? Denn in diesem Stadium findest du es heraus. Sie alle haben eine Art sich wiederholendes Muster. Dies wurde schön, weil es eine mehr Art von hat, oder Sie können ihm die Möglichkeit geben, bei einer skizzenhaften Art von Blick auf seine Es sieht mehr gestisch in der Hand gezeichnet, was eine schöne Art von Ästhetik mit ihm ist. Sie haben eine kostenlose Testversion von diesem, und dann haben sie auch für Version eso bezahlt. Das hier ist ein bisschen anders. Es ist nicht browserbasiert, wie die anderen. Diese, Sie müssen zuerst einen Download machen und dann öffnen Sie es wie normale Software. Aber ich glaube, es ist einen Monat kostenlose Testversion, und dann zahlen Sie monatlich, ähnlich wie die kreative Cloud. Also für diesen ist nur der Spaß, um zu spielen. Was so sicher ist, würde ich sagen, Gehen Sie voran und machen Sie die einmonatige Testversion, nur um zu sehen, wie es aussieht, und es hat viele Optionen damit. Jenseits nur, wissen Sie, die Webseite, die Sie oben sehen können, und alle Elemente, die sie haben Schaltflächen das Containerformular-Symbol , das, äh, ich bin, Sie arbeiten mit Markierungen Ups ? Und der Teil davon ist schön, dass Sie mit dem Team mit diesem kommunizieren können? Du könntest einen Kopf sehen, keine Diagramme , etc. Es gibt also viele Optionen und diese, die nicht in den anderen sind. Also, ähm, nutzen Sie die kostenlose einmonatige Testversion, damit Sie sehen können, was alles zu bieten hat . Und wenn das etwas ist, in das Sie einsteigen , halten Sie es auf dem Hinterbrenner mit Ihren Erinnerungen, damit Sie darauf zurückkommen können oder wenn Sie einem Team arbeiten und nach dieser Art von Lösung suchen, hat es eine Menge Optionen Zehe arbeiten mit im Vergleich zu den anderen. 12. Wireframe: Ich hoffe wirklich, Sie haben Ihre Erkundung in der analogen, die lo fi, die hohen fünf Versionen des Drahtrahmens genossen die lo fi, . Warum Framing könnte so ein großartiges Werkzeug für die Anfangsphasen Ihrer Website sein? Design wird Ihnen helfen, Ihre Gedanken zu organisieren. Sehen Sie, was Sie brauchen. Sieh mal, was du hast. Er sieht nicht, was du vermisst. Also nur mit einfachen Bleistift, Ihr Papier Post es Notizen, Fotoshop oder Illustrator. Sogar unsere Online-Tools Sie können ein Framework zu einer wirklich erfolgreichen Website bauen. Ich hoffe, Sie haben diesen Kurs genossen. Ich kann es kaum erwarten zu sehen, was Sie in den folgenden Projekten entworfen haben. Und wir sehen uns nächstes Mal. Tschüss.