Websitedesign - Tipps

[War-10-ck]

Ahoi,
ich habe von einem meiner Vereine vor einiger Zeit die Pflege der Website übernommen. Content hab ich auch ganz fein eingepflegt und ein wenig angepasst. Allerdings wirkt das Layout noch sehr neutral und sachlich.

Ich habe zum Beispiel eine Seite wo ich ein paar Zeilen geschrieben habe um Interessierte anzusprechen. Das ist halt nun ein Text, mehr nicht. Schön wärs wenn man das noch irgendwie aufpeppen könnte. Bilder zu besorgen die zum Inhalt passen wäre schon möglich die Frage ist nur wie ich die anständig auf die Site bekomme?

Wenn ich einen Text hab und in irgendeine Ecke ein viereckiges Bild knalle wirkt das total bescheiden und amateurhaft. Wie macht man sowas im Webdesign? Dass sich Bilder direkt in die Seite eingliedern und nicht einfach nur neben dem Text stehen?
Gibts da allgemeine Tipps wie man bei sowas vorgehen kann?

Die Seite würde ich ungern öffentlich posten da zu viele private Informationen drauf stehen. Hoffe, dass mir dennoch irgendwie geholfen werden kann. Ev. könnt ich die Seite auch vereinzelt per PN bekannt geben.

 

[drfuture]

Hm eigentlich kann man da durchaus ein wenig nach Layout / Aufbau einer normalen Zeitschrift gehen... bzw. sich die ein oder anderes Seite anschauen
Ich meine ist sehr schwer zu beschreiben oder zu sagen wie man vorgehen sollte...
Wenn du Technische Hilfe für die Umsetzung einer Idee brauchst - haben wir ja das Webmaster-Forum, per CSS ist da durchaus recht viel möglich....

Ich versuche mit einem Layout immer die *seele* der Firma / Verein ... zum Ausdruck zu bringen - z.B. passt zu einem Künstler vielleicht weniger eine sehr kühle, sachliche Seite - außer der Künstler zeichnet sich durch minimalismus aus ;P - genauso wie ein Pizza-Laden selten eine rosa-kindliche Webseite hat

 

[War-10-ck]

Ich denke mit CSS kann ich schon lange genug rumspielen bis es hinhaut. Zumal die Site über ein CMS gemanaged wird, dass schon viel abnimmt.
Ich hätte eigentlich auch Lust der Seite irgendwie einen gesammt einheitlichen Touch zu geben, dass alles einheitlich und einladend wirkt. Modern und freundlich. Nur blöd wenn man so gar nicht kreativ künstlerisch bewandert ist.

Ums mal etwas aufn Punkt zu bringen: Es geht um meinen Schützenverein. Wobei die Frage aber eher auf das allgemeine Wie abziehlt. Speziell die Sache mit den Bildern. Ich hab keine Ahnung wie ich Bilder einbinden kann ohne dass sie sich stark vom Rest abheben und dahingeklatscht wirken.

 

[keksautomat]

Ich verstehe gar nicht wirklich, was du meinst. Kannst mit Paint mal was malen, was du meinst?

 

[Fhynn]

Welches CMS wird den verwendet?

Davon ab ... in der Regel hast du ja immer einen mehr oder weniger identischen Grundaufbau, je nach Spaltenanzahl.
2 Spaltiges Layout, 3 Spaltig etc. jeweils mit Header oben und Footer unten. Klar gibt es Abwandlungen, aber gehen wir mal vom Standard aus:

Sprich 2-spaltiges Layout. Ist jetzt fix als Tabelle gemacht (bloß nicht nachmachen!) ...

Füllen wir das mal fix mit irgendwelchem Inhaltsquatsch:

So mit dem Bild mittendrin ist natürlich ... eher suboptimal. CSS sei dank kann man das aber aus eleganter lösen, in dem der Text das Bild z.B. umfließt:

Halt float:left/right, die Bilder ... aufhübschen mit Rahmen (border), Außenabstand (margin), Schattenwurf (nicht im Muster drin... box-shadow dann halt) - gibt viele Möglichkeiten um Bilder im oder um den Text zu positionieren. Eine andere Alternative wäre es mit Imageslidern zu arbeiten, mal als Beispiel http://phondrason.de/ , das Grundprinzip ist da ganz gut ersichtlich... und dadrunter/dadrüber halt den Text. Klick aufs Bild = Lightbox.

Musst dir halt überlegen, was dich am ehesten anspricht. Und ... teste das bitte lokal aus! Nicht auf dem Webserver

Apropro: Ins Webtechnik Forum passt das hier eher. Mal gemeldet

lg,

 

[godlike]

NUn ja, ein wenig Gefühl für Design, Proportionen, Schriften usw. sollte natürlich vorhanden sein.
Es schadet auch nie sich etwas über andere Seiten zu informieren bzw. inspirieren zu lassen. Hierzu kann ich dir mal

http://www.csszengarden.com/
http://w3csites.com/ scheint down zu sein
http://www.thebestdesigns.com/
http://www.awwwards.com/awards-of-the-day

ans Herz legen

Schicke mir doch mal deine Seite per PN

Gruß godlike

 

[War-10-ck]

Guten Morgen,
ich hab mal allen Beteiligten den Link als PN geschickt. Verwendet wird concrete5 als CMS.

PS: Sorry fürs falsche Forum, ich hab mir anhand der Forenbeschreibung gedacht, dass es beim Webmaster ausschließlich um die Technik, weniger um Designfragen geht.

 

[godlike]

Nun ja, sooo schlecht ist es ja mal gar nicht

Was mir auf die Schnelle aufgefallen ist:

• Bei "Wichtiges" hast du eine andere Schriftfarbe, außerdem eine Liste. Zerstört imho den Seitenaufbau bzw. Textfluss
• Das mit dem Textfluss ist auch so eine Sache. Da sollte halt auch etwas Text drauf So sind es ja nur 3-4 Sätze... schwierig damit zu arbeiten (außer man hat coole Bilder & Grafiken)
• Rechts das Menü bzw. der Inhalt wirkt irgendwie unformatiert. Achte mal auf Zeilenabstand und Wortabstand
• Das Menü ist gar nicht richtig formatiert bzw. füllt nicht die ganze Breite aus
• Das Banner-Bild ist imho nichtssagend und, umschreiben wir es mal so, unvorteilhaft bearbeitet
• Auf Unterseiten tauschen wieder andere Schriftfarben auf
• Alles in Allem solltest du unbedingt Abstände optimieren (Zeilenabstand im Allgemeinen), Listen evtl. einrücken, Überschriften gescheit formatieren
• Finde eine Serifenschrift jetzt auch nicht unbedingt so prall, wieso benutzt du die Schriftart? Ist ja kein Verlag wo es um Print geht...
• Wieso ist bei "Kontakt" ein Rahmen um die Tabelle?

und und und.

Ich würde das ganze noch mal überarbeiten, Abstände, Schriftfarben. Außerdem sollte das Layout auf allen Seiten gleich sein und nicht wechseln. Neuen Banner erstellen? Bessere Bilder rein?

Und natürlich andere Designs ansehen

So mal zu Anfang

 

[War-10-ck]

Daaaanke! Das hilft schonmal viel weiter! Als ich die Seite übernommen hab, hab ich erstmal angefangen alle Rechtschreibfehler zu suchen... Zum eigentlichen Design komm ich eben jetzt erst. Gerade das Banner-Bild gefällt mir auch nicht. Da bin ich noch am Überlegen für ein gutes Motiv.
Backups fehlen im übrigen auch noch. Ich bin gerade mal erst dabei die Daten vom FTP irgendwo her zu bekommen...

Hast du einen Vorschlag welche Schriftart man nehmen könnte? Das mit den Zeilenabständen schau ich mir auch nochmal an. Da wird dann irgendwo hoffentlich global was zu konfigurieren sein, dammit das alles einheitlich ausschaut.

Nochmal vielen Dank!

 

[accC]

Vielleicht noch ein allgemeiner Hinweis: Die Struktur und der logische Aufbau der Seite, sollte immer gleich sein.
Normalerweise sollte eine, vielleicht 2 Schriftarten (etwa eine fix für Überschriften, für den Rest eine andere) ausreichen. In seltenen Fällen können es dann auch mal mehr sein, etwa dann wenn "Quellcode" angezeigt werden soll.
Es sollte in jedem Fall eine einheitliche Farbgebung/Formatierung für Hintergründe, gleiche/ähnliche Elemente eingehalten werden. Links sollten immer unmittelbar als solche erkennbar und gleich formatiert sein, genauso mit Überschriften, Listen, Tabellen, etc.

Ohne die Seite zu kennen ist es schwer konkrete Dinge zu nennen, die du beachten solltest. Dein Anliegen die Seite getrennt von deinem Account zu halten, kann ich jedoch verstehen.

 

[War-10-ck]

@accC: Willst du auch den Link zur Site?

Nochmal ne spezielle Frage, die leider etwas vom Thema weg führt. Ich möchte auf der Seite eine Liste aller Kreisvereine erstellen. Mit deren Logo und einem Link zur jeweiligen Website des anderen Vereins.
Wenn ich deren Logo auf meiner Seite habe muss ich vorher um Erlaubnis frage, oder? Sollte man sich sowas schriftlich geben lassen, oder langt da ne Email?

 

[godlike]

Ja, ich würde mir da von den Vereinen eine Erlaubnis holen. Per E-Mail sollte bei den Vereinen imho reichen...

 

[keksautomat]

Hier mal meine Punkte (evtl. schon doppelt von anderen genannt), die mir auffallen + evtl. "Verbesserung"

-- Allgemein
- Menu schließt nicht mit Bild ab. Hier könnte man dem Menu die gleiche width geben wie dem Bild. (in deinem Fall zB per JS, damit es dynamisch ist: 980px / Anzahl der Menupunkte. Ergibt in deinem Beispiel 140px breite für jedes Element (#menu a). In jQuery sind das wenige Zeilen (nachfragen, wenn du Hilfe brauchst))
- dein Menubild ist gestreckt in der Höhe: unschön. Entweder kleiner oder passende Größe. Aber nicht größer Mogeln.
- <li> im Menu haben keine Klasse. Kein valides HTML. Die meisten Browser ignorieren das aber. (Alle?)
- Das Menu könnte man mit einem kleinen Hover "pimpen". Hier mal ein Beispiel:
[src=css]#menu li a:hover {
background-color: red;
}[/src]
das geht natürlich deutlich schöner, aber so hat man wenigstens "eine Idee" wo im Menu man sich gerade befindet. Das geht dann z.B auch auf Unterseiten. (Stichwort: aktivem Link per CMS z.B die Klasse "active" geben und im CSS darauf anspringen, ähnlich wie oben, nur ohne Hover.)

-- Unterseite "Termine"
- Hier könnte man die Termine gestaffelt nach Monat anzeigen lassen. Stichwort ist hier das JS Plugin "isotope". Sieh dir einfach mal die Beispielseite an: http://isotope.metafizzy.co/demos/sorting.html

-- Unterseite "Über uns"
- Galerien! Ist das erste was mir hier einfällt. Niemand mag tausend Jahre nach unten Scrollen für alle Fotos.
- Ajax. Ajax wäre hier super um die Einzelseiten nach und nach einladen zu lassen, ohne die Seite komplett neuladen zu müssen. Ist aber nur in Gimmick.
- eMail Adresse: niemals als Klartext. Hier kann ein Crawler super leicht alle Adressen abfischen und euch mit Spam versorgen. Das CMS müsste sowas direkt unterbinden können. Ansonsten: JS hilft.

-- Unterseite "Wettkämpfe"
- Isotope

-- Unterseite "Preise"
- Ich mag keine Tabellen.
- Sieht langweilig aus, könnte man bestimmt verschönern, das ganze als Bild hinzaubern und einbinden.

-- Unterseite "Interessierte"
- Externe Seiten sollten in einem neuen Tab geöffnet werden "<a href='#' target='_blank'>foobar</a>"


Ich hoffe hier (^) ist nicht zu viel preisgegeben.

Gruß

//edit
Linksammlung von Menuideen.
http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html

 

[War-10-ck]

Auch dir nochmal vielen Dank für die wertvollen Tipps!
Sollte es mich mal auf ein Usertreffen verschlagen bekommt jeder der hier geholfen hat ein Bier ausgegeben!

Sollte es technisch noch an was mangeln meld ich mich nochmal.

 

[accC]

@accC: Willst du auch den Link zur Site?

Wenn du ihn mir geben möchtest, klar.

Nochmal ne spezielle Frage, die leider etwas vom Thema weg führt. Ich möchte auf der Seite eine Liste aller Kreisvereine erstellen. Mit deren Logo und einem Link zur jeweiligen Website des anderen Vereins.
Wenn ich deren Logo auf meiner Seite habe muss ich vorher um Erlaubnis frage, oder? Sollte man sich sowas schriftlich geben lassen, oder langt da ne Email?

Ohje, das kommt darauf an, wie du diese Liste aufbereitest. Wenn du dich redaktionell mit dem Verein auseinandersetzt, etwa im Stil eines Wikipediaartikels, dann darfst du das Logo gewöhnlich auch so verwenden. Handelt es sich lediglich um eine Aufhübschung, so musst du durchaus um Erlaubnis fragen.
ABER: Sicher bin ich mir da nicht. Außer dem zeitlichen Aspekt kann es nur Vorteile haben, wenn du um Erlaubnis fragst.
Eventuell könnten dir Ghandy oder Annika da weiterhelfen, die sollten sich ja mit diesem Berichterstattung, Zitatrecht blablabla auskennen.

 

[Methusalem]

fiverr.com - Dort findest du massenweise talentierte Webdesigner die ihre DIenste zum Komplettpreis von 5 Dollar anbieten

 

[Timo Beil]

- Externe Seiten sollten in einem neuen Tab geöffnet werden "<a href='#' target='_blank'>foobar</a>"

Mir persönlich geht es auf die Nerven, wenn mir eine Website vorschreibt, dass ich den Link im neuen Tab / Fenster öffnen möchte. Mit der mittleren Maustaste oder dem Browserstandard entscheide ich das lieber selber und ich weiß, dass das viele genauso sehen.

 

[Methusalem]

@Timo Beil:

User wollen "geführt" werden, sie wissen es nurnoch nicht. ...

 

[keksautomat]

@Timo du selbst wirst dann keinen Unterschied erkennen. Mittlere Maustaste für neuen Tab bleibt für dich bestehen.

 

[Timo Beil]

Ich werde schon einen Unterschied erkennen, wenn ich nämlich mal nicht die mittlere Maustaste verwende. Aber das ist OT.