Elemente

Ihre Medien im bestem Licht

Ihr Webauftritt bleibt ohne entsprechende Medien nur schwerlich in Erinnerung. Damit Ihre Website-Nutzer auch im Nachgang Ihre Botschaften mit dem zielsetzenden Akzent verbinden, ist eine gepflegte Mediathek unabdingbar. Jedes Photo, jedes Video, jeder visuelle Fingerabdruck ist auf Ihre Website abgestimmt und wird mit entsprechenden Lizenzen und Nutzungsrechten versehen - damit diese auch in Zukunft ein Unikat bleiben.


  • banner
  • buro1
  • buro2
  • buro3
  • buro4
  • logo
  • logo1
  • logo3
  • overlay
  • pic01
  • pic02
  • pic03
  • pic04
  • pic05
  • pic06
  • pic07
  • pic08
  • pic09
  • jquery carousel slider
  • pic11
banner1 buro12 buro23 buro34 buro45 logo6 logo17 logo38 overlay9 pic0110 pic0211 pic0312 pic0413 pic0514 pic0615 pic0716 pic0817 pic0918 pic1019 pic1120
webdesign-krebs.de @ Mathias Krebs

Style-Beispiele: Icons und Buttons

Icons

Buttons

  • Gedeckt
  • Umrahmt

Bilder

Passig und Responsive


Platzierungs-Beispiel: Links & Rechts

Bildliche Anordnungen spielen bei der Wahrnehmung eine übergeordnete Rolle. Entscheiden Sie selbst, welcher Schnitt am ehesten von Ihnen wahrgenommen wird: Das Bild linksseitig und zu Beginn des Textes.....

.... oder dies, welches Rechts unten platziert wurde. Unisono markieren Bilder auch inhaltlich den Anfang von Erwartungen, was im folgenden Text in Erfahrung gebracht werden kann.


Modell-Beispiel: In der Box

Hinweistexte, Hervorhebung oder Erläuterungen von beispielsweise Produkten: Geordnet und in sich abgegrenzt übermitteln Texte einer Website in Boxen Ordnung, Struktur und Überblick.


Code-Beispiel: Krebs in Pixeln

box-shadow: 0 0 0 0.5em #3D3D3D, 0 0.5em 0 0.5em #3D3D3D, -1.25em 0.75em 0 0.25em #3D3D3D, 1.25em 0.75em 0 0.25em #3D3D3D, -1.5em -1.5em 0 0 #3D3D3D, 1.5em -1.5em 0 0 #3D3D3D, -1em -1em 0 0 #3D3D3D, 1em -1em 0 0 #3D3D3D, -1.5em -0.5em 0 0 #3D3D3D, -1em -0.5em 0 0 #3D3D3D, 1em -0.5em 0 0 #3D3D3D, 1.5em -0.5em 0 0 #3D3D3D, -2em 0 0 0 #3D3D3D, -1.5em 0 0 0 #3D3D3D, 1.5em 0 0 0 #3D3D3D, 2em 0 0 0 #3D3D3D, -2.5em 0.5em 0 0 #3D3D3D, -2em 0.5em 0 0 #3D3D3D, 2em 0.5em 0 0 #3D3D3D, 2.5em 0.5em 0 0 #3D3D3D, -2.5em 1em 0 0 #3D3D3D, 2.5em 1em 0 0 #3D3D3D, -2.5em 1.5em 0 0 #3D3D3D, -1.5em 1.5em 0 0 #3D3D3D, 1.5em 1.5em 0 0 #3D3D3D, 2.5em 1.5em 0 0 #3D3D3D, -1em 2em 0 0 #3D3D3D, -0.5em 2em 0 0 #3D3D3D, 0.5em 2em 0 0 #3D3D3D, 1em 2em 0 0 #3D3D3D; 
  background: #FFB400; 
  width: 0.5em; 
  height: 0.5em; 
  overflow: hidden; 
  margin: auto; 

Design-Beispiel: Formular für den Kontakt