Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Lektion 2 – Wie entwickle ich (m)ein Layout?
#1
Am besten macht ihr das erst mal auf einem DIN A4 Blatt Papier und einem Bleistift oder wahlweise in einem Grafikprogramm, wo ihr die einzelnen Elemente hin und her schieben könnt. Oder in einem Testprojekt in NOF geht es natürlich auch. Aber bitte nicht unter eurem endgültigen und späteren offiziellen Projektnamen…

Eine Webseite hat 3 Hauptbereiche, die zu strukturieren sind:

1. Der  Header, der Kopfbereich der Seite. Hier werden zumeist ein Logo, der Firmenname, Firmenslogan und die Hauptnavigation untergebracht. In NOF wird das im Masterrahmen geschehen, der für alle Seiten des Projektes gilt. Bei Bedarf können aber auch mehrere Masterrahmen angelegt werden.

2. Die Seitenmitte (das Layout) ist für euren Inhalt da. Hier beschreibt ihr, was ihr anzubieten habt und zeigt das evtl. auch mit Bildern und Grafiken…

3. Der Footer bildet den unteren Seitenabschluss. Da die Inhalte möglichst auf allen Seiten verfügbar sein sollen (wie der Header), wird der Footer  ebenfalls im Masterrahmen angelegt. Hier können Kontaktdaten, weniger relevante Links wie Impressum, weiterführende Links und Zusammenfassungen von Inhalten untergebracht werden.

Bei der Layoutgestaltung ist weniger mehr. Immer! Denn das Layout sollte sich in Zurückhaltung üben und nicht vom wichtigen Inhalt ablenken.

Für eine übersichtliche, ruhige  Struktur sollte ein einmal gewähltes Layout auf allen Seiten wieder zu finden sein. Alle wichtigen Elemente wie die Navigation und besondere Hinweisflächen sollten immer an derselben Stelle stehen, damit der Besucher schnell auf jeder Seite die wichtigen Elemente wiederfindet.

Für eine nicht responsive Seite sollte die Seitenbreite mit 990px Breite angelegt werden (so ist sie auch auf Smartphones nicht gut, aber noch einigermaßen nutzbar). Sämtliche Inhalte der Seite (in Header, Layout und Footer) dürfen nicht breiter angelegt sein.

Grundsätzlich kann man sich für ein einspaltiges oder mehrspaltiges Layout entscheiden. Es lassen sich auch 2 Layout-Varianten gut miteinander kombinieren. Mehr sollten es aber nicht sein.

Bei 990px Breite würde ich allerdings nicht mehr als 2 Spalten wählen, deren Breitenverhältnis zueinander entweder 1.1, 1.2,  2:3 oder 1:3 haben sollten. Diese Proportionen bieten sich auch für einen Großteil von eingesetzten Grafiken und Fotos an. Übereinstimmungen in diesem Bereich machen die Seite übersichtlich und bringen Ruhe ins Layout, auch wenn es durch farbige Fotos mal lebhafter wird. Die Fotos selbst innerhalb eines Layouts sollten immer dieselbe Größe haben, oft auch dieselbe Ausrichtung (das hängt auch vom Einzelfall ab), auf jeden Fall ein ordentliches allgemein gültiges Seitenverhältnis. Das Seitenverhältnis ist (wie die proportionale Verteilung der Spaltenbreiten) wichtig für eine harmonische, ausgewogene Optik. Das Seitenverhältnis 2:3 kommt dem „goldenen Schnitt“ (der in der Natur vorkommt und daher als besonders harmonisch wahrgenommen wird) sehr nahe und biete einen guten Anhaltspunkt für die Gestaltung. Das passt auch gut zu unserer 990px Seitenbreite. Nur in einzelnen Ausnahmefällen kann man diese einmal festgelegten Proportionen dann auch bewusst durchbrechen, um mal etwas Leben und Aufregung in die Bude zu kriegen. Denn manchmal kann harmonisch auch langweilig werden. Da darf es dann mal auch eine kleine Überraschung geben  Wink .

Außerdem ist es wichtig, darauf zu achten, dass die (meisten) Elemente gemeinsame Ausrichtungslinien (Fluchten) haben - sowohl in vertikaler als auch in horizontaler Richtung
Wichtig sind auch immer genügend Abstände zu den Rändern der Seite und zu den Elementen selbst, damit nicht alles so gedrängt aussieht. Der Inhalt und das Layout brauchen Luft zum Atmen…

Basis aller Überlegungen war die zum Startzeitpunkt der Zusammenarbeit mit Arno publizierten Schulwebseite, deren Startseite im Screenshot unten zu sehen ist.


.jpg  Screenshot-Alte-Startseite.jpg (Größe: 393,1 KB / Downloads: 153)


Feste Designfarben und ein durchgängiges CD gibt es in der Schule nicht. Auch Flyer und Briefpapier gaben keinen Hinweis auf Farben oder andere Stilelemente. Aus rechtlichen Gründen darf ich die mir zur Verfügung gestellten Unterlagen hier nicht posten. Ein gedecktes blau in unterschiedlichen Tönungen war vorhanden und eine „Hand-Skizze“ des Schulgebäudes.

Daraus haben wir nun ein Gestaltungskonzept entwickelt, dass im zweiten Screenshot zu sehen ist. Nach diesem Entwurf gehen wir jetzt an die Realisierung der Webseite Projekt „Grundschule“


.jpg  Arno-Startseite.jpg (Größe: 636,02 KB / Downloads: 179)



.jpg  Arno-Unterseite.jpg (Größe: 698,33 KB / Downloads: 151)


Nachdem wir uns die konkreten Gedanken zum Inhalt und zum Layout gemacht haben, kommen wir
zur Lektion 3: Gedanken zur Suchmaschinen - Optimierung
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Lektion 3 - Gedanken zur Suchmaschinen - Optimierung Doris Rehhausen 0 1.843 21.04.2016, 09:14
Letzter Beitrag: Doris Rehhausen



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!