WEBDESIGN TRENDS2015 
www.chrisign.ch 
Wie gestaltet man eine Webseite
00 Intro 
chrisign gmbh 
2001 gegründet in Weinfelden von Christoph Lanter, setzt unser 12-köpfiges Team erfolgreich Masss...
01 Inhalt 
00 Intro 
01 Inhalt 
02 Standardstruktur 
03 Wireframes 
04 960 Grid System 
05 Responsive Design 
06 Icons 
07...
02 Standardstruktur 
Startseite 
Detailseite und 
Kontaktseite 
Newsübersicht und 
Newsartikel
02 Standardstruktur 
Bsp. Framework Twitter Bootstrap 
http://getbootstrap.com/examples/carousel/ 
Header 
Content 01 (Sli...
03 Wireframes (Funktionsprototypen) 
Prinzipiell eine gute Sache, zuerst die Struktur und die Funktionsabläufe festzulegen...
04 960 Grid System 
Rastersystem 960 px / 12er / 16er-Raster 
zum Erstellen von Webseiten 
http://960.gs/ 
Vorzugsweise 12...
05 Responsive Design 
Bsp. Framework Twitter Bootstrap 
http://getbootstrap.com/examples/carousel/ 
Dieselbe Seite ist auf...
06 Icons 
Bsp. fontawesome 
http://fortawesome.github.io/Font-Awesome/ 
http://fortawesome.github.io/Font-Awesome/icons/ 
...
07 Bedienelemente (Buttons, Formulare, Boxen) 
Bsp. bootflat UI 
http://bootflat.github.io/ 
Bibliothek mit User Interface...
07 Bedienelemente (Buttons, Formulare, Boxen) für iPhone/iPad 
Bsp. teehanlax 
http://www.teehanlax.com/tools/ 
Bibliothek...
08 Fonts 
Bsp. Google Fonts 
http://www.google.com/fonts/ 
Google Fonts 
Können in die Webseite eingebunden werden, man is...
HERZLICHEN DANKFÜR IHRE AUFMERKSAMKEIT 
www.chrisign.ch 
chrisign gmbh 
web management 
Schmidstrasse 9 
CH-8570 Weinfelde...
Nächste SlideShare
Wird geladen in …5
×

Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite

350 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
350
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite

  1. 1. WEBDESIGN TRENDS2015 www.chrisign.ch Wie gestaltet man eine Webseite
  2. 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. 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. 4. 02 Standardstruktur Startseite Detailseite und Kontaktseite Newsübersicht und Newsartikel
  5. 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. 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. 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. 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. 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. 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. 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. 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. 13. HERZLICHEN DANKFÜR IHRE AUFMERKSAMKEIT www.chrisign.ch chrisign gmbh web management Schmidstrasse 9 CH-8570 Weinfelden Wie gestaltet man eine Webseite

×