Websitengestaltung: (blöde) Fragen von Anfängerin...

torro1972

torro1972

Aktives Mitglied
Thread Starter
Dabei seit
12.07.2005
Beiträge
457
Reaktionspunkte
13
Hallo, ich trau ich kaum zu fragen hier bei euch Profis, aber irgendwen muss ich ja fragen. :shame: Folgendes: Ich bin bisher nur im Printbereich bewandert, möchte aber nun zu Übungszwecken (learning by doing) und nur für private Zwecke eine Website layouten. Programmierung macht jemand, der sich damit auskennt :D

Also, ganz grundsätzliche Fragen habe ich dazu.

Wenn man eine Website nur layoutet, also nicht programmiert, mit welchem Programm macht ihr das/ist es sinnvoll? Photoshop? Indesign? Illustrator?

In welcher Größe/Abmessung (pixel) sollte man das Layout anlegen, damit es nachher auch auf jedem Bildschirm gleich gut zu sehen ist? Habe gehört, die "Länge" ist egal, aber die Breite?

Wie würdet ihr animierte Dinge layouten, also, dass klar ist, das soll z.B. ein Hyperlink sein und sich beim Drüberfahren mit der Maus verfärben o.ä.?

Was für Daten benötigt der Programmierer von mir, wenn ich mit der Gestaltung fertig bin (Photoshop-Mehrebenen z.B.?)

Vielen Dank für eure Hilfe!
 
naja, ich halte nix davon, dass layout mit einem grafikprogramm zu erstellen.
ich würde das komplette layout in eine css datei schreiben.
 
Du solltest mal denjenigen fragen, der sich mit der "Programmierung" auskennt. Das dürfte erhellender sein.
 
torro1972 schrieb:
Wenn man eine Website nur layoutet, also nicht programmiert, mit welchem Programm macht ihr das/ist es sinnvoll? Photoshop? Indesign? Illustrator?
Zum Vergrößern anklicken....

Ich fange mit Freehand an. Das Layout in Pixel genau 1:1. Alle Beispiel-Seiten in ein Dokument,
das geht schnell, auch Alternativen oder andere Farb-Versionen lassen sich fix duplizieren und
Farben über die Farbpalette mit einem Klick über alle Seiten schnell anpassen.

Zum Besprechen erfolgt die Ausgabe als PDF oder JPG aller Seiten ebenfalls in einem Rutsch.

Mit Photoshop geht das alles nicht, ist viel zu umständlich.

Da alles 1:1 angelegt ist, lässt sich jede Grafik, Button, Hintergrund oder Bild auch
leicht exportieren. Wenn es in Ebenen angelegt ist, lässt sich am Ende auch eine PS-Datei
mit allen Ebenen erzeugen. Feinarbeit kann man dann immer noch in Photoshop erledigen,
falls nötig.

Animationen bei Buttons lasse ich im Entwurf weg, Beispiele vorher/nachher reichen aus.

So machen wir das seit vielen Jahren in Zusammenarbeit mit Programmierern,
das hat sich bewährt.
 
calexico84 schrieb:
naja, ich halte nix davon, dass layout mit einem grafikprogramm zu erstellen.
ich würde das komplette layout in eine css datei schreiben.
Zum Vergrößern anklicken....

:rotfl:
Calexico, schön wär's, ich könnte das! Ich habe absolut KEINE Erfahrung mit dem Thema und du kommst mir mit CSS! Das ist doch gerade mein Problem!
 
MacEnroe schrieb:
Ich fange mit Freehand an. Das Layout in Pixel genau 1:1. Da alles 1:1 angelegt ist, lässt sich jede Grafik, Button, Hintergrund oder Bild auch
leicht exportieren. Wenn es in Ebenen angelegt ist, lässt sich am Ende auch eine PS-Datei mit allen Ebenen erzeugen. Feinarbeit kann man dann immer noch in Photoshop erledigen,
falls nötig.
Zum Vergrößern anklicken....

Super MacEnroe, das ist schon mal sehr hilfreich. Ich kann und habe allerdings kein Freehand, würde also Indesign oder Photoshop nehmen. Die Designer, denen ich mal über die Schulter geschaut habe, haben in PS layoutet. Dafür muss es doch Gründe geben (sagt auch masta k...).

Mein Problem sind die Abmessungen. Also ich mache ein neues Dokument auf, Maßeinheit Pixel statt cm, klar, aber welche Breite x Höhe?
Und Typogrößen? Wenn ich alles in Pixel angeben muss, habe ich keine Vorstellung, was das in etwa in Punkt entspricht. Wie stelle ich es an, dass ich dann auch sehe, wie groß eine Typo nachher tatsächlich ist?

Übrigens: ich habe noch keinen Programmierer! Muss mir erst jemanden suchen!
 
torro1972 schrieb:
Die Designer, denen ich mal über die Schulter geschaut habe, haben in PS layoutet. Dafür muss es doch Gründe geben (sagt auch masta k...)
Zum Vergrößern anklicken....

Wenn du genau weißt, wie das Design werden soll, kannst du gleich in Photoshop anfangen.

Wenn es um viele Entwürfe geht und Farbvarianten etc., die du mit Kunden
z.B. übers Internet abstimmen musst, solltest du zunächst das Design mit
InDesign festlegen, da geht das erstmal viel schneller.
Die Größen der Typo ergeben sich am Ende von selbst. Der Programmierer wird
das nach seiner Erfahrung möglichst 1:1 umsetzen, das lässt sich ja über CSS
jederzeit testen und anpassen. Bei den Schriftarten solltest du dich auf WebFonts
beschränken, schau bei Google oder TypeKit nach, was es dort gibt.
 
Ob nun InDesign, Fireworks oder Photoshop, ich denke mal das liegt auch etwas an der Übung, sprich mit welchem Programm geht mir das schneller von der Hand „in PS gibts ab CS4 die Ebenenkompositionen“ ;).

900px bzw. 960px sind die gebräuchlich für die Breite.
Hängt etwas davon ab an welche Klientel sich das ganze richten soll, bzw. vom Layout.
Der Designer wirds Dir danken, da diese Werte schön durch 3 respektive 6 zu teilen sind und das die Arbeit mit einem grid System doch sehr erleichtert.

//doger
 
torro1972 schrieb:
Also ich mache ein neues Dokument auf, Maßeinheit Pixel statt cm, klar, aber welche Breite x Höhe?
Und Typogrößen? Wenn ich alles in Pixel angeben muss, habe ich keine Vorstellung, was das in etwa in Punkt entspricht. Wie stelle ich es an, dass ich dann auch sehe, wie groß eine Typo nachher tatsächlich ist?
Zum Vergrößern anklicken....
Bei der Breite würde ich mich auf max. 1000 px Nutzbreite beschränken wenn es ein Layout mit fester Breite sein soll (orientiert an einer Bildschirmauflösung von 1024x768). Für ein dynamisches Layout (die Freiflächen verändern sich selbständig wenn das Fenster breiter wird) gilt im Grunde das Gleiche. Hier bist du zwar flexibel, solltest aber nicht zu breit anlegen. Die 1000 sind aber absolutes Maximum. Damit noch genug Platz für grafische Elemente und oder einen ausreichenden Rand vorhanden ist, sollte der Inhalt nicht breiter als die von doger genannten 900 oder 960 sein.

Damit du den Unterschied zwischen fester Breite und dynamischem Layout kennen lernst.. Ruf mal beide Seiten auf und verändere die Breite des Fensters. Auch soweit, dass der Inhalt sehr schmal wird.
Dynamische Breite: http://de.wikipedia.org/wiki/Wikipedia:Hauptseite
Feste Breite: http://www.bmw.de/de/de/index.html

Dass bei BMW auch Flash verwendet wird, ist erstmal unerheblich. Bei Wikipedia verändert sich die Breite der einzelnen Boxen und der Text wird vom Browser selbständig neu umgebrochen. Bei BMW wird wenn das Fenster schmaler ist als der Inhalt, der Inhalt abgeschnitten.

Bei den Typogrößen kannst du dich an der Optik orientieren. Der Webdesigner packt das schon sofern es nicht 100% pixelgenau sein muss, weil er sich dann eine Basisschriftgröße sucht und alle anderen Elemente relativ dazu in em coded. :D

Hier findest du eine Tabelle, an der du dich orientieren kannst: http://esx.ch/index.php?page=380

Allerdings solltest du beachten, dass Windows mit 96 dpi rechnet, OS X und Linux mit 72 dpi. Eine exakte Umrechnung für alle Systeme klappt deshalb eher selten.
Zur Not nimmt der Coder eben pt, das entspricht 1/72 Zoll. Dann stimmt das Layout einzelner Elemente zumindest absolut zum Gesamtlayout, sieht aber auf unterschiedlichen Bildschirmen unterschiedlich aus. Das hängt aber vom Coder ab. Ich code grundsätzlich in px mit festen Angaben.
 
Saugkraft schrieb:
Allerdings solltest du beachten, dass Windows mit 96 dpi rechnet, OS X und Linux mit 72 dpi. Eine exakte Umrechnung für alle Systeme klappt deshalb eher selten.
Zum Vergrößern anklicken....

Kannst du mal ein Beispiel geben, wo sich das unterschiedlich auswirkt und
wo man deshalb aufpassen muss?
 
Windows läuft grad nicht, sonst würde ich mal nen Screenshot machen. Kann ich aber nachher nachreichen, wenn meine Mac Krücke fertig gerödelt hat (heute ist Sat 1 Tag).

Sieht man aber ganz gut bei festen Schriftgrößen in px im IE. Die Schrift ist einen Tick größer als beispielsweise in Safari. Allerdings hab ich auch den Eindruck, dass Firefox seit 3.x auch anders rechnet, bzw. etwas größer darstellt. Wie gesagt.. Ich reiche nachher mal einen Screenshot nach. :)
 
Saugkraft schrieb:
Sieht man aber ganz gut bei festen Schriftgrößen in px im IE. Die Schrift ist einen Tick größer als beispielsweise in Safari.
Zum Vergrößern anklicken....

Das hat m.M. nichts mit den 96/72 dpi zu tun. Soweit ich weiß, betrifft uns als
Gestalter dieser Unterschied überhaupt nicht. Mir ist jedenfalls kein Problem und
kein Fall bekannt.
 
Welches Programm du für die Gestaltung verwendest bleib dir überlassen. Sinnvoll ist es erst einmal Wireframes von Hand zu zeichnen. Früher habe ich auch Layouts in Photoshop gestaltet. Doch dies ist zu aufwändig, daher erstelle ich die Layouts seit ca. 5 Jahren mit Indesign.

Die Umsetzung in HTML und CSS kannst du mit einem Ediitor wie Dreamweaver machen.
 
MacEnroe schrieb:
betrifft uns als Gestalter dieser Unterschied überhaupt nicht.
Zum Vergrößern anklicken....
Achso. Ich dachte, du fragtst als Webdesigner. :D

Nee, stimmt. Als Layouter kann dir das bimmel sein. Der Coder muss die Eigenarten der Browser kennen und die Schriftgrößen entsprechend festlegen. Da kommen je nach Layout ja noch ganz andere Fragen auf. Ob das ganze barrierefrei sein soll, welche webtaugliche Schrift verwendet wird, etc.
 
Aramon schrieb:
Sinnvoll ist es erst einmal Wireframes von Hand zu zeichnen.
Die Umsetzung in HTML und CSS kannst du mit einem Ediitor wie Dreamweaver machen.
Zum Vergrößern anklicken....

Was bedeutet Wireframes von Hand zeichnen? Kann ich mir jetzt nichts drunter vorstellen.

Die Idee mit Dreamweaver hatte ich auch, ich will es auch mal ausprobieren, aber für eine professionelle Lösung ist es wohl doch besser, man lässt es richtig programmieren?
Wie setzt du dann die Indesign-Layouts in Dreamweaver um? Gibt es da eine Möglichkeit, aus ID in DW zu exportieren oder wie?
 
Auch wenn ich nicht vom Fach bin: Stell Dir Deine Website in Photoshop als Skizze vor, die dann jemand anders als Vorlage nimmt, um daraus eine Website zu erstellen. Dann werdet Ihr zwangsläufig anfangen zu diskutieren, ob bestimmte Dinge wirklich sein müssen (Aufwand) oder ob man das nicht vielleicht auch anderss lösen kann :)

Du wirst die Seite in Dreamweaver nachbasteln müssen, denke ich mal. Eine Importfuktion gibt es da wohl eher nicht!
 
Dann hab ich auch noch einmal eine Frage zu den Programmen, die man evtl. benötigt.

Klar sind mir die Funktionen von Photoshop, Dreamweaver und Flash.

Aber es gibt ja (gerade von Adobe) noch viele mehr, von denen ich aber gar nicht weiss, wofür man sie benutzt.

Was ist z.B. der Unterschied zwischen Flash Proffessional, Flash Catalyst und Flash Builder?
Was macht man mit Fireworks? Wo ist da der Unterschied zu bspw. Illustrator?
Was macht man mit Premiere und After Effects?
 
Zurück
Oben Unten