Responsive Gestaltung

Test

TLDR – Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

→ Weiterlesen

Mach mal genau so! Referenzdesign

Wenn das Design abgenommen wurde und nun in die Entwicklung geht gibt es eine Vielzahl an Tools die den Entwicklern hilft das Design auszulesen und technisch um zu setzten. Die gängigsten Tools sind InVision, Zeplin, Figma und Adobe XD. Der Entwickler kann mithilfe dieser Tools die wichtigsten Design Spezifikationen auslesen. Abstände und Grössen von Elementen und Flächen (in px oder %), Farben und Verläufe (in RGB / HEX), Schriftspezifikationen (in PX oder PT).

→ Weiterlesen

WTF? What The Font(scale)

Wie verhalten sich Schrifgrössen auf verschiedenen Device grössen? dazu gibt es verschiedne Methoden die man anwenden kann, die am häufig verwendeten sind «Modular-Scales» und «Fluid Scale».

→ Weiterlesen

Do tools really Matter?

In Designprozessen könnte vieles besser laufen. Gerade im Interaction Design – also wenn es darum geht Produkte oder Prozessschritte erlebbar zu machen, stossen die Design Tools öfters an ihre Grenzen oder die definierten Interaktionen können in der Entwicklung nicht so umgesetzt werden. Wie könnte man diesen Gap aufbrechen und gibt es «das Eine» Designtool?

→ Weiterlesen

Dynamische Masseinheit em

Eine der besten Praktiken für die Typografie im Web ist die Verwendung relativer Einheiten wie em und rem. Relative Grössen werden in Abhängigkeit von anderen Masseinheiten angegeben und passen sich dadurch besser verschiedenen Ausgabemedien und Benutzereinstellungen an. Aber wann ist es sinnvoll em anzuwenden, wann besser rem?

→ Weiterlesen

Die Sezierung responsiver Web-Gestaltung

→ Weiterlesen

Umgang mit Tabellen im Web

Tabellen im Web, schon lange im Einsatz und noch immer eine Knacknuss wenn es darum geht diese Userfreundlich auf allen Endgeräten darzustellen. Das Problem findet sich oftmals in komplexeren Tabellen wieder. Diese beinhalten meist eine grössere Anzahl an Spaltenreihen und Zeilen, die auf grösseren Displays gut lesbar sind, jedoch für Mobilgeräte ungeeignet sind.

→ Weiterlesen

Wann lohnt sich der Einsatz von Viewport Einheiten?

Der Viewport ist der Bereich wo der Browser die Seite rendert. Manchmal möchte man Elemente wie eine Sidebar oder ein Grid am Viewport ausrichten. Dies kann mit den neuen Viewport Units erreicht werden. Aber wo genau liegen Potenzial und Einschränkungen dieser Einheiten?

→ Weiterlesen

Mit Prozent zum flüssigen Design

Im Responsive Design wird nur noch selten mit Pixelwerten gearbeitet. Pixelwerte sind zu starr, um auf veränderte Device- und Browser-Grössen zu reagieren. Elementweiten in Prozent sind deshalb unverzichtbar, allerdings muss der Designer auch Kontrolle aus der Hand geben. Wir beleuchten :bulb: den Umgang mit Prozentwerten, die Vorteile und die Nachteile, im Web in diesem Beitrag.

→ Weiterlesen

Code und Design

UX/UI-Designer und Entwickler kommen oft an den Punkt, an dem jeder am liebsten alles selber in die Hand nehmen würde. Zu grosse Abweichungen in der Umsetzung des Designs, utopische Vorstellungen im Design an die Entwicklung und fehlende Angaben bei gewissen Breakpoints, sind nur ein Bruchteil der Probleme. Müssen Designer in Zukunft mehr ins Frontend und Entwickler sich mehr für Design interessieren? Und hat dieses Problem Einfluss auf die Tools der Zukunft?

→ Weiterlesen

Alles bleibt anders – dynamische Typografie in digitalen Anwendungen

Gerade den Silbentrennungen wird beim Gestalten einer Website häufig keine Aufmerksamkeit geschenkt, da davon ausgegangen wird, dass diese im Web nicht gross definiert werden können. Nachfolgend sollen darum einige Möglichkeiten aufgezeigt werden, wie auch bei digitalen Anwendungen auf die Typografie Einfluss genommen werden kann.

→ Weiterlesen