Typografie

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

Das perfekte Typo Artboard

Für Designer ist oft nicht klar, wie man dem Entwickler am Besten vermittelt was es alles für Schrifthierarchien gibt. Zudem muss ihm der Designer eine Struktxur der Schrifteigenschaften mitgeben und wie sich diese verhaltet.

→ 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

Interface zu einem Küchenofen

Fast alle Bevölkerungsschichten nutzen regelmässig den heimischen Backofen. Doch sobald es über die Temperatur- und Modus-Wahl hinaus geht, wird die Bedienung des eigentlich simplen Geräts (Hitze erzeugen) zur Herausforderung…

→ Weiterlesen

Smide – wayfinding für E-Bikes

In der dritten Durchführung der Case Studies wurde das Angebot der in Zürich ansässige shared economy Unternehmung Smide untersucht und deren App konzeptionell um eine Anwendung für eine Smartwatch erweitert.

→ Weiterlesen

Texteditor – Redesign Etherpad

During the case study in the summer of 2018, an intensive working day was spent working out drafts on how the existing Etherpad software could be extended with additional functions and how the user interface could be extended.

→ Weiterlesen

Texteditor – Redesign Etherpad

Bei der Case Study im Sommer 2018 wurden in einem intensiven Arbeitstag Entwürfe erarbeitet, wie die bestehende Software Etherpad um weitere Funktionen ergänzt werden kann und wie das User-Interface zu erweitern wäre.

→ Weiterlesen

Fahrplanauskunft – Redesign Touch Panel

In einem eintägigen Workshop wurde ein bestehendes Touch Panel für die Fahrplanauskunft am Zürich Hauptbahnhof überarbeitet und die bestehende Mängel von vier Teams analysiert und neue Lösungen vorgeschlagen.

→ Weiterlesen