3 UI Design Trends im Check – Teil 3: Glassmorphism

Im dritten Teil unserer Artikelreihe „3 UI Design Trends im Check“ sehen wir uns den Trend „Glassmorphism“ etwas genauer an und bauen den iOS14 Homescreen damit nach. Falls du hier neu bist, rate ich dir zuerst Teil 1 und Teil 2 zu lesen.

Vor allem der Teil „Artboards & Grids“ ist wichtig. Der ist im ersten Teil detailliert erklärt – dort findest du auch unser Designfile als Figma Datei – damit hast du für Teil 3 eine gute Basis.

Wie das fertige Ergebnis aussehen soll siehst du hier:

Glassmorphism Mockup
Glassmorphism – iOS14 Homescreen Mockup

Das brauchst du dazu:

  • Ein Webdesign Tool wie Figma, Sketch oder Adobe XD. In unserem Fall verwenden wir Figma. Das hat nicht nur eine Free Version, die für unsere Zwecken absolut ausreicht, sondern auch die unserer Meinung nach beste UX.
  • Ein passendes Icon Set. Wir verwenden Heroicons von Steve Schoger. (Free)
  • Ein iPhoneX Mockup im passenden Stil. Wir verwenden Outlined Tech Mockups. ($10,80)
  • Eine passende Font. Wir verwenden Apple’s Systemfont San Francisco. (Free)
  • Farben und Hintergrundbilder. Wir verwenden Sculpt. ($15,00)

Glassmorphism? Noch nie gehört…

„Glassmorphism ist ein einheitlicher Name für die sogenannte Milchglas-Ästhetik. Der Effekt basiert auf Hintergrundunschärfe mit Transparenz und verwendet gestapelte Ebenen, um die Tiefe und den Kontext der Oberfläche zu zeigen.“

Quelle

Glassmorphism Design Beispiele

Eine super Ressource für Inspiration in diesem Bereich ist Dribble. Weiters gibt es auf glassmorphism.com ein kleines Tool, mit dem du den Effekt über ein einfaches Interface selbst ausprobieren und sogar direkt das CSS kopieren kannst 🙂

Step 1 – Artboards & Grids

Im ersten Schritt legen wir ein Artboard (Frame) und die Grids an. Wir verwenden die Größe eines iPhone 11 Pro / X von 375×812 px. Eines der neuen Features von iOS 14 sind Widgets. Um auch die genau platzieren zu können legen wir 3 Grids an. Die Details dazu kannst du folgenden Screenshots entnehmen.

Grid 1

Zum Vergrößern des Bildes einfach draufklicken, or on mobile: pinch to zoom.

Grid 2

Zum Vergrößern des Bildes einfach draufklicken, or on mobile: pinch to zoom.

Grid 3

Zum Vergrößern des Bildes einfach draufklicken, or on mobile: pinch to zoom.

Du kannst aber auch das Figma File unseres ersten Artikels zum Thema „Neumorphism“ verwenden. Da sind die Grids bereits angelegt 🙂 ↓

Step 2 – Farben und Hintergrundbild

Die einzige „Farbe“ die wir benötigen ist Weiß. That’s it. Als Background Image verwenden wir in diesem Fall gekauftes Bildmaterial. Falls du das nicht möchtest, kannst du alternativ auch unseren Background Gradient verwenden. Das ist jetzt nicht ganz optimal – für unser mini Tutorial aber ausreichend. ↓

#FFFFFF

BACKGROUND

Step 3 – iOS App Icons & Widgets

So dann legen wir mal los. Im nächsten Schritt bauen wir unser Glassmorphism Element. Das wird uns als Basis für die Widgets sowie alle App Icons dienen.


Wie das fertige Element aussehen soll, siehst du hier:

Unser erstes Glassmorphism Element.

Hier siehst du auch gleich, warum wir uns dazu entschieden haben eine Background Grafik zu kaufen. Damit der Effekt deutlich sichtbar wird, reicht ein einfacher Gradient nicht aus. Für unser Element starten wir wie immer mit einem Quarat von 155×155 px. Diesem Quadrat geben wir abgerundete Ecken von 22 px und duplizieren es 1 x.

Gradient Fill

Linear Gradient Fill in #FFFFFF von 60 % zu 5 % Transparenz. Ebenentransparenz von 50 %. Blend mode: Overlay.

Shadows & Blur

Effekte: Background Blur von 20. Inner Shadow: Color: #FFFFFF, Transparenz: 20 % X: 0, Y: 0, Blur: 200, Spread: 0.

Stroke

Inner Stroke von einem Pixel. Blend mode: Overlay.

Damit wäre unser erstes Element auch schon ready. Spiel dich ruhig selbst mit den unterschiedlichen Transparenzen bist du, ein für dich zufriedenstellendes Ergebnis beisammen hast 🙂 Auf zum ersten Widget!

Music Widget

Wie das fertige Music Widget aussehen soll siehst du hier:

Das Music-Widget.
  • Das Album Cover hat Abmessungen von 82×82 px, abgerundete Ecken von 15 px, ein Padding links & oben von 16 px und einen inner stroke von 1 px.
  • Der Songtitel ist SF Pro Text Semibold in 15 px.
  • Der Interpret SF Text Regular in 15 px.
  • Das Icon hat in diesem Fall 28×28 px und ein Padding rechts und oben von erneut 16 px.

Weather Widget

Beim Weather Widget machen wir’s uns leicht. Hierfür nehmen wir uns einfach unser Glassmorphism Element her und befüllen es mit Infos. Die kannst du ganz einfach aus dem Design Files unseres ersten Artikels kopieren ↓

Das Weather-Widget.

Ein App-Icon im Detail

Für unser App-Icon nehmen wir uns erneut unser fertige Glassmorphism Element her und skalieren es von 155×155 px auf 60×60 px. Das sollte dann so ausssehen.

Unser App-Element.

Als Nächstes suchen wir uns ein passendes Icon aus unserem Icon Set aus. Das skalieren wir auf 32×32 px und platzieren es mittig in unserem App-Element. Jetzt fehlt nur noch die „Beschriftung“. SF Pro Medium in 12 px Schriftgröße mit einem Abstand von 5 px zum Element – und das erste App-Icon ist fertig. Du kannst dieses Element beliebig oft duplizieren und mit Icons aus dem Set und einer Beschriftung versehen. 

Step 4 – Befüllung des Grids

Jetzt haben wir alles beisammen was wir zur Befüllung des Grids benötigen. Wie du dich noch erinnerst haben wir 3 Grids angelegt. Einen blauen 4 Spalten Grid – der ist für die Platzierung der Standard-App-Elemente. Die zwei roten Grids links und rechts sind für die Platzierung der Widgets. Die sind geringfügig größer – das dient der optischen Harmonie der Elemente zueinander.

Apps und Widgets im Grid.

Step 5 – Search & Bottom Bar

Was jetzt noch fehlt, ist die Search und die Bottom Navigation Bar. Die Search Bar ist gleich erledigt. Dafür skalieren wir unser Glassmorphism Element auf 329×50 px. Ein Search Icon aus unserem Set sowie „Search“ in Apples Systemfont San Francisco in 18 px machen das Element komplett ↓

Die Search Bar.

Für die Bottom Navigation Bar skalieren wir erneut unser Basis Glassmorphism Element. Diesmal auf 355×94 px. Weiters verringern wir die Transparenz ein wenig. Von diesem Element subtrahieren wir im nächsten Schritt eine 4er Gruppe unseres App Icons. Wie das aussehen soll siehst du hier:

Die Bottom Bar.

Jetzt musst du nur noch unser neues Element mit Icons aus dem Set versehen. Done 🙂

Step 6 – Homescreen & Mock-Up

Im letzten Schritt setzen wir alles zusammen und bauen ein nettes Mockup. Das passiert in unserem Fall in 2 Steps.

Step 6.1.

Zuerst nehmen wir unser iPhone Mockup von Outlined Tech Mockups zur Hand. Dann exportieren wir unseren fertigen Homescreen als JPG. Als Nächstes einfach dem Element des Mockups mit dem Notch (Ausparung) einen Image Fill mit unserem exportierten Homescreen JPG geben. Damit ist der erste Schritt komplett. Sieht doch schon ganz nett aus, oder?

Schritt 1 zum Mockup.

Step 6.2.

Im 2ten Schritt maskieren wir unser Sculpt Image von YouWorkForThem mit unserem iPhone Mockup und geben dem Resultat den Effekt Layer Blur von 20. Zu guter Letzt legen wir das Resultat aus Step 1 darüber und gruppieren beide Elemente. Done!

Schritt 2 zum Mockup.

Fazit

Damit sind wir am Ende unserer Artikelreihe „3 UI Design Trends im Check“ angelangt. Das sind nochmals die 3 Designrichtungen die wir uns angesehen haben:

Alle 3 Designrichtungen im Direktvergleich

3 Designrichtungen im Direktvergleich.

Ganz schön interessant was Design so bewirken kann oder? Obwohl es sich in allen 3 Fällen um exakt dieselben Elemente handelt, ist der optische Eindruck ein ganz anderer. Ob ich ein Interface in einem dieser Looks tagtäglich benutzen würde sei dahingestellt – eines ist jedoch klar: seitdem iOS 14 (auch wenn mit Workaround) custom Icons erlaubt, boomt das Icon Business. Wenn du selbst mal so ein Icon Set auf deinem Homescreen testen willst, kann ich dir www.ui8.net empfehlen. Dort findest du mittlerweile eine ganze Menge an custom Icons. Oder: du baust dir einfach dein ganz eigenes Set 🙂

Wenn dir dieses Tutorial geholfen hat und wenn du Fragen oder Kritik hast, schreibe diese doch einfach in die Kommentare!

Das könnte Sie auch interessieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert