Prototyping für Web II: visuelle Elemente für UX und Branding

1. Trailer: Ich bin Erika Heins. Ich bin Webdesigner und Webentwickler. Ich arbeite seit über 10 Jahren im Außendienst in New York City. In dieser Klasse werden wir über visuelles Webdesign sprechen und wie Sie Ihre visuelle Richtung planen, wie Sie es in Farbauswahl, typografische Auswahl, Bildauswahl, und dann, wie Sie diesen Prozess für responsive Webdesign anpassen. Erstellen Sie also Elementcollagen oder Frankenstein-Layouts, und gehen Sie dann in bestimmte responsive Layouts , die Sie mit verschiedenen Benutzern aufgeben und weiter iterieren. Am Ende dieser haben Sie Ihre Inspirationstafel und daraus haben Sie eine Elementcollage oder ein Frankenstein-Layout erstellt um als Reiseführer für den Rest Ihrer Layouts zu dienen und Sie werden auch voll responsive Layouts haben, die Sie könnten an einen Entwickler übergeben, oder Sie könnten sie zur nächsten Klasse bringen und selbst eine Website erstellen. Diese Klasse ist Gorgeous Web Design: Branding, UI und Visual Prototypes. 2. Einführung: Hallo, und willkommen bei Gorgeous Web Design. In dieser Klasse erledigen Sie das Branding, Design der Benutzeroberfläche und die visuellen Prototypen für eine responsive Website. Sie können es dann an einen Programmierer übergeben oder mit der nächsten Klasse fortfahren, um es selbst zu bauen. Sie sollten bereits eine Sitemap und Skizzen oder Wireframes haben. Wenn nicht, können Sie die erste Klasse in dieser Serie tun, um Hilfe bei der Planung dieser Website. Ich beginne mit diesem Zitat von Scott Adams über Kreativität es erlaubt, Fehler zu machen, und dass Design wissen, welche zu halten sind. Also, das wird ein Thema sein, dass wir viel erkunden wollen und dann eine Menge zur Auswahl haben , während wir bearbeiten und polieren und verfeinern. Also, die Werkzeuge, die wir in dieser Klasse verwenden werden, sind Illustrator und Photoshop, um Mock-ups zu machen. Sie könnten auch Sketch verwenden, das ich jetzt ausprobiere und sehr mag, aber das ist vielleicht ein Thema für eine zukünftige Klasse. Twittern Sie mich an, wenn Sie davon hören möchten. Also, lasst uns anfangen. Okay, also geh weiter und mach das Setup. Laden Sie Sketch herunter, wenn Sie es nicht haben. Sie könnten Illustrator oder InDesign oder eine andere Design-App Ihrer Wahl verwenden, aber ich werde Sketch empfehlen, weil es einfach in Web-Entwicklung und die Tools konvertiert, die es hat. Also, erhalten Sie auch ein Google Drive-Konto, wenn Sie eines benötigen, und dann gehen Sie vor und erhalten Sie ein icebergs.com Konto, während Sie dabei sind. Es ist wirklich hilfreich für die Herstellung von Moodboards und Dingen. 3. Visuelle Richtung: Ok. Das erste, was wir für unser visuelles Webdesign brauchen, ist ein Richtungsgefühl. Wir möchten darüber nachdenken, was für unsere speziellen Benutzer geeignet ist. Also, wie sollen wir das machen? Es ist verlockend, Trends zu betrachten, die verschiedenen Wege , die Illustration, Architektur, Farbe, haben die Kultur der Zeit und die Technologie der Zeit durch Jugendstil, ihre Art Deco, durch das Bauhaus, und jetzt sehen wir das sogar mit Webdesign. Die Menschen kopieren Apple immer als Marktführer in gutem Design, vor allem in Software und Hardware. Aber wenn wir darauf zurückblicken, sehen wir, dass wir uns nicht vorstellen können, das jetzt zu kopieren, aber es spiegelt nur den Geist der Zeit wider. Zum Beispiel, als Apple begann, diese reflektierte gespiegelte Oberfläche unter dem iPhone zu tun, begannen Sie, dass unter jedem einzelnen Produkt, das im Web präsentiert wurde, und dasselbe mit ihren Navigationsleisten, diese waren gängige Stile, die Sie alle diese Photoshop-Tutorials sehen, wie Sie das neu erstellen. Dann wurden Gitter schließlich im Web möglich und ziemlich Einsicht wurde eine Tonne für Leute kopiert, die versuchen, zu erforschen, wie man ein Gitter verwendet, und jetzt flaches Design ist die neuesten Trends. LayerVaults war also eine der klarsten Ausführungen dieses Stils, und so hatten sie UI-Kits, die ihre gesamte Site kopieren. Viele Leute versuchen nur zu tun, was aktuell scheint, und was frisch und modern scheint. Also, es ist nützlich, bis zu einem Punkt, weil offensichtlich ein Trend zu dienen der aktuellen kulturellen Appetit. Wenn Sie diesen Trend anführen, zeigen Sie Ihren Geschmack, Sie zeigen, dass Sie modern sind, dass Sie verstehen, was in der heutigen Kultur aktuell und cool ist, und wenn Sie diesem Trend folgen, sind Sie irgendwie versuchen, auf diese Marke Aktien wie Apple zu glom. Du versuchst zu sagen, du bist so anspruchsvoll oder du hattest so gutes Design wie Äpfel. Also, Sie versuchen, etwas von dem gleichen Ruf zu gewinnen. Aber natürlich sind sie auch ein bisschen lahm, denn wenn Sie den Trends folgen, macht es Ihre Arbeit weniger unverwechselbar, es datiert sie auch auf einen bestimmten Zeitraum und dämpft auch Sie denken, weil Sie anfangen, nur zu kopieren andere visuelle Quellen, anstatt wirklich zu versuchen, eine neue visuelle Sprache Ihrer eigenen zu finden. Also, Sie wollen von einem Gefühl für Ihre eigene Marke beginnen, was ihre Werte sind, was ihre Persönlichkeiten sind, und so ging die vorherige Klasse in dieser Serie einige detaillierte Fragen durch, die Ihnen helfen, zu artikulieren, Dinge wie eine Persönlichkeitskarte oder Ihre Engagement-Methoden, die Sie verwenden könnten. Sie brauchen also etwas Verständnis dafür, was Ihre Marke ist und worum es geht, bevor Sie in das visuelle Design einsteigen. Dann, wenn Sie da sind, der erste Schritt für mich ist immer ein Inspiration Board, wo ich anfangen zu versuchen und herauszufinden woh- ich beginne zu versuchen, meine Materialien in ein digitales Format zu bekommen. Also muss ich Farben erfassen, ich muss Fotografie erfassen, ich muss anfangen, all diese Dinge zusammen zu sehen, damit ich anfangen kann zu visualisieren, was meine Website Gestalt annehmen wird. Also, Dropmark ist ein großartiges Werkzeug dafür. Hier ist eine Sammlung, die ich für Protest-Site getan habe, und hier ist eine weitere aktuelle aus mehr von einer Lifestyle-Marke, und Sie können sehen, dass einige von ihnen ich nur für Farbe greifen und einige von ihnen sind ich greifen für Beispiele für Fotografie. So wollen wir zum Beispiel, dass die Bücher, die verkauft wurden, weiß sind und wir wollen sie auf einem silhouettierten Hintergrund zeigen. Auf diese Weise kann mein Client visualisieren, wie es aussehen wird. Aber andere Dinge, ich zeige nicht immer Mood Boards oder Inspiration Boards für Kunden weil es nicht klar ist, warum Sie jedes Bild dort ausgewählt haben. So zum Beispiel dieses Kleid auf der rechten Seite, Ich wähle, weil ich die Farbe blau, die ich verwenden möchte. Aber wenn ich einem Klienten dieses Stimmungsbrett zeigen würde, könnte sie denken, wir werden Modefotografie auf der Website zeigen? Sie verstehen es nicht immer. Also, wirklich Ihre Inspiration Board sollte nur für Sie sein, so dass Sie Farben haben, dass Sie Schriften haben, Sie beginnen, ein Gefühl davon zu bekommen, in welche Familie Ihre Website fällt. Also beginnen Sie dort, Ich mag Icebergs, denn wieder können Sie bestimmte Fotos als Favoriten markieren und es können Sie sie gruppieren, und Sie möchten eine Reihe von Fotos sammeln, die Sie verwenden könnten, versuchen, echte zu bekommen. Also, wenn Sie wissen, dass Sie eine Reihe von Benutzerfotos haben, die auf Ihrer Website gehen werden, gehen Sie vor und legen Sie sie in Ihre Inspirationstafeln, so dass sie beginnen, Teil der Mischung zu werden. Wenn Sie dies nicht tun, dann gehen Sie weiter und suchen Sie nach ähnlichen Themen Schuss in der Art und Weise, die Sie planen, sie zu schießen. Sie möchten beginnen, Farben zu sammeln. So, wie Sie im Internet surfen, Ihre Lieblings-Blogs, Ihre Lieblings-Websites, suchen Sie einfach nach Farbe und greifen Sie einfach , was Bilder gut aussehen im Web. Print-Design, Innenarchitektur, Webdesign, alle haben unterschiedliche Möglichkeiten, in denen Sie Farbe verwenden. Sie möchten also versuchen, Assets zu finden, die bereits in einem digitalen Format vorliegen, damit Sie wissen, dass diese Farben noch auf dem Bildschirm gut gerendert werden. Dann möchten Sie auch beginnen, Typografie zu sammeln, die in ähnlichen Tönen wie Ihre Markenstimme spricht. So können Sie auf der Straße nach Typografie suchen, Sie können auf Beschilderung schauen, Sie können sich Verpackungen ansehen. Beginnen Sie einfach zu visualisieren, was wieder Ihre Wurzelpersönlichkeit und Werte Ihrer Marke widerspiegeln wird. 4. Ausdrucksstarke Farbe: Okay, weiter zur Farbe. Ich mag es, Visual Design zu starten, indem ich meine Farbe entscheide. Ist diese Marke hell oder dunkel? Hell oder weich? Denn die ausgewählten Farben erzeugen einen starken nonverbalen Eindruck. Denken Sie also über die Berühmtheit nach, die Sie sich für Ihre Marke entscheiden könnten. Sind sie leise oder laut? Sind sie frisch gesichtet oder verwittert? In Ihren Markenrichtlinien möchten Sie eine Beschreibung Ihres allgemeinen Farbschemas wünschen, egal ob es sich um Pastellfarben, helle Farben, Neutrale oder was auch immer handelt. Also, wenn wir in die Besonderheiten kommen, müssen wir unser Medium verstehen. Also, die Sache, die immer noch in den Kopf nach Jahren und Jahren dem Gebiet ist nur RGB gegen CMYK, additive Farbe versus subtraktiv. Dass auf dem Bildschirm, rot blau und grün zusammen machen weiß. Es ist das Licht, das aus dem Bildschirm und in die Augen scheint, es ist nicht das Licht, das auf das Papier scheint und von der Tinte absorbiert wird. Also denke ich an Webdesign als eine Gelegenheit, viele hellere Farben zu verwenden, die Sie sonst nicht haben. CMYK kann diese hellen Internet-Blues und Grüns, die Sie in RGB tun können, nicht tun. Es ist wie freie Farben, man muss viel Geld bezahlen und Pantone-Gebühren sind in Tinten, um diese speziellen Farben im Druck zu bekommen. Also denke ich daran, welches Design sehr ähnlich wie Künstler, die im Licht arbeiten. Es ist wie Dan Flavin, der Skulpturen mit Licht macht, James Turrell, sind einige der Referenzen dafür, wie ich über Webdesign denke. Eine gute Idee ist, ein Farbrad in Ihrer Nähe zu halten wenn Sie versuchen, Farben zu wählen, so dass es Ihre Erinnerung joggt, so dass Sie nicht nur wie blau, rot, die Farben, die Sie nennen können, aber Sie sehen tatsächlich alle diese seltsame zwischen Farben, die keine Namen haben. Also, es gibt alle Arten von verschiedenen Formaten für Farbräder, Sie können einfach im Internet suchen und sehen, welche mit Ihnen spricht, und wieder nach einem suchen, das RGB ist, das tatsächlich in einem Medium gemacht wird, in dem ich arbeiten werde. Und schauen Sie sich eine für eine Weile an und sehen Sie, welche Farben Ihre Marke zu repräsentieren scheinen. Ich mag es, eine Farbe als meine Grundfarbe zu wählen. Also, sehen Sie, zu welcher Farbe Ihre Augen immer wieder zurückkehren. Farbe ist ein rechtes Gehirn, es ist visuell, es ist nicht verbal, aber ich gehe immer gerne nach links Gehirn und betrachte seine Symbolik auch. Du denkst vielleicht an all die Dinge, die du je gesehen hast, die blau waren. Wie sie dich fühlen lassen? Dies ist die aggregierte Symbolik einer Farbe. Und natürlich gibt es kulturelle Unterschiede mit der Farbe, also müssen Sie das verstehen und Ihr Publikum erforschen. Also, lassen Sie uns einfach durch einige der Hauptfamilien und ihre Konnotationen gehen , soweit wir sie im Westen in der Reihenfolge der Popularität kennen. Diese Schritte sind alle von Stephen Sidelingers Farbhandbuch. Die Diagramme stammen von der farbgrafisch sprechenden Website und aus einer Kissmetrics Farbstudie. Also, Blau ist die beliebteste Farbe der Erwachsenen, aber es ist nur Nummer fünf mit Kindern, was lustig ist. Es ist cool, ruhig, sicher, klassisch. Sie werden selten, wenn überhaupt, einen Client ablehnen blau. Es ist ziemlich lesbar auf Weiß oder als umgekehrter Typ. Rot ist das nächste beliebteste, es ist warm, es ist lebendig, es ist stark, es ist auffällig, es ist ideal für Anrufe zum Handeln oder als Akzentfarbe. Sie erhalten immer die meisten Klicks auf große rote Tasten. Es ist auch angeblich ansprechend für die Geschmacksknospen wie süße rote Früchte, weshalb viele Süßigkeitenmarken rot sind. Es ist auf Weiß lesbar, auf Schwarz nicht so lesbar. Grün ist Nummer drei mit Erwachsenen, aber es ist nur sechs mit Kindern. Es gibt einen großen Unterschied zwischen gelben Grüns und blauen Marinesoldaten, aber im Allgemeinen könnte man sagen, es ist natürlich und lebendig und es ist auch ziemlich lesbar. Lila ist die Nummer vier insgesamt, aber es ist die eine Farbe, die einen starken Unterschied für Männer und Frauen hat. In einer Studie sagten 23 Prozent der Frauen, Lila sei ihre Lieblingsfarbe, aber null Prozent der Männer. Es wird oft verwendet, um Spiritualität, Königtum oder Entspannung wie Lavendel zu vermitteln . Gelb ist Nummer sechs mit Erwachsenen, es ist fröhlich, aufregend und aufmerksam. Meiner Erfahrung nach ist es sehr polarisierend. Entweder lieben sie Gelb oder sie hassen es. Wenn ich Gelb für eine Marke verwenden möchte, habe ich den Kunden immer zuerst gefragt, wie denken Sie über Gelb? Es ist super lesbar mit Schwarz, weshalb es in Warnschildern verwendet wird. Teal ist unsere letzte Farbe, die als Erinnerung Blick in zwischen den Farben enthalten ist, ist praktisch für das Web, Sie können es in Richtung blau oder grün drücken und es zu fast allem passen. Es ist beruhigend, es ist klar und freundlich. Auch hier ist die Studie von lila war die eine Farbe mit einer großen Diskrepanz zwischen Männern und Frauen. Also, das ist etwas zu beachten, wenn Sie angewiesen wurden, um die Marke nicht zu feminin zu machen, aber sie sagen Ihnen, lila als ihre Markenfarbe zu verwenden, haben Sie vielleicht ein wenig Trennung dort. Orange ist eine andere, es ist Nummer fünf mit Erwachsenen und Nummer vier mit Kindern, es wird als extravagant, warm und hell gesehen, aber in einer 2011 Studie war es die am wenigsten Lieblingsfarbe von 22 Prozent der Männer und 33 Prozent der Frauen. Und es ist auch die Farbe, die am häufigsten gesehen ist billig oder preiswert, was etwas damit zu tun haben könnte. Aber es scheint in und aus der Mode zu kommen, weil es eine kontrastierende Farbe zu Blau ist. Also, es wird von Marken verwendet, die als Alternative gesehen werden wollen. Es gibt einige Banken, die Orange verwenden, weil alle Banken blau verwenden. Also, das ist etwas zu beachten, aber merken Sie, ob es sich zu dieser Zeit in der Geschichte richtig anfühlt. Farbe ist auch eine Möglichkeit, mit der Sie Emotion in Ihre Layouts bringen. Also, hier ist eine lustige Grafik , wie verschiedene Unternehmen Farbe auswählen, um verschiedene Gefühle zu vermitteln. Nehmen Sie es mit einem Korn Salz, aber es gibt einen Grund, warum so viele Banken verwenden Blau, und es fügt Emotion zu Ihren Designs oder was könnte sein, warum einige Leute Angst davor haben. Es gibt auch einige Studien, die besagen, dass Frauen viel mehr Variationen in der Farbe nennen als Männer. Also, wenn Sie viele Neutrale auswählen, haben Sie vielleicht verschiedene Leute in Ihrem Publikum, die sie auf sich nehmen oder nicht. Also wieder, ich mag es, eine Farbe als meine Basis zu wählen. Ich halte das für das Hauptgefühl, das ich versuche, mit meinem Branding zu vermitteln. Also, sagen wir, ich wähle dieses beliebte Blau aus. Du kannst dort anhalten. Wenn Sie nur eine Farbe mit Schwarz und Weiß haben, das gibt Ihnen viel zu arbeiten. Hier ist Mailchimps Sprach- und Tonführer und Sie können sehen, dass sie viel mit nur einer Farbe tun. Sie sind tatsächlich, wenn Sie das linke Navigationsgerät dieser Website gehen , verwenden sie eine andere Farbe für jeden Abschnitt. Also, es schafft ein wenig mehr Lebendigkeit mit diesem Regenbogen von Farben, aber für jedes Layout, geht ihnen gut mit nur einem. Also, von Ihrer Grundfarbe, wenn Sie weiter in der Reihenfolge der Komplexität gehen möchten, sind hier einige Optionen, Sie könnten Tönungen und Schattierungen hinzufügen, können Sie analoge Farben hinzufügen, kontrastierende Farben hinzufügen, oder Sie könnten sogar unterschiedliche Farben ausprobieren. Also, Tönungen und Schattierungen, 0-255 ist ein wirklich gutes Werkzeug, wo es zeigt Ihnen hier einige Hex-Codes für Farben Tönungen und Schattierungen der gleichen Farbe. Und das ist hilfreich, weil eine Farbe, die für eine Schaltfläche gut ist, nicht der gleiche Farbton ist, der gut für eine Hintergrundfarbe oder für die Rahmenfarbe sein wird. Also, Sie brauchen oft vor allem in einem App-Design gegenüber Site-Design, Sie brauchen oft mehr Farben, als Sie denken, und Sie brauchen eine Menge von Tönungen und Schattierungen der gleichen Farbe. Es gibt auch Werkzeuge, die analoge Farben, kontrastierende Farben, Kombinationen, die Sie nicht unbedingt auf eigene Faust finden würden und die Sie nicht auswählen würden. Das ist eine Art Ziegelrot und wie ein hellblaues Pfauenblau, wie Sie nicht an diese Farben denken würden, aber wenn Sie in jemandes gute Werkzeuge umschalten, die Ihnen helfen, sie zu finden. Ian Storm Taylor hat einen guten Artikel namens „Never Use Black“ darüber, wie Sie diese Tönungen und Schattierungen verwenden können um Ihre Marke zu verstärken, aber die Facebook-App ist alle Schattierungen von Facebook blau statt schwarz oder mittelgrau. Sie verwenden nur eine andere Sättigung. Auch wenn Sie es tun, benötigen Sie in der Regel mehr Farben, als Sie denken. App-Design, Sie haben Highlights, Sie haben Warnungen, Sie haben Fehler, auch in den erhabenen Textthemen gibt es immer noch eine Menge Farbe los auch wenn Sie nur daran denken, zuerst ist Ihr erster Eindruck, dass es nur eine graue App ist. Slack ist ein wirklich schönes Beispiel für Farbe zu, dass sie diese Pflaume Schattierungen von Pflaume für ihre Seite nav mit Akzenten dieser Lachsfarbe und hellblaugrün verwenden . Also, Sie nicht wirklich bemerken, es, nachdem Sie es für eine Weile verwenden, es fühlt sich einfach wie Abendlicht oder so, aber es schafft wirklich eine wirklich einzigartige Stimmung für diese App. Hier ist eine weitere schöne Website von Urban Ministries of Durham, auch mit Farbe, um sehr alltäglichen billigen Objekten viel Emotion und Schönheit hinzuzufügen. Hier ist eine Website für den Tourismus in Brügge. So werden Sie sehen, dass sie übersättigte lebendige Farben verwenden, um den Spaß zu vermitteln, den Sie in Ihrem Urlaub haben werden und wie aktiv dieser Ort ist, wie viel es zu tun gibt. So wird die Farbe verwendet, um das Gefühl oder die Bedeutung der Website zu verstärken. Auch hier sind große rote Knöpfe immer ein klarer Aufruf zum Handeln und hier ist eine mit einer mutigen Verwendung von Gelb als Hintergrund, der Ihnen ein ganzes gibt, es ist ein ganz anderes Gefühl als nur ein einfacher weißer Hintergrund. XOXO ist eine Konferenz für Designer und andere kreative Menschen und ihre erste Website war als verrückte lila oder blau Gradient, die die Idee vermittelt, dass dies ein Ort für kreative Menschen ist. Farbe erhöht oft Klicks. Also, Leute, die Banner-Anzeigen machen, werden Ihnen sagen, dass je heller Sie sie machen, desto mehr Klicks erhalten sie. Also, Sie können das wieder mit einer Körnung Salz nehmen, aber das Hinzufügen von Farbe zu Ihrem Design erhöht oft Klicks Die letzte Einschränkung ist, dass Farben natürlich nicht auf verschiedenen Plattformen gleich aussehen, Sie werden sie sowohl auf Mac als auch auf PC testen wollen. Auf dem PC neigen Ihre Farben dazu, etwas gesättigter, etwas dunkler zu sein. Mac neigen dazu, ein wenig breiter zu sein, kann ein wenig ausgewaschen werden. Seien Sie also vorsichtig, wenn Sie wirklich helle Farben auf einem Mac verwenden und auch wirklich besonders mit Orangen und Brauntönen sein. Ich werde nie vergessen, eine Website, die ich für einen Kaffee-Truck entworfen und ich bin stolz, um es jemandem auf einem PC zu zeigen, und es sah schrecklich aus. Also, immer willst du vorsichtig sein mit dem alles in der gelben, grünen Familie. Also, nur als Referenz werden wir anfangen, diese Assets-Datei zu erstellen. In Illustrator ist es also schön, eine große Datei mit allen gängigen Teilen zu haben , die Sie für Ihr Website-Design verwenden werden. Also, hier ist Teehan und Lax haben eine Menge von Photoshop-Vorlagen und -Kits veröffentlicht und hier ist ein Beispiel in einem langen Blog-Beitrag, den sie geschrieben haben , um den Designprozess für Medium zu beschreiben, was lohnt sich, zu lesen. Hier ist ein Beispiel für ihre Benutzeroberflächen-Assets-Datei, die sie erstellt haben. Wenn Sie also beginnen, Ihre Farben auszuwählen, fügen Sie sie in Ihre Illustrator-Asset-Datei ein und sehen Sie, wie sie zusammenpassen. Gehen Sie also weiter und starten Sie eine neue Datei in Sketch Sie möchten die Webdesign-Vorlage verwenden, damit sie die verschiedenen Art-Boards für jeden Ihrer reaktionsfähigen Haltepunkte enthält und Sie werden eine Farbpalette im -Symbol-Seite. Sie werden zwei Seiten im Standarddokument sehen, es gibt eine, auf der Sie Ihre tatsächlichen Layouts erstellen, und dann gibt es eine zweite, die alle Symbole enthält. Wenn Sie dies in Illustrator tun, können Sie eine separate Asset-Datei oder nur eine Asset- oder Symbol-Grafikkarte in Ihrer Datei erstellen . Sie können auch einige Web-Tools wie Kuler oder ColorLovers verwenden , um Paletten zu recherchieren und einzurichten, wenn Sie möchten. 5. Ausdrucksstarke Typografie: Als nächstes arbeiten wir an Typografie, die die Persönlichkeit der Website zum Ausdruck bringt. Also, wie wählen wir Schriftarten aus? Nun, es gibt einige Schriften, die einfach unpassend sind. Praktische Typografie hat ein schönes Beispiel dafür. Ein ausgefallenes Skript wäre unangemessen, wenn Sie 80 Meilen pro Stunde fahren, und ebenso gibt es etwas, das einfach nicht auf dem Bildschirm lesbar sein wird. Lesbarkeit bedeutet, dass Sie tatsächlich die Form jedes Buchstabens unterscheiden können. Wenn Sie also Ihre Layouts in Illustrator oder einem anderen Vektorprogramm betrachten, sehen sie alle perfekt aus, aber wenn Sie sie dann als Bitmap mit 72 dpi rendern, beginnen Sie zu sehen, wo das Anti-Aliasing versucht, diese Pixelraster ist nicht wirklich die Buchstabenform gerecht zu werden. Wir arbeiten nicht in Stein, wir schneiden keine Briefe mit einem Meißel. Wir malen sie auf Papier. Wir müssen unser Medium verstehen. Wir schneiden Buchstaben nicht mit einem Meißel in Stein oder malen sie mit einem Pinsel auf Papier. Wir schattieren Gitter von Pixeln mit Code. Bestimmte Gesichter sehen auf einem 72-dpi-Raster schrecklich aus. Anti-Aliasing versucht, Rundungen oder Striche zu rendern, die dünner als ein Pixel sind , aber nicht die tatsächliche Buchstabenform gerecht wird. Die Qualitäten, die Garamond oder Bodoni besonders machen, gehen bei niedriger Auflösung verloren. Eine lesbare Webschrift neigt dazu, gerade Formen, eine große x-Höhe, offene Zähler und eine gleichmäßige Linienstärke zu haben. Dies ist besonders wichtig für Textbeschriftungen und andere kleine Elemente, eine größere Größe, die Sie mehr Flexibilität haben. Hochauflösende Displays ändern alle diese Regeln, aber sie sind noch nicht universell, daher müssen wir noch 72 dpi bestätigen. Das Pixelraster ist auch der Grund, warum Sie so wenige Kursivzeichen im Web sehen. Die diagonale Linie sieht bei 72 dpi einfach nicht sehr gut aus. Lucy de grant bietet überhaupt nicht kursiv an. Serifen-Kursivzeichen wurden als ergänzende Gesichter mit viel ausgeprägtem Charakter entworfen. SANS-Serifen-Kursiv sind im Grunde nur schräge Versionen. Also, sie geben normalerweise nicht genug Nachdruck. Wenn Sie Ihre Schriften festlegen und Schriftarten auswählen, die für Ihre Marke geeignet sind, denken Sie einfach an die gleiche Topografie zurück, die Sie vielleicht im Druck- oder Grafikdesign gelernt haben. Wenn Sie möchten, dass eine Textzeile als Trennlinie gelesen werden soll oder dass die Großbuchstaben als geometrische Formen hervorheben, können Sie alle Großbuchstaben verwenden. Wenn Sie möchten, dass es bei kleinen Größen besser lesbar ist oder für jemanden mit Sehkraft, die nicht so gut ist, hat Kleinbuchstaben die Aufsteiger und Abstieg , die eine deutlichere Silhouette geben, die besser lesbar ist. Natürlich können Sie Schriftarten oder Schriftarten aus praktischen Gründen auswählen , dass eine komprimierte Schriftart Ihnen erlaubt, viel mehr Wörter in den gleichen Raum zu passen. Schlagzeilen können ein bisschen abenteuerlicher sein, weil Sie mit ihnen in größeren Größen arbeiten. Chuck Walton hat eine wirklich schöne Reihe von Artikeln, in denen er mit der Überschrift spielt. Verschiedene Designs der Schlagzeilen für jeden Artikel. Jason Santa Maria erforscht auch einzigartige redaktionelle Design für jeden Artikel auf seiner Website, und einschließlich der Serie von Süßigkeiten Gramm hier ist eine von Jesse Arrington wo sie buchstabiert die Schlagzeile in Süßigkeiten. Denken Sie also daran, dass Typografie auch außerhalb des Computers stattfinden kann. Wenn Sie nach einem Typ suchen, der eine bestimmte Periode oder ein bestimmtes Gefühl widerspiegelt, können Sie sich das Jason-Nebenprojekt namens Typedia ansehen, wo es eine ganze Enzyklopädie ist und Sie Schriftarten nach Designer, nach historischer Periode, nach Stil und wirklich ein Gefühl für eine viel tiefere Ebene der Informationen über eine Schrift. Wir haben jetzt Glück, weil wir diese Schriften jetzt im Web hosten können. Früher müssten wir in den alten Tagen des Web jede ausgefallene Überschrift als Bild exportieren und diese mit dem Rest unserer Dateien auf den Server hochladen , aber jetzt gibt es eine ganze Reihe von Unternehmen , die mit die technischen und die Lizenzanforderungen, dies für uns zu tun. Sie können sich Wolkentypografie ansehen, die Webschriftarten enthält , die sogar bis zu neun Pixel kursiv aussehen. Sie können sich Typekit ansehen, das eine Menge großartiger Listen für Alternativen zu allgemeinen Type-Gesichtern oder einige der Crowd-Favoriten zusammengestellt hat. Sie können sich MyFonts ansehen, wo Sie eine riesige Bibliothek von Webschriftarten durchsuchen können, die Sie auf Ihrem eigenen Server hosten können . Google Fonts ist eine schnelle und einfache Möglichkeit , viele Open-Source-Schriften zu verwenden und sie auf Ihrem -Site mit nur einer Codezeile. Natürlich gibt es plattformübergreifende Probleme mit Typ zwei. Also, auf der linken Seite ist unsere PC-Version der gleichen Schriftart, die auf der rechten Seite ist , und Sie können sehen, dass sie fast nicht einmal gleich aussehen. Also, mit jeder Schriftart, die Sie wählen, müssen Sie es wirklich auf einem Mac-Browser und auf verschiedenen Versionen von Internet Explorer und Firefox testen , älteren Versionen von Firefox, aber Gott sei Dank Typekit lässt uns alle testen diese alle an einem Ort. Also, das ist ein weiterer großartiger Ort, um mit der Kommissionierung von Webschriftarten aus diesem Grund zu beginnen. Sie möchten auch, wenn Sie Ihr CSS schreiben oder es für Ihren Programmierer angeben, einige Fallbacks angeben. Also, bevor Ihre Webschriftart geladen wird oder falls sie nicht geladen wird, was würden Sie stattdessen verwenden. Also, diese werden Font-Stacks genannt, also könnte ich sagen, verwenden Sie Franklin Gothic Medium, aber wenn das nicht verfügbar ist, verwendet Franklin Gothic, bla bla bla, Fallback zu Verdana oder etwas anderes. Selbstverständlich möchten Sie Schriftarten auswählen, die die Persönlichkeit Ihrer Marke und die wichtigsten Eigenschaften widerspiegeln . Denken Sie also darüber nach, wie viel Persönlichkeit eine Schrift tragen kann. Hier ist eine großartige Website namens Thank a Type Designer darüber, was wenn Branding-Designer gerade Systemschriftarten standardmäßig vorgegeben hätten und schauen, wie unterschiedlich diese Logos sein würden. Würden sie wirklich die gleiche universelle und dauerhafte Attraktivität haben, wenn sie nur auf Lager Standardschriftarten gesetzt würden? Also, recherchieren Sie etwas und denken Sie wirklich darüber nach, wie Sie die Werte Ihrer Marke vermitteln können. Hier ist eine Website, die Vintage-China tut und so verwenden sie handbemalte Titel, um den handgefertigten Charme ihrer Keramik zu vermitteln. BK Swiss oder BX Swiss nutzt Helvetica, um Neutralität und Moderne zu vermitteln. Use All Five verwendet Avantgarde, serif, um ihre Modernität zu zeigen und sie mit Transparenz zu verwenden , um ein Gefühl von Geheimnis zu vermitteln. Essence verwendet Didot, um modisch und klassisch auszusehen. Oscar Health verwendet eine Slab Serif, um menschlich, aber immer noch besser Web versierter aussehen. Ich bin nicht da, der Film verwendet Grunge-Typografie, die jederzeit ist, dass Sie hacken oder beunruhigt den Typ, um die Filme Thema der Auflösung weiterzugeben. Dann ist das Letzte, wenn Sie einige Schriftarten ausgewählt haben und Sie mit den tatsächlichen Seitenlayouts arbeiten, gibt es einige Bedenken hinsichtlich der Lesbarkeit, die ist, wie schnell oder einfach Sie in der Lage sind, den Text zu lesen. Also, im Allgemeinen gibt es eine bestimmte Zeilenlänge, die als lesbar angesehen wird und einige Leute sagen, dass es zwischen 45 und 75 Zeichen ist. Einige Leute sagen, Sie können den ganzen Weg bis zu 90 gehen und Lesegeschwindigkeiten sinken nicht , aber etwas länger als das und es wird angenommen, dass das Auge Müdigkeit verursachen muss, um den ganzen Weg zurück zum Anfang der nächsten Zeile zu finden Sie, wo Sie anfangen sollen. Also, was Sie tun können, das ist ein Trick von Trent Walten wieder, ist ein Marker-Zeichen nach 45 Zeichen zu fallen, und dann ein weiteres in nach 75 oder 90 fallen und dann, solange Ihre Zeile zwischen diesen zwei Marker, die Sie wissen, dass das eine gute Länge für Ihren Absatz ist. Dann, wenn Sie schmalere Spalten machen, wissen Sie, dass Sie die führende straffen können, aber eine breitere Spalte wird ein wenig mehr führen müssen, weil das Auge ein wenig mehr Platz haben muss, um es zurück zu schaffen bis zum Anfang der nächsten langen Zeile. Wenn Sie den Typ ausklopfen, benötigen Sie möglicherweise ein geringeres Gewicht als auf Ihrem normalen Text auf einem weißen Hintergrund, was das Gegenteil von Druck ist, denn wieder, das Weiß ist Licht, das in Ihre Augen scheint, was in der dunkle Typ, wo ist wie in, wenn Sie dieses Layout drucken würden, wäre das Schwarz Tinte, das würde in den Knockout-Typ bluten. Also, es ist umgekehrt. Sie möchten sicherstellen, dass ein angemessener Kontrast vorhanden ist, um eine Belastung der Augen zu vermeiden. Es gibt Tools in der Entwicklerpalette, die Ihnen helfen, dies zu testen sobald Sie einen HTML-Prototyp haben, aber versuchen Sie einfach, Ihr Urteil zu verwenden, wenn Sie Mockups machen, dass es nicht schwer für Leute zu lesen sein wird. Eine letzte Sache ist, dass Unterstreichung ein Holdover aus dem Zeitalter der Schreibmaschine ist. Es reduziert die Lesbarkeit, weil Sie verlieren. Wenn Sie Ihre Augen schielen, können Sie sehen, dass Sie die Abstammungen in diesem Textabsatz nicht auch sehen können , wenn er unterstrichen ist. Also, Unterstreichungen gab es nur für Schreibmaschinen und Sie können Farbe verwenden, Sie können Kühnheit verwenden. Es gibt andere Möglichkeiten, Längen anzugeben und immer noch Ihre Website sehr nutzbar sein. Sogar Jacob Nielsens Forschungsgruppe, die das führende Usability-Forschungsunternehmen ist , hat die Unterstreichungen von ihren Längen entfernt. So, so wie Google es vor kurzem getan hat. Also, wenn jemand versucht, Ihnen zu sagen, dass Sie Ihre Links unterstreichen müssen, können Sie ihnen die Nielsen Norman Gruppe als Widerlegung geben. Okay, jetzt werden wir unser Typensystem so einrichten, dass wir recherchieren und ein paar Schriftarten auswählen , die für Ihre Marke dienen könnten, und dann gehen Sie auf Ihre Symbolseite oder Ihre Asset-Datei und testen Sie einige Beispiele. Sehen Sie sich an, wie diese Schriftarten als Überschriften, Absätze und Legenden funktionieren . Möglicherweise benötigen Sie mehr als einen, um verschiedene Zwecke zu erfüllen. Probieren Sie sie auch auf Schaltflächen Registerkarten und interaktiven Elementen aus. Sie können auch Typecast oder Typekit versuchen um zu sehen, wie diese Gesichter wirklich im Browser aussehen werden. 6. Leistungsstarke Bilder: Das letzte große Stück unseres visuellen Designs ist die Bildsprache. Gut ausgewählte Fotografien können ein Design tragen. Bilder erzählen Ihre Geschichte in verschiedenen Sprachen mit Geschwindigkeit und Emotion. Diese Fotografien von Rosie Holtom von Obdachlosen, wie sie gesehen werden wollen, die Geschichte völlig verändert, wie man die Obdachlosengemeinschaft wahrnimmt. Aber bevor Sie in die Bildsuche springen, stellen Sie sicher, dass Sie Ihre Gedanken gesammelt haben. Gehen Sie zurück zu Ihren Markenrichtlinien und notieren Sie sich, welche Art von Bildern Ihre Marke aufnehmen würde. Wären es atmosphärische Hintergründe oder persönliche Porträts? Leckere Stillleben oder bezaubernde Illustrationen? Möchten Sie einen ambitionierten Lebensstil oder vielleicht Karten zeigen? Und zum Glück, das Web ist endlich an der Bandbreite, wo diese Bilder in Millisekunden und nicht Minuten geladen werden. Http bedeutet Hypertext-Übertragungsprotokoll, das alles war, was es in den frühen Tagen handhaben konnte, aber wir sehen jetzt mehr und mehr Websites erzählen ihre Geschichten durch Bilder und sogar Hintergrundvideos wie diese. Wenn Sie nicht über das Zeitbudget oder Zugriff auf benutzerdefinierte Fotografie verfügen, gibt es online einige Ressourcen, die viel helfen können. Aber schließen Sie nicht die Möglichkeit aus, einen Fotografen anzuheuern und einige professionelle und benutzerdefinierte Aufnahmen zu machen, sie werden Ihnen viele Jahre lang gut dienen. In der Ressourcendatei habe ich jedoch einige meiner Lieblingsorte für Open-Source-und wiederverwendbare Fotografie aufgelistet. Sie können auch Google Bilder verwenden, um die Bilder auf einer dieser Open-Source-Websites zu suchen und zu filtern , indem Sie Site-Doppelpunkt und dann URL vor Ihre Suchbegriffe setzen. Fotografen haben viel Arbeit in ihre Bilder gesteckt. also nochmals sicher, dass Sie die richtigen Rechte für die Bilder haben, die Sie auswählen. Aber natürlich müssen Sie sich mit einigen schlechten Bildern auseinandersetzen. Wenn Sie eine Veranstaltung zusammenstellen, die möglicherweise nur Kamerafotos aus dem letzten Jahr haben, haben Sie vielleicht nur einen wackeligen Punkt und jemand weigert sich, ein neues zu nehmen. Du wirst dich damit auseinandersetzen müssen. Nummer eins ist die Beschneidung. Versuchen Sie, die besten Teile des Fotos zu finden und konzentrieren Sie sich darauf. Sie könnten auch das Ganze verwischen und es als Hintergrundfoto verwenden und etwas Text darauf setzen. Sie können auch mit einigen bestimmten Photoshop-Filter oder Farbstile kommen , die alle Bilder auf Ihrer Website haben ein zusammenhängendes Gefühl, oder Sie können einige Zeit verbringen und retuschieren. Stellen Sie sicher, dass Sie dafür eine Budgetierung vornehmen, da dies die zeitaufwendigste dieser Optionen ist. Die andere Hälfte der Bilddaten ist Ikonographie. Sehen Sie sich die eingestellten Symbole an, um ein großartiges Beispiel dafür zu finden, wie einfach dies verwendet werden kann, um Ihre Entwürfe zu bearbeiten. Ein einfacher Satz von Semantik, wenn Sie also das Wort „Liebe“ eingegeben haben, wandelt es sich in ein Herz, aber ein Bildschirmleser wird immer noch das Wort Liebe sehen und in der Lage sein, das für die Blinden zu lesen. Es gibt auch Dienste wie iCOMoon, in denen Sie Ihre eigene Symbolschrift erstellen können, wenn Sie einen benutzerdefinierten Satz von Symbolen für eine Website erstellen. Es gibt auch Iconic, das einen neuen Satz von Symbolen hat, die mit Lesbarkeit im Auge haben, und wir bekommen jetzt die Möglichkeit, svg zu verwenden. Also von Illustrator, wenn Sie Ihre eigenen Illustrationen entwerfen, können Sie sie tatsächlich als Vektordateien speichern und diese Vektoren im Web bereitstellen , so dass Sie sich nicht so viel um Bitmap-Auflösungen kümmern müssen. Und genau wie die Typografie haben auch Symbole Lesbarkeitsprobleme. Stellen Sie also sicher, dass Ihre Symbole genau in der Größe gerendert werden , die Sie verwenden möchten. Also, gehen Sie finden die Bilder, die Sie in Ihrer Website verwenden werden. Sie können Ihre Fotografie recherchieren oder schießen und wieder habe ich eine Reihe von Ressourcen zur Verfügung gestellt, um Stockfotos oder Open-Source-Fotos in der Ressourcenliste für diese Klasse zu finden , und dann würden Sie voran gehen und retuschieren oder zuschneiden filtern Sie sie, wie Sie für Ihre Website planen, so dass Ihre Mockups haben ein realistisches Aussehen. Gehen Sie weiter und recherchieren oder entwerfen Sie Ihre Symbole, um die Symbole zu finden, die Sie verwenden möchten, die Symbolschriftart, die Sie verwenden können, und platzieren Sie all das auf der Symbolseite oder Ihrem Asset-Artboard, damit Sie beginnen können, zu sehen, wie alles sieht zusammen aus. 7. Sich anpassendes Design: In Ordnung, wir haben unsere visuellen Assets fertig gestellt und wir sind bereit, mit dem Design weiterzumachen. Aber halten Sie es fest, bevor Sie direkt in Seitenlayouts springen weil Responsive Webdesign eine Menge Dinge ändert. Unsere Hintergrundlesung, wenn Sie noch nicht durch diese Bücher gegangen sind, ist Ethan Marcottes Responsive Web Design und Luke Wroblewskis Mobile First. Also, was ist das responsive Web? Nun, im Grunde, als wir anfingen, eine Million verschiedene Geräte zu entwickeln, begannen wir zu erkennen, dass die Dinge, die in unseren Desktop-Layouts gut aussahen , nicht unbedingt gut in Mobilgeräte übersetzten. Also, eine schöne Gitternetz-Desktop-Website erforderte einen Zoom, einen Scroll und einen Tippen, um nur zur nächsten Seite zu gelangen. Daher könnte Responsive Webdesign, das unser Layout an den Container passt, die Dinge nur einen Klick entfernt machen. Also begannen wir, mehr über Gitter nachzudenken, und mehr darüber , wie sie für jedes Gerät geeignet wären, aber dann mussten wir uns jeden Monat mit einer Vielzahl neuer Hardware und neuer Geräte auseinandersetzen . Daher änderten sich Designprozesse als Folge davon. Ich bin zu dem übergegangen, was ich Frankenstein-Layouts nenne, die Kombinationen aller Hauptstücke auf der Seite sind. Andere Leute haben über Elementcollagen gesprochen, die eine ähnliche Idee sind und alles kommt aus der Tatsache , dass eine Website so viel komplexer ist als unsere früheren Dinge. Ein Poster, für das du keinen Styleguide brauchst. Es ist eine Sache. Du hast die Kontrolle. Du schickst es an den Drucker und es ist fertig. Ein Buch, du musstest anfangen, über Systeme nachzudenken. Sie wollten, dass eine Überschrift auf einer Seite den gleichen Stil wie eine Überschrift auf einer anderen Seite hat, aber Websites sind unendlich komplexer. Inhalt kann eine Werbeaktion auf einer Seite und dann der vollständige Artikel auf einer anderen Seite sein und dann in einem anderen Abschnitt archiviert werden. Wir müssen jetzt Systeme für all diese verschiedenen Arten und Zwecke und Geräte haben. Also mussten wir anfangen, über modulares Design nachzudenken, dass wir uns auf die Stücke konzentrieren konnten, aber wir erkannten, dass sie in mehrere verschiedene Layouts gehen würden. Einige Leute kamen mit Stilfliesen als Antwort darauf. Also, sie sind ein bisschen spezifischer als ein Stimmungsbrett. Ein Stimmungsbrett neigt dazu, genehmigte Leute sagen: „Ja, ich mag es, lass uns machen Moodboard B“, aber dann, wenn Sie mit dem tatsächlichen Seitenlayout zurückkommen würden, würden sie sagen: „Das ist nicht, was ich erwartet hatte.“ Also, eine Style-Kachel war ein bisschen spezifischer, wo Sie eine tatsächliche Überschrift hätten, Sie hätten tatsächliche Farben und Bilder und Schaltflächen und UI-Assets auf der Seite, aber es war nicht ganz ein vollständiges Layout. Also, das sind ein hilfreicher Schritt, aber ich denke, sie fehlen ein wenig Spezifität, diesowohl Kunden als auch denke, sie fehlen ein wenig Spezifität, die uns als Designer hilft herauszufinden, was unsere Vision wirklich ist. Also, Dan Mall schreibt über Elementcollagen und wie er angefangen hat, sie zu tun, denke ich auf Reading ist Fundamental. Also, hier ist ein Beispiel dafür, wie er sie auf der Entertainment Weekly Redesign gemacht hat , die alle wichtigen Stücke sind. Noch bevor Sie Seitenlayouts oder Seitenanforderungen kennen, wissen Sie, dass Sie ein Bild von einer Berühmtheit haben werden und Sie werden eine Überschrift haben. Daher können Sie diesen Abschnitt und die Farben entwerfen, in denen er möglicherweise angezeigt wird. Sie können beginnen, einige Entscheidungen zu treffen, dass die Zeitschriften auf einem bunten Hintergrund silhouettiert erscheinen oder wie Ihre Schaltflächen aussehen würden, wie Ihre wichtigsten Sharing-Widgets aussehen würden, welche Symbole Sie verwenden werden. Also, das sind alle Stücke zusammen und wie Sie sehen können, gibt es Ihnen eine gute Vorstellung von der Persönlichkeit der Website, noch bevor wir in Layouts umziehen. Hier ist eine, die er für TechCrunch getan hat, die Sie auf der linken Seite sehen können , ist die Vollversion. Es ist sehr lang. Er ist wirklich ins Detail über viele verschiedene Stücke der Website und auf der rechten Seite ist ganz nah; die Sharing-Widgets, die Tags, die Titel, die wichtigsten Teile der Website. Elementcollagen sind also keine Inspirationstafeln. Stilfliesen sind keine Inspirationsbretter. Sie möchten nicht Screenshotting andere Sachen und fügen es in Ihr Layout ein, weil es sowohl dem Client als auch Ihnen eine falsche Wahrnehmung gibt , wie weit Sie im Prozess tatsächlich sind. Sie möchten dies als Ihre eigentlichen ersten Entwürfe der Stücke des Designs tun. Also, dies ist eine Inspiration Board, wo ich einige Farben gesammelt habe , die ich mag, einige Typografie Inspiration, einige Benutzerbeispiele, nur einige Fotostile , aber dann wird eine Elementcollage daraus gezogen. Also, ich habe damit begonnen, das in echte Schriftarten zu verwandeln, die ich verwenden könnte, echte Farbauswahl, die zeigen, wie ich die Fotos zuschneiden könnte, welche Schriftarten ich verwenden könnte und es gibt kein Layout. Sie können sehen, dass diese nur auf der Seite collagiert sind. Der Klient könnte sagen: „Das ist ein wenig schwimmend.“ Sie sehen vielleicht, dass es ein Licht ist, sie könnten es als ein Layout betrachten, aber es geht wirklich nur darum Sie beginnen, die verschiedenen UI-Assets zu entwerfen. Also, hier ist ein weiteres Beispiel, wo ich von einer Stilkachel umgezogen bin, die hilfreich war, und ich habe drei davon gemacht und sie helfen dem Kunden, ein Gefühl davon zu bekommen, welche Farbfamilie sie bevorzugt und ich habe auch Comps gemacht, um jede der Stilfliesen und dann von diesem Feedback, sie wählten eine Stil-Kachel und natürlich eine andere comp und so, ich collage, dass in der nächsten Iteration ein Frankenstein-Layout war. Also, ich nenne es Frankenstein, nur weil es wie drei Seiten in einem ist und in diesem Fall war es eigentlich die Homepage plus ein Anmeldeformular, plus das Benutzerprofil plus das Händler-Dashboard alles in einem. So war ich in der Lage, dieses Design weiter zu überarbeiten und zu polieren und es dann als Referenz für alle nachfolgenden Seiten auf der gesamten Website zu verwenden. Also, der Kunde verstanden, dass dies war, was alle Teile ihrer Website aussehen würden, und ich hatte einen guten Bezugsrahmen, um sicherzustellen, dass jede nachfolgende Seite mit dieser anfänglichen Frankenstein-Seite übereinstimmte. Aber erinnere dich an den Punkt dieser Dinge; warum tun wir sie? Du versuchst, Feedback zu bekommen. Dies sind also alle verschiedene Designer, die verschiedene Arten von Leistungen ausmachen , die dem jeweiligen Projekt dienen und es ihnen ermöglichen, das Feedback zu erhalten, das sie zu diesem Zeitpunkt benötigen. Also, eine Stil-Kachel ist angemessen, wenn Sie nur wissen möchten, ob sie Ihre Farben mögen oder nicht. Ein Frankenstein-Layout ist besser geeignet, wenn Sie wirklich ein Designfeedback erhalten möchten , ohne eine ganze Website entwerfen zu müssen. Wenn Sie bei einer Werbeagentur arbeiten, ja, werden Sie mit großen Kunden arbeiten und sie werden wollen, um vollständig fertige Konzepte zu sehen für- Sie könnten drei separate Website-Designs und zwei von ihnen werden weggeworfen werden. Aber kleinere Kunden und Designer haben dafür keine Zeit. Also, das sind alles Versuche, das Feedback zu bekommen, das Sie brauchen, ohne so viel verschwendete Arbeit tun zu müssen. Dann ist es auch gut, weil Sie anfangen, diese wirklich wichtigen Elemente zu entwerfen. Sie werden also mit sechs und acht und 10 Runden Revision im Vergleich zu Ihrem Standard enden ; ein Mock-up und zwei Runden Revisionen, an die viele Designverträge gewöhnt sind. Okay, jetzt werden wir unser Frankenstein-Layout entwerfen. Sie werden gehen, um eine Mash up Ihrer wichtigsten Seiten zu entwerfen, so dass Sie beginnen, alle Elemente zu adressieren. Also, in Sketch oder Illustrator, können Sie mit Ihrem Desktop Art-Board beginnen, wenn Sie Spaß mit dem komplexesten Layout haben wollen oder Sie können Ihr mobiles Artboard machen , wenn Sie die meisten Einschränkungen haben möchten. Also, machen Sie ein Modell Ihrer wichtigsten Elemente für Ihre Website; Schaltflächen, Menüs, Tabs, Schlagzeilen, Absätze, Callouts, alles, was Ihnen die beste Vorstellung davon geben wird, wie all diese Stücke zusammen gehen. 8. Solide Layouts: Ok. Du hast dein Frankenstein-Layout beendet und Feedback bekommen. Jetzt sind wir bereit, die einzelnen Layouts auszukurbeln. Denken Sie also über den Zweck jeder Seite nach. Was soll der Besucher tun? Wie willst du sie davon überzeugen? Die Drahtrahmen oder Content-Umrisse sollten eine allgemeine Vorstellung von der Informationshierarchie liefern , aber es ist die Aufgabe des visuellen Designers, die Prioritäten für jeden Bildschirm kristallklar zu machen. Denken Sie an die ersten Impressionen, jemand wird mit jedem Bildschirm haben und dann darüber nachdenken, was unterstützt Inhalte Sie hinzufügen oder entwerfen, um zu folgen, dass. Dann ist der Hauptaufruf zum Handeln, das Wichtigste in vielen Fällen. Es dreht sich alles um Aufmerksamkeit, wohin deine Augen zuerst gehen, dann zweitens und dann dritter. Es gibt Eyetracking-Studien, die Ihnen helfen, zu verstehen, wo Menschen suchen. Also, hier ist der Preis eine gute Arbeit, Aufmerksamkeit zu bekommen und auch das Gesicht der Frau auf der linken Seite. Die Überschrift sieht so aus, als würde sie etwas Action bekommen. Aber wenn Sie möchten, dass diese vorgestellten Laptop-Angebote etwas Aufmerksamkeit zu bekommen, sie sind nicht abheben. Hier ist ein Beispiel für Augenkontakt, und es ist Verwendung, und es ist wichtig auf der Seite. Die Leute suchen immer zuerst nach dem Gesicht auf der Seite. Also, Sie können hier sehen, dass sie auf das Baby zoomen. Dann schauen sie über die Überschrift, den unterstützenden Text, die Produktaufnahme und dann auf das Logo. Sie können die Augen auch linear verfolgen. Also, hier ist, wo ein Benutzer zuerst, zweite, dritte, verbrachte einige Zeit und ging über. Betrachten Sie also die Augen als Zeichnen eines Pfades auf dem Bildschirm. Ist es ein schöner, klarer Weg oder ist es ein bisschen schizophren? Wenn sie lesen, neigt der Augenweg dazu, im F-Layout zu folgen. Also, sie gehen von links nach rechts in Zeile für Zeile nach unten, so als ob Sie ein Buch lesen würden. Also, dies ist das Muster sowohl zum Lesen als auch zum Skimming. Es gibt verschiedene Techniken, mit denen Sie das Auge des Besuchers um die Seite führen können. Augenkontakt ist der primäre. Du gehst zuerst ins Gesicht des Mädchens und dann runter durch die Mitte oder legst dich unten aus. Der Kontrast ist ein weiterer großer. Sie können nicht helfen, aber schauen Sie sich dieses leuchtend orange auf dem schwarzen Hintergrund und dann auch das weiße E-Mail-Feld oben auf dem orangefarbenen Hintergrund an. Farbe vor allem, rot, packt die Aufmerksamkeit und schauen Sie sich diese kleinen Punkte rot, wie sie Ihr Auge um die Seite führen, die wichtigsten Stücke. Dann, ausreichende Leerzeichen, um das Auge irgendwo zwischen all diesen Aufrufen zum Handeln und all diesen Schwerpunkten auszuruhen . Du ziehst jemanden mit einem starken Brennpunkt ein. In diesem Fall ist es ein animiertes Video, die Wand hängt im Raum und dreht sich. Sie verwenden auch Ausrichtung. Hier ist ein super minimales Layout, aber Sie bekommen immer noch ein Gefühl für Ihr Auge möchte entlang des oberen Nervs oder nach unten den Artikel ruft Outs wegen der Art und Weise, dass sie in einem strengen Raster ausgerichtet sind. Sie können auch das Werkzeug der Skalierung verwenden. Also, riesig startet mit einem riesigen H und führt Ihr Auge von dort zu allen sekundären Inhalten. Denn Design schafft das Interesse, aber dann versucht es auch, das Interesse des Besuchers aufrechtzuerhalten oder es an woanders zu richten, und dann das Interesse neu zu erstellen, sobald sie beginnen, ein wenig langweilig zu werden. Geben Sie jedem Layout den Schielen Test. Das ist etwas, das Sie in der Kunstschule tun und es ist etwas, das im Webdesign hält. Selbst wenn Sie Ihr Auge schielen, können Sie immer noch ein Gefühl davon bekommen, was der Hauptaufruf die Aktion auf der Seite ist. Wenn Sie sich also einige Beispiele für verschiedene Layouts ansehen, können Sie sehen, dass der erste Eindruck der Papier-App-Website Sie wissen lässt, ja, es ist eine iPhone-App, aber sie tun auch einige Dinge mit den Bildern. Also, sie zeigen eine Zeitung im Hintergrund, um Ihnen ein Gefühl von dem, was diese App ist. Es ist wie eine Zeitung. Sie zeigen Ihren Morgenkaffee, also können Sie sich vorstellen, dass er Teil Ihrer Morgenroutine ist. Dann gibt es einen sekundären Inhalt. Es ist ein Satz, der den Nutzen dieser App erklärt, und dann ein paar Aufrufe zum Handeln, sehr klar und leicht zu finden. Dies macht Website ist mit ihren ersten Eindrücken von Kreativität. Hier sehen Sie viele Kinderzeichnungen und kreative Typografie. Es dreht sich im Raum, und dann folgt der unterstützende Text offensichtlich nach unten im mittleren Layout und der Aufruf zum Handeln unten auf dem Bildschirm. Die Peek-App ist ein Kalender und so wieder, unser erster Eindruck ist, dass wir verstehen, dass es eine iPhone-App ist, wir sehen, dass die Benutzeroberfläche kreativ und einzigartig aussieht, und dann sehen wir einige unterstützende Inhalte hier ist ein Video, wo wir auf offensichtliche Play-Schaltfläche klicken, um das Video zu sehen, und unsere Call-Aktion ist es, es zu bekommen, nachdem wir überzeugt sind. Selbst wenn Sie keine Bilddaten verwenden, können Sie das Auge nur mit Typografie zeichnen. Also, hier sind massive Schlagzeile, die die Unterscheidung dieser Agentur vermittelt. Dann gibt es unterstützende Inhalte über alle Details und ihre Fachgebiete, und dann einige kleine Calls to Action, weil sie immer noch eine formellere Marke darstellen. Sie führen auch das Auge durch die zugrunde liegende Struktur der Seite. Vor allem das Gitter. So gibt es gängige Gitter wie das 960, das in einer 12-Säule oder einem 16-Säulen-Format vorkommt, die sowohl in den visuellen Designphasen als auch in den Entwicklungsphasen einfach zu bedienen sind. Aber es gibt jetzt auch viele Werkzeuge, mit denen Sie ein benutzerdefiniertes Raster entwerfen können , das speziell zu Ihren Inhalten passt. Gridpak ist eins. Es gibt auch ein Gridset. So sind Sie in der Lage, wirklich von den Inhalten nach außen zu entwerfen und nicht nur Ihre Inhalte in die Boxen einer anderen Person zu passen. Stellen Sie sicher, dass Sie verstehen, wie Gitter verwendet werden sollen. Eine Sache, die ich brauchte, ich habe in der Schule nicht gelernt , war , dass Sie normalerweise Ihren Inhalt innerhalb der Rasterspalte auffüllen, so dass, wenn Sie diesen Hintergrund färben, Sie immer noch ausreichende Ränder zwischen dem Text und dem farbigen -Hintergrund. Also, Khoi Vinh und Mark Boultons PDF, es ist ein bisschen alt, aber es ist immer noch eine großartige Erklärung dafür, warum Gitter gut sind und wie man sie benutzt, wenn man Webdesign macht. Warby Parker ist eine Marke, die schönes Design mit dem Gitter hat und wieder, es ist ein kreatives Raster. Also, das ist ein Kalender. Sie würden also erwarten, dass es sich um ein sieben Säulenraster handelt, das die Wochentage widerspiegelt. Stattdessen ist der Kalenderabschnitt acht Spalten und es gibt eine neunte Spalte links für den Monat. Es ist also ein neun Säulenraster, das ihm definitiv einen einzigartigen Geschmack verleiht. Sie verwenden es, um eine ganze Menge Bilder, Inhalte und Grafiken so zu strukturieren, dass sie sich immer noch organisiert und einzigartig anfühlt. Selbst wenn Sie nicht jede einzelne Rasterlinie zeichnen, kann der unverankerte Typ dennoch ein Gefühl von Ordnung und Ausrichtungen haben. Hier ermöglicht das Raster, dass dynamische Inhalte später ausgefüllt werden und ein dynamischeres Layout beibehalten werden, so dass größere Dinge Aufmerksamkeit erregt und kleinere Dinge später betrachtet werden können. Auch hier haben schwimmende Dinge immer noch ein zugrunde liegendes Gitter. Also, diese Überschrift „Check my Pipes“ ist nicht bündig mit dem Logo, aber sie ist mit dem zugrunde liegenden Raster ausgerichtet. Möglicherweise sehen Sie nicht alle Rasterlinien, aber Websites, die mit Rastern erstellt werden, haben ein Gefühl der zugrunde liegenden Struktur. Auch hier ist Khoi Vinh einer der führenden Befürworter und Meister dieser Technik. So war seine Website, die jahrelang imitiert wird, eine der frühen, die wirklich schöne Verwendung eines Schweizer Gitters und Typografie zeigte. Er hat es vor kurzem neu gestaltet, aber es ist immer noch jemand, dem Sie wirklich folgen können, wenn Sie an diesem Tool interessiert sind. Er hat vor ein paar Jahren ein ganzes Beispiel Neugestaltung der Yahoo-Website gezeigt, dass sogar eine chaotische und überfüllte Homepage mit Hilfe eines zugrunde liegenden Gitters organisiert werden kann. So schaffen Gitter nicht nur dieses Gefühl der Auftragskontrolle, sondern machen es auch einfacher, wenn Sie Dinge an einen Entwickler übergeben. Wenn jede der Seiten, die Sie entwerfen, ein einzigartiges Layout ist, wird es viel mehr Arbeit sein, diese Seiten zu erstellen und zu pflegen. Also, wenn Sie dieses System haben, wird es die Dinge viel einfacher auf der Straße und vor allem mit Responsive Design zu machen , wenn Sie anfangen müssen, herauszufinden, wie diese Dinge in verschiedenen Geräten fließen. Die einzige Einschränkung ist, dass sie langweilige Layouts erstellen können, wenn Sie sie schlecht verwenden. Wenn Sie nur Dinge in das gleiche 3-Spalten-Raster füllen, erhalten Sie nicht wirklich den vollen Vorteil des Rasters. Es sollte Ihr Design einfacher machen, aber es sollte auch einige einzigartige Layouts inspirieren, indem Sie inspirieren, Dinge im Leerraum zu platzieren, wo sie könnten oder Dinge in Räumen platzieren, an die Sie vorher nicht gedacht haben. Dann müssen wir uns auch daran erinnern, dass wir responsive Layouts entwerfen. Also, fangen wir mit Handy an. Denn das ist derjenige, der neuste ist, aber auch an Bedeutung gewinnt. Also, Benutzerprojektionen sind, dass mobile ist im Begriff, unser Desktop-Design zu übertreffen. Das muss ich skizzieren. Also, das Design für mobile und für andere Geräte neben einem Desktop-Computer, lässt uns über Raum und Layouts auf eine andere Art und Weise nachdenken. Also, auf einem Desktop, die Mitte des Bildschirms ist, wo die Leute meist suchen oder vielleicht der linke Rand des Bildschirms, wenn sie dem linken NAV auf der Seite folgen. Aber auf einem Telefon ist es einfacher zu wischen, um den unteren linken Bereich desBildschirms zu treffen den unteren linken Bereich des , wenn Sie das Telefon in der rechten Hand halten. Also, das könnte sein, wo Sie Hauptanrufe in Aktion setzen. Wenn Sie ein Tablet aufrecht halten, es die Seiten des Bildschirms, wo es leichter zu treffen ist. So wird die Platzierung von Dingen auf der Seite vom Gerät beeinflusst. Lesen Sie definitiv Global Moxies Bücher zu diesem Thema. Er arbeitet und redet und teilt seit Jahren all seine Gedanken darüber. Die andere Sache zu erkennen ist, dass mobile Designs sind nicht ein kleiner Cursor, ein kleiner Pfeil, sondern ein großer feiner Finger, der versucht, diese Tasten zu treffen. Wenn Sie also zum ersten Mal anfangen, mobile Layouts zu entwerfen, können Sie nicht glauben, wie groß die Schaltflächen sein müssen. Apple empfiehlt mindestens 44 Pixel oder 88 auf einem Netzhaut-Display als die Größe, aber hier ist ein Kerl, der testet und zeigt, dass der gelbe Bereich war, wo sein Finger war sogar größer als die empfohlene. Also, Sie müssen die Symbole nicht selbst so groß machen, aber der anklickbare Bereich oder der klopfbare Bereich muss Lage sein, mit jemandem tatsächlichen Finger umzugehen. Also, hier ist ein Beispiel wieder zu erkennen, dass dieses Eingabegerät tatsächlich Ding vertuschen wird, das die Person zu berühren versucht. So haben Sie viele Änderungen gesehen, als mobile begann, im Design vorherrschend zu werden. Also, Sie haben Apps gesehen. Sie sahen, wie die Schaltflächen viel größer und einfacher zu streichen waren. Sie sahen Tasten, die volle Breite des Bildschirms waren , als wir mehr und mehr verfeinert und wie wir verstanden, was gutes Design auf Handy gemacht. In Apps wie dem menschlichen Körper von Tinybop erfassen wirklich dieses Gefühl der Erforschung und der Geste. Das Kneifen und Zoomen sind viel natürlicher. Knöpfe, wie Josh Clark sagt, sind Knöpfe Hack. Dass es nur eine Möglichkeit ist, ein Gerät, das wir verwendet haben, um Klickbarkeit zu repräsentieren, aber es ist viel natürlicher, Dinge zu greifen Dinge zu wischen oder Dinge von Ihrem Desktop zu wischen, wie Sie es auf einem echten Schreibtisch tun. Es gibt also ein ganz neues Vokabular, das die Leute lernen. Hier ist Luke Lebrewskis Gestenführer und das ist nur ein Stück davon. Es gibt so viele Gesten, die Sie in einer nativen App verwenden können. Es erweitert offensichtlich das interaktive Potenzial Ihrer Website oder Ihrer App, aber Sie müssen sich dann darauf verlassen, dass Ihre Benutzer sie lernen und dann müssen Sie sich auch darauf verlassen, dass Ihre Entwickler ausführen, was auf einer responsiven Website möglich ist. Also, eine responsive Website auf Mobilgeräten, muss definitiv für Finger und die Verwendung von Gesten und Wischbewegungen erlauben, aber Sie müssen auch darüber informiert werden, was nur in nativen Apps möglich ist und was in einer responsiven Website möglich ist. Denken Sie daran, keine Hover-Zustände auf Handy. Dies war ein nützliches Werkzeug für viele Jahre im Webdesign, aber nicht mehr. Natürlich können Sie das Menü tippen und dann öffnen und dann wieder tippen, um irgendwo zu gehen, aber Sie haben nicht das Gefühl, dass jemand zufällig über Ihre Inhalte schwebt und etwas Verborgenes entdeckt. Weil sie tippen müssen, um versteckte Inhalte zu sehen. Google machte diese riesige Forschungsstudie namens Die Multi-Screen-Welt. Sie möchten also den Kontext für jedes dieser Geräte berücksichtigen. Sie können also Ihr Telefon abholen, weil Sie nur eine Sekunde haben und Sie sich nicht anIhrem Computer anmelden müssen oder Sie nichtdurch den Raum gehen Ihrem Computer anmelden müssen oder Sie nicht und Ihren Computer abholen müssen. Du versuchst vielleicht etwas Bestimmtes zu tun. Sie haben Ihr Telefon geschnappt, weil Sie ein Foto machen wollten und es dann an einen Freund senden möchten oder Sie es dann in Ihr Konto hochladen möchten. Sie könnten sich Ihr Telefon schnappen, weil Sie keinen Zugang zu Ihrem Computer haben oder auf der Straße oder im Auto oder bei einem Freund sind und Sie es vielleicht tun, weil Sie versuchen, sich zu entspannen. Sie wollen nicht den Computer öffnen, der Arbeit und Ihre E-Mail repräsentiert, Sie wollen einfach in einer sozialen Denkweise bleiben. Denken Sie also über die Eigenschaften jedes dieser Geräte nach. Das Handys neigen dazu, mehr eins zu eins zu eins zu sein und es ist persönlicher. Tablets neigen dazu, vielleicht dort zu sein, wo Sie surfen, Zeitschriften lesen Rezepte ansehen und dann Laptops oder Desktops mehr über Arbeit für Menschen sein können. Dann können Sie etwas auf Ihrem Telefon starten und es als Sammlungsgerät verwenden, aber dann beenden Sie die Aufgabe auf Ihrem Desktop, und das wäre Ihr Organisationsgerät. Hier sind einige Beispiele dafür, wie meine Layouts aussehen. Ich begann mit Handy und ich legte meine Inhalte für die Yogaseite. Sie können sehen, es ist meist eine Spalte und ich habe ein Paar gemacht. Ich hatte ein bisschen, wo es zwei Spalten sind und wir beschlossen, das ganze Bild zum anklickbaren Bereich zu machen. So konnten die Leute einfach mit ihren Daumen klopfen. Es ist sehr gerastert Layout, so dass es jetzt einfach ist, auf den Desktop umfließen. Ich wusste, dass ich wollte, dass das Hauptbild, das Einführungsbild größer wird, und dann wollte ich immer noch, dass der Peru Retreat sehr hervorgehoben wird. So können Sie sehen, dass die Hierarchie zwischen den Layouts beibehalten wird. Dann kann ich visualisieren, wie mein Tablet-Layout funktionieren könnte. Hier sind meine drei Kunsttafeln im Illustrator, aber ich gehe zurück und fülle das aus und versuche zu entscheiden, werde ich immer noch all diese vier Bilder in der zweiten Reihe zusammenhalten oder werde ich versuchen, es in separate Reihen zu brechen? Also, tun Sie so viel, wie Sie brauchen. Wieder kommt es darauf an, wem Sie diese aushändigen werden. Hier ist ein Beispiel, wo ich gerade den Desktop und das Handy nebeneinander gemacht habe. Also, der Desktop ist auf der linken Seite und die Handys auf der rechten Seite. Hier ist die Startseite und die Info Seite für diese große Seite. Dies ist ein komplexeres Layout. Also, ich hatte ein bisschen mehr zu versuchen und herauszufinden, was mit all diesen verschiedenen Inhalten zu tun , die von 4 bis Karussells zu einzelnen Karussells so etwas gehen . Also half es mir mit Funktionalität, es zu markieren, bevor ich anfing, es zu programmieren. Es hat auch Leute auf der gleichen Seite über das, was sie auf jedem Gerät sehen würden. Im Ressourcenbereich der Website gibt es eine ansprechende Illustrator-Vorlage, die jemand anderes erstellt hat. Das ist hilfreich, wenn Sie möchten, oder Sie können einfach Ihre Kunstboards erstellen, um Ihre eigenen Bedürfnisse zu erfüllen. Also, ausgehend von Ihrem Frankenstein-Layout, gehen Sie Seite für Seite und entwerfen Sie diese Layouts von Ihren Wireframes. Also, wieder sollte der Wireframe Ihnen zeigen, wie die anderen Mitglieder des Teams oder vielleicht Sie selbst die Hierarchien der Seite gesehen haben, aber Sie möchten sicherstellen, dass die visuellen Layouts so gut wie möglich aussehen. Im Allgemeinen gibt es also eine Neuanordnung, die ausgeführt wird, wenn Sie von Drahtmodellen zum visuellen Design wechseln. Beginnen Sie also zuerst mit Ihren mobilen Bildschirmen. Denn mobile Layouts neigen dazu, eine einzelne Spalte zu sein. Sie können manchmal zwei oder sogar drei Spalten passen, aber es ist selten. Es zwingt Sie also, Ihren Inhalt linear zu priorisieren, was zuerst auf der Seite dann zweite, dann dritte, dann vierte. Also, ich möchte mit Handy beginnen und dann gehe ich gerne den ganzen Weg zum Desktop-Layout und versuche das andere Extrem. Wie werde ich die Vorteile dieses riesigen Bildschirms nutzen? Was soll ich hier machen? Auch hier geht es nicht nur um die Form der Leinwand, sondern um den Kontext. Was soll ich tun, wenn jemand bei der Arbeit ist und meine Seite besucht? Was soll ich tun, wenn sie auf ihrem Handy sind und meine Seite besuchen? Dann werden Sie mit all Ihren Hauptseiten wiederholen. Ich mache nur diese beiden zuerst für die wichtigsten Websites. Ich führe oft weiter und mache die Entwicklung auch. Also, ich werde die mittleren Haltepunkte im Code machen, aber wenn Sie diese Seiten an einen Entwickler weitergeben, müssen Sie fortfahren und alle Ihre Tablet-Markups oder andere Haltepunkte, die Sie sich entscheiden, ausführen . Auch hier können Sie so viele Haltepunkte ausführen, wie Sie möchten. Sie sind nicht besonders für jedes Gerät wie das iPad oder den Nexus, was auch immer. Sie möchten darüber nachdenken, wann Ihre Inhalte zu fallen beginnen. Wenn Sie skalieren Video beginnt den gesamten Bildschirm zu nehmen und keine der zweiten Zeile des Inhalts zeigen und so, das ist, wenn Sie einen Haltepunkt hatten und überarbeiten Sie Ihr Layout. Also, arbeiten Sie an Ihren Layouts. Sie können alle mobilen zuerst tun, wenn Sie möchten oder einfach nur einen Bildschirm machen. Der wichtigste Bildschirm Mobile und Desktop und erhalten ein paar Feedback und sehen, wie es geht. 9. Benutzerfreundlichkeitstest: Ok. Jetzt ist es an der Zeit, einige Usability-Tests unserer Websites durchzuführen. Wenn wir in unsere Layouts kommen, in unseren reaktionsfähigen Layouts, kann es verlockend sein oder wenn wir in unsere Layouts kommen, neigt es dazu, uns in 2D-Design-Thinking zurückzudrängen. Dass wir uns Sorgen machen, diesen Inhalt im Weltraum zu arrangieren. Aber wir müssen uns daran erinnern, dass Webdesign ein wandelndes Medium ist, dass wir in vier Dimensionen arbeiten, dass es interaktiv ist, dass Dinge passieren. Also wollen wir zurückgehen und über die Interaktivität der Website nachdenken und unsere Layouts aus dieser Perspektive beurteilen. Also, was sind die grundlegenden Messungen? Was sind die grundlegenden Dinge, die eine Website nutzbar machen? Hier sind diese 10 Usability-Heuristiken von Jacob Nielsen, der die führende Autorität in diesem Bereich ist, die wir betrachten können, um unsere Layouts zu beurteilen. Also, Nummer eins, die Sie sicherstellen möchten, dass Ihr Systemstatus klar ist. Also, Bestätigungs-Bildschirme. Wenn jemand auf „Senden“ klickt, möchte er wissen, dass seine Bestellung eingegangen ist, dass er den Artikel entweder erhält oder nicht. Wenn Ihre Seite geladen wird, Sie jemandem mitteilen, was geladen wird, damit verstehen kann, warum es so lange dauert, und sie denken nicht , dass es sich um ihren Browser oder ihr WLAN handelt. also sicher, dass es Systemstatusindikatoren gibt, wenn Sie sie benötigen. Nummer zwei ist, dass es ihrem mentalen Modell entspricht. Dies kommt also wieder auf die Beschriftung zurück, die Sie in Ihrer Architektur verwenden. Hoffentlich hat Ihre Planungsphase etwas davon geklärt, aber Ihr visuelles Design muss es auch verstärken. Instapaper verwendet also einen Posteingang oder ein Archiv. Sparen Sie oder laden Sie hoch? Was ist die Metapher? Was sind die Symbole? Stellen Sie sicher, dass das alles mit ihrem Modell übereinstimmt, was sie erwarten. Nummer drei ist, dass Benutzer die Kontrolle haben. Also, das könnte bedeuten, dass Sie ihnen ein wenig Input in das Design von geben, ist es hell genug für sie? Ist die Schriftgröße groß genug für sie? Einige Apps bieten Nachtmodus, wenn es um Lesen geht und es sich auch um Navigation handelt. Dass sie zu den Teilen auf der Website gelangen können, die sie erreichen wollen. Wenn Sie mit dem Plotten der Benutzererfahrung beginnen, können Sie sie wie ein Film plotten, als ob Sie Bildschirm für Bildschirm Skripte erstellen, was sie erleben werden. Ja, Sie tun das für Ihre User Stories, aber dann müssen Sie auch erkennen, dass die Leute sich ständig in andere Geschichten verzweigen und Pfade ändern. Also, gute Navigation hilft ihnen, das zu tun und lassen Sie uns Spaß haben und tun, was sie auf der Website tun wollen. Die vierte ist eine Art Haustier-Peeve von mir, die Symbole konsistent sind und sind sie konsistent aus einer Usability-Perspektive wie, sind sie Illustrationen oder sind sie Knöpfe? So, hier können Sie sehen, dass auf den Registerkarten die Symbole hier als Schaltflächen und auf Registerkarten verwendet werden. Sie werden nicht als Illustrationen verwendet. Also, das ist etwas, wo ich wissen kann, kann ich diese Seite überspringen und ich kann die Symbole kennen , die ich auf diejenigen klicken kann, die etwas funktionales ist. Nummer fünf ist, dass Sie versuchen, ihnen zu helfen, Fehler zu vermeiden, und hier spielt das visuelle Design eine große Rolle. So, zum Beispiel, die primäre Aktion, die Haupttaste ist in der Regel größer, kühner, aber die sekundäre Aktion muss möglicherweise nicht wie eine Schaltfläche aussehen. In der Tat, wenn es eine unangemessene oder eine Stornierung ist, möchten Sie vielleicht nicht, dass es etwas ist, das zu leicht zu treffen. Sie sehen es auch mit Dingen wie bei der Planung der Auswahl einer Farbe für eine Bluse, dass, wenn ich das Bild ändern kann, um diese Farbe zu reflektieren, es die Wahrscheinlichkeit verringert, dass jemand irrtümlich die falsche Farbe bestellen wird. Also, dieses etwas, das Sie in Ihren Designs verspotten können oder Sie können eine Notiz an den Entwickler schreiben , um das Foto zu ändern, wenn der Benutzer auf dieses Farbfeld klickt. Die nächste Sache ist auch, dass Sie nicht möchten der Benutzer zu viel Arbeit tun muss, besonders wenn er auf einem Telefon ist und sie mit ihren Daumen tippen. Also, wenn Sie können, wenn sie in ein Suchfeld eingeben, warum nicht eine automatische Vervollständigung Dropdown-Liste, die ihnen hilft, aus einer Liste von Optionen auszuwählen, und das führt nicht dazu, dass sie alle 50 Zeichen der Beschreibung eingeben. Dann möchten Sie erneut jede Ihrer User Stories durchlaufen und überprüfen und sicherstellen, dass sie so effizient wie möglich sind. Also, das kann sowohl Sie reduzieren die Gesamtzahl der Klicks es braucht, um von A nach Z zu gelangen, dass Sie nicht machen, dass sie durch 10 Bildschirme navigieren, um sich anzumelden und ein Konto zu erstellen, um ein Produkt auf Ihrer Website zu kaufen , oder es kann bedeuten , dass Sie die Ladezeit der Seite reduzieren. Also, viele Einkaufswagen wie diese Seite Baldachin sie werden wie eine Ebene tun, so dass die ganze Seite nicht neu laden muss, um mehr Informationen über das Produkt zu erhalten , aber Sie tun einfach eine schnelle Ebene, die geladen durch Ajax. Sie können auch bestätigen, dass einige Leute gerne mit ihren Tastaturen surfen. So können Links-und Rechts-Pfeile aktiviert werden, um durch ein Karussell, eine Diashow oder andere Schaltflächen zu blättern . Möglicherweise müssen Sie Ihren Benutzern diese beibringen, aber es geht darum, es ihnen einfach zu machen was sie tun wollen, und diese Flows so effizient wie möglich zu machen. Versuchen Sie auch, Ihren Benutzern nur zu helfen, sich auf eine Sache zu konzentrieren. Also, wenn ich hier versuche zu entscheiden, welche dieser Plattformen ich den Standard des benutzerdefinierten möchte, könnten Sie alles andere auf der Seite entfernen, weil ich wirklich versuche , diese Entscheidung basierend auf den Features und dem Kosten und all diese anderen Dinge. Also, ich habe hier jede Menge Leerraum. Ich habe eine klare Tabelle, die mir hilft, die verschiedenen Optionen zu verstehen und alles andere wurde entfernt, was für mich als Benutzer sehr hilfreich ist. Dann endlich sollte Ihre Warnung klar sein. Also, nichts ist frustrierender als „Sorry Systemfehler“, Und Sie haben keine Ahnung, wie Sie es beheben können. Dies sind also einige Beispiele für hilfreiche Warnungen, dass genau wie viele Zeichen im Kennwort erforderlich sind, welche der Formularfelder erforderlich sind. Dies ist das Zeug, das oft in statischen Design-Mockups vergessen wird , aber wenn Sie ein Web-Erlebnis entwerfen, gibt es so viele Zustände für jede Seite. Gehen Sie also zurück und versuchen Sie, jede dieser Interaktionen zu bearbeiten und zu durchdenken und zu überlegen, wie Sie sie klarer machen können. Der letzte ist, dass Hilfe einfach sein sollte. Also, die Leute werden verwirrt. Nein, Sie können den Clippy nicht machen, eine kleine Büroklammer, die Ihnen sagt, wie Sie Microsoft Word verwenden, noch möchten Sie. Aber Sie wollen Hilfe einfach machen, wenn die Leute danach suchen. Setzen Sie es an einen Standardplatz wie das obere Navigationsgerät oder in die Fußzeile und dann erkennen Sie auch , dass die Menschen unterschiedliche Manieren haben, in denen sie Hilfe erhalten möchten. Manche Leute lieben Videos. Manche Leute wollen nur das Telefon abholen. Manche Leute wollen eine E-Mail schreiben oder chatten. Also, es ist schön, wenn Unternehmen all diese Optionen anbieten können. Auch hier würde Ihr visuelles Design widerspiegeln, was Menschen an jeder dieser Optionen mögen. Also, wenn ich jemand bin, der nur mit einer echten Person sprechen möchte, werden diese Fotos von Benutzergesichtern mir das Gefühl geben , ich bekomme Hilfe mehr als jemand, der nur ein Video sehen möchte, wo ein Screenshot eines Hilfe-Tutorial oder eine Produktbewertung wäre ein ansprechender für sie. Überprüfen Sie noch einmal Ihre Layouts und beurteilen Sie die Interaktivität der einzelnen. Es ist unser klickbares durch konsistentes Styling oder durch den Ort, an dem sie auf der Seite platziert werden. So sollten zum Beispiel Links blau und mit einem Mantra für eine lange Zeit unterstrichen sein. Ich bin nicht einverstanden, dass sie unterstrichen werden müssen, weil es wirklich die Lesbarkeit reduziert, aber konsistente Farben sind ein guter Anhaltspunkt für die Interaktivität. Auch hier sind Symbole eine besondere Sache, die ich als Benutzer wissen sollte, wenn es nur eine Illustration ist, die neben einigen Inhalten sitzt oder wenn es eine Schaltfläche ist , auf die ich klicken muss, um zusätzliche Inhalte zu erhalten. Nielsen Norman Gruppe ist einer von ihnen. Die evidenzbasierte User Experience Forschungsfirma. Sie haben also alle Arten von Studien und Metriken, wenn Sie möchten, dass mehr Daten eines Ihrer Argumente unterstützen. Das Letzte an Usability ist, dass Muster etwas sind, das Sie in Betracht ziehen möchten. Dieses intuitive Design bedeutet oft vertraut , dass Sie Standardplatzierung für einige der grundlegenden Funktionen verwenden. Wenn Sie nach der Suchleiste suchen, Sie wahrscheinlich in der Kopfzeile der Seite nach oben, wenn die Leute sie in die Seitenleiste einfügen, ist es etwas schwieriger zu finden. Dasselbe mit dem Login. Also, schauen Sie sich diese Standardmuster an und überlegen Sie, ob Sie innovieren und die Form auf diesen brechen müssen oder ob es etwas ist , wo Sie folgen möchten, was als gute Praxis angesehen wird. Aber ebenso möchten Sie sicherstellen, dass Sie nicht nur andere Websites kopieren. Einige Kunden haben Probleme, Dinge zu visualisieren, und so werden sie Ihnen sagen: „Mach es so.“ Sie wollen nur, dass Sie ein bestimmtes Layout direkt kopieren und Sie müssen zurückschieben, wenn es angebracht ist , ihnen zu sagen , dass Sie mehr als ein Beispiel eines Musters betrachten , um zu beweisen, dass es der beste Weg ist , tun Sie es und dass es ein allgemeiner Trend ist. Aber wirklich wie alles, Sie versuchen, Ihre Layouts Inhalte nach außen zu machen und Sie versuchen, sie auch nach außen zu interagieren. Denken Sie also über Ihre eigenen speziellen Zyklen nach und verwenden Sie diese , um zu bestimmen, welche Muster geeignet sind. Weil wir alle mit dem gleichen Vokabular von HTML-Elementen arbeiten, das gleiche grundlegende Alphabet von HTML-Elementen, aber wir können sie auf eine Million verschiedene Arten kombinieren und so wollen Sie immer Ihr Vokabular erhöhen, indem Sie sehen, was ist da draußen und sehen, was mit neuen Technologien und neuen Ideen möglich ist. Es gibt also einige großartige Ressourcen, die Ihnen helfen, zu visualisieren und sehen, wie und wie diese Muster funktionieren könnten. Brad Frost ist super großzügig darüber, seine Arbeit zu teilen. Er hat diese ganze Bibliothek von reaktionsfähigen Mustern erstellt. Wenn Sie also nur versuchen, zu visualisieren, wie Ihr Layout neu fließen könnte, hier einige praktikable Prototypen, die Sie betrachten und sehen können , welche angemessen erscheint, da es hart ist, für ein sich änderndes Medium zu entwerfen, wenn Sie statischen Tools und es gibt verschiedene Design-Tools, die versuchen, dies zu replizieren , aber am Ende des Tages ist es schön, das zu verwenden, was Sie kennen und so schnell wie möglich Code zu bekommen. Das ist meine Strategie dafür. Responsive Muster sind also eine große Ressource. Muster-Tap ist ein weiterer, bei dem Sie nach dieser Art von Sache sortieren können , die Sie erstellen möchten und sehen, welche Art von Ideen da draußen sind. Hover-Zustände sind auch cool, wo es viele neue und interessante Interaktionsdesigns sind und dann gibt es eine Benutzerinteraktionsbibliothek, in der Sie Beispiele sehen können, die animiert sind, wie Sie diese Übergänge mildern können, sie mehr machen dynamisch, was immer Sie tun möchten, um Ihnen bei der Visualisierung zu helfen. Exportieren Sie also alle Ihre Mockups als PNGs. Sie möchten sie so sortieren, dass Sie jeden Haltepunkt in einem Ordner haben. Also, alle Ihre mobilen Layouts werden in einem Ordner sein, alle Ihre Desktop-Layouts werden in einem anderen Ordner, et cetera. Dann, um einige Usability-Tests zu tun, können Sie sie in vorstellen-App hochladen und es ist ziemlich klar, oder ziemlich intuitiv, um die App zu verwenden. Sie gehen durch und laden jeden Ordner von PNGs und dann können Sie Hotspots erstellen und sie anklickbar machen und dann können Sie einige Benutzertests durchführen. Also, entweder setzen Sie sich neben jemanden und beobachten Sie, wie sie diesen Ordner in der App auf Ihrem Telefon hochziehen und beobachten, wie sie versuchen und navigieren, oder Sie können Bildschirm teilen, wie ein Google Hangout tun und ihnen einige Szenarien geben, bitten Sie sie, das Beste zu tun wichtige Aktionen auf Ihrer Website und beobachten Sie sie, wie sie versuchen, es zu tun. Es ist sehr aufschlussreich und es gibt Ihnen eine völlig andere Perspektive auf Ihr Design. Also, probieren Sie es aus. Sie können auch Ihre Links auf das Skill Share Formular posten und Feedback voneinander erhalten und einige Iterationen auf Ihrer Website durchführen und sehen, wie es geht. 10. Bereinigung und Dokumentation: Letzte Lektion, Bereinigung und Dokumentation. Ich möchte nur diesen Prozess der Iteration betonen , weil es so eine große Sache im Webdesign ist. Ein Webdesign ist nie fertig. Es ist wie ein Kind. Es wächst ständig und braucht neue Kleidung, und die Kultur verändert sich und die Technologie verändert sich. So sind Sie immer in der Lage, eine Website zu verbessern. Das ist eines der großartigen Dinge über Webdesign. Es ist nicht wie ein Buch, in dem Sie es drücken, und dann ist es weg und Sie müssten eine andere Ausgabe machen. Aber eine Website ist immer da und Sie können immer die Dateien optimieren und Ihre Designs optimieren und sie besser machen. Also, kontinuierlich testen und iterieren und verbessern Sie Ihre Entwürfe. Dies ist etwas, das wir nicht über viele beliebte Apps wissen. Also, iOS sieben, wenn es kam heraus war wie ein riesiges Design, aber Sie können sehen, jedes dieser Panel zeigt drei Versionen der Bildschirme und wie sie weiterhin die Sprache zu verfeinern. Früher war es voll mit den Balken-Tasten und dann wurden sie kleiner mit abgerundeten Ecken und dann wurden sie Kreisen oder einige der kleineren sekundären Nachrichten wurden winzige Symbole. Also selbst Apple, einer der führenden Unternehmen im Design, hat viel mehr iteratives Design, als wir vielleicht erkennen. Hier ist ein Beispiel für jedes der iOS-Upgrades und wie lange sie in der Beta verbracht haben. Was für mich interessant ist, ist nur die Gesamtmenge der Versionen, die sie alle zwei Wochen tun, im Grunde, sie veröffentlichen neue Versionen der Software. Also, denken Sie nicht an Ihre Website als diese riesige Launch-Party, aber denken Sie an jede dieser kleinen Iterationen , die Sie als einen kleinen Test veröffentlichen, und Sie bekommen ein wenig Feedback und es ist ein Sprungbrett auf dem Weg. Zurück zu Jakob Nielsen spricht er über jede dieser Iterationen. Zuerst entfernen Sie nur diese Interaktionsfehler und erhöhen die Benutzerfreundlichkeit. Das ist zunächst der Hauptwert, aber im Laufe der Zeit, wenn es wirklich poliert wird, dann beginnen Sie, die Schnittstelle wirklich neu zu konzeptualisieren, während Sie in weitere Iterationen gehen und eine weitere Usability erhalten, wenn Sie beginnen bereit sein, vielleicht einige Ihrer Lieblings-Features zu werfen und wirklich Dinge zu überdenken. Also, Sie wollen schneller scheitern. Sie beeilen sich und finden heraus, was nicht funktioniert, wenn Sie iterieren. So vermeiden Sie auch unnötige Arbeit, indem Sie das tun. Sie reduzieren auch Ihr Risiko, weil Sie kleinere Stücke herstellen. Du arbeitest ein Jahr lang nicht an einem Projekt, nur um herauszufinden, dass niemand es überhaupt wirklich wollte. So finden Sie Ihre besten Funktionen heraus und worauf Sie sich konzentrieren möchten. Konzentrieren Sie sich also auch auf die Details mit jeder Iteration, die Sie erhalten, um mehr und mehr zu polieren und Ihre Designs besser und besser aussehen zu lassen. Also, wenn Sie über flaches Design sprechen, denken Sie vielleicht nur, dass dies eine Möglichkeit ist, aber wenn Sie wirklich anfangen, die kleinen kleinen Details auf Null zu setzen, werden Sie viele Besonderheiten in der Art und Weise bemerken werden Sie viele Besonderheiten in der Art und Weise bemerken, was Sie könnten ein flaches Design in Betracht ziehen. Also, vielleicht gibt es untere Grenzen an einigen der Elemente oder seinen Drei-Pixel-Ecken im Vergleich zu Fünf-Pixel-Ecken. Sie bemerken diese Dinge nicht, wenn Sie nur ein Verbraucher und ein Benutzer von Websites sind. Aber sobald man anfängt, ein Schöpfer und ein Kritiker zu sein, fängt man an, die Details wirklich zu vergrößern. Haben Facebook-Buttons einen Schlagschatten oder nicht? Haben sie eine Grenze oder nicht? Dies sind die Art von Dingen, die Sie beginnen, wirklich zu verfeinern durch Ebenen der Politur Blick auf Skala und Blick auf Kontrast im Laufe der Zeit. Es gibt auch eine große Phase der Bearbeitung, die in Iterationen geht. Also, ich liebe dieses Ellen Lupton Zitat von „Design ist genauso ein Akt der Abstände wie ein Akt der Markierung.“ Also, es geht darum, was Sie entfernen können und was Sie nicht auf den Bildschirm stellen können. Also, Mark Boulton hat einen tollen Artikel über Leerzeichen, wo er über wie Blick auf dieses Layout auf der linken Seite spricht und Anfänger Designer neigen dazu, alles in Boxen zu setzen. Alles muss verankert werden. Wir haben bemerkt, dass wir, wie wenn wir einige dieser Boxen entfernen, leichter in dieses Foto fallen und wir in der Lage sind, Typografie ein wenig kreativer zu verwenden , um einige der Ideen auszudrücken. Grundlegende Leerzeichen ist in Ordnung. Dieser Absatz auf der linken Seite ist eher eine Geschichte über das, was an diesem Inhalt wichtig ist, durch ein wenig Leerraum, ein wenig Betonung, beginnt das Design kommunikativer zu sein. Die andere Sache über Webdesigns ist wieder, dass wir Systeme entwerfen, nicht Poster, keine Seitenlayouts, die gesperrt sind. Also hoffentlich haben Sie Ihre Markenrichtlinien in der ersten Klasse herausgefunden , aber Sie wollen auch Ihre visuellen Assets in eine nutzbare Richtlinie aufpolieren. Also, der Wert dieses Vermögenswertes begann, gehen Sie zurück zu ihm und versuchen, es für andere Menschen nicht nur für sich selbst nutzbar zu machen. Also, hier ist ein Beispiel für Jamie Olivers Markenbuch und natürlich spricht es über seine Persönlichkeit und die Werte. Dies sind die Dinge, die sind, warum Sie diese speziellen Farben oder bestimmte Fotografien wählen. Aber Sie werden auch in die Details zu bekommen, wie groß Ihre Ränder, Schlagzeilen oder Ihre Farben sind . Versuchen Sie also und geben Sie an, was Sie in dieser Entwurfsphase herausgefunden haben , damit jemand anderes es aufnehmen kann und die Persönlichkeit sich nicht völlig verändert , sondern dass Sie in der Lage sind, einige Konsistenz über Projekte hinweg zu haben. Betrachten Sie es also als ein System, dass es keine Elemente des Stücktyps sind, die Sie um die Seite herum platziert haben , aber es ist ein System von Schlagzeilen und ein System von verwandten Texten. Sie können über typografische Verkäufe nachdenken. Tim Brown hat über modulare Verhältnisse geschrieben, aber wir können dazu neigen, mit nur den Standardschriftgrößen aus den Paletten in unserem Software-Tool zu entwerfen . Also, 72 oder 60, 48, 36. Aber es gibt keinen Grund, dass du das tun musst. Sie können sich das goldene Verhältnis ansehen, Sie können sich alle Arten von mathematischen und geometrischen Verhältnissen ansehen, um Beispiele dafür zu erhalten, wie sich Ihre Typgrößen zueinander beziehen können. Also, gehen Sie zurück und schauen Sie sich Ihre Schlagzeilen an und stellen Sie sicher, dass sie alle konsistent sind Dann schauen Sie sich Ihre Beziehungen zwischen Ihren Elementen an und sehen Sie, ob sie harmonisch sind. Der letzte Schritt in unserem Designprozess ist also die Dokumentierung der Dinge , so dass die Ausführung unserer Vision so nah wie möglich sein kann. Also, es wird immer einfacher, dies zu tun. Es gibt Dinge wie Projekt-Parfait für Photoshop , mit denen Sie das CSS direkt von einer PSD exportieren können. Das gleiche mit Skizzen, dass Sie ein beliebiges Element auswählen und die grundlegenden CSS-Attribute für diese Hintergrundfarbe oder diese Schriftgröße erhalten können, so dass Sie nicht alle Dinge selbst durch eine Pipette gehen müssen. Gehen Sie also durch und stellen Sie sicher, dass Ihre Symbole oder Ihre Asset-Seite alle wichtigen Elemente enthält, die Sie benötigen. Wenn Sie alles außer in h3 entworfen haben, gehen Sie einfach vor und fügen Sie dort ein Beispiel h3 hinzu, so dass Sie ein kohäsives System haben und dann werden Sie die Spezifikationen schreiben, wenn Sie sie brauchen, aber wenn Sie gehen, um an einem Ende fortzusetzen, entwickeln Sie die Website, die Sie brauchen, um es zu tun. Sie würden sich mehr mit dem Export von CSS beschäftigen. In der Regel möchten Sie am Anfang Gespräche mit dem Entwickler führen. Also, reden Sie mit Ihrem Entwickler, entschuldigen Sie, schlagen Sie den letzten Satz, bitte. Sie werden Spezifikationen schreiben, wenn sie benötigt werden. Sprechen Sie mit einem Entwickler und sehen Sie, was er will. Manchmal wollen sie nur, dass Sie ihnen PSDs geben oder ihnen eine Quelldatei geben. Also, entweder erzählen Sie ihnen von Sketch und wie es funktioniert, oder sehen Sie, ob sie möchten, dass Sie das ganze Schneiden machen und wir werden darüber auch in der dritten Klasse sprechen. 11. Entdecke Design auf Skillshare: Art und Weise.