Auflösung und Bilder im UI-Design verstehen

1. Einführung: Hallo Ich bin Christine, eine UX-UI-Designerin. Und heute werden wir uns ansehen, wie Bilder im UI-Design funktionieren. Um wirklich die besten Ergebnisse online zu erzielen, ist es wichtig, zuerst die Bildschirmauflösung zu verstehen. Diese Klasse besteht also aus zwei Teilen. Zunächst werden wir die Bildschirmauflösung entmystifizieren und wirklich verstehen, was sie bedeutet, warum wir Punkte und keine Pixel verwenden und auf welchen Bildschirmgrößen wir unser Design eigentlich aufbauen Das Verständnis der Bildschirmauflösungen wird alle Aspekte Ihres Augendesigns von großem Vorteil sein, insbesondere wenn es darum geht, Ihr Design an die Entwicklung zu übergeben Sobald wir die Grundlagen verstanden haben , schauen wir uns Bilder an, welche Art von Bildern es gibt, wo man sie findet und wie man mit ihnen umgeht, damit Ihr Design glänzt Dies ist ein Kurs durch Lernen. 2. Auflösung: Punkte, Pixel und Bildschirmauflösung: Lassen Sie uns über Pixelpunkte und Bildschirmauflösung sprechen , um zu verstehen, in welcher Größe Ihre Designs eingerichtet werden müssen. Lassen Sie uns zunächst verstehen , was Pixel sind. Nun, Pixel sind im Grunde die kleinen Punkte, aus denen ein Bild besteht. Sie sind das kleinste Element in einem Bild. Beachten Sie, dass nur Bilder mit Pixeln signiert werden. Typografie und Hintergründe oder Schaltflächen sind Vektoren. Das heißt, sie bestehen aus mathematischen Gleichungen. diesem Grund können sie auf jede Größe vergrößert und verkleinert werden, und die Bildschirmauflösung stört sie wirklich überhaupt nicht. Pixel sind jedoch kein wirklich zuverlässiges Maß, da sie von der Bildschirmauflösung abhängen, der sogenannten DPI oder auch PPI genannt, Pixel pro Zoll. Damit wird gemessen, wie viele Pixel in 1 Zoll enthalten sind. Je höher der DPI-Wert eines Bildschirms ist, desto mehr Pixel befinden sich in diesem Zoll und desto schärfer ist das Bild Wie Sie sehen können, hätte eine Messung beispielsweise für vier Pixel bei unterschiedlichen Bildschirmauflösungen eine sehr unterschiedliche physikalische Größe Die DPI wird vom Gerät eines Benutzers bestimmt, sodass Sie das nicht im Voraus wissen und auch nicht beeinflussen können. Was wir also brauchen, ist eine Art Raummessung, unabhängig von der Bildschirmauflösung, aber immer noch im Verhältnis zu Pixeln, und hier kommen Punkte ins Spiel. Aber fangen wir ganz am Anfang an. 3. Auflösung: Warum wir uns bei 1x gestalten: In alten Zeiten entsprach ein Punkt Bm Pixeln und das Leben war ziemlich einfach. Auf vielen Bildschirmen ist dies heute tatsächlich immer noch der Fall. Bildschirmauflösung wurde jedoch zuerst von Apple mit dem Retina-Display verbessert Plötzlich würden Sie innerhalb desselben physischen Raums vier Pixel anstelle von einem platzieren Ich habe den DPI-Wert verdoppelt und dabei die gleiche physische Bildschirmgröße beibehalten. Dies ging sogar noch weiter mit Displays wie der Super Retina im iPhone 11 Pro, die den DPI-Wert verdreifachten Das bedeutet, dass Pixel keine zuverlässige Messmethode mehr waren , da sie auf verschiedenen Bildschirmen sehr unterschiedliche Dinge bedeuten würden auf verschiedenen Bildschirmen sehr unterschiedliche Dinge diesem Grund haben wir eingeführt, ein Maß als physische Größe Ihres Designs zu physische Größe verwenden, unabhängig von der Bildschirmauflösung. Übrigens verwende ich hier nur iPhones als Beispiel, aber das wäre für das Desktop-Design genauso Nun, die häufigste Frage Sie wahrscheinlich auch haben, ist, welche Größe ich verwende, um mein Design einzurichten Die größtmögliche? Nein. Wir und ich kann das nicht genug betonen, entwerfen immer, und ich kann das nicht genug betonen, immer beim sogenannten X. Das klingt vielleicht etwas verwirrend, aber ich zeige Ihnen, warum wir das tun. Nehmen wir als Beispiel das iPhone Four Retina. Also können wir für dieses Korn, genau wie für jedes andere, die Pixelmaße und wir können die Punktmaße ermitteln Denken Sie daran, dass bei zwei x ein Punkt in Pixeln so aussieht. Um unsere Designs zu erstellen, verwenden wir also immer die Punktmaße und nicht die Pixelmaße. Auf diese Weise richten wir unser Design automatisch so ein, dass ein Punkt einem Pixel entspricht, und wir entwerfen mit dem sogenannten X. In jeder UI-Software wie Figma oder Sketch haben Sie voreingestellte Zeichenflächen, die Sie verwenden können, und Sie werden feststellen, dass sie alle auf einem X eingerichtet sind , sodass Sie sie verwenden 4. Auflösung: Die besten Ergebnisse für alle Auflösungen: Wie garantiert also das Entwerfen mit einem X immer noch eine gute Qualität auf allen Bildschirmauflösungen Das ist also unser Design, das auf einem X aufgebaut ist, wo ein Punkt einem Pixel entspricht Elemente wie Typografie-Schaltflächen, vektorbasierte Symbole und Illustrationen passen sich also vektorbasierte Symbole und Illustrationen passen sich Sie sind sogenannte Vektorelemente, und das bedeutet, dass sie aus mathematischen Gleichungen bestehen Im Hintergrund skalieren sie einfach auf jede benötigte Größe. Der Bildschirm verdoppelt das Pixel im Grunde genommen von selbst hinter den Kulissen, und Sie müssen nichts tun? Das gilt übrigens auch für den Abstand. Nehmen wir an, Sie haben einen Abstand von 40 Pixeln auf Ihrem X , der automatisch auf dieselbe physische Größe auf Ihrem Retina-Display skaliert dieselbe physische Größe auf Ihrem Retina-Display Also absolut nichts, worüber man sich Sorgen machen müsste. Sie werden wahrscheinlich viele Leute über einen Abstand von 40 Pixeln oder eine Schrift mit 16 Pixeln sprechen hören Leute über einen Abstand von 40 Pixeln oder eine Schrift mit 16 Pixeln sprechen , wie ich es gerade getan habe. Sie meinen tatsächlich Punkte , denn bei einem X ist es dasselbe. Lassen Sie sich darüber also nicht verwirren. Denken Sie jedoch daran, dass Bilder ausschließlich aus Pixeln bestehen, sodass sie nicht automatisch skaliert werden. den meisten Fällen werden sie in einer Datei auf dem Server gespeichert und dann buchstäblich vom Code abgerufen, wenn wir ihn benötigen. Der Code kann also nur das abrufen , was Sie bereitstellen. Wenn Sie also nur ein Bild mit einem x für eine Auflösung von zwei x bereitstellen , sieht es auf einem Retina-Display sehr verschwommen Sie stellen diese Bilder also in einer Auflösung von eins, zwei x und drei x Der Code ist so eingerichtet, dass er die Bildschirmauflösung erkennen und dann einfach das richtige Bild abrufen kann die Bildschirmauflösung erkennen und . diesem Grund haben Sie auch dieses kleine Suffix von zwei x usw. in Ihrem Bildnamen, um die richtige Größe für die richtige Bildschirmauflösung zu ermitteln die richtige Größe für die richtige Bildschirmauflösung Deshalb ist es auch so wichtig, eine geeignete UI-Software wie Figma oder Sketch zu verwenden , mit der Sie das tun können , und nicht etwas wie Photoshop Versteh mich nicht falsch. Ich mag Photoshop wirklich, aber es ist für die Fotobearbeitung gemacht und nicht für die Einrichtung, die ich entwerfe weil Sie Ihre Bilder danach nicht mehr in einer größeren Größe exportieren können . Mit der richtigen Designsoftware ist das also super einfach. Hier bin ich in Figma, ich wähle nur mein Bild und füge dann auf der rechten Seite den Port hinzu Und Sie werden sehen, dass es bei einem x beginnt. Ich werde ein JPEG wählen, da es keine Transparenz hat, also ist JPC völlig in Ordnung Und wenn Sie dann Plus hinzufügen, können Sie weitere Exporte hinzufügen Alles, was ich tue, werde ich auch auf KPC umstellen, und Sie können sehen, dass automatisch ein Zwei-x-Wert für die zweifache Auflösung und drei x vier und eine noch höhere Auflösung hinzugefügt wurde Zwei-x-Wert für die zweifache Auflösung und drei x vier und eine noch höhere Das eine X hat normalerweise kein Suffix, also kannst du es einfach so belassen Sie können dann einfach hier auf Exportieren klicken und die Bilder werden in die von Ihnen gewählte Datei exportiert Das Tolle an Figma ist dass Sie sie nicht einmal alle selbst exportieren müssen , denn wenn Sie Ihrem Entwicklungsteam in Figma Zugriff gewähren , können sie diese Bilder einfach auswählen und sie jeder gewünschten Größe exportieren 5. Zusammenfassung der Auflösungen: Lassen Sie uns zusammenfassen. Wir verwenden Point. Punkt ist ein Maß für den Raum, unabhängig von der Bildschirmauflösung. Und wir entwerfen immer bei einem X. Hier entspricht ein Punkt einem Pixel Der Abstand zwischen Typografie und alle vektorbasierten Elemente passen sich standardmäßig an eine höhere Pixeldichte an, sodass Sie sich darüber keine Gedanken machen müssen Bilder müssen exportiert oder Ihrem Entwicklungsteam für den Export für höhere Auflösungen zur Verfügung gestellt für den Export für höhere Ihrem Entwicklungsteam für den Export für höhere Auflösungen zur 6. Bilder online: SVG und PNG: In diesem Video werden wir über Bilder im UI-Design sprechen und darüber , wie man sie platziert und handhabt. Wenn Sie online mit Bildern arbeiten, können Sie drei verschiedene Dateiformate erhalten. Das erste Format wäre SVG. SVGs sind für Vektordateien, es wären also so etwas wie Logos oder Icons Bilder können nicht als SVGs gespeichert werden , da sie nicht vektorbasiert, sondern pixelbasiert Bei Bildern wäre JPEG immer die erste Wahl. Sofern Ihr Bild nicht transparent ist, würden Sie es als PNG speichern. Sie würden auch ein PNG verwenden, wenn Sie etwas wie einen Kreis oder etwas speichern möchten , das im Grunde kein rechteckiges Bild ist , da dann der Hintergrund transparent sein müsste. Was die Dateigröße angeht, würde es auch in der hier angegebenen Reihenfolge funktionieren. SVG ist immer das kleinste. Wenn du deine Bilder als SVG speichern kannst, das funktioniert aber nur, wenn das auf Vektoren basiert, wie zum Beispiel Icons. Manchmal siehst du ein SVG und dasselbe Bild wie ein PNG. Das liegt daran, dass das PNG hiermit ein Ausweichbild sein wird. Wenn Sie es mit Standardbildern und -fotos zu tun haben, JPG Ihre erste Wahl Das wird immer kleiner sein als ein PNG. Daher wählen Sie nur dann ein PNG aus, wenn Sie die Transparenz benötigen. 7. Bilder online: Wo du Bilder findest: Lassen Sie mich Ihnen einige Stellen zeigen, an denen Sie Bilder finden können , die Sie in Ihrem UI-Design verwenden können. Es ist wichtig zu wissen , dass Sie die Rechte an jedem Bild besitzen müssen , das Sie in Ihrem Design verwenden, oder Sie müssen nach sogenannten lizenzfreien Bildern suchen Sie können nicht einfach irgendein Bild im Internet auswählen und es einfach auf Ihre Website stellen Es ist sehr wichtig , dass Sie dies respektieren , da dies rechtliche Konsequenzen haben kann. Meine absolute Lieblingsseite für Bilder ist Splash. Splash bietet nicht nur eine große Auswahl an Fotos, sondern ist auch lizenzfrei Das bedeutet, dass Sie all diese Bilder kostenlos verwenden können. In Splash können Sie entweder einfach nach einem bestimmten Bild suchen, nach dem Sie suchen, oder Sie haben diese schönen Kategorien hier oben. Lassen Sie uns zum Beispiel in den Bereich Gesundheit und Wellness einsteigen, und dann werden Sie wirklich, wirklich tolle Dinge finden. Außerdem, wenn du nach großen Hintergrundbildern suchst, ist das toll, wenn du zum Beispiel in den Bereich Natur gehst, um zu sehen, dass du wirklich, wirklich tolle Bilder zur Auswahl hast. Unsplash bietet auch Plug-ins für Sketch und für Figma. Es ist also wirklich toll, darin zu arbeiten, dann kannst du einfach die gesamte Unsplash-Datenbank direkt durchsuchen und die Bilder dort ablegen Andernfalls klicken Sie einfach hier, Sie laden Ihr Bild herunter und fügen es dann einfach in Ihr Design Pixabay und Pixels sind zwei weitere Seiten, die genau wie Unsplash funktionieren Auch wenn sie lizenzfrei sind, gibt es immer noch einige Regeln. Achten Sie immer darauf, dass Sie die Lizenz überprüfen , die Ihnen genau sagt, was erlaubt ist und welche Dinge Sie beachten müssen, wenn Sie diese Bilder verwenden möchten Manchmal suchst du vielleicht nach etwas Spezifischerem oder Exklusiverem Dann empfehle ich, sich ein Shutterstock- oder iStock-Foto anzusehen Shutterstock- oder iStock-Foto Sie haben eine wirklich tolle Auswahl einem wirklich fairen Preis Die meisten Seiten, die ich Ihnen gerade gezeigt habe, enthalten übrigens auch Illustrations - und Videodateien. Wenn Sie nach Illustrationen suchen, möchte ich Ihnen eine Seite namens Blush empfehlen , die ich absolut liebe Das ist von Pablo Stanley und es ist absolut fantastisch. Es wird mit einem Figma - und einem Sketch-Plug-In geliefert, sodass Sie das ganz einfach direkt in Ihren Designdateien verwenden können einfach direkt in Ihren Designdateien Und was Blush macht, ist, dass es eine Auswahl an verschiedenen Illustratoren hat, und dann können Sie die Illustrationen mischen und anpassen Das heißt zum Beispiel, springen Sie hier rein. Dann können Sie sehen, dass es verschiedene Elemente gibt, und später in Ihrer Designdatei können Sie sie einfach zusammenfügen, Sie können die Farben ändern und Sie können wirklich, wirklich tolle Illustrationen erstellen. 8. Bilder online: Bilder und Aspect platzieren: Schauen wir uns an, wie Bilder in Ihrem Design platziert werden sollten. Sie können Ihre Bilder entweder innerhalb des Grids oder als Bild in voller Breite außerhalb des Rasters platzieren des Grids oder als Bild in voller Breite außerhalb des Rasters Sie können so viele Zeilen des Rasters verbinden, wie Sie möchten. Hier füge ich zum Beispiel zwei zusammen, achte dann aber darauf, dass du es nicht auf die Dachrinne legst, wenn du das nächste Bild oder irgendeinen Text oder irgendein anderes Element platzierst Wann immer es Sinn macht, empfehle ich, ein Seitenverhältnis für Ihre Bilder zu verwenden Das Seitenverhältnis ist das Verhältnis zwischen der Breite und Höhe eines Bildes. müssen Sie nicht, aber ich verwende gerne ein Seitenverhältnis von 16 zu neun. Und das ist ziemlich üblich. Diese Präsentationsfolie ist beispielsweise 16 bis neun. Sie können auch andere Seitenverhältnisse verwenden, z. B. eins zu eins, vier quadratisch oder fünf zu vier oder vier zu drei, sind weit verbreitet. Seitenverhältnisse sind sehr praktisch, da Sie auf diese Weise wissen, dass alle Ihre Bilder immer gut zusammenpassen. Zum Beispiel haben Sie vielleicht damit begonnen, Ihr Bild in einem Zwei-Raster zu platzieren, und möchten es später mit einigen anderen Bildern an einem Vierer-Raster Bei einem Seitenverhältnis ist das kein Problem , da alle Bilder immer proportional dieselbe Höhe haben , wenn Sie wie immer daran, dass dies etwas ist, das Ihnen helfen sollte Manchmal ist ein Seitenverhältnis also möglicherweise nicht die richtige Wahl. Zum Beispiel hier auf der rechten Seite mein Hintergrundbild. Wenn ich das zwischen 16 und 9 machen würde, es höchstwahrscheinlich den ganzen Bildschirm ausfüllen , und das will ich nicht. Also mache ich die einfach ein bisschen kleiner. Sie können das Seitenverhältnis entweder einfach selbst berechnen oder einen Seitenverhältnisrechner verwenden. ich hier zum Beispiel Wenn ich hier zum Beispiel diesen Wert auf 1.500 ändern würde, würde es automatisch die Höhe für mich berechnen. Ich kann dann natürlich auf volle Pixel aufrunden. Dann kannst du hier auch zwischen verschiedenen Seitenverhältnissen wählen und kommst direkt zur neuen Pixelgröße. 9. Bilder online: Text auf Hintergrundbilder: Lassen Sie uns nun ein wenig über das Kombinieren von Hintergrundbildern mit Text sprechen . Dies ist etwas, das häufig im sogenannten Helden oder in der Phase verwendet wird. Dies ist das erste große Ding, das Sie beim Öffnen einer Seite sehen. Sie richten das also in Ihrem Design und es sieht perfekt aus. Sie finden diesen freien, schönen Ort, an dem Ihr Text platziert werden kann, und Ihr Kunde liebt ihn absolut, und dann setzt das echte Leben ein. Das UI-Design ist nicht statisch. Es lebt im Browser. Bei dieser Größe kommst du vielleicht sogar noch damit durch, aber du kannst sehen, dass der Button umso mehr in der Orange verschwindet, je kleiner das Bild wird . Und wenn Sie das ändern würden, um ein Bild mit mehr Volumen zu erhalten, dann können Sie sich vorstellen, dass es nicht auf allen Geräten funktionieren wird Was können wir also tun? Eine Lösung wäre, wenn Sie ein relativ leeres Bild haben, einfach so, Ihr Bild an einer Seite zu fixieren. Hier repariere ich es zum Beispiel auf der linken Seite. Mein Exemplar bleibt also da, wo ich es hingestellt habe, aber mein Stuhl wird ein bisschen abgeschnitten, was in diesem Fall okay ist. Für das mobile Design würden Sie einfach ein komplett separates Bild bereitstellen. In meinem Fall schneide ich den Stuhl einfach ab und verwende ihn so, aber Sie können auch ein völlig anderes Bild für den Hintergrund verwenden . Jetzt hast du vielleicht auch den Fall, dass du sehr viele Bilder hast und sie trotzdem verwenden möchtest, wie in diesem Fall. Was Sie an dieser Stelle tun können, ist ein Overlay hinzuzufügen, und Sie können hier mit der Transparenz spielen Wie Sie sehen, macht das Overlay nicht nur den Text lesbarer, sondern verleiht dem Design auch mehr von Ihrer Markenfarbe Und es verleiht ihm einfach ein viel raffinierteres Aussehen. Übrigens können Sie dieses Overlay auch über das gesamte Bild legen und die Deckkraft einfach ein wenig verringern Das ergibt auch ein wirklich schönes Ergebnis. 10. Bilder online: Umgang mit kleinen Bildern: Manchmal erhalten Sie möglicherweise Bilder, die Sie als Hero-Bild auf Ihrer Seite verwenden möchten, aber sie sind einfach nicht groß genug und würden pixelig aussehen Sie können die Größe überprüfen, indem Sie das Bild entweder einfach in Ihre UI-Designsoftware kopieren Dort werden Ihnen dann die Abmessungen in Pixeln angezeigt Oder Sie können Collect auf ein beliebiges Bild auf Ihrem Computer schreiben und es gibt Ihnen die Informationen. Hier weiß ich zum Beispiel, dass ich ein JPEG habe. Das ist die Größe des Bildes, und das sind die Abmessungen in Pixeln, nach denen ich suche. Mein Bild hier ist also 1.200 Pixel breit. Das heißt, wenn ich auf meiner Leinwand auf einem X entwerfe, werde ich es mit einer Breite von etwa 600 Pixeln verwenden Das garantiert mir, dass ich es später in doppelter Größe von 1.200 für Retina exportieren kann doppelter Größe von 1.200 und trotzdem gute Dies ist jedoch definitiv nicht groß genug für ein Hintergrundbild Schauen wir uns also an, was wir tun können, um damit zu spielen wenn wir es trotzdem in unserem Helden verwenden wollen. Bilder müssen nicht immer in voller Größe sein, um in einer Helden-Sektion zu glänzen. Wie du hier sehen kannst, habe ich einfach etwas Farbe hinzugefügt, um es ein wenig aufzupeppen. Sie werden feststellen, dass Sie immer noch wirklich gute Ergebnisse erzielen können, wenn Sie damit herumspielen . Auch wenn die meisten Ihrer Inhalte wirklich im Raster sitzen und sich verhalten sollten , können Sie mit einem Heldenbild eine Ausnahme machen, sodass Sie es zum Beispiel aus dem Raster nehmen oder ihm eine wirklich nette Animation geben können. Das Tolle an der Arbeit mit kleineren Bildern im Heldenbereich ist auch, dass sie auf Mobilgeräten sehr gut verkleinert werden können. 11. Bilder Zusammenfassung: Lassen Sie uns zusammenfassen, was wir über Bilder gelernt haben. Verwenden Sie JPEG für Bilder, wann immer dies online möglich ist. Transparenz zu erzielen, z. B. bei einem transparenten Hintergrund, speichern Sie Bilder als P und G. Versuchen Sie, Ihre Bilder wann immer möglich mit einem Seitenverhältnis zu speichern . Berücksichtigen Sie bei der Auswahl großer Hintergrundbilder die Größe und das Verhalten bei der Größenänderung . Verwenden Sie bei stark frequentierten Bildern ein Overlay. Sie sollten auch immer einen vollständigen Text für Bilder angeben. Das ist sehr wichtig für die Barrierefreiheit. 12. Vielen Dank: Gut gemacht für den Abschluss dieses Kurses. Fühlen Sie sich frei, uns bei moon learning dot io zu kontaktieren, wir sind immer daran interessiert, Ihr Feedback zu hören. Sie würden auch als großen Gefallen tun, wenn Sie nur eine Minute nehmen und eine Bewertung hier hinterlassen könnten . Wenn Sie diesen Kurs genossen haben und auch sicherstellen, dass Sie einen Blick auf unsere zusätzlichen Kurse. Bei Moody Learning Punkt. Wir decken alle Themen ab, von den Grundlagen des UX UI Designs bis hin zu Figma und sogar einige Code-Grundlagen. Besuchen Sie unsere Website bei Moody Learning dot IO, wo Sie sich auch für unseren Newsletter anmelden können.