Vorstellung Web-Design-Konzept "toptechnologies.de"

Entwurf 2

Entwurf 2 ist auch an das bestehende Design angelehnt, entfernt sich aber etwas weiter als Entwurf 1.

Das Design ist im Gegensatz zu Entwurf streng flächig und zweidimensional angelegt. Dieser Aspekt übernimmt die Rolle der monochromen Erscheinungsbildes aus Entwurf 1. Dafür hat dieser Entwurf eine viel breitere Farbsprache. Trotzdem wirkt er auch durch

  • Ausnutzung der gesamten Fensterbreite
  • leichter und freier durch mehr Weißraum

Das spiegelt moderne Seriosität und eine gleichzeitig Offenheit und damit das hanseatische Grundverständnis von Top Technologies wider.

Folgende Aspekte habe ich mit in den Entwurf einbezogen:

Gestalterische Eckpunkte: 
  • Kompetenz,
  • Stabilität,
  • Klarheit,
  • Offenheit, Freundlichkeit -> aber konsequent (nicht verspielt)
Zielgruppe: 
  • Entscheider aus Geschäftsführung und IT
  • Alter: 30-70 Jahre
Inhaltliche Grund-Aussagen:
  • Klarheit, Aufgeräumtheit
  • Stärke
  • Fundiertheit

Das Farbklima orientiert sich zuerst am Logo und teilt sich zusätzlich auf in:

Primärfarbe:

Primärfarbe blau

#436573

4 Sekundärfarben:

Sekundärfarbe grau-blau

#7292A6

Sekundärfarbe hellblau

#D8E8F2

Sekundärfarbe rot

#A6323B

Sekundärfarbe hellbraun

#B7AB9F

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

Es ist denkbar, für einzelne Sektionen der Seite eine bestimmte Farbe aus diesem Spektrum auszuwählen (z.B. grau-blau für Lösungen, rot für Services...), und so als Farbsystem über die Website zu verteilen.


Menü/Kopfleiste:

Die Kopfleiste beinhaltet das Logo und das Menü-Symbol.

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.

Die Navigation/Das Menü poppt nach Klick auf das Menü-Symbol ganzseitig auf. Dies gewährleistet Ablenkungsfreiheit und Übersichtlichkeit.

Layout:

Das Layout ist - wie im bestehenden System auch - responsive aufgebaut. Das heißt, dass sich die Inhalte je nach Größe des Ausgabegerätes unterschiedlich darstellen und gestapelt bzw. umgebrochen werden. Es empfielt sich, diese Seite auf unterschiedlichen Geräten/Größen zu beurteilen.

Typografie:

Die Basis-Schrift ist durch das hausblau kontrastreicher und lesefreundlicher. Ebenso wurde die Schrift etwas vergrößert.

Als zusätzliche Schriftart zur "Roboto" wurde die "Exo2" gewählt. Diese weist eine enge Verwandschaft zur Logotype "Top Technologies" auf und wird z.B. in Überschriften eingesetzt. Das lockert das Gesamtbild noch einmal auf.

Roboto

für alle Arten von Fließtext

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!?()/&%


EXO2

für Überschriften

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.



  • 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.


  • 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.




  • 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

06
:
23
:
59
:
44
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Titel

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.

Adresse

Rathausquartier 9
25469 Halstenbek

Büro:
+49 (4101) 6019-200

Fax:
+49 (4101) 6019-300

E-Mail:
Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

Büro Hannover

Hildesheimer Straße 8
30169 Hannover

Büro:
+49 (511) 76830-777

Fax:
+49 (511) 76830-778


© 2022 TOP TECHNOLOGIES CONSULTING GmbH