Grundlagen des Webdesigns: Erstellen von wirksamen Marketing-Startseiten

1. Einführung: Mein Name ist Dennis Field. Ich bin ein Teil von Evangelist hier bei InVision sowie Designerin. In dieser Klasse werde ich Ihnen beibringen, wie Sie eine effektive Marketing-Homepage für Ihr Produkt erstellen. Als Designer muss man natürlich von der Gestaltung für hübsche bis hin zum Design für Umbauten wachsen . Und durch den Branchtwandel sowie die Kundennachfrage bin ich zu einem Webdesigner geworden. All diese Erfahrungen haben mich zu InVision geführt. Wir helfen Designern auf der ganzen Welt und Unternehmen auf der ganzen Welt ihr volles kreatives Potenzial mit Funktionen wie Prototyping, Kommentierung, Asset Management sowie Live Sharing zu nutzen. Dinge, die ich Ihnen in dieser Klasse beibringen kann, sind alles Dinge, die ich gelernt habe, während ich vom Entwurf der Seite zum tatsächlich entwerfen gegangen bin, mit der Absicht meinen Kunden und Unternehmen dabei zu helfen, die Nadel mehr zu bewegen. Es wird etwas für jeden in seinem Kurs geben. Egal, ob Sie gerade erst anfangen oder ob Sie schon seit einigen Jahren entwerfen. Sie können mit dem Layout der Seite zu kämpfen haben, wie Sie tatsächlich die gewünschten Ergebnisse erhalten. Also, ich denke, diese grundlegenden Fähigkeiten werden Ihnen tatsächlich viel Wert bringen. 2. Projekt-Aufgabe: Sie wurden beauftragt, eine Homepage von Mac Social Media App ständig Social Media zu entwerfen. Ihr Ziel ist es, eine neue Homepage zu erstellen, die die Anmeldungen erhöht. Ich wähle diese Aufgabe, weil ich denke, dass es wichtig für Sie ist, die wichtigsten Grundlagen zu verstehen, die notwendig sind, um Ihren Kunden in der Organisation mehr Wert zu bieten , wenn Sie als Designer wachsen. Sie werden lernen, Prinzipien wie Design, Storytelling und Layout sind alles Dinge, die Sie berücksichtigen sollten und beachten wenn Sie nicht nur dieses Projekt, sondern für Projekte in der Funktion entwerfen. Für dieses Projektsind Konversionen unsere Anmeldungen, sind Konversionen unsere Anmeldungen, aber Konvergenz könnte alles sein, was sich auf Ihr Projekt bezieht. Außerdem erfahren Sie, wie Sie einen Prototyp in InVision erstellen und wie Sie den Feedbackprozess verwalten. Für dieses Projekt benötigen Sie Photoshop oder Sketch Ihrer Wahl sowie ein kostenloses InVision-Konto, für das Sie sich bei invisionapp.com anmelden können. Sie können erwarten, dass dieses Projekt je nach Komplexität Ihres Designs eine Stunde bis anderthalb Stunden dauert . Wenn Sie Ihr Projekt abgeschlossen haben, sicher, dass Sie Ihren InVision-Prototyping-Link und einen Screenshot Ihres Projekts innerhalb der skillshare Projektgalerie freigeben. Denken Sie daran, der beste Weg zu lernen ist, indem Sie tun. sich Ihre Ziele ändern sich Ihre Zielgruppe verschiebt, müssen Sie dieses Design immer überdenken, um es zu optimieren. Lasst uns anfangen. 3. Ziele, Geschichte, sozialer Nachweise, Kaufentscheidungen: Wann immer Sie etwas entwerfen, müssen Sie eine klare Reihe von Zielen haben. Ohne das entwerfst du nur. Das erste, was wir tun müssen, ist, dass wir unsere Ziele definieren müssen. Für Simply Social werden wir drei Ziele haben. Das erste Ziel ist, insgesamt müssen wir mehr Wert auf Setups legen. Nummer zwei, wir müssen die App visuell präsentieren. Nummer drei, müssen einen besseren Job machen, um die Geschichte zu erklären. Für Sie haben möglicherweise andere Ziele, aber es ist wichtig, diese Ziele zu definieren , bevor Sie wirklich in Ihr Design einsteigen. Also, sobald wir unsere Ziele festgelegt haben, fangen wir an, über Geschichte zu sprechen. Story ist wirklich, wirklich wichtig für jede Homepage oder jede Art von Design im Allgemeinen. Aber wenn man an großartige Gemälde denkt, wenn man an tolle Designs denkt, gibt es immer eine Art Geschichte, die dort passiert. Geschichte kann in Form von Kopie kommen. Es kann in Form von visuellen Hinweisen kommen. Alles, was Sie auf diesem Design oder auf Ihrer Homepage platzieren , muss sich auf die Geschichte beziehen, die Sie erzählen wollen. Es ist wirklich wichtig, die Geschichte auf einer Homepage von oben nach unten zu denken, angefangen mit wem wir reden, was wollen wir, dass sie denken und was ist das beabsichtigte Ziel? All dies trichtet in den klaren Call-to-Action und die Auszahlung im Wesentlichen. Also, wenn wir ins Skizzieren kommen, werden wir ein bisschen mehr darüber reden. Wir reden ein bisschen über Kopie. Wir werden darüber sprechen, wie die Bilder, die wir verwenden werden. Eigentlich spielt es eine Schlüsselrolle in dieser Geschichte dieses Designs. Das andere Stück dazu, über das wir sprechen wollen , ist offensichtlich Messen und Umbauten. Es gibt eine Tonne, über die wir mit Umwandlung sprechen können , die wahrscheinlich am besten für zu Hause geeignet ist, nicht natürlich eine Klasse. Aber für hier möchte ich nur, dass Sie wissen, dass die Umwandlung mit einer Reihe von Faktoren gemessen werden sollte. Sie können großartige Tools wie Google Analytics als Metriken verwenden, alle Möglichkeiten, es zu messen. Aber bedenken Sie, dass es eine Reihe von Faktoren gibt, die Ihre Umwandlung beeinflussen werden. Wenn Sie eine Menge Werbung machen, das wird eine Menge Traffic, einige qualifizierte, einige unqualifizierte zu Ihrer Homepage Trichter . Das wird Ihre Konversionsnummer ein wenig verzerren. Wenn es um die Konvertierung geht, denke ich gerne darüber nach, was nach der Konvertierung passiert. Angenommen, Sie erhalten einen großen Zustrom von Aufnahme in Ihre Conversion-Nummern, mehr Leute registrieren sich für Ihre App. Aber dann hast du noch eine ganz andere Sache. Sie müssen sich Sorgen machen, sind diejenigen, die in der App sind jetzt tatsächlich qualifizieren Benutzer der App? Also, dann haben Sie eine ganze Reihe von Optimierungen, die dort passieren müssen. Es gibt also keine große Konvertierungsnummer. Sie sollten immer offensichtlich für eine hohe Anzahl schießen, aber es gibt auch keine schlechte Konvertierung, weil es so viele Dinge gibt, die Sie nutzen müssen und je nachdem, wo Sie mit Ihrem Produkt sind, werden Ihre Zahlen ein Ein bisschen anders. Aber denken Sie daran, dass es eine Reihe von Faktoren gibt, die darin spielen werden. Also, im nächsten Teil des Projekts werden wir anfangen, diese Ideen zu skizzieren und ich werde in diese Prinzipien der Geschichte und Layout ein wenig mehr gehen . Aber lassen Sie uns weitergehen, einige Ideen zu skizzieren, über diese Ideen zu sprechen und zu sehen, was über diese Ideen zu sprechen und zu sehen, was wir wollen und was wir idealerweise wählen wollen, um dann in High-Fidelity zu gelangen. 4. Konzept und Design: Ok. Also, lassen Sie uns über einige dieser Konzepte sprechen. Wir werden auf einige Ideen eingehen, die wir mit dem Ziel machen wollen , die Anmeldungen auf Simply Social zu erhöhen. Es gibt also eine Reihe von Möglichkeiten, die wir tun können, und es gibt eine Reihe von Faktoren, die wir spielen werden. Für mich beginne ich generell gerne mit einigen losen, ich weiß nicht einmal, ob ich sie Wireframes nennen möchte, aber nur allgemeine lose Skizzen, die anfangen, einige Betonung auf Schlüsselbereiche des Designs zu legen , bevor ich beginne, in das zu gehen, was ich möchte auf dem Computer zu tun. Beginnen wir also zuerst mit einigen wichtigen Dingen die wir im Hinblick auf das Benutzermuster beachten müssen. Also, offensichtlich, haben Sie traditionell eine Navigation, die oben auf der Seite sitzt. Im Zweifelsfall ist es am besten, es dort zu lassen. Es gibt Dinge, die sich im Laufe der Zeit verändert haben, eines davon das Logo. Das Schöne daran, wie wir uns weiterentwickelt haben, ist, dass wir uns langsam von einem echten Homelink entfernt haben. Jetzt haben wir tatsächlich das großartige Benutzermuster, auf Ihr Logo klicken zu können, um Sie nach Hause zu bringen. Also, alle Dinge, die Sie wollen, mehr oder weniger, stellen Sie sicher, dass Sie in Ihrem Design an einem bestimmten Punkt haben. Die andere Sache, über die Sie nachdenken sollten, sind Ihre Fußzeile und was dort geht. Fußzeilen werden in der Regel für einige der Dinge verwendet, die Sie nicht wirklich brauchen, um Ihre Hauptgeschichte ablenken zu müssen. Das sind die Dinge wie Support-Links und Dinge, die sich nicht wirklich stark um die Geschichte Ihres Designs entwickeln. Also, lassen Sie uns über, das Benutzermuster des Scrollen Ihrer Seite sprechen. Es ist wirklich toll, wie Apps wie Facebook, Twitter haben es jedem erlaubt, die Idee des Scrollens zu umarmen. Mobile spielte offensichtlich eine Menge in, dass auch. Also, jetzt müssen wir uns nicht zu sehr um eine Falte kümmern. Es ist umstritten, aber ich bin ein großer Gläubiger an je mehr Leinwand wir unsere Geschichte erzählen müssen, desto mehr sollten wir sie nutzen. Also, wir wissen, dass die Leute mit dem Scrollen der Seite in Ordnung sein werden, wir wissen auch, dass es viele andere mobile Hinweise gibt, die Leute aufgegriffen haben. Die Hamburger-Symbol ist eine Sache, über die man nachdenken muss. Ich meine, das ist etwas, das Sie in Ihrem Design verwenden können, denn jetzt verstehen die Leute, wenn ich darauf klicke, werde ich mehr Optionen sehen. Wenn es darum geht, sich auf Ihre Geschichte zu konzentrieren, sollten Sie diese Dinge im Hinterkopf behalten. Verwenden Sie sie, wo Sie können, aber nie versucht, diese Benutzermuster notwendigerweise zu brechen , weil Sie dann Ihre Zielgruppe oder Ihren Besucher verlieren. Also, in diesem Design, werden wir unsere Navigation, unsere Fußzeile haben. Wir werden offensichtlich einen Helden haben, das neigt dazu, ein anderes Benutzermuster zu sein, das Leute sehen wollen. Und das ist deine Haustür, das Cover deines Buches. Das ist eine große High-Level-Geschichte, die dort beginnt. Sie haben offensichtlich Ihre Navigationslinks. Und dann ist alles hier drin und wie das alles zusammenkommt, ein bisschen offener, wo man in diesen Bereichen setzen kann. Also, um damit zu beginnen, vielleicht mit unserem Ziel, die App ein bisschen besser zu erklären. Wir haben vielleicht eine Idee, dass wir wirklich die Idee aufspielen wollen, dass es mit Simply Social eine App ist, mit der Sie alle Ihre Social-Media-Konten an einem Ort verbinden können und Sie all diese großartige Social-Media-Aktivität haben werden. Wir werden das wirklich visuell zeigen wollen. So können wir grafische Versionen von vielleicht Social-Media-Konten haben, die dort hinten sitzen. Wir können eine offensichtlich eine Art von Schlagzeile haben, die hier leben wird. Sie werden offensichtlich in diesem Stadium beginnen wollen , die Idee eines Call to Action einzuführen. Sie haben vielleicht jemanden, der an dieser Stelle kommt , der bereits verkauft ist. Sie wissen schon, worum es geht, und sie sind bereit, sofort zu handeln. Also, was Sie tun können, ist, dass Sie offensichtlich, und Sie sehen dies in einer Menge von Websites, Sie wollen beginnen, Ihre hinzufügen, wir werden es CTA nennen. Das fängt an, diese Diskussion zu eröffnen, okay. Also, jetzt haben wir eine Reihe von Dingen, die hier arbeiten. Wir haben ein klares Verständnis dafür, was das Produkt sein wird. Vielleicht haben wir in diesem Fall ein tolles Exemplar, dass wir eine einfache, prägnante Schlagzeile wollen. Und die Sache mit Simply Social ist das, was wir tun, ist, dass wir Social Media oder Networking einfach machen. Vielleicht ist das eine Vorstellung von einer Schlagzeile. Sehr direkt. Ich weiß nicht, wir müssen das testen, wir können coole Benutzer-Test-Apps verwenden, um das zu tun. Aber fangen wir mit etwas an, um einige Ideen fließen zu lassen. Das nächste, was Sie tun möchten, ist zu überlegen, was auf der Seite passiert, richtig? Wir haben diese Vorstellung von der Art, wie sich unsere Augen bewegen. Viele Male, mit typischen Homepages, werden Sie in diese Z-Muster Augenbewegung fallen, wo jemand mit dem Logo beginnen, verschieben und beginnen, die Seite runter zu kommen. Deshalb wollen wir das in unserem Design nutzen. Wir wollen sicherstellen, dass jede dieser Bewegungen, die Sie auf etwas Wichtiges treffen, etwas, das Ihre Geschichte wirklich betonen wird. Wenn Sie etwas tun, das wahrscheinlich mehr redaktionelle oder Story fokussiert ist, vielleicht ist es ein Blog-Layout, können Sie beginnen, in ein F-Layout zu gelangen, wo Ihr F-Muster, wo die meisten Leute die Seite abscannen und sich über ein F, wie sie lesen. Aber für die meisten visuellen Homepage-Designs, Sie suchen einen Z-Weg hier raus. Also, das ist, wo Sie auf diese Seite klicken, gehen über die Navigation, gehen Sie nach unten und beenden Sie dann. Also, denken Sie daran, wenn Sie anfangen, an dieses Layout in Bezug auf einen Scanabilitätsstandpunkt zu denken. Ok. Also, ich habe diesen groben Gedanken um einen Helden. Der andere Teil, den wir tun wollen, ist, dass wir unsere App visuell ein bisschen mehr zeigen wollen. Also, vielleicht hier, wenn das ein Ziel von uns ist, vielleicht fangen wir an, einige Screenshots einzuführen, vielleicht ist es schön, wann Sie können. Wieder werden wir die Geschichte erzählen, dass dies offensichtlich eine Anwendung ist, die Geschichte lebt offensichtlich im Web. Wenn es ein mobiles Design ist, ist dies eine große Verwendung von wo Sie beginnen, Designs fotoshopped in Geräte zu sehen , weil es hilft mit dieser Geschichte. Wenn Sie die Seite scannen, wissen Sie sofort, was hier passieren wird, Sie wissen, was das ist. Sie werden dies mit Buchlandingpages viel sehen. Auch wenn es sich um ein E-Book handelt, ist es wichtig, dass Sie es in den Kontext stellen. Also, wenn es ein E-Book ist und es auf einem Buch lebt, gibt es ein Buchlayout, es gibt dem Publikum oder dem Besucher ein klares, wirklich schnelles Verständnis davon, was das ist, was sie herunterladen werden. Also, in unserem Fall, was das ist eigentlich wird eine Art von App sein , die im Web lebt. Also, vielleicht ist dies eine gute Gelegenheit, sich mit etwas Interaktivität zu beschäftigen. Vielleicht ein guter Weg, um zu zeigen, gibt es unsere verschiedenen Bildschirme, verwenden Sie einige schöne konventionelle Navigationselemente, die das Design Zyklus. Vielleicht für die Geschichte möchten Sie auch beginnen, ein wenig über drei oder vier verschiedene Schlüsselelemente zu sprechen , aus denen Simply Social. Also, vielleicht willst du darüber reden. Vielleicht möchten Sie das auf diese Seite ein wenig bringen. Dies ist nicht etwas, wo wir Ihnen sagen, dass wir eine Social-Media-Website sind, Ihr Konto erstellen und hier posten. Wir sagen, dass wir uns mit Ihren Social-Media-Konten verbinden. Also, es ist wirklich klar, dass, das Ziel hier ist, dass wir Ihr Social-Media-Netzwerk nehmen, es in diese App bringen, und wir werden es für Sie einfach machen, wir vereinheitlichen Dinge. Vielleicht möchten Sie auch ein wenig darüber reden, wie es sicher ist. Ich denke oft, es gibt eine Sorge darüber, was Sie mit diesen Informationen tun werden wenn ich meine Konten verbinde? Na ja. Einfach in sozialen Netzwerken, es ist nicht nur eine gute Möglichkeit, Ihre sozialen Medien einfach zu verwalten, es ist auch eine sichere Art, dies zu tun. Dann denke ich, dass ein wichtiger Punkt hier ist, auch zu sagen, dass Sie jetzt tatsächlich posten können auf diese Social-Media-Konten als auch. Sie erhalten also ein paar Ideen, was Sie hier tatsächlich tun können, ohne sich noch für ein Konto anzumelden. Wenn Sie die Seite weiter verschieben, müssen wir ein schönes beschreibendes Element haben. Es könnte ein Absatz der Kopie sein, aber wir müssen sicherstellen, dass wir ihnen eine einfache Geschichte erzählen, was dieses Produkt tut. Also, Sie haben das die Haustür oder das Cover des Buches und Sie bewegen sie durch. Sie haben also möglicherweise eine echte einfache beschreibende Kopie, die die obige Anweisung sichert. Wenn Sie sich weiter durchziehen, werden Sie in Elemente wie soziale Beweise geraten, es ist wirklich wichtig, soziale Beweise auf Ihr Design aufzunehmen und wenn Sie Ihre Geschichte erzählen, denn das ist die überzeugende Mechanismus. Die Leute sind eher bereit, sich anzumelden oder Geld in eine Anwendung zu investieren oder was auch immer vielleicht, wenn das Vertrauen aufgebaut wurde. Das ist, wo wirklich tolle Zeugnisse oder Logos ins Spiel kommen, die besagt: „Wir bürgen dafür, wir haben in sie investiert, und wir haben den ersten Sprung gemacht, wir denken, Sie sollten auch. Wenn Sie also diese nutzen und diese effektiv nutzen können, und Sie Zeugnisse übertreiben können, aber wenn Sie einige wirklich wichtige Akteure haben , die Sie in Ihr Produkt und Ihre App einsteigen können, lassen Sie sie darüber reden, Stellen Sie sicher, dass Sie diese haben und haben Sie keine Angst, es zu benutzen. Also wollen wir sicherstellen, dass wir den sozialen Beweis hier haben. Was das jetzt tut, ist, dass du offensichtlich mit dem schnellen hohen Level beginnst, in einige Features eintauchst, wenn du die Frage stellen willst: „ Okay, nun, was bedeutet das für mich?“ Du fängst an, in Ordnung zu kommen, was du tun kannst, ist, dass du komponierst, verbindest dich mit einem gesicherten Konto , und dann offensichtlich hey, diese großartigen Leute benutzen und ich sollte es natürlich sein. Das ist also, was das für Sie und in Bezug auf Ihre Geschichte tut. Während Sie das weiter durchlaufen, können Sie sich diese Geschichte ansehen und Sie können gut sagen, vielleicht müssen wir das ein wenig aufklären. Vielleicht macht es Sinn, okay zu sagen, hier ist, was wir tun, hier ist, warum wir es tun, und dann sind hier die Funktionen, wenn Sie ein wenig mehr bekommen wollen, um die Schnittstelle zu sehen, und dann bekommen Sie in die sozialen Beweis Aspekte. Also, wenn Sie zum Ende dieser Seite kommen, fügen Sie hier meine Fußzeilendaten hinzu, sollten Sie wirklich schöne gefangene Action-Bücher irgendeiner Art haben. Könnte so einfach sein, ein Formular zu sein, es gibt eine Menge Dinge, über die wir reden können, wenn es um den tatsächlichen Konvertierungsmechanismus hier geht , und es gibt viele Studien um es herum, es ist nur ein Knopf, der sich öffnet in ein Modell. Das ist, wenn du deine erste Aktion machst, und wir werden ein bisschen mehr über die reden, wenn wir in die höhere Treue kommen, hier, aber wir werden nur anfangen, das auszulegen. Dies könnte also eine potenzielle Option sein, die in Betracht gezogen werden sollte. Ich würde das wahrscheinlich ein bisschen mehr verfeinern wollen, also mal sehen, wie wir das ein bisschen besser machen können. Sie können hier und wieder beginnen, Sie werden mit Ihrem Basissatz von Benutzermustern hier fortfahren wir einfach genug sagen, wir wissen, was das tun wird und unsere Fußzeile hier. Wir glauben, dass das funktioniert, aber mit unseren Zielen im Hinterkopf, ich denke, wir können ein wenig bessere Arbeit leisten, um diese beiden Welten vielleicht ein bisschen besser zu mischen. Ich denke, was du in Erwägung ziehen könntest, wenn wir hier über das Z-Muster nachdenken. Vielleicht ist es wichtig, einen Geräteschuss hierher zu bringen. In meinem Skizzieren halte ich es im Allgemeinen wirklich locker, weil es die Art ist, wie ich skizziere. Dann haben wir vielleicht unsere große Schlagzeile hier und dann unseren Aufruf zum Handeln. Was das tun wird, vielleicht Navigation, ist, wenn Sie sich über die Seite bewegen, die Sie mögen.“ Okay, das ist einfach sozial“. Das ist ein bisschen darüber, was du willst, dass ich tue, es ist vertrauensvoll, wir haben ein paar Informationen, also werde ich ein bisschen tiefer graben. Aber gleich danach werde ich hier rüber schießen, und ich werde Wow sehen, in Ordnung. Das ist, was die App ist. Je nachdem, was ich hier reingesteckt habe, ob es sich um eine Aufnahme des Aktivitätsstroms handelt, ob es sich um eine Aufnahme des Profils einer Person handelt, wird dies eine große Geschichte erzählen. Es wird wirklich sagen, was das ist, ohne dass es zufällig zu lesen. So ist es im Hinblick auf die Scanbarkeit viel effektiver. Dann kann ich das dann verfeinern und jetzt wäre dies eine gute Gelegenheit, vielleicht mit meiner beschreibenden Kopie und Überschrift nachzukommen, vielleicht hier. Also habe ich vielleicht einen Unterkopf, der anfängt, dies mit einem kleinen Absatz zu sichern. Vielleicht komme ich dann in meine drei verschiedenen Funktionen über das Produkt. Das ist, wo Sie in, dass Sie zusammenstellen verbunden ist es ein gesichertes Konto et cetera. Sie können beginnen, wieder zu sehen, wenn wir auf den Skalierbarkeitsaspekt für diese gehen. Weil wir in einer sehr schnelllebigen Welt sind, neigen wir nicht dazu, viel zu lesen, so schnell Sie beginnen mit dem High-Level-Hit von dem, was einfach Social ist. Also, wenn Sie das verfeinern, fangen Sie an zu sehen, dass Sie die Geschichte ein wenig auf der Seite verdichten. Sie erstellen eine Menge visueller Hinweise hier auch, mit der Überlappung, die hier mit dem Gerät passieren könnte, dann beginnen Sie vielleicht eine andere Art und Weise, die feineren Details einfach sozialen anzuzeigen. Sie können an dieser Stelle die Frage stellen, gibt es mehr, was ich darüber wissen muss, was ich noch nicht weiß, bevor ich mich verpflichte, Ihnen meine E-Mail-Adresse zu geben, und verpflichte mich, einfach sozial beizutreten? Dies ist, wenn Sie beginnen können, diesen Raum zu verwenden, und wenn ich sage Füllstoff, aber das ist, wenn Sie beginnen, irgendwie in einige der feineren Details Ihrer App zu gelangen. Also, für einfach soziale vielleicht fangen wir an, vielleicht haben eine coole Möglichkeit, die verschiedenen Screenshots der App anzuzeigen. Ich weiß es nicht. Vielleicht gehen sie als Raster über die Seite. Oder vielleicht sind sie alle hier gestapelt und wir haben hier einige interaktive Elemente, die es ihnen ermöglichen, tiefer zu tauchen und fast eine kurze Tour zu machen, bevor sie sich verpflichten. Vielleicht wohnt das hier. Was das tut, ist jetzt haben wir Teile davon genommen, es hier reingezogen, jetzt bekommen wir diesen wirklich schönen raffinierten optionalen Schritt für sie für diejenigen, die ein wenig tiefer in das, was einfach sozial vielleicht eintauchen wollen. Wenn sie weitere Fragen haben. Also, sobald Sie gehen und von, sobald Sie das überprüfen, Hintergrund zu Ihrer Geschichte, wir fangen an, auf unsere Ziele zu treffen, wir offensichtlich machen die App viel mehr Schnittstelle, und einige Apps brauchen sich keine Sorgen zu machen über das wie Facebook, LinkedIn, Twitter, wenn Sie ihre Homepages nachschlagen, wissen wir genug über sie, dass wir nicht wirklich brauchen, die Geschichte ist tatsächlich, sobald Sie in der App zu bekommen. Also, sie haben großen Luxus, Homepages erstellen zu können, die super effizient sind, und wenn man sie ansieht, ist es einfach nur ein Konto erstellen, dort nicht viel los ist außer dieser einfachen Aussage, und dann sind sie nur wollen, dass Sie sich in die App eintauchen, denn dort beginnt es wirklich zum Leben zu erwecken. Aber einfach sozial ist noch nicht ganz da. Die meisten Apps sind es nicht. Es dauert Jahre, um das Maß an Vertrauen und Verständnis zu erreichen, dass die Welt ihre Geschichte für sie erzählt. In diesem Fall brauchen wir viele dieser Elemente, um sicherzustellen, dass jeder versteht, was einfach sozial ist. Dann bringen Sie Ihre, es ist immer schön, wieder, wenn Sie Schritt Person noch Fragen hat, Sie wahrscheinlich sagen: „Hey, werden Sie wahrscheinlich sagen: „Hey, mach dir keine Sorgen, weil diese großartigen Leute tatsächlich unsere App und Sie sollten dem Club beitreten“, das ist im Wesentlichen, was dieses soziale Beweiselement tut. Wir können das sogar weiter mit, vielleicht einige Social Media Icons und wie viele Anhänger wir bereits hatten und Interessen haben wir außerhalb von einfach sozialen rund um unsere Gemeinschaft? Wie groß ist unsere Gemeinschaft? Haben wir Tausende und Tausende von Twitter-Followern? Ist unsere Facebook-Seite super massiv? Wie alle, die Hinweise sind visuelle Hinweise, die den Besuchern Ihrer Website helfen zu verstehen, dass dies ein Ort ist, an dem ich sein muss und ich investieren sollte. Also, dann vielleicht wie immer, wirst du das mit dieser Auszahlung verfolgen. Also, wenn Sie anfangen, durch dieses Konzept zu laufen, können Sie beginnen zu sehen, wo ich denke, dass unsere Ziele ein wenig besser getroffen werden. Wir haben auf die schönen visuellen Hinweise darauf getroffen, was die App ist, wir haben einen wirklich guten Job gemacht, ich denke, ich habe es erklärt. Dann sichern Sie auch diese Geschichte mit Beweisen, und fahren Sie sie dann eindeutig auf die Seite mit einem netten Call to Action, und dann gelangen Sie in die Fußzeile. Also, das sind einige lose Ideen, ich werde wahrscheinlich jetzt nur ein wenig mehr einrahmen, durch sie als nächsten Schritt arbeiten, und dann springen wir auf den Computer, und werden auf diese Prinzipien erweitern und wir werden sprechen darüber, wie Fotografie, spielt eine Rolle in dieser Geschichte, Dominanz und Farbe, all die anderen Elemente, die gehen, um vielleicht dieses Konzept zum Leben ein wenig mehr zu erwecken . 5. Designerstellung [Teil 1]: Jetzt, da Sie unsere lockeren Ideen haben, werden wir beginnen, dies in ein High-Fidelity-Design zu verwandeln. Ich denke, aus den beiden, ich fühle, dass das zweite Konzept beginnt, ein wenig besser für unsere Ziele in Bezug auf einen Hierarchiestandpunkt zu arbeiten , da Sie schnell scannen, da bestimmte Dinge bereits auftauchen, also gehen wir in diese Richtung. Also, fühlen Sie sich frei, Sketch oder Photoshop zu verwenden, es ist Ihre Wahl für die Bedürfnisse dieser. Ich werde nur Photoshop verwenden, weil envision einige wirklich coole Integrationen hier hat, die wir später verwenden können, um zu helfen, dies für den letzten kleinen Schub zu optimieren. Aber im Moment werden wir nur mit einem Dokument beginnen. Ich habe bereits eine hier aus Gründen der Zeit erstellt , aber wenn Sie möchten, dass einige Dimensionen arbeiten, dafür habe ich dieses Setup bei 1500 Pixeln von 4355 Pixeln. Das ist ein Ort, an dem man anfangen kann. Nochmals, wir haben jetzt diese tollen Monitore. Es wird die Größe der Bildschirme genutzt, um unsere Geschichte tatsächlich ein bisschen besser zu erzählen. Ich habe ein paar Guides, die ich hier bereits markiert habe, aber das ist wieder, wir werden diese Ideen hier auf dem Bildschirm bekommen und dann können wir von dort aus Finesse machen. Je nach Skill-Niveau werden wir nicht auf die feineren Dinge über Photoshop gehen, aber es gibt viele andere großartige Ressourcen hier auf Skillshare, ich bin sicher, dass ich Ihnen dabei helfen werde. Lassen Sie uns also beginnen, indem wir zuerst einige Elemente einziehen, mit denen wir arbeiten werden. Wir haben dieses Design, offensichtlich brauchen wir ein Logo. Ich habe eine Markenrichtlinie, die ich werde ziehen einige Dinge über, die wir bereits haben, sind einfach sozial. Diese werden alle in den Assets-Ordner des Projektcurriculums gespeichert, also fühlen Sie sich frei, das zu greifen oder wie gesagt, verwenden Sie Ihre eigenen. Also werden wir diese Gelegenheit nutzen, um auch ein wenig über einige Bilder zu sprechen. Wir wissen, mit einfach sozialen, wir reden mit einem jungen Profi. Jemand, der offensichtlich wirklich aktiv auf einer Reihe von Social-Media-Websites ist. Vielleicht verwendet diese Person LinkedIn, Facebook, Twitter, Instagram. Ihre Welt ist sehr in soziale Netzwerke verbraucht. Das ist ein Ort, an dem man anfangen kann. Ich habe dieses wirklich tolle Bild hier gefunden ich denke, dass wir anfangen können, unsere Geschichte ein wenig zu erzählen. Um das zu bringen, werden wir das auf ein bisschen mehr aufschlüsseln , warum ich denke, dass dieses Bild wirklich gut für uns funktionieren wird. Ich werde das umdrehen und anfangen, ein bisschen mehr darüber zu reden. Ich werde das einfach ganz schnell mit einem kurzen Blick auf die Masse schneiden. Ich will, dass es da drüben ist. Es geht darum, wo finde ich, dass 800 Pixel ein guter Ort sind, um diesen Cutoff zu haben. Also dieses Bild, das für mich funktioniert, wollen wir eine Geschichte erzählen, die einfach Social wird Ihr Social Media Leben zu vereinfachen. Es gibt etwas wirklich cooles an diesem Kerl, der etwas so beschäftigt wie eine Stadt überblickt, aber in diesem ruhigen Raum des Sitzens am See hier. Er passt offensichtlich ein bisschen zu unserer Demographie. Dass der nette Vorteil, den wir hier haben, ist er in unser, was hoffentlich unser Interface-Shot sein wird gewölbt. Er wird natürlich dein Auge hineinbringen. Normalerweise gibt es viele nette Dinge, die passieren, wenn Sie Bilder oder Gesichter verwenden, die sie in Ihren Aktionscode zeigen. Sie werden anfangen, eine Aufnahme nur von dieser kleinen Veränderung zu sehen. Natürlich als Menschen, die wir folgen, müssen wir uns Gesichter ansehen und den Augen folgen, aber das ist wirklich ordentlich, wenn du anfängst, diese wirbelnde Bewegung in deinen Schnittstellenschuss zu kreieren . Offensichtlich ist dies wahrscheinlich ein wenig zu stark von einer Behandlung hier. Sie können einige gültige Dinge sehen, die passieren. Also, was wir wahrscheinlich tun wollen , ist, ein paar andere Bilder hier zu posten und dann werden wir darüber reden, wie wir das zurücksetzen können, wenn es um die Behandlung unserer Bilder geht. Lassen Sie mich einen Assets-Ordner öffnen. Ich habe bereits ein MacBook-Bild hier drin. Das ist bereits mit der Schnittstelle darin ausgeschnitten. Ihr werdet es wahrscheinlich selbst machen, aber um der Zeit willen habe ich das Gefühl, dass es gut wäre, das schon da drin zu haben. So können Sie so schön sehen, wie dies aussieht, gibt es immer noch ein Problem. Wir haben hier ein Dominanzproblem. Wir versuchen zu viel zu tun. Wir müssen das wirklich zurücksetzen. Das Tolle daran, wenn Sie wirklich hochwertige Fotos verwenden , ist, dass Sie viele tolle Dinge haben, mit denen Sie arbeiten können. Das ist der Schlüssel zum Erstellen einer wirklich effektiven Homepage ist es, mit tollen Fotos zu beginnen. Vielleicht können wir dieses dominante Thema einfach ändern, indem wir ihn nur ein wenig zurücksetzen und du wirst anfangen zu sehen wie er hier ein wenig von der Seite abspringt. Jetzt fangen Sie an, diese Betonung hier zu sehen, die auf einfach soziale geschieht, aber Sie haben auch diese wirklich coole Lifestyle-Aufnahme, die offensichtlich mit einem Design zu arbeiten beginnt. Du erzählst diese Geschichte schon, wenn wir noch nicht einmal auf die Details der Dinge gekommen sind. Lassen Sie mich hier einige Navigationselemente heranziehen. Ich ziehe die hier von unserem Markenboard her. Wir werden eine schöne kleine Tour machen und dann in Bezug auf etwas zu denken, Sie werden sehen, dass ich diesen wirklich schönen Platz hier habe. Im Zweifelsfall lüften Sie Ihr Design aus. Dinge können ein wenig zu eng werden und jedes Mal, wenn Sie entwerfen, was Sie tun, ist Sie Ihre Geschichte verwirren oder Sie versuchen, Menschen zu viel in allen auf einmal nehmen, so dass ich wirklich auf der Seite des Raumes um Ihr Logo lüften möchte. Sie möchten diese Momente der Pausen in Ihrer Geschichte haben, damit die Leute konsumieren können , was Sie ihnen sagen wollen, entweder unbewusst oder direkt. Also, lassen Sie uns einfach ein paar Navigationselemente hier eintreten. Wieder, wir werden das nur rausholen. Wir werden das verfeinern, das ist alles andere als ein endgültiges Design, aber wir werden von dort gehen. Vielleicht haben wir einen Link zum Support oder wir haben einen Tour-Support kann auf die Fußzeile gehen, aber wir werden es einfach hier oben in das obere Navi und dann denke ich, dass wir die Möglichkeit haben, dass jemand sich einloggen kann, weil wir offensichtlich ein großer Aufruf zum Handeln, der sich tatsächlich anmeldet, daher müssen wir das möglicherweise nicht unbedingt hier an dieser Stelle einbeziehen. In Ordnung. Also, da gehen wir. So beginnen Sie zu sehen, wie sich dieses Design zu spielen beginnt. Lassen Sie uns hier unser standardisiertes Überschriftenelement heranziehen. Unsere Schlagzeilen, entschuldigen Sie. Bringen Sie das hier rein. sehen immer noch einige Wertprobleme hier, also werden wir versuchen, dies ein bisschen mehr zurück zu setzen, wo wir können. Ok. Alles klar, und wieder rauen wir die Dinge ein. Dann bringen wir unser Standard-Button-Asset ein, da wir das bereits von unserer vorherigen Landingpage haben, und oft müssen Sie Dinge nicht neu gestalten, um das Rad neu zu erstellen , aber unser vorheriges Design hatte bereits eine wirklich schöne -Richtlinien festgelegt. Also, wir werden nur wiederverwenden, wo wir können, sondern auch nur mehr oder weniger bessere Arbeit bei der Betonung bestimmter Sache ist unsere Ziele. Es bedeutet also nicht immer, dass Sie Ihre gesamte Marke neu gestalten müssen , um Ihre Conversions zu erhöhen. Also, Sie fangen an zu sehen, wie sich das wirklich formt, denke ich, schön von wieder, die Hierarchie Standpunkt der Dinge. Wirklich bekommen sie in die Geschichte, seit es war, zurück zu unserem Konzept hier zu gehen. Du hast all diese Stücke fangen an, schön zusammen zu spielen. Diese Überlappung wird wirklich schön sein, aber wir müssen dieses visuelle Cue wirklich ein wenig nach unten ziehen , aber lassen Sie uns den Helden an einer guten Stelle nennen und uns die Seite ein wenig hinunter bewegen. Wenn Sie an Abschnitte denken können, werden Sie ein wenig besser in Bezug auf die Auslegung der Dinge zu tun . Natürlich wird sich dein Geist auf diese konzentrieren, wenn du anfängst sie auseinander zu brechen, anstatt alles auf der Seite auf einmal zu setzen. Nun, wir haben diese wirklich coole visuelle Sache hier passiert. Wir haben diese Farbe, die dich durchzieht. Es fängt wirklich an, hier zu erscheinen , also wissen wir, dass hier etwas Wichtiges passieren muss. Das ist, wo wir angefangen haben und wir wollten anfangen, die Untergeschichte zu erklären , was wir mit Social Networking vereinfacht meinen, wie erklären Sie das mir. Das werden wir hier machen. Wenn Sie auf unsere Skizze zurückgehen, wollten wir ebenso wie unsere Ziele betonen, was Simply Social ist, ein besserer Weg als in der Vergangenheit. Also, die Art, das zu tun, ist, dass Sie copy verwenden können, in unserem Fall werden wir eine schöne Überschrift hier haben, und ich denke, wir werden eine nette einfache Aussage haben , die nicht viel ist, aber es gibt nur den Ton für diesen ganzen Abschnitt. Also, ich habe ein Exemplar, wie gesagt, bereits hier erstellt, aber du wirst dein Exemplar benutzen. Auch zögern Sie nicht, Ihre eigene Kopie für Simply Social zu bewerten. Was würden Sie hier besser tun, um dieses Design in Ihren Ansichten viel effektiver zu machen? Das würde ich gerne sehen. Also werde ich ein paar andere Elemente heranziehen. Jetzt fängst du an zu sehen, wo wir diesen riesigen Vorsprung haben , und wir fangen an, ihn zusammenzureißen, und du kannst schon aus visueller Sicht sagen , dass wir anfangen werden, dies in eine tiefere Geschichte zu brechen rund um Simply Social. Also, wir werden dieses Thema um Bilder fortsetzen, um diese Idee, etwas so Komplexes und chaotisches wie soziale Medien zu nehmen, und es mit dieser Ruhe zu kombinieren, die Simply Social tun wird. Wir haben das mit diesem tollen Foto gemacht, wie dieser beruhigende Kerl, der etwas so Komplexes ansieht. Aber ich denke, wir können das auch hier tun, und wir werden dasselbe Thema der Natur nutzen , um das zu erreichen. Also, wir haben dieses wirklich coole, wieder, ein wirklich cooles Hintergrundbild. Dies wurde bereits erstellt, also werde ich das einfach direkt hineinlassen. Es hat eine wirklich schöne Werte hier passiert. Also, du hast diesen wirklich coolen, stürmischen Schuss. Ich zeige Ihnen das Original jetzt Rückschlag und gedämpft. Also, wir haben diese wirklich klare Beschreibung, worum es bei Simply Social geht, aber wir wollen etwas tiefer in diese drei Schwerpunktbereiche eintauchen. Ich habe mir etwas Zeit genommen, um das etwas zu verfeinern. Diese drei Bereiche sollten wirklich wichtige Unterscheidungsmerkmale sein , die Sie von Ihrer Konkurrenz abheben. Wir werden nur wirklich spielen die Idee, dass Sie posten können, Sie können alle Ihre Konten verbinden, denn es gibt immer offensichtlich eine Frage welche Konten ich mit Simply Social verbinden kann. Wir werden das wirklich schnell beantworten und wir werden darüber sprechen , wie dieser Nutzen von Simply Social und die Idee einer einfachen Social-Networking-Site wie diese und das Ziehen an einem Ort tatsächlich zunehmen wird Ihr Engagement mit allen, mit denen Sie sich regelmäßig beschäftigen. Also werden wir damit anfangen, wie das hier aufgestellt ist... Wir werden einige Symbole hier haben. Icons sind eine gute Möglichkeit, wieder kleine visuelle Cue zu veranschaulichen, was etwas ist. Es ist ordentlich, wie sich dieses Design anfühlt. Es gibt viele komplexe Dinge, aber es scheint immer noch kontrolliert zu sein. Das liegt daran, dass wir unsere Ziele klar definiert haben. Wir haben klar gesagt, dass unsere dominante Sache hier ist, die App ein wenig besser zu zeigen und wir werden in diese kleinen Stücke gehen, aber wir verlieren nicht die Betonung auf der tatsächlichen Darstellung der Schnittstelle und wir verwenden die Bilddaten, mehr oder weniger, richten Sie eine schöne Kulisse, die das alles lebt oben. Offensichtlich werden Ihre Besucher sagen ich frage mich, warum sie diesen Baum hier oder diese stürmische Umgebung benutzt haben , aber er spielt in den Hintergrund oder im Unterbewusstsein ein wenig. Sie können die Frage stellen, aber Sie wollen natürlich eine Antwort haben, und wir tun es. In Ordnung. Also, ich habe ein Exemplar, das ich hier ausfüllen werde. Wir werden sagen Connect und wir hier Engage sagen weil dies die drei Vorteile sind, die Simply Social Ihnen bietet. Es gibt Ihnen die Möglichkeit zu posten, sich zu verbinden und zu engagieren. Wir müssen nicht alles erzählen. Wir müssen nicht in jedes kleine Detail eingehen, was ich oft denke, dass Marketing-Websites tun und ich denke, dass das ist, wo die Konvertierung beginnt, ist weil die mehr Informationen manchmal, die Sie teilen, die mehr Fragen, die zu Ihren Besuchern gebracht werden und desto verwirrter sie bekommen. Also, jederzeit, wenn Sie mehr oder weniger halten die Dinge wirklich, wirklich konzentriert, und Sie können sehen, das Hauptthema hier ist die Definition dieser Ziele, Festhalten an diesen Zielen, und halten Sie die Dinge wirklich, wirklich konzentriert, wenn Sie in diese Erwartung zu kontrollieren. Also, hier können Sie anfangen zu sehen, dass wir diesen Abschnitt für uns arbeiten und ich mag es. Wir können mit unserem Texter arbeiten, ich verschärfe das alles. Aber für richtig, wir haben einige wirklich wichtige Unterscheidungsmerkmale, auf die wir treffen. Es sitzt in einer wirklich schönen Art, es auszulegen, vielleicht gibt es hier eine Möglichkeit, einige Ausrichtungen zu erstellen, um diese ein wenig zu verbinden. Also, wenn sich Ihre Augen hier durch bewegen, können Sie sehen, dass dies nicht drei getrennte Dinge sind, aber das ist eine Einheit. Wir können das verschärfen, sobald wir in die letzte Phase gekommen sind. 6. Designerstellung [Teil 2]: Gehen wir zu einer Art von wie wir unsere tatsächlichen Funktionen anzeigen wollen. Wenn wir zu unserer Skizze zurückkehren, haben wir jetzt die Gelegenheit, ein paar Teile der App hervorzuheben. Um zusammenzufassen, wir haben irgendwie den Helden zum Laufen gebracht, er setzt unsere Geschichte auf, wir gehen hier rüber, du kommst in die feineren Details, es ist eine Art der nächsten Hierarchie unserer Geschichte, was ist das für High-Level-Erbsen oder die zweite Stufe I raten, was einfach sozial ist. Nun, wir wollen etwas tiefer bohren. Es gibt immer andere Fragen, na ja, sieht der Kompositionsbildschirm vielleicht aus oder wie sieht mein Profil aus? Wenn ich mich hier rausbringen werde. Denn das coole Ding an Simply Social ist, dass Sie sich auch individuell mit einigen Leuten verbinden können , so erstellen Sie hier Ihr eigenes Mini-Profil zusammen mit Ihren anderen Social-Media-Konten miteinander verbunden. Also, es gibt offensichtlich eine Frage, wie soll ich online angesehen werden? Also, das sind alles Dinge, die wir in diesem Abschnitt beantworten werden. Also, fangen wir wieder mit unserer Art einer Kulisse an. Wir haben bereits ein wirklich cooles Hintergrundbild. Jetzt schauen wir uns wieder etwas anderes an, das stürmisch ist, das eingedämmt werden muss. Ich habe immer noch das schon hier sitzen, wir werden das einfach reinbringen. Um diese Effekte zu tun, ist es irgendwie wirklich ziemlich viel. Nur eine Frage des Spielens mit Opazitäten, um diese so zum Laufen zu bringen, wie sie arbeiten. Aber Sie können sehen, es gibt eine Menge Bilder hier, aber nichts ist überwältigend, was wir wollen, dass die Leute aus dieser Seite herauskommen. Also, ich werde in diese Elemente ziehen, ich habe sie alle Arten von bereits erstellt. Ich werde die reinbringen und sehen, wie die funktionieren können. Vielleicht wollen wir uns hier auf eins nach dem anderen konzentrieren, also vielleicht werden wir das einfach ausschneiden, anfangen zu sehen, ob die Dinge werden könnten, vielleicht haben wir eine Schlagzeile, irgendwo in der Überschrift könnte über die Spitze sitzen, die sich tatsächlich ein wenig seltsam fühlen, um ehrlich zu sein, und Sie betrachten die Art und Weise, wie Sie die Seite scannen, irgendwie bricht diesen Fluss, also ist es vielleicht am besten, um eine Art von Offset, wie wir ursprünglich skizziert hatten. Ich denke, ich werde das wirklich deaktivieren. Weil das wirklich von der Seite springt. Es schafft wirklich eine Dimension, die cool ist. Dann brauchen wir ein paar Kontrollen, okay? Wir können verwenden, diese könnten alleine radeln oder wir könnten ein bisschen von beidem machen. Vielleicht fahren sie auf eigene Faust, aber wir haben auch die Fähigkeit , sich mit denen zu verbinden, wenn wir es wünschen. Also, ich habe noch ein paar Symbole. Wir werden ein paar andere Dinge hervorheben, oder? Wir möchten den Feed vielleicht hervorheben, wie sieht der Feed für Ihr Profil aus? Wie sieht das Komponieren aus? Das ist vielleicht, wie sieht ein Profil aus? Wir werden diese Szenarien testen, um sicherzustellen, dass es genau das ist, worüber wir sprechen möchten. Aber im Moment werden wir diese einfach ins Spiel ziehen, sollten Marine sein. ( unhörbar) hier. Sie könnten auf diese klicken, Sie werden diese Änderung sehen, und wir können wahrscheinlich auch eine Art von Linienarbeit betrachten , die mit dem funktioniert, wenn wir die Dinge zusammenziehen. Also, jetzt haben wir das dritte, ich schätze, du könntest das dritte Kapitel der Geschichte sagen, hier drin irgendwie aufgeraut ist. Der nächste Teil geht wieder auf unsere Skizze zurück, den sozialen Beweis. Dies ist eine Art, wo Sie jetzt beginnen, sie in die Art von Ende des Buches oder das Ende der Geschichte zu bewegen . Du kopierst diesen schönen Fluss, führst ihn hoch und ziehst sie durch. Dies ist ein schöner Moment der Erfassung, Ihr Auge springt aus der Seite wirklich schön, wir kommen über. Also, jetzt wollen wir hier etwas tun, was ich denke, kompensiert, was wir in diesem Abschnitt tun, aber auch beginnt, einige dieser sozialen Beweis einzuführen. Also, wir haben noch eine coole Fortsetzung mit diesem Thema, eine weitere wirklich gute Möglichkeit, um zu zeigen, einige Hektik. Aber wir werden es mit etwas optischer Deckkraft unterwerfen. Also, ich werde das einfach für euch reinwerfen. Fühlen Sie sich wieder frei, jede Farbkombination zu verwenden. Wir denken, das funktioniert, weil ich denke, es beginnt zu Sandwich dies wirklich schön, wenn Sie durch die Seite gehen, springt weg, das Gerät wirklich schön als gut. Wenn es um den eigentlichen Testmodus geht, können Sie eine Reihe von Dingen tun. Sie können sie irgendwie in ein Raster setzen, lassen Sie sie einfach die Seite laufen, wir können ein wenig interaktiver werden, vielleicht gibt es ein Karussell, das durchblättern, vielleicht gibt es tatsächliche Karten, es gibt eine Menge visueller Dinge, die Sie hier tun können. Aber das Wichtigste ist, wirklich, nur die sozialen Beweise zu betonen, und ich sehe, dass es auch ein paar Elemente des sozialen Beweises auf der Seite gibt. Es gibt Zeugnisse, und dann denke ich, wir wollen anfangen ein wenig von einigen teilen Social Media, auch soziale Beweise. Aber hier wollen wir nur sicherstellen, dass wir den Leuten einen Moment Zeit nehmen, Pause machen und diese Zeugnisse konsumieren lassen. Also, wir werden das im Hinterkopf behalten, während wir das entwerfen. Wir haben das schöne Thema, mit einem wirklich schönen Icons zu gehen, bringen Sie diesen Kerl wieder rein. Es sitzt einfach irgendwie auf der Seite. Wir haben hier noch eine Aussage, und das kann, das wird hineinbringen. Nun, der Wechsel zu einem zentrierten Layout, funktioniert hier, weil wir eine Art von der Mitte Layout hier passiert. Wir haben das irgendwie abwechselnd, also wenn es um das Layout geht, denken einige, dass sie das ein wenig aufbrechen, während Sie durch die Seite arbeiten. Ich denke, was wir tun werden, ist einfach nur den Headshot zu zeigen, die Beschreibung, von wem diese Person stammt, und wir lassen das auch hier sitzen. Ich habe schon ein paar davon hier. Vielleicht haben wir [unhörbar] Ich denke, es gibt eine weitere großartige Gelegenheit, hier einige visuelle interaktive Stücke zu machen. Ich mag es, ein wenig Interaktivität zu setzen, wo immer wir können, aber ich werde es nicht zu viel über die Macht lassen. Wie ich schon sagte, ist das Ziel hier wirklich, mehr über das Layout zu sprechen, Storytelling versus wie genau, wie man eine Reihe von tatsächlichen Behandlungen hier zu tun. Also, fühle dich zuversichtlich, einige dieser Bilder zu komponieren , ist irgendwie eine nette Art, das für euch zu tun. Also, das fängt an, wirklich schön auszusehen. Ich meine, es könnte ein paar Kontrollen hier geben, vielleicht auf dem Handy, ich denke die mobile Erfahrung vielleicht einfach mit dem Daumen durchblättern. Vielleicht sind dies andere Arten von Gesten, es gibt eine Menge Dinge, die wir hier tun können, wenn Sie anfangen, in die Optimierung rund um mobile. Aber im Moment denke ich, das fängt an, sich wirklich schön zu gestalten. Ok. Also, während du durchmachst, fragst du dich immer, sind wir auf dem Ziel? Werden wir vom Ziel ablenken? Weil du jetzt anfangen wirst, sich abzuschließen, und ich denke, wie in der Skizze, haben wir wirklich gute Arbeit geleistet, um zur richtigen Zeit abzuwickeln und sie in die eigentliche Go-to-Aktion zu ziehen. Also, in diesem speziellen Design, und Sie können ein paar Designs haben, wo das Ziel für Ihre Homepage vielleicht auch nicht nur erhöhen Anmeldungen, sondern vielleicht wollen Sie auch die Newsletter-Anmeldung erhöhen, so gibt es eine Anzahl der Dinge, die auf einer Homepage passieren können, aber es ist wichtig, immer eine zu betonen. Dies wird ein Bereich sein, in dem ich Ihnen eine gute Art zeigen werde, das zu tun. Viele Male, es ist eine Frage, wie Sie es auf der Seite einrichten. Also, lassen Sie uns in die Art des Kontaktbereichs gehen hier. Ich denke, dafür werden wir es einfach und farbig halten, gegen das Erhalten, denn jetzt wollen wir, wie ich schon sagte, wir wollen sie abwickeln. Ich denke, das ist eine gute Möglichkeit, ein Kontaktformular einzuführen. Aber wir werden auch einige zusätzliche soziale Beweise hier haben. Vielleicht geben wir ihnen die Möglichkeit dazu. Wenn sie noch nicht bereit sind, sich anzumelden geben wir ihnen vielleicht die Möglichkeit, uns jetzt ein wenig zu folgen. Vielleicht wollen wir sie in irgendeiner Art von Interaktion mit unserem Unternehmen oder mit dem Produkt treiben . Aber wenn sie nicht bereit sind, sich anzumelden, wollen wir ihnen eine weitere mögliche leichte Berührung und eine leichte Gelegenheit geben , sie in etwas anderes zu verwandeln, in einen anderen Trichter irgendeiner Art. Also, ich denke, das ist, was wir hier tun werden, ist, dass wir den Kontakt schieben oder das Formular anmelden. Aber auch, vielleicht schauen Sie sich etwas hier unten zu tun ihre sozialen Beweise zu fördern und zu zeigen, aber auch geben Sie ihnen die Möglichkeit, uns auf Facebook oder Twitter zu folgen. Es ist eine sehr einfache Behandlung hier. Wir werden dieses Formular hier nur sehr schnell ausschalten. Auch hier habe ich ein Formular, das wir bereits in einem früheren Design verwendet haben, von dem wir wissen, dass es tatsächlich vom Standpunkt der Formatierung und vom tatsächlichen Konvertierungsstandpunkt aus funktioniert . Das Problem mit diesem Design war nicht ganz darauf, ob unsere Form so viel konvertierte, wenn sie die gesamte Geschichte des Produkts in Bezug auf die Funktionalität unseres Aufrufs zum Handeln bekommen . Weil es eine Menge Dinge gibt, die Sie hier tun können. Wenn es um Ihre Conversions geht, können Sie einfach einen Button hier haben, der ist-. Melden Sie sich an. Das funktioniert großartig. Es gibt viele Studien. Wenn Sie sie dazu bringen, sich genau das zu verpflichten und es ein Modal aufwirft, können Sie irgendwie den Rest der Informationen für uns bekommen. Dinge funktionieren wirklich gut, wenn wir sie einfach in die... bekommen einige ihrer Informationen früh, und sie irgendwie direkt in das eigentliche Onboarding bringen. Also, unser Formular und das willen ist einfach Anmeldeformular, ist einfach Anmeldeformular und sie werden fortfahren, und das wird sie tatsächlich direkt in die eigentliche App bringen, wo sie anfangen können, mehr zu engagieren. Also, ich werde dieses Formular schnell ausschalten. Dann werden wir in diesem Abschnitt darüber sprechen, und wir werden darüber sprechen, wie das alles zusammen funktionieren wird. Also, jetzt haben wir unser Anmeldeformular, wir haben das auf eine Weise ausbalanciert, die... Offensichtlich ist das erste, was wir wollen, dass sie anfangen. Wir wollen sie bekommen, wenn sie nicht bereit sind, das zu tun, werden wir einfach nur sehen, ob sie sich zu einer dieser beiden Optionen verpflichten. Auch hier könnten Sie dies viel mehr vereinfachen, wenn Sie möchten, und verwenden Sie einfach einen Call to Action, der ein Modal öffnet oder sie auf eine andere Seite bringt, und alles, was sie tun, ist sich darauf zu konzentrieren. Aber wir haben herausgefunden, dass wir einige gute Conversions um sie herum hatten, die gerade von Anfang an langsam in den Onboarding-Prozess gestartet wurden. Dann wickeln wir dieses Design mit einer kurzen Fußzeile ein. Also, der nächste Schritt ist, ich werde dieses Design einschließen und dann werden wir es in die Vorstellung bringen und darüber gesprochen, wie man Feedback von Ihrer bestehenden Benutzerbasis oder innerhalb Ihres internen Teams erhält. 7. Kooperation und Feedback: Ok. Also, jetzt sind wir bereit, dieses Design zu übernehmen, und wir sind bereit, ein Feedback dazu zu bekommen. Wir werden das tun, indem wir es in InVision bringen. Ich erstelle einen guten Prototyp und zeige Ihnen, wie Sie ihn mit anderen in Ihrem Unternehmen oder mit bestehenden Kunden teilen können. Sie erhalten ein hohes, schnelles Feedback, bevor Sie beginnen Ihre Idee ein wenig mehr zu verfeinern und an die Entwicklung weiterzugeben. Das erste, was Sie tun müssen, ist, dass Sie ein kostenloses InVision-Konto erstellen müssen, wenn Sie es noch nicht getan haben. Sie können dies tun, indem Sie sich einfach bei invisionapp.com anmelden, Ihre Anmeldeinformationen eingeben und dann ein kostenloses Konto haben, das für ein Projekt gut ist. Ich habe bereits ein Konto, also was ich tun werde, ist ein Projekt zu nehmen und zu erstellen. Es ist wirklich einfach. Ich werde nur diese Simply Social Homepage nennen. Es wird ein Desktop sein. Es gibt eine Menge Dinge, die Sie rund um mobile tun können, aber das ist ein Desktop-Projekt, also werde ich es einfach erstellen. Das nächste, was Sie tun möchten, ist, Ihre Designs in InVision zu bringen. Sie können das tun, indem Sie sie hier ziehen und ablegen, im Forum surfen, aber ich verwende gerne InVision Sync, was wirklich cool ist und eine wirklich gute Möglichkeit ist, Dinge in InVision zu bringen, um Updates on the fly zu machen , ohne Ziehen Sie alles so ziemlich für den Rest des Projekts, sowie greifen Sie auf eine Reihe von anderen gemeinsam genutzten Assets mit Ihrem Team zu. So funktioniert es sowohl mit Dropbox als auch auf Ihrem lokalen Laufwerk. Also, wir haben unsere Bildschirme jetzt in InVision mit InVision Sync. Jetzt möchten wir diejenigen Prototypen erstellen, die diese anklickbar machen, damit wir im Kontext ein echtes Feedback von ihnen erhalten können , ohne ihnen JPEGs per E-Mail senden zu müssen. Also, geh hier rein. Wir werden hier ein paar schnelle Einstellungsänderungen vornehmen. Wir werden diesen Hintergrund schwarz machen, nur um das ein bisschen mehr auftauchen zu lassen, aber wir sind bereit, mit dem Prototyping zu beginnen. Das erste, was Sie tun möchten, ist zu beginnen, dies zu verknüpfen, wirklich schnell, ohne Code zu schreiben. Kommen Sie hier rein und wir haben dieses Benutzermuster, über das wir gesprochen haben, das wird über alle Seiten gehen , die einfach eine Vorlage sein wird, und wir können dieses nav aufrufen. Da wir wissen, dass es auf allen Seiten gehen wird, werden wir dies auf die eigentliche Homepage gehen lassen. Ich gehe auf die Startseite und klicke auf Speichern. Dies wird tatsächlich zu einer Tour gehen, und vielleicht wollen wir, dass tatsächlich fahren, um die tatsächliche, oder eine Stelle auf dem Bildschirm. Also, vielleicht, wenn ich das so setze, dass es tatsächlich zu diesem Abschnitt geht, oder es könnte zu einer externen URL gehen, ist es egal. Also, jetzt haben wir diesen Anmelde-Button. Wie natürlich wollen wir das bis zum eigentlichen Anmeldeformular fahren . Ich möchte diesen reibungslosen Übergang machen, und dann werden wir auch schnell Prototypen. Das könnten wir Prototypen machen, aber um der Geschwindigkeit willen, werden wir gerade jetzt einen Prototyp in diesem Abschnitt machen. Also, einfach zu tun ist einfach Hotspot. Wir werden das zu Testimonial 2 bringen, sehen das ist. Wir werden diese Stelle auf die Seiten halten und fallen lassen, und dann werden wir das hier tun, um zu Testimonial 3 zu gehen, und wenn wir das alles wirklich schnell testen, werden Sie sehen, sobald Sie das in die eigentliche Demo bekommen haben, wie das alle zur Arbeit gehen. Also, ich bin in meinem Vorschaumodus, klicken Sie einfach auf den Augapfel, wir können hier, Sie klicken auf Registrieren und fahren Sie einfach direkt nach unten auf der Seite. Ich klicke auf Angela Wells, es wird sie in den Vordergrund bringen. Nun, eigentlich, wenden Sie das auf alle Seiten dort an. Also, was wir tun werden, ist, dass wir den Rest von diesem unter diesen anderen Seiten schnell Prototypen erstellen und dann werden wir darüber sprechen, wie wir die Bühne für Feedback setzen und beginnen, einige Kommentare dazu zu bekommen. Also, wir haben alles Prototypen erstellt und es ist bereit zu teilen. Das erste, was ich zuerst tun möchte, als Designer, der sich bereit macht, dies zu präsentieren, möchte ich einige Notizen hinterlassen, vielleicht einige kurze Diskussionen führen. Wenn Sie diese coole Funktion hier Tours genannt haben , ermöglicht es uns, kleine Notizen mit unserem Team zu machen ohne zu gehen und den notwendigen Kommentar hinterlassen zu müssen. Dies können Sie einfach Tour Point anrufen. Also, vielleicht werde ich vorschlagen und ich möchte hier machen, wir können dies tatsächlich zu einem animierten GIF machen, um die Feed-Gedanken zu scrollen. Das sind alles Dinge, die nur einige Diskussionen beginnen. Sie sind nicht wirklich umsetzbare Kommentare, aber sie sind Dinge, an die Sie vielleicht denken. Vielleicht wollen wir das auch mit einem anderen Abschnitt machen, vielleicht machen wir das Gleiche hier, wo wir sagen: „Ist das der beste Screenshot? Kann es besser sein?“ Ich werde nur bemerken, vielleicht der Texter, wir haben die vielleicht durchgeredet : „Wir müssen eine Kopie verfeinern. Können wir den Texter reinziehen?“ Um nur ein paar kurze Gesprächspunkte zu machen bevor wir in tiefer eintauchen, so mit unseren Teams. Also, das war im Vorschaumodus. Wir sind bereit, das zu teilen. Um dies zu tun, können Sie entweder in Photoshop gehen undeine wirklich coole LiveShare-Sitzung erstellen, eine wirklich coole LiveShare-Sitzung erstellen indem Sie unser cooles kleines Plug-in namens LiveShare PS verwenden. Sobald es geladen ist, können Sie eine virtuelle Kollaborationssitzung erstellen , die diese Ansicht Ihres Designs tatsächlich in die LiveShare zieht , sodass Sie intern mit Ihrem Team in Echtzeit zusammenarbeiten können sodass Sie intern mit Ihrem Team in Echtzeit zusammenarbeiten können, um dieses Design, bevor Sie es getestet. Oder Sie können einfach hier gehen, eine einfache kleine Freigabe-URL erstellen, einige Parameter festlegen und dann Feedback erhalten. Also, ich werde eine Freigabe-Route verwenden und was passieren wird, ist, dass Sie eine URL erhalten, diese Seite laden, und dann werden wir beginnen, ein paar Feedback zu bekommen. So sieht der Freigabe-Link aus. Also, Sie können sehen, wir haben diese Markierungen gemacht, die hier ein wirklich nettes kleines Leuchtfeuer auftauchen , die Ihnen helfen, die tatsächlichen Tourpunkte, die Sie hinterlassen haben, oder die Gesprächspunkte, die Sie für Ihr Design hinterlassen haben, zu veranschaulichen . Jeder kann hier reingehen, sie anklicken, ihnen antworten, Sie können sich durch sie bewegen. Es ist eine großartige Möglichkeit, Ihre Ideen zu präsentieren, wenn Sie nicht da sein können. Also, wir haben dies von einem Feedback gesendet und wir haben einige Kommentare , die bereits in Reaktion auf den tatsächlichen Tour-Punkt, der ein animiertes GIF macht. Man kann sagen: „Großartig! Lassen Sie es uns geschehen“, aber wir haben auch ein weiteres Feedback, das hier zu fallen beginnt. „ Können wir diesen Knopf nach oben bewegen? Es gibt jetzt einen Bedarf. Hier gibt es etwas mehr Platz, den wir nicht brauchen, also können wir das verschärfen?“ Dies ist alles Feedback, das in Echtzeit zu Ihrem Design kommt. So, wie Sie sehen, „Klingt großartig“, es verwaltet Feedback on the fly. Dann können Sie in Ihrem InVision-Konto beginnen, diese Gespräche zu sehen. Damit Sie reagieren können. „Sicher. Lass es uns tun“ und beginnt wirklich diese interaktive Zusammenarbeit zu haben , die in deinem Design geschieht. Die andere große Sache ist, da wir dies alles in InVision Sync haben, können Sie diese Änderungen sofort in Photoshop vornehmen. Wir können diese Schaltfläche nach oben verschieben und wir werden tatsächlich auf Speichern klicken. Sobald das mit dem Server synchronisiert wird, wird sich diese Änderung nun tatsächlich in Echtzeit widerspiegeln. 8. Fertigstellung: Wenn Sie beginnen, Ihr Design bis zur Ziellinie zu bringen, ist es wahrscheinlich ein guter Zeitpunkt, Ihren Designer oder Sie sind Ingenieure und Ihre Entwickler mitzubringen, um ihr Feedback zu erhalten und einige aktuelle Notizen zu hinterlassen, die sie betreffen spezifisch. kannst du ganz einfach machen. Sie haben offensichtlich Ihre 12 Punkte, aber Sie können das auch mit wirklich coolen Dev Notes tun. Also, hier drin, können Sie einfach sagen: „Dies wird einen zusätzlichen Code benötigen, den wir nicht haben.“ Sie können eine Dev Note sagen, „Dies ist ein Übertrag von der letzten Landing Page.“ Alle Notizen, die nur Entwickler sehen werden, wenn sie sich entscheiden, auf. Also, das Schöne an der Share URL ist, dass Sie dies mit Ihren Ingenieuren teilen können und auch sie können durch klicken und mit dem Designer interagieren. Sie können auch ihre eigenen Kommentare hinterlassen, wo nötig. Andere großartige Tools, die wir für die Arbeit mit Ihren Entwicklern haben, sind Snaps, denen Sie tatsächlich codierte Seiten oder eine beliebige URL-Seite aufnehmen und sie in Ihr InVision-Konto einbinden können . Es gibt auch die Möglichkeit von Shared Assets, wo die Entwickler und Ingenieure kommen und tatsächlich alle Quelldateien, Bilder und Schriftarten herunterladen können , die sie benötigen, um dies auf die Ziellinie zu schieben. InVision beginnt also zu übernehmen. Sie wechseln irgendwie in eine Support-Rolle aber alles wird immer noch über die InVision-Plattform verwaltet. 9. Schlussbemerkung: Also da hast du es. Einige grundlegende Prinzipien, die Sie verwenden können, um Conversions oder Projekte in der Zukunft zu erhöhen. Denken Sie daran, Feedback ist ein sehr wichtiger Teil des kreativen Prozesses, es ist wichtig, es zu umarmen. sich Ihre Ziele ändern, müssen Sie Ihr Design ändern. Ich freue mich, zu sehen, was Sie erstellen, bitte teilen Sie mir in einer Projektgalerie unten. 10. Entdecke Designkurse auf Skillshare: Art und Weise.