Web Frameworks

Workshop - Front-End Design

Agenda

• Design/Front-end Workflow
  • Webypography
  • SVGs vs. Iconfonts
  • Farben/Bilderwelten
  • responsive Webdesign
• Grids
• Sass/Scss
• Yeoman
• UI Frameworks
• Frameworks

Was ist euer Workflow bisher?

?

!

Mein Workflow

Inspiration

• http://www.materialup.com/
• http://www.awwwards.com/
• https://dribbble.com/
• https://www.behance.net/
• http://www.pttrns.com/
• (...)

Elemente ausarbeiten

• Farben festlegen
  • colourlovers
  • color.adobe
  • materialpalette

Aa Bb Cc

Aa Bb Cc Dd

• Bilderwelten
  • freie Imagelibraries
  • vorhandene
  • selbst machen
  • machen lassen

• Icons (SVG o. Iconfont)
  • selbst machen
  • Iconfinder
  • flaticon

• Typography
  • Webservices
  • Lizenzen (!)
  • fontpair.co

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