Vorstellung Web-Design-Konzept "kronsgaard.de"

Entwurf 1

Der Entwurf vereint die Aspekte Klarheit, Frische, Leichtigkeit im Kontext "Urlaub" bzw. "Erholung". Durch die Farbgebung, die Flächigkeit und Schnörkellosigkeit wirkt die Seite schlank und direkt, gleichzeitig aber sympathisch und behaglich.

Folgende Aspekte habe ich mit in den Entwurf einbezogen:

Gestalterische Eckpunkte:

Klarheit, Leichtigkeit und Frische im Kontext "Urlaub/Ferien/Ostsee"
Normalität, Natürlichkeit (nicht extravagant/elitär
/edel)
Vertrauen, Solidität und Stabilität
Offenheit, Freundlichkeit

Zielgruppe:

Einwohner Kronsgaards
Urlauber und Besucher (Neue und Stammgäste)
25 bis 99 Jahre

Inhaltliche Grund-Aussagen:

Klarheit, Aufgeräumtheit
Sympathie
Ordnung
Behaglichkeit

Das Farbklima orientiert sich an den typischen Farben des schleswig-holsteinischen Strandes:

Primärfarbe:

Ostsee-blau

3 Sekundärfarben:

Himmelblau

Hellgrün

Hellblau

Akzentfarbe:

Schwedenrot

Mit diesen Farben in Kombination mit der Hintergrundfarbe wird ein Look erzeugt, der das Gesamtbild stabilisiert und für Stärke und Klarheit sorgt.

Menü/Kopfleiste:

Die Kopfleiste beinhaltet das Kronsgaarder Wappen und das Menü.

Die Leiste fährt nach oben aus dem Bild heraus. Bei leichtem Scrollen nach oben fährt es wieder ins Bild. So nutzen wir den Raum optimal und machen gleichzeitig die Navigation von überall aus verfügbar.

Typografie:

Die Basis-Schrift ist durch das dunkle Blau kontrastreich und lesefreundlich.

Als zusätzliche Schriftart zur "Roboto" wurde die "Roboto Condensed" gewählt. Diese wird z.B. in Überschriften eingesetzt.

Montserrat

für alle Arten von Fließtext, Einleitungstexte, Teaser usw.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!?()/&%

Lobster

für Überschriften und Akzentuierte Texte

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!?()/&%

Im Folgenden zeige ich den Einsatz vieler HTML- und Gestaltungs-Elemente:

Artikel Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Written by Super User on 12 April 2012. Posted in Blog

a element
abbr element
code element
~~del element~~
dfn element
Link Muted

em element
ins element
mark element
q inside a q
strong element
Link Reset

Text Muted
Text Primary
Text Success
Text Warning
Text Danger
Text Meta

standard
Success
Warning
Danger
1

<div class="myclass">...<div>

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

Someone famous in Source Titel

5 Comments

Author

12 days ago

Reply

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Hero Überschrift

standard

Lorem ipsum dolor sit amet, consectetur sadipscing.

Primary

Lorem ipsum dolor sit amet, consectetur sadipscing.

Secondary

Lorem ipsum dolor sit amet, consectetur sadipscing.

Hover

Lorem ipsum dolor sit amet, consectetur sadipscing.

standard

Primary

Success

Warning

Danger

Table Überschrift	Table Überschrift	Table Überschrift
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

Primary Überschrift

H1 Überschrift

H2 Überschrift

H3 Überschrift

H4 Überschrift

H5 Überschrift

H6 Überschrift

Überschrift divider

Überschrift bullet

Überschrift line

standard Lorem ipsum dolor sit amet, consectetur.

Primary Lorem ipsum dolor sit amet, consectetur.

45%

List Element 1
List Element 2
List Element 3

List Element 1
List Element 2
List Element 3

List Element 1
List Element 2
List Element 3

Description lists: A description text
Description lists: A description text

Element 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Element 2
Element 3