Vorstellung Web-Design-Konzept "kronsgaard.de"

Entwurf 2

Das Designkonzept vereint Aspekte von Klarheit, Frische und Leichtigkeit, die in Bezug auf "Urlaub" und "Erholung" besonders relevant sind. Die Farbpalette, die Verwendung von großen Flächen und viel Weißraum schaffen eine minimalistisches Look & Feel und verleihen der Website eine einladende und direkte Wirkung.

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 (nicht spießig)
Behaglichkeit

Um das Gefühl von Himmel, Meer und Frische auf der Website zu vermitteln, empfielt sich eine Farbpalette, die aus kühlen, blauen und grünen Tönen besteht. Das Farbklima dieses Entwurfes leitet sich ab von

den Kronsgaarder Farben
Meer und Raps
Sonne und Meer

und ist allgemein als symathisch verankert. Die weiße Hintergrund-Farbe lässt die Seite offen erscheinen.

2 Primärfarben:

Ostsee-blau

Raps-gelb

3 Sekundärfarben:

Ostsee-blau hell

Reseda-grün

Raps-gelb hell

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.

Roboto

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

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!?()/&%

Roboto slab

für Überschriften und Akzentuierte Texte

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!?()/&%

Roboto condensed

für Einleitungstexte und Ergänzungen

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