Präsentation Design Trends im Web 2015 vom 27.10.2014, chrisign gmbh, Weinfelden. Teil 02 - Wie gestaltet man eine Webseite Präsentiert von Michael Mäder.

1. WEBDESIGN TRENDS2015
www.chrisign.ch
Wie gestaltet man eine Webseite

2. 00 Intro
chrisign gmbh
2001 gegründet in Weinfelden von Christoph Lanter, setzt unser 12-köpfiges Team erfolgreich Massstäbe mit Weblösungen für lokale und nationale Unternehmen, Verbände und Privatpersonen.
Besonderes Gewicht legen wir auf einfache und praxisnahe Bedienung unserer
Programme und Dienstleistungen.
Vom angesagten Webdesign bis zu den aktuellen Social Media-Anwendungen
bieten wir Ihnen die passende und effiziente Lösung, damit Sie mehr Umsatz
generieren.
Unser Know-how ist auf dem neuesten Stand. Einfach und effektiv, sodass die
Arbeit mit unseren Anwendungen Spass macht!
www.chrisign.ch
Dies ist ein Vortrag von Michael Mäder, Lead UX/UI-Design bei chrisign gmbh

3. 01 Inhalt
00 Intro
01 Inhalt
02 Standardstruktur
03 Wireframes
04 960 Grid System
05 Responsive Design
06 Icons
07 Bedienelemente
08 Fonts
09 Herzlichen Dank für Ihre Aufmerksamkeit

4. 02 Standardstruktur
Startseite
Detailseite und
Kontaktseite
Newsübersicht und
Newsartikel

5. 02 Standardstruktur
Bsp. Framework Twitter Bootstrap
http://getbootstrap.com/examples/carousel/
Header
Content 01 (Slider)
Content 02
Content 03
Content 04
Footer
In Photoshop in Gruppen einteilen, das erleichtert das Erstellen von Folgeseiten, die auf Basis der ersten Seite erstellt werden müssen.
In der Regel erstellen wir:
1) Startseite
2) Inhaltsseite/Detailseite
3) Newsübersichtsseite (Blog)
4) Einzelne Newsseite (Blogartikel)
5) Kontaktseite (Formular)

6. 03 Wireframes (Funktionsprototypen)
Prinzipiell eine gute Sache, zuerst die Struktur und die Funktionsabläufe festzulegen, bevor mit dem Design begonnen wird.
Bei kleineren Projekten und Kunden aber nicht praktikabel, da der zusätzliche Aufwand in der Regel nicht verstanden wird. Bei mittleren und grossen Projekten unumgänglich. In der App-Entwicklung absolute Voraussetzung. 2014 Anzahl Mobile Zugriffe = Anzahl Desktop Zugriffe
Mobile-First: Zuerst für Mobile gestalten, dann für Desktop. Für kleinere Projekte noch nicht praktikabel.

7. 04 960 Grid System
Rastersystem 960 px / 12er / 16er-Raster
zum Erstellen von Webseiten
http://960.gs/
Vorzugsweise 12er Raster verwenden, da durch 2 und 3 teilbar,
16er Raster nicht durch 3 teilbar. Die meisten Frameworks (Bootstrap, Foundation) arbeiten mit 12er und 16er, Skeleton bspw. aber nicht mit 12er

8. 05 Responsive Design
Bsp. Framework Twitter Bootstrap
http://getbootstrap.com/examples/carousel/
Dieselbe Seite ist auf allen Geräten darstellbar, passt sich der Bildschirmgrösse an, auch die
Navigation passt sich dem Gerät an.
Der Inhalt kollabiert nach System, von links nach rechts, von oben nach unten.
Navigation
Desktop
Navigation
Mobile
Hamburgermenu

9. 06 Icons
Bsp. fontawesome
http://fortawesome.github.io/Font-Awesome/
http://fortawesome.github.io/Font-Awesome/icons/
Bibliothek mit Icons, die als Font in die
Webseite eingebunden werden (Vektoren!)
Schnellere Ladezeiten, Retina-tauglich, sehen auch in der Vergrösserung gut aus.
Auch hier der Nachteil des Gleichmachereffektes
Google hat ebenfalls eine frei verfügbare Icon-Sammlung

10. 07 Bedienelemente (Buttons, Formulare, Boxen)
Bsp. bootflat UI
http://bootflat.github.io/
Bibliothek mit User Interface Elementen,
die immer wieder verwendet werden
Wie bei Basisschriften, auf die auch bei neuen Projekten immer wieder zurückgegriffen wird. Nicht versuchen, immer wieder das Rad neu zu erfinden.
Nachteil: Gleichmachereffekt, es kann mit der Zeit sein, dass die Gestaltungen immer
ähnlich aussehen.

11. 07 Bedienelemente (Buttons, Formulare, Boxen) für iPhone/iPad
Bsp. teehanlax
http://www.teehanlax.com/tools/
Bibliothek mit User Interface Elementen für iPad, iPhone iOS8
Wie bei Basisschriften, auf die auch bei neuen Projekten immer wieder zurückgegriffen wird. Nicht versuchen, immer wieder das Rad neu zu erfinden.
Mit jedem neuen Betriebssystem ist auch eine neue Bibliothek notwendig.

12. 08 Fonts
Bsp. Google Fonts
http://www.google.com/fonts/
Google Fonts
Können in die Webseite eingebunden werden, man ist nicht mehr auf Arial, Times New Roman, Verdana, Courier und Georgia angewiesen.
Lizenzfrei, Open-Source. Immer mehr Google-Fonts sind qualitativ sehr hochwertig, auf den Bildschirm optimiert.
Falls immer möglich auf Lizenz-Schriften verzichten (Adobe Typekit, Fontshop, Hoefler), da die Lizenzen für das Web zu wenig transparent sind!

13. HERZLICHEN DANKFÜR IHRE AUFMERKSAMKEIT
www.chrisign.ch
chrisign gmbh
web management
Schmidstrasse 9
CH-8570 Weinfelden
Wie gestaltet man eine Webseite