Web Frameworks

Workshop - Front-End Design

Agenda

  • Design/Front-end Workflow
  • Grids
  • Sass/Scss
  • Yeoman
  • UI Frameworks
  • Frameworks

Was ist euer Workflow bisher?

?

Designer sollten auch

!

Coden

Developer sollten auch

Designen

Mein Workflow

Anforderungen

Inspiration

Wireframes

Elemente ausarbeiten

Designsheet

Umsetzten

Aa Bb Cc

Aa Bb Cc Dd

Inspiration

Elemente ausarbeiten

Aa Bb Cc

Aa Bb Cc Dd

Webfont über @font-face

Aa Bb Cc

Aa Bb Cc Dd

@font-face {   
font-family: 'MyWebFont';   
    src: url('webfont.eot'); /* IE9 Compat Modes */   
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
         url('webfont.woff') format('woff'), /* Modern Browsers */       
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */        
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } 

IE Bug

src: local('☺') 

Iconfont vs. SVG

  • Text
  • Größe über font-size
  • Über Text positionierbar
  • Schlechte Semantik 
  • eigene Schrift
  • ab IE 6
  • Vektor
  • einzelne Elemente
  • einfache Positionierung
  • <svg> Tag
  • ab IE 9

Aa Bb Cc

Aa Bb Cc Dd

Designsheet

  • Zusammenführen der Elemente
  • Anhand der Wireframes
  • Alle UI Elemente

Umsetzung

  1. Alle Screens mit Sketch oder Photoshop
     
  2. Wichigsten Screens mit Sketch oder Photoshop
     
  3. In HTML und CSS anhand der Wireframes und des Designsheets

Aufgabe #1

Anforderungen: 

  • Mobile Web-Applikation für Task Management
  • Zielgruppe: 15-30 Jahre, computerversiert
  • Hauptsächlich Android Nutzer, soll aber auf allen Geräten gut funktionieren
  • Hauptfarbe: Rot
  • Farbe die auf keinen Fall vorkommen soll: Blau
  • Eindruck: cool, modern, jung, hipp 

Erstelle ein Designsheet anhand der Anforderungen. Es sollte zumindest Vorkommen: Farben, Typography, 1 Bild, Icons, 3 UI Elemente