Transkripte
1. Einführung: jeder. Der Bergbau ist Olia. Ich bin Designerin. Du bist UX Designer, den ich seit über 10 Jahren entwerfe. Ich hatte das Privileg, mit verschiedenen Unternehmen zusammenzuarbeiten, angefangen von kleinen lokalen
Unternehmenbis hin Unternehmen Multi-Milliarden-Dollar-Unternehmen. In dieser Klasse werde
ich mit einem leeren Schiefer beginnen und Ihnen zeigen, wie man eine persönliche Website entwirft und viele Designer machen es einfach aussehen, weil sie es seit einer Weile tun. Aber ich möchte Ihnen zeigen, wie einfach es ist, und ich möchte Ihnen Schritt für Schritt zeigen, wie ich es schaffe. Diese Klasse ist ideal für Anfänger und alle, die sich für Design interessieren, also hoffe ich, dass Sie Spaß haben. Lasst uns da reingehen.
2. Erste Schritte: Richtig. Also, bevor wir beginnen mit anti one zum Download Feige, MMA, Fig MMA ist kostenlos. Es funktioniert auf Mac unter Windows. Ich habe Figur Mark gewählt, weil es auf Mac und Windows funktioniert eso, dass ich Menschen nicht auf ein Betriebssystem
beschränken. Ich bin eigentlich neu, um mich selbst zu verstehen, also lerne ich, wie ich gehe, aber es ist sehr einfach, ihre einfach zu bedienen abholen. Wissen Sie, wenn Sie auf etwas stecken bleiben oder ein bestimmtes Werkzeug lernen möchten, sind
sie so, als ob Ressource Hilfezentrum entfernt ist, das ist alles. Das Zeug ist sehr nützlich. Normalerweise lade ich dort herunter. Wo ist sie? Ich lade normalerweise ihren Desktop herunter, obwohl Sie vermitteln, ist ein im Browser. Normalerweise benutze ich die Desktop-App sowieso, also, wissen
Sie, sobald wir Fig MMA geladen haben, können
wir sie öffnen. Also hier sind wir mit Abbildung meine offen. Ich habe ein neues Dokument offen hier ist gut auf. Du willst dich nur mit dem vertraut machen, was du vor dir hast. Also, weißt
du, wir haben einfach so wie deine Optionen und so. Hier haben wir die bewegte Skala. Wir haben Rahmen, liegt nur Ihre normalen weichen Werkzeuge, die Sie Teoh benötigen, um zu entwerfen. Im Grunde. Also, um loszulegen, werden
wir einen Rahmen machen. Ein Rahmen ist im Grunde ein Raum, in dem Sie Ihr Design machen werden, indem Sie Ihr Design erstellen, sobald Sie tatsächlich einen Rahmen ausgewählt haben. Wenn Sie also hier oben auf diese Schaltfläche klicken, können
Sie auf der rechten Seite verschiedene Größen auswählen. Es ist auf der rechten Seite, wissen
Sie, wir können wählen, Tablet-Desktop zu finden. Wir werden es gehen. Ich stoppe 14 40 von 10. 24. Und das ist es, was wir vor uns bekommen, wenn wir einen dieser Freunde wählen. Erste Dinge zuerst. Ich möchte ein Gitter erstellen, damit ich meine Inhalte grundsätzlich ausrichten kann. Alarm mein Design zu einem großen, das zu tun, wir gehen einfach hier, wo Sie Layout Raster auf der rechten Seite sehen. Drücke drauf und wir kriegen ein neues Ende. Aber wir wollen eigentlich nicht. Das ist aus dem Netz. Wir wollen Säulen. Also hier haben wir eine Reihe von Säulen. Jetzt werde ich meine Kolumnen 12 geben. Sagen Sie die Nummer 12 Ich
werde sagen, gehen tohave es zentriert, und ich werde jede Spalte eine Woche frei in 65 auf einer Rinne mit off 30 geben. Mit diesem Thema arbeite ich gerne. Weißt du, du kannst wählen, was du magst, aber das ist, was ich mag. Das ist es, was für mich funktioniert. Und das gibt mir im Grunde nur einen Salzinhaltsbereich, in dem ich arbeiten kann. Und ich habe 30 Pixel zwischen jeder Spalte, was ich auch mag, ich sollte ich drücken, geben Sie den Kerl. Also pixelt er zwischen jeder Spalte und gibt mir dennoch einen guten Abstand für meinen Inhalt. jedoch tatsächlich mit dem beginnen, Bevor wirjedoch tatsächlich mit dem beginnen,was wir heute entwerfen, ist eine gute Idee, einen
Drahtrahmen zu haben , eine Art Vorstellung davon, wie Sie eine Idee entwerfen möchten, wie die Seite aussehen sollte. Also habe ich hier schnell einen Drahtrahmen gemacht, den Sie sehen können, weil wir eine sehr einfache
persönliche Website machen . Weißt du, ich habe eine Art Nickerchen oben mit den Logo-Navigationslinks. Ich habe eine Beschreibung der Überschrift des Profilbilds. Dann habe ich, wie, ein Service-Abschnitt Portfolio Abschnitt und dann ein Monteur, wo ich werde mich haben, um mehr kurze Beschreibung Kontaktknöpfe, Also ja, sehr schnell. Stellen Sie das zusammen, ich habe normalerweise eine gute Idee über. Ich fange in meinem Kopf an. Ich mache normalerweise keine Drahtrahmen, aber wenn Drahtrahmen Ihnen helfen, tun
Sie es bitte. Mit einem Drahtrahmen im Grunde nur illustrieren Wir werden entwerfen, bevor Sie
wirklich anfangen zu entwerfen. Die High-Fidelity-Version kommt wirklich helfen. Es kann einfach sortieren Sie Ihre weichen Gedanken und stellen Sie sicher, dass Sie etwas auf dem Papier haben. Das war's also für diesen hier. Und der nächste wird es. Eigentlich begann
es mit einem Design und nahm eine Frau für ihn in ein High-Fidelity-Design.
3. Nav und Hero: so willkommen zurück. Jetzt, da wir tatsächlich mit dem Design beginnen, gehen
wir zurück zu unserem Drahtrahmen und schauen uns an, womit wir arbeiten. Also lassen Sie uns mit der Kopfzeile auf Dis off Überschrift Abschnitt der Helden hier beginnen. Also, was ich normalerweise mochte, ist ich, weil dies offensichtlich in meinem Protest ist. Mein Design, weißt
du, ist das, was ich gerne mache. Du musst ihm nicht genau folgen. Aber was ich gerne mache, ist, dass ich ein karten-basiertes Design habe, das ich gerne ziemlich viel benutze, also werden wir tatsächlich dem Hintergrund eine Farbe geben. Also, wenn es um die Farbe geht, werde
ich tatsächlich eine der Standardfarben verwenden, die Sie in Fig MMA finden. Weißt du, ich habe ein Farbsystem, aber ich will es einfach machen, wirklich einfach für euch. Also waren wir nicht auf Farbsystem gehen oder gehen Teoh die Farbe Abschnitt hier, wählen Sie persönliche Farben auf würde nur diese Farbe als unsere Hintergrundfarbe verwenden, und dann werden wir ein Rechteck erstellen. Also drücke ich auf der Tastatur. Sie können auch hier nach oben drücken, so dass Sie tatsächlich die Verknüpfungen für die Formen sehen können, Rechteck, Linie, Pfeil Sie wissen, was auch immer Sie brauchen. Im Grunde. Es würde also ein Rechteck erzeugen, das sich den ganzen Weg dehnt. Und was ich gerne mache, ist, dass ich die rechteckige Farbe von Weiß bekommen möchte. Haben Sie Andi auch einen Schlagschatten? Lassen Sie uns also einen sehr subtilen Tropfen geben. Shadow wird ihm einen Schlag von zwei geben. Geben Sie ihm einen Y-Abstand von eins und geben Sie ihm dann eine Kapazität. Nun, ja, ich passe es, äh fünf, jeder Kerl. Wir werden auch tatsächlich das Layoutraster ausblenden. Siehe es Es gibt Powersoft Header Abschnitt. Als nächstes werden wir unser Logo hinzufügen. Ich werde eigentlich nur einen Text hinzufügen. Lego Teoh, Geheimtext-Feinschmecker gerade den Textknopf oben gedrückt und wir werden nicht wirklich sicherstellen , dass dies in unserem Raster ist. Also, wenn wir uns schnell wie ich einschlagen, benutzen
wir Feige, meine Website. Machen Sie es einfach. Nur ein einfaches Textbein. Sehen wir uns unser Gitter wieder an. Hoffe, die falsche Schicht auf ihren Kerl auf. Ja, da gehen wir. Wir können sehen, dass es jetzt mit dem Gitter ausgerichtet ist, so dass der größte Teil des Inhalts innerhalb dieses Rasters
ausgerichtet wird . Dieses Layout-Raster sehen sie. Aber ich sehe das Layoutraster in der Regel nicht. Es ist nur ein Kerl, keine Regel, also kannst du es wie ich mit dem Header mit dem Hintergrundheader mit einem
Header ausbrechen . Hintergrund sogar. Und du könntest daraus ausbrechen, wenn es um Licht geht, volle Peitsche Sachen, Bilder und solche Dinge geht. Aber es ist nur ein guter Weg, um sicherzustellen, dass, wissen
Sie, Ränder und Abstände
haben und so. Deshalb verwende ich gerne ein Layoutraster. Also lasst uns den unteren Platz wieder verstecken, unseren Rahmen
auswählen und dann einfach drücken, um ihn zu verstecken. Wenn es um Schriftarten geht. Einer meiner Lieblings-Fonds, die ich gerne seine Inter se im Schlepptau verwenden, Ich denke, sieht einfach fantastisch aus. Es ist ein kostenloses Telefon als auch, und es ist speziell für Web-Design entwickelt. Du entwerfe ich APs wie Interface-Design oder das Sortiermaterial, und ich denke, es sieht einfach toll aus. Also werden wir die Größe ändern, um ein bisschen größer zu sein. Ich muss mein Layout-Raster
tatsächlich wieder bekommen , damit ich sicherstellen kann, dass es sich innerhalb des Layouts befindet. Da gehen wir. Vielleicht wird es ihm etwas Gewicht geben. Semi-Boot wird es einen Kerl haben, der schon ziemlich gut aussieht. Wann wieder? Wenn es um die Farbe der es geht, denke
ich, ist ein bisschen zu dunkel. Vielleicht geben Sie es ein bisschen mehr von einer tollen Farbe. Ja, ich mag diese Farbe hier. Ich denke, diese Art von Aussehen brechen. Es könnte es sogar dunkler machen. Geben Sie einen Hex-Code von einem. Als nächstes werden wir unsere Navigation hinzufügen, so dass wir einen Text wieder erstellen, und dann werden wir zu Hause hinzufügen ist einer von ihnen. Nun, äh, Portfolio wie die andere, ähm, und dann auch Kontakt. Also kopiere ich einfach und füge diese, du weißt schon,
Kontrolle, Kopieren, Kopieren, Befehlskopie ein. Und dann befehlen V Kontrolle V. Nur Teoh. Erstellen Sie mehrere Texte oder Felder. Ähm, würde die Frontgröße ändern. Also wähle ich alle Ebenen aus. Heilige Schicht. Und ich setze mich auf die Schichten, weil ich denke, die Front ist ein bisschen zu leicht. Wird es 14 machen. Ja, 40. Nichts sieht ziemlich gut aus. Wir werden auch die Farbe ändern. Teoh Ein helleres Grau. Ja, ich denke, das sieht ziemlich gut aus. Also eines der nützlichen Werkzeuge mit einem entworfen, um Figur zu mögen ist, dass Sie tatsächlich automatisch alle Ihre Elemente ausrichten können. Sie sind nie Elemente, die den gleichen Abstand haben, um vertikal ausgerichtet zu werden oder das Sortieren von Sachen. Also werden wir alle diese Ebenen auswählen, und wir werden dieses Werkzeug hier verwenden, um die vertikalen Zentren auszurichten. Jetzt sind sie ausgerichtet. Wir werden dieses Tool auch hier verwenden. Zehe aufgeräumt auf diese wird jedem dieser Elemente und gleichen Reiterabstand den gleichen Betrag geben . Abstand ist eigentlich hier die Zahl 54 Pixel zwischen jedem von ihnen. Aber ich denke, das ist ein bisschen zu viel. Bringen wir es auf 30 runter. Und jetzt wird es 30 Pixel zwischen allen geben und wir können es an unserem Layout ausrichten. Großartig. Und da sind wir. Das ist der Navigationsheader. Ziemlich viel erledigt. Also offensichtlich, ist eine gute Idee. Teoh organisierte alle Ihre Schichten. Das ist es, was wir heute machen. Wir werden diese Auswahl gruppieren. Ich werde es jetzt anrufen. Bar. Da gehen wir. Und ja, ich glaube, wir haben bisher einen guten Anfang gemacht. Sieht ziemlich gut aus. nächste Sache ist, wir gehen Teoh in ein Bild ziehen. Also ein Profilbild oder was auch immer es sein mag. Also hier kaufte ich ein Bild von mir selbst. Sehr wenig Idee. Medien selbst werden die Breite davon ändern. So etwas wie 500 schnell, nur an diesem Wochenende. Messen Sie also die Größe mit und den Rest der Seite, anstatt sie übernehmen zu lassen. Die ganze Seite wird das Layoutraster wieder auf das bekommen, was wir tun werden, ist, dass wir diese Größe wieder so , dass es eine bestimmte Anzahl von Spalten einnimmt. Also werde ich die Schicht halten, dass ich die Ecke des Bildes drauf kriege und es ziehe, Teoh, ich denke, 5 40 Jahre, was es sein sollte. Ja, perfekt. Jetzt nimmt sechs Spalten. Ich bin auf dieser Seite. Sie werden unseren Text haben. Also, während mein auch tun ist, tatsächlich die Ecken um es zu machen, was Sie sehr einfach tun können, indem Sie die Sortierung kreisförmigen Icahn auf jedem Quadrat, jedes Bild, was auch immer es sein mag, wir können auch schnell verstecken und zeigen eine niedrigere Grade durch die Verwendung von Kontrolle. G. Das ist Kontrolle G auf dem Mac. Ich bin nicht wirklich vollständig. Sicher ist auf Windows, aber ich bin sicher, es ist sehr, sehr ähnlich. Also jetzt lasst uns unser Bild bekommen und an die Spitze bringen, dass wir es ausrichten. Und stellen wir sicher, dass der Abstand gerade so ist. Zum Beispiel werde
ich es um 100 Pixel senken. Was? Normalerweise bekomme ich gerne eine Hold-Schicht, und dann drücke ich 10 Mal auf den Iraker. So 123456789 10. So haben wir jetzt 100 Pixel Abstand zwischen dem Bild auf der Navigationsleiste. Als nächstes fügen
wir etwas Text hinzu. Also lassen Sie uns das Layout-Raster wieder bekommen, damit wir unseren Text sehen können, wohin der Text gehen wird. Also denke ich, der Text könnte tatsächlich ein bisschen zu nah sein. Wenn ich es aussage, irgendetwas seinen Weg wählt, werde
ich es tatsächlich ein bisschen weiter weglegen. Also werde ich hier Text hinzufügen, um Textfeld zu machen, und dann werde ich etwas wie, ähm, hey, eigentlich, schauen wir mal, oder? Ein Designer auf kreative aus England? Lass uns so etwas machen. Sehr einfach, sehr einfach. Lassen Sie uns die Seite ändern, weil es geht. Wollte groß und prominent für meine Leute zu Big 36 sein. Sieht ziemlich gut aus. Süß. Lassen Sie uns das Gitter wieder verstecken. Ich denke, das sieht schon ziemlich gut aus. Äh, lassen Sie uns auch einen Dummy-Text hinzufügen. Ich kontrolliere eigentlich nur Kopieren und Einfügen. Dies wird es drei Pixel aus Abstand von oben geben. Dann werde ich jetzt einen Dummy-Text hier reinbringen. Ein Plug, in dem ich den Dummy-Text hinzufügen werde, ist ein öffentlicher Alarm genannt. Es ist, ähm Jetzt werde ich Ihnen schnell zeigen, da stecken, dass ich für Fig MMA installiert habe. Also, wenn Sie Teoh dort gehen, kann
ich in gehen, um Plug Ins und Sie können jeden Stecker in seiner Figur sehen, die die Menschheit
zur Verfügung hat . Sie könnten diejenigen sehen, die gespeichert wurden. Ich habe Material-Design-Icons, Federsymbole auf Laura Maps in denen der einzigen Plug Ins installiert haben. Gehen wir zurück zu unserem Dokumententwurf auf. Nutzen wir den Alarm. Es ist Layout ihren Kerl, wählen Sie einige Textebenen. Los geht's. , Fange an,schließe die Tasche an. Ja, ja. Generieren Sie jeden Kerl. Cool. Stellen wir sicher, dass unsere Steuer offensichtlich nicht viel zu groß ist, weil sie irgendwie zu größer ist. Ändern wir die vordere Größe Teoh. Ändern wir es auf 16. Ich denke, 16 wäre dort auch besser. Weißt du, es sieht einfach nicht richtig aus. Text, normalerweise sieht der Textkörper einfach nicht richtig aus, wenn er unstilvoll ist. Also lasst uns diesen Teoh regelmäßig ändern. Und dann lasst uns die Farbe ändern, weil ich es nicht will. Sei also so dunkel wie der Überschriftentitel. Lassen Sie uns also einen helleren Grauton geben, aber es sieht immer noch ein bisschen aus auf der Hauptsache, die aus lebt, ist die Zeilenhöhe. Also, um die Zeile zu ändern, ich werde einen Text wählen, und dann werden wir wählen, wer wir Zeilenhöhe haben. Also lasst uns das ändern. So ist derzeit die Linie hoch 19. Ändern wir es in etwas wie 22. Wir können schon sehen. Es sieht ruhig aus. Besser vielleicht 24. Ja, da gehst du. Ich denke, das sieht einfach sofort viel einfacher zu lesen aus. Offensichtlich ist
es nicht auf Englisch, aber es ist einfach viel einfacher. Teoh lesen viel lesbarer sieht auch sauberer aus, also könnten wir das hier oben führen und führen, dass es es sein kann. Lassen Sie uns einige Social-Media-Symbole einfügen. Also hier habe ich gerade einige Social-Media-Konten gezogen und fallen gelassen, die ich aus dem Web verschoben habe . Sehr einfach. Lassen Sie uns die Größe von ihnen ändern. Ich werde das 1 zu 30 Jane ändern, dass 1 zu 30 auch, sehr gut und dann in Tricon's 32 geändert. Da gehst du weiter. Dann ändern wir die Distanz zwischen ihnen. Aber ich denke, es ist ein bisschen zu viel eine rasierte auf 20. Eigentlich. Glaub nicht, dass das noch ein bisschen zu viel ist. Vielleicht 15. Ja, ich denke, das sieht jetzt ein bisschen besser aus. Lasst es uns allein auf mich ziehen. Sie sind nicht das gleiche, weil Polsterung zwischen ihnen, lassen Sie uns die Farbe ändern, weil ich denke, es ist ein bisschen zu hell. Sagen wir, wir können es in etwas wie getan ändern. Da sind wir. Das ist also die weiche Navigation nach Heldenbereich. Das ist es für diesen, und der nächste wird mit dem Abschnitt „Dienste“ beginnen
4. Dienstleistungen: Also willkommen zurück jetzt, da wir unsere Bar auf Helden Off Abschnitt Finish haben, lassen Sie uns die Dienstleistungen Abschnitt tun. Aber wir wollen auch sicherstellen, dass unsere Artikel tatsächlich gefaltet und gruppiert sind. Also lasst uns das schnell machen. Nennen wir das den Abschnitt. Eigentlich können wir
nur Abschnitt entfernen. Wir brauchen keinen Abschnitt, den wir hier nennen könnten. Ich weiß, dass wir cool geworden sind. Also wollen wir unseren Rahmen vergrößern, damit wir unseren Rahmen auswählen können, indem wir
hier klicken oder hier auftreten. Und dann fahren wir es einfach runter und machen es größer. Wir werden es ein bisschen größer machen, dass wir uns von unseren Inhalten fühlen können. Da gehen wir. Schön. Also, jetzt werden wir unsere Dienstleistungen Abschnitt machen. Also, wenn wir zurück zu der Frau und wir konnten sehen, haben wir Dienstleistungen Kurzbeschreibung. Diese Kreise sollen Symbole sein und dann der Dienst, wenn sich auf einer kurzen Beschreibung diesem Dienst befindet. Also lasst uns in die Rubrik Dienste setzen. Bringen wir es in die Mitte und bringen wir es 100 Pixel herunter. 123456789 10 Haben Sie gerade so, dass ist eine gleichmäßige Menge im Vergleich zu dem Helden auf der
Nussstange . Außerdem denke
ich, dass dieser Spaß vielleicht auch ein bisschen zu groß ist . Also lasst uns die Größe davon ändern. Ändern Sie es, Teoh 24 eigentlich, 24 Ich denke, könnte ein bisschen zu klein sein. Lass es uns ändern, Teoh. 30. Ja, das
gefällt mir. Ich denke, es sieht schon besser aus. Das Gericht hat es zentriert. Und dann unten wird eine Service-Beschreibung hinzugefügt. Also werden wir auch die Frontgröße ändern. Auf 16? Ja, der Typ. Ändern Sie es, um regelmäßig ändern Sie die Farbe zu einem Feuerzeug. Grau So etwas. Jeder Kerl. Nun, ich könnte einfach eine kurze Beschreibung eintragen, so
etwas. Jetzt werden wir ein Symbol setzen, also werde ich einen der Figments Plug Ins verwenden. Ich werde das Feder-Symbol-Werkzeug verwenden. Also hier sind wir, mit dem Stecker in meinem Teich wird vielleicht so etwas wie Also werde ich nicht sehr wie zu
lösen sein . Entscheidend dafür, dass ich nicht mit dem Service übereinstimmen kann, denn ehrlich mache
ich das nur. Das ist eine Demonstration durch dieses Symbol. Also lasst uns das hier reinbringen. Wir haben es hier. Stellen Sie sicher, dass sich dieses Symbol in unserem Rahmen befindet. Sie haben einen Kerl. Lass es uns ein bisschen größer machen. Ich denke, es ist ein bisschen zu klein. Bringen wir es auf. Teoh, 48 und mit dem Weg, wollen die Größe die gleiche Hoffnung zu halten. Ja, wir wollen die Eigenschaften davon beschränken, sagt hier Nacht beschränkte Proportionen auch nicht Eigenschaften und ändern Sie die Symbolgröße Hoffnung machte es auf kleine 48. Ich denke immer noch, dass das Symbol ein bisschen zu klein ist auf normalerweise mit Symbolen wie diesen, weil es nicht sehr detailliert ist. Du solltest sie nicht wirklich zu groß machen. Der beste Weg, um sie zu lösen, machen sie ein bisschen mehr Platz in Anspruch nehmen, ist, einen Kreis oder eine Form hinzuzufügen oder was auch immer. Es könnte dahinter liegen. Also werde ich einen Kreis dahinter wie diese Muda-Schichten hinzufügen, so dass es in der Mitte
oben gerade ist und dann ausrichten und wir können bereits sagen, dass es einen massiven Unterschied macht. Jetzt lasst uns diesem Kreis einen sehr hellen Schatten abnehmen, Großartig, so
etwas. Und dann lasst uns eine Farbe geben. Vielleicht sollten wir eine der Farben wählen, die sie hier haben. Eigentlich flog
was früher von dem, was wir tun werden, ist, dass wir den Hintergrund des Kreises geben. Ah, hellblaue Farbe ist, naja, so
etwas. Ich finde, das sieht ziemlich gut aus. Schön, schnell, dass, ähm, nennen Sie es nur Symbol, so
etwas. Und dann fügen wir einen Service hinzu. Also setzen wir einfach so etwas wie Webdesign. Haben Sie einen Kerl. Ich möchte ihm 20 Bilder abgeben, die von oben verboten werden. Machen Sie es ein bisschen größer. Vielleicht machen Sie es 24 nicht 24. Zu groß. Lass es uns bei 18 behalten. Wir wollen auch unser Netz wieder aufbauen, weil wir sicherstellen wollen, dass wir alles richtig vereinen. Also, weil wir 12 Spalten gesprochen haben und wir machen drei verschiedene Dienste, so schlafen jede Spalte wird zu töten. Jeder Dienstbereich wird vier Spalten aufnehmen. Ich sage es. Lassen Sie uns die Breite ändern, so dass es vier Spalten braucht, jeder Kerl und dann ist das Zentrum. Das Symbol, um das wird das Symbol machen die Service-Überschrift halb fett, und dann werden wir unserem Dienst eine Beschreibung geben. Ändern Sie also
auch die Frontgröße . 14. Rami ist das Gewicht und dann geben Sie ihm ein Feuerzeug. Großartig. Ähm und dann können wir in jeder Art von Beschreibung mit über 10 Jahren frei, wenn
Design-Erfahrung , ich kann eine Website entwerfen, bevor Sie Unternehmen. Meine urheberrechtlichen Fähigkeiten sind nicht die größten, aber hey, ich versuche, dies so schnell wie möglich zu tun. Wirklich? Verbringen Sie nicht zu viel Zeit damit, sicherzustellen, dass es perfekt ist. Wir wollen also sicherstellen,
dass , die Zeilenhöhe wieder richtig aussieht, denn im Moment sieht der Text einfach etwas zu kompakt aus. Also werden wir die Schlange hochfahren. Ich es ist ein Standard aus 17 wird es 20 machen. Geh nie oder was er sieht
viel besser aus. Das ist also unser erster Dienstleistungsbereich. Will Gruppe. Es wird es Service nennen, und dann kopieren wir es und fügen es ein und bringen dann den nächsten in die Mitte, wie so , äh, sehr gut. Stellen Sie sicher, dass es süß ausgerichtet ist. Als nächstes könnten
wir etwas wie Web-Entwicklung tun,
und dann vergleichen wir etwas, wie ich hace E-Mail CSS Java-Skriptbibliotheken verwenden, um mehr
als und funktionale Websites zu machen . Was würden Jahre wird dieses Symbol so wieder ändern. Wir werden die Federsymbole einstecken, und dann finden wir vielleicht ein relevantes Symbol,
etwas, das cool aussehen sollte. Äh, was könnte gut aussehen? Oh, das
gefällt mir. Das ist
eigentlich perfekt . Site, bringen
wir es rein. Scheint sehr gut. Schön. Lasst uns die Schichten bewegen. Also unser früheres Leben, fast 48, wenn ich sicherstellen, dass diese auch 48 Constrain Proportionen ändern Sie die Größe auf 48 wie, sagen, und dann zu ihm geschickt. Nun, tatsächlich verwenden Sie eine andere Farbe für dieses Symbol. Vielleicht wird grün verwenden, dass sie grün ist, und dann werden wir es auch im Gegensatz zu Schatten wie so cool Cu
cu cu cu cu nächsten Dienste Abschnitt muss machen, dass schöne Kopie und Einfügen dort drüben wir es
geschickt werden und dann werden wir es so etwas wie so sicher Medien nennen. Und dann haben wir so etwas wie die Verwendung von Social Media wie in nehmen Sie Ihre Marke aufdringlich. Ich kann Ihnen helfen, Marke Millionen auf der ganzen Welt zu erreichen. Ich mache hier wirklich Zeug. Es klingt lächerlich, aber hey, es funktioniert also wieder, wir fügen ein weiteres Symbol hinzu. Verwendet die Federsymbole einstecken an. Dann werden wir relevant finden. Kannst du wissen, was in Ordnung ist? Wir benutzen das hier. Jeder Kerl, den wir in die Welt-Ikone setzen, die sie hier oder Globus sehen. Ich kann nicht mal Onda. Wir werden dieses Globe-Icon nehmen. Schicken Sie es. Denken Sie daran, dass die Proportionen des Layouts 1 die Größe 48 ändern. Jeder Kerl wird die Farbe davon ändern. Natürlich geben
wir diese eine orange,
rot,orange rot, Lassen Sie uns ihm
orange geben und dann geben Sie ihm einen sehr hellen Hintergrund, wie so könnte es tatsächlich ein bisschen dunkler machen, weil es ein bisschen zu hell ist, da wir haben. Ja, ich denke, das sieht ziemlich gut aus. Jetzt bringen wir unseren Service aus Töpfen, bringen sie hoch und dann geben wir ihnen 50 Pixel. Ein Teoh 345 50 Bilder von Polsterung zwischen der Titelbeschreibung Abschnitt und da sind wir . Das heißt, unser Dienstleistungsbereich ist gut. Alles zusammen schnell. Sanders ist süß. Das ist es also für unseren Bereich Dienstleistungen. Das war's für diesen hier. In unserem nächsten werden
wir den Portfoliobereich bearbeiten
5. Portfolio: Ich sage, Lassen Sie uns unser erstes Portfolio Artikel erstellen. Also eine Sache, die ich mit dem, was mit meinem Drahtrahmen bemerkt habe, ist, dass ich das Portfolio-Element habe, aber es gibt keine Art von Titelbeschreibung von dem, was es ist, also werde ich es tatsächlich in einer Karte sortieren ehemaligen wie ich es mit dem Navajo getan habe. Die Spitze. Also gut, zuerst eine Kopie. Entweder der Text, der Titel und die Beschreibung von Diensten, und wir werden das hier runterbringen. Da gehst du. Stellen Sie sicher, dass es 100 Pixel hat. Luftpolsterung von oben 123456789 10. Cool. Und dann werden wir sehen. Wir nennen es für die ich einen anderen gehen, um Beschreibung zu wählen. Ich fühle selektierte Stücke von hinten. Cool. Wer? Meine Schreibweise ist korrekt. Ich bekomme immer etwas falsch, manchmal nur eines dieser Worte, bei denen ihr nicht wisst, ob ich zuerst mit euch zuerst
gehe. Also lasst uns unsere erste Karte machen. Also gehen, um unsere zu treffen, um ein Rechteck die meisten gehen zu zeigen aufgetreten wieder, um sicherzustellen , dass wir innerhalb der erstellen auf es sieht aus wie in den Anden. Nimm sechs Spalten, damit es 5 40 mit der Höhe sein wird, äh, fangen
wir eigentlich mit unserem Bild an. Also, wenn wir die Höhe von 300 sehr Kerl machen, denke
ich, das sieht ziemlich gut aus. Und dann geben wir ihm einen weißen Hintergrund. Eigentlich, haben Sie nur den Hintergrund. Es spielt keine Rolle, weil wir hier ein Bild platzieren werden. Also werde ich nur ein paar Bilder aus meinem eigenen Dribble-Portfolio ziehen. Lasst uns das zum
Beispiel ziehen . Das ist nur kopieren Sie dieses Bild auf fügen Sie es in so automatisch Fig Maher Krieg. Grundsätzlich fühlen, dass das Rechteck mit Ihrem Bild, das sehr,
sehr nützlich sein kann . Also maskiere ich es im Grunde einfach, sofort zu gehen. Leicht für Sie sofort. Das ist also unser Portfolio-Bild, aber wir möchten unten eine Titelbeschreibung hinzufügen. Also, ähm, ich sollte ein weiteres Rechteck hinzufügen. Stellen Sie sicher, dass es mit dem Bild eines Kerls ausgerichtet ist, und ich werde es unter das Bild legen, ihm einen weißen Hintergrund geben, und dann werde
ich ihm tatsächlich einen Schatten geben. So gibt ein Schlagschatten es auf, lassen Sie eine Y-Achse ein und geben Sie ihm dann ein I pass ity off 5%. Da gehen wir. Ich mag den quadratischen Look sehr, aber er stimmt nicht mit meinem Profilbild überein. Also gehe ich zurück zu meinem Profilbild und entferne den Radius. Nur damit du besser passt, ich denke, es sieht schärfer aus. Und ich werde etwas Sortierenderes suchen. Ernsthaftes Aussehen. Abgerundete Ecken auf jeden Fall geben Ihnen mehr von uns sind verspielt. Hören Sie, ich habe gefunden. Jetzt werden wir unseren Portfolioartikel Titel hinzufügen. Lassen Sie uns ein Textfeld Texttyp auf Textebene machen und wir werden es nennen. Wie habe ich es eigentlich genannt? Mein Job telefonisch. Ich nenne es Magazin Block Template wird es Venice Silver Website nennen. Weißt du, nur weil ich gerade das abziehe, was ich hier sehe. Also gehen wir auch Teoh, stellen Sie sicher, dass es richtig ausgerichtet ist. Lassen Sie uns also etwas Polsterung geben, also geben wir ihm 30 Pixel von links. 123 und dann Bilder von der Spitze 23. Ich denke tatsächlich, dass es mit mehr Polsterung auf der linken Seite tun könnte, also geben wir es noch eine. Nun, 10 weitere Pixel von links. Sehr gut. Wir machen es größer, weil ich denke, es ist ein bisschen zu klein. Wird es 18 oder die Texas tatsächlich verbünden. Teoh sei in der mittleren Texturlinie Mitte Lektion Texturlinie links. Da gehen wir. Und dann ist das versucht, vorne zu sehen, weil jeder bleiben wird, wo es ist. Geben Sie ihm etwas Gewicht und dann werden wir kopieren fügen Sie diese Textebene. Ich gebe einer Kategorie so etwas wie Webdesign, und dann ändern wir den Spaß daran. 12. Das Gewicht wurde entfernt. Ändern Sie die Farbe in so etwas wie jeder Kerl. Und dann bringen wir es runter. 10 Picks Quelle. Ändern Sie dies so, dass Sie es ausgerichtet haben. Und da gehen wir. Wir haben unser erstes Portfolio weißer. Nun lasst uns alles in einen Greep setzen, weil wir sicherstellen wollen, dass unsere Schichten alle gut
sortiert sind . Das ist cool und Portfolio-Artikel, und dann können wir kopieren und einfügen. Bringen Sie es rüber und stellen Sie sicher, dass das in der Reihe ist. Sie waren sich einig, und wir haben unsere Hafenanmeldung. Jetzt wollen wir dieses Bild ändern, so dass wir Bild wahrscheinlich hier wählen können, oder wir könnten einfach ein anderes Bild bekommen und kopieren und einfügen. Also lassen Sie uns tun, dass Lasst uns nehmen, dieser könnte bildbasiert sein. Oh, das ist nicht was Copy? Bild einfügen Da gehen wir. Jetzt haben wir unser Bild eingefügt in Eigentlich ändern Sie die Art und Weise, sogar schneidet das Bild innerhalb des Quadrats im Rechteck. Ich wette, ich lasse es. Wie ist es, wie es ist? Da gehen wir, und dann benennen wir das auch um. Wir nennen es so etwas wie Pion e Magazin. Wir werden den Web-Design-Abschnitt verlassen und dann beenden wir es durch die Schaffung weiblicher, was mehr setzen 40 Elemente. 123 Stellen Sie sicher, dass es ungefüttert ist und eine gleiche Menge an Polsterung für dieses Portfolio hat. Gegenstände werden tatsächlich in ein Foto gelegt, also lasst uns das hineinlegen. Da gehen wir. Dann werden wir in so etwas wie iPad setzen 30 einen Fall umbenennen Sie dies in Fotografie Sweet und dann lassen Sie uns noch eine. Um Ihnen also schnell zu zeigen, wie mächtig das Bild hier verändert, wähle
ich dieses Rechteck hier aus. Sie können es auf ausgewählt sehen. Dann habe ich Befehl kopiert mein Bild von meinem Desktop, und ich bin buchstäblich nur in Befehl V auf oder Kontrolle V gesetzt, und es ersetzt nur Bild. Sehr einfache, sehr einfache Figur macht es super einfach, um Ihre dummen Ort Bilder, wann immer Sie arbeiten müssen. Sockel aufgestellt. Ich habe einen Kerl. Das ist es also. Wir haben unsere Portfolio-Resektion durchgeführt diese großen Wege wahrscheinlich von oben ausgerichtet. So 12345 Cool. Lassen Sie uns die Wahl in unserem Raster treffen. Ist es. Und wir sind mit unserem Portfolio Bereich fertig. wir sicher, dass dies auch in der Mitte entfernt ist. Das war eigentlich nicht in der Mitte. Da gehen wir. Um sicherzustellen, dass sich Ihr Element in diesem Zustand Mitte einer Seite befindet, können
Sie es einfach auswählen und dann eines dieser Werkzeuge hier oben verwenden, es
ausrichten, die Seite
zerreißen oder an einem anderen Element ausrichten. Also, das ist es für den Flughafen, eigentlich brauchen
wir Teoh. Diese Gruppe unsere Artikel als auch setzen fünf und dort. Ja, wir haben unseren Portfoliobereich erledigt. Das war's also für diesen. Im nächsten werden
wir den Monteur entwerfen
6. Fußzeile: Okay, also willkommen zurück. Nun, da wir einen guten Teil unserer Website nach unten haben. Das letzte, was zu tun ist, ist, dass Fuß ein Abschnitt. So hat der Monteur den großen Hintergrund. Hat Jaime Abschnitt Armeen sind Titel Kurzbeschreibung und dann in Kontakt Button. Also lassen Sie uns unseren Rahmen viel größer machen. Geben wir ihm ein Rechteck. Jetzt haben wir unseren Monteur. Und dann stellen wir sicher, dass es nicht den gleichen Abstand zwischen den anderen Abschnitten hat. Ich habe tatsächlich gerade erkannt, dass die Portfolio-Ausnahme nicht hat 100 Bilder Sortierungen. Da gehst du hin. - Das ist besser. Also, ja, wir sicher, dass es 100 Bilder mit Phoenix Section 123456789 10 hat. Bringen Sie es 100 Pixel herunter und lassen Sie uns dann eine dunkle Hintergrundfarbe geben. Es ist noch dunkler als das. Sie müssen irgendwo hinuntergehen, als würden sie nie hingehen. Das ist auch kopieren Sie unsere Hex Off Abschnittsüberschriften aus den anderen Abschnitten sagen, dass wir auch
sicherstellen müssen , dass das lesbar ist, also werden wir die Textfarbe ändern, wie sagen wir haben und dann lassen Sie es nach unten bringen was er getan hat. Ich weiß es nicht mal. Eigentlich, lassen Sie es uns runterbringen. Ich denke, Sie sollten es um 50 Geld runterbringen, um es um mehr zu senken. Vielleicht 81 2345678 Ja, ich denke, das sieht besser aus. Also lasst uns das ändern. Miami, sehr gut. Mich für dich. Nächstes Projekt dort. Wir sind cool. Jetzt möchten wir noch einmal eine Schaltfläche Seite hinzufügen. Setzen Sie in ein Rechteck wie, sagen wir, Brauchen Sie nicht zu pingelig auf die Größe und was auch immer es für Button sein kann . Aber lassen Sie uns eine Farbe für die Butter geben. Ja, ich mag diese Farbe. - Vielleicht. Gott, eines Nachts setzen wir uns mit mir in Verbindung. Das scheint also alles sehr gut lesbar zu sein, also machen wir es weiß. Andi, mach es ein halb fett wie, sagen wir, das macht auch den Knopf ein bisschen breiter. Und dann der zentrale Text in jedem Kerl. Cool, denke ich. Ja, nun, behalte das quadratische Design. Ich denke, das quadratische Design sieht ziemlich gut aus. Was wir auch tun könnten, ist, obwohl wir einen Kontakt-Me-Button haben, aber auch ein Schweigen bringen könnten. 123 Ja, wir könnten auch so etwas wie mein Regime herunterladen. Seufzer. Dort ändern wir die Schriftgröße Teoh 12. Ja, vielleicht regelmässig weitermachen. Lassen Sie uns die Farbe auch von ihm so etwas ändern. Sie sind wir, also sind wir da. Wir haben den Fuß von getan und das ist ziemlich viel es für diese off sehr grundlegende persönliche Website . Hoffentlich gibt es Ihnen eine gute Idee von meinem Salz gearbeitet späten Prozess und wie einfach es ist, etwas zu machen, das Sie aussehen, wissen
Sie, ziemlich einfach. Minimalistisch, Auch gut zur gleichen Zeit. Wissen Sie, Sie brauchen nicht, um Ihr Portfolio super ausgefallene Anzeigen zu machen, alle Arten von Animationen. Sie sollten Ihre Arbeit hauptsächlich dazu bringen, das Reden sicher zu machen. Also würde ich Jungs genossen diese schnelle sugh persönliche Website Design Guide hoffentlich gibt
Ihnen einen guten Einblick und übermäßig, wissen
Sie, wenn Sie daran interessiert sind, ein Design zu bekommen, das ist ein guter Weg, um zu beginnen, weil ich denke der beste Weg zu lernen, dass sie etwas macht Danke für das Ansehen dieser würde Jungs genossen es
Oliur, Designer and creator.
