Website Format anlegen
00110100 00110010
AW: Website Format anlegen
Aber das weiss dein Programmierer ja evt selbst.?
schau mal, was Du im Netz unter "responsive webdesign" findest. Um`s ganz kurz runterzubrechen: du erstellst mittels dieser idee/technik(en)(--> media queries!) eine site, die sich dann auf den verschiedenen geräten (19"- 24"Monitore, Tablets, SMartphones) anpasst. Insofern ist es nicht allzu sinnvoll, sich auf ein bestimmtes Format einzuschiessen.
Aber das weiss dein Programmierer ja evt selbst.?
⌘ + Z
AW: Website Format anlegen
Also bei der Breite der Website würde ich nicht über 900px rübergehen.
Gruß Julian
Also bei der Breite der Website würde ich nicht über 900px rübergehen.
Gruß Julian
Pixelschubse
AW: Website Format anlegen
Learning by doing. Fang an, recherchiere nebenbei und du wirst dich entwickeln.
Es ist halt eine ganz schlechte Voraussetzung, wenn du das noch nicht alles mit der Muttermilch aufgesogen hast
Learning by doing. Fang an, recherchiere nebenbei und du wirst dich entwickeln.
Es ist halt eine ganz schlechte Voraussetzung, wenn du das noch nicht alles mit der Muttermilch aufgesogen hast
Pixelschubse
AW: Website Format anlegen
Schrieb der TE irgendwo etwas von Auftrag im Sinne "bezahlter Auftrag"?
Wenn der Auftraggeber diese Aufgabe an ihn heran trägt, ist das sein "Problem".
Es hat keiner gesagt, dass er den ersten Entwurf gleich an den Programmierer geben soll.
Aber hey, der Auftraggeber kann ihm ja vorher einen VHS-Kurs oder ein Fernstudium bezahlen
Schrieb der TE irgendwo etwas von Auftrag im Sinne "bezahlter Auftrag"?
Wenn der Auftraggeber diese Aufgabe an ihn heran trägt, ist das sein "Problem".
Es hat keiner gesagt, dass er den ersten Entwurf gleich an den Programmierer geben soll.
Aber hey, der Auftraggeber kann ihm ja vorher einen VHS-Kurs oder ein Fernstudium bezahlen
Pixelschubse
AW: Website Format anlegen
Ach, Sie werden sich doch Ihrer werten Erhabenheit nicht etwa als "Kindergarten" angesprochen fühlen. Mein Gott, das tut mir aber leid :'(
Bevor du nichts über den Auftrag und den Auftraggeber weißt, geschweige denn die allgemeinen Kenntnisse des TE, musst du ihm nicht gleich sagen, was er nicht kann.
Auch wenn du grundsätzlich immer alles besser "weißt" und "kannst".
Wenn der TE weitere Infos zur Aufgabenstellung angeben möchte und vielleicht auch Entwürfe zeigt, dann kannst du ja mal so tun, als ob du wirklich helfen möchtest und ihm wertvollere Tipps geben als ein fertiges Template zu kaufen.
Ach, Sie werden sich doch Ihrer werten Erhabenheit nicht etwa als "Kindergarten" angesprochen fühlen. Mein Gott, das tut mir aber leid :'(
Bevor du nichts über den Auftrag und den Auftraggeber weißt, geschweige denn die allgemeinen Kenntnisse des TE, musst du ihm nicht gleich sagen, was er nicht kann.
Auch wenn du grundsätzlich immer alles besser "weißt" und "kannst".
Wenn der TE weitere Infos zur Aufgabenstellung angeben möchte und vielleicht auch Entwürfe zeigt, dann kannst du ja mal so tun, als ob du wirklich helfen möchtest und ihm wertvollere Tipps geben als ein fertiges Template zu kaufen.
AW: Website Format anlegen
Genau an diesem Punkt solltest du sagen:"Tut mir leid, ich habe von Webseiten noch keine Ahnung, und kann kein Design gestalten."
Das erspart dir wo möglich eine Menge Zeit,Geld und Ärger.
Solltest du dein Wissen trotzdem erweitern wollen hier ein paar Tipps:
- Ein Webdesign fängt man nicht mit dem Format oder einem Grid-System an sondern mit einem Wireframe. Dort wird alles festgehalten was die spätere Seite an features bieten soll, incl. Unterseiten und Formularen.
Infos zu diesem Thema gibt es hier >> http://sixrevisions.com/user-interface/website-wireframing/
- Hast du das Wireframing gemeistert, solltes du jedes dynamische Element der Seite als HTML/CSS dummy nachbilden(Prototyping). Dynamische Elemente sind z.B. Navigationen, Eingabefelder oder Auswahlfelder sowie Buttons. Wichtig sind dabei die verschiedenen Zustände der Elemente, wie z.B. active,hover,focus oder selected sowie alle etwaigen Formularelemente. Dieser Punkt ist wichtig um Fehler zu vermeiden und nichts zu vergessen, mach das also sorgfälltig.
Um das lernen der Grundlagen von HTML/CSS wirst du also nicht drum herum kommen.
Alles was du wissen musst gibt es hier >> http://de.selfhtml.org/
- OK, du hast dein Wireframe und du hast deine dynamischen Elemente, jetzt ist es an der Zeit dir ein Grid auszuwählen und dir Gedanken über ein Format(oder mehrere)zu machen.
Das 960 Grid welches hier ja schon erwähnt wurde ist zwar nicht schlecht, aber nicht das einzige. Dein Grid sollte sich an deinem Inhalt und deiner Basis Schriftgröße orientieren. Das 960 Grid ist z.B. auf eine Basis Schriftgröße von 12px ausgelegt, moderne Seiten nutzen heutzutage aber Basis Schriftgrößen von 13px oder größer.Da hilft dir nur Testen. Entweder mit einem Grid-Template in Photoshop oder (besser) mit einem CSS-Framework(ich empf. Blueprint).
Spätestens jetzt merkst du wieso die beiden oberen Punkte wichtig waren, du kannst sie nämlich hier wiederverwenden.
ein gute Auflistung von Grids und CSS-Frameworks findest du hier >>
auserdem nützlich an diesem Punkt; Blindtexte >> http://www.blindtextgenerator.de/
- Wenn du das alles geschafft hast, kannst du mit deinem Design anfangen.
Screenshot in Photoshop öffnen und als Basis nutzen. Dynamische Elemente 'onthefly' in CSS Testen und gleich als Screenshot im Design wiederverwenden und nicht vergessen verschiedene Zustände zu zeigen(Ebenenkomposition).
- letzter Punkt; optimieren
Es gibt viele Dinge die man in Photoshop designen kann die im Webbrowser entweder nicht funktionieren oder Kontraproduktiv sind. Andere Sachen lassen sich einfacher mit CSS lösen, wiederum andere gar nicht darstellen.
Dies ist der schwierigste Punkt, weil er jede Menge Hintergrundwissen über HTML/CSS und zum Teil auch Javascript erfordert. Hier trennt sich in der Regel die Spreu vom Weizen.
- Das alles setzt natürlich vorraus das du bereits fundierte Kenntisse in Gestaltung, Typografie und Komposition besitzt, das ist die Basis von jedem guten Design.
btw:
Natürlich werden jetzt einige sagen, das das alles viel zu aufwendig ist und das man ein Webdesign auch alleine mit Photoshop machen kann.
Richtig, es ist aber ein Unterschied ob man eine Seite für denn Produktiven Einsatz Gestaltet oder als Blingbling für irgendeine Designgalerie die niemals in HTML/CSS umgesetzt wird oder sich im Alltag bewähren muss.
Für Printdesigns geht das in Photoshop völlig in Ordnung, weil es quasi ihr natürlicher Lebensraum ist, bei Webdesigns ist das eben nicht der Fall.
justmy2cents
Na es geht doch nichts über ein Weblayout als gemerged´s DIN A4 PDF File, welches vom Absender netterweise komprimiert wurde um es schneller per E-Mail versenden zu können. :lol::lol::lol:
Genau an diesem Punkt solltest du sagen:"Tut mir leid, ich habe von Webseiten noch keine Ahnung, und kann kein Design gestalten."
Das erspart dir wo möglich eine Menge Zeit,Geld und Ärger.
Solltest du dein Wissen trotzdem erweitern wollen hier ein paar Tipps:
- Ein Webdesign fängt man nicht mit dem Format oder einem Grid-System an sondern mit einem Wireframe. Dort wird alles festgehalten was die spätere Seite an features bieten soll, incl. Unterseiten und Formularen.
Infos zu diesem Thema gibt es hier >> http://sixrevisions.com/user-interface/website-wireframing/
- Hast du das Wireframing gemeistert, solltes du jedes dynamische Element der Seite als HTML/CSS dummy nachbilden(Prototyping). Dynamische Elemente sind z.B. Navigationen, Eingabefelder oder Auswahlfelder sowie Buttons. Wichtig sind dabei die verschiedenen Zustände der Elemente, wie z.B. active,hover,focus oder selected sowie alle etwaigen Formularelemente. Dieser Punkt ist wichtig um Fehler zu vermeiden und nichts zu vergessen, mach das also sorgfälltig.
Um das lernen der Grundlagen von HTML/CSS wirst du also nicht drum herum kommen.
Alles was du wissen musst gibt es hier >> http://de.selfhtml.org/
- OK, du hast dein Wireframe und du hast deine dynamischen Elemente, jetzt ist es an der Zeit dir ein Grid auszuwählen und dir Gedanken über ein Format(oder mehrere)zu machen.
Das 960 Grid welches hier ja schon erwähnt wurde ist zwar nicht schlecht, aber nicht das einzige. Dein Grid sollte sich an deinem Inhalt und deiner Basis Schriftgröße orientieren. Das 960 Grid ist z.B. auf eine Basis Schriftgröße von 12px ausgelegt, moderne Seiten nutzen heutzutage aber Basis Schriftgrößen von 13px oder größer.Da hilft dir nur Testen. Entweder mit einem Grid-Template in Photoshop oder (besser) mit einem CSS-Framework(ich empf. Blueprint).
Spätestens jetzt merkst du wieso die beiden oberen Punkte wichtig waren, du kannst sie nämlich hier wiederverwenden.
ein gute Auflistung von Grids und CSS-Frameworks findest du hier >>
auserdem nützlich an diesem Punkt; Blindtexte >> http://www.blindtextgenerator.de/
- Wenn du das alles geschafft hast, kannst du mit deinem Design anfangen.
Screenshot in Photoshop öffnen und als Basis nutzen. Dynamische Elemente 'onthefly' in CSS Testen und gleich als Screenshot im Design wiederverwenden und nicht vergessen verschiedene Zustände zu zeigen(Ebenenkomposition).
- letzter Punkt; optimieren
Es gibt viele Dinge die man in Photoshop designen kann die im Webbrowser entweder nicht funktionieren oder Kontraproduktiv sind. Andere Sachen lassen sich einfacher mit CSS lösen, wiederum andere gar nicht darstellen.
Dies ist der schwierigste Punkt, weil er jede Menge Hintergrundwissen über HTML/CSS und zum Teil auch Javascript erfordert. Hier trennt sich in der Regel die Spreu vom Weizen.
- Das alles setzt natürlich vorraus das du bereits fundierte Kenntisse in Gestaltung, Typografie und Komposition besitzt, das ist die Basis von jedem guten Design.
btw:
Natürlich werden jetzt einige sagen, das das alles viel zu aufwendig ist und das man ein Webdesign auch alleine mit Photoshop machen kann.
Richtig, es ist aber ein Unterschied ob man eine Seite für denn Produktiven Einsatz Gestaltet oder als Blingbling für irgendeine Designgalerie die niemals in HTML/CSS umgesetzt wird oder sich im Alltag bewähren muss.
Für Printdesigns geht das in Photoshop völlig in Ordnung, weil es quasi ihr natürlicher Lebensraum ist, bei Webdesigns ist das eben nicht der Fall.
justmy2cents
aus vielfacher leidvoller erfahrung mit printgestaltern ohne den notwendigen background habe ich da nicht die selbe hoffnung
Na es geht doch nichts über ein Weblayout als gemerged´s DIN A4 PDF File, welches vom Absender netterweise komprimiert wurde um es schneller per E-Mail versenden zu können. :lol::lol::lol:
AW: Website Format anlegen
Autsch, word ist fies... sowas kenn ich auch. Ich erinnere mich sogar daran das selbiger Kunde bei der Präsentation ein Lineal gezückt hat und die Abstände von seinem ausgedrucktem Layout mit dem auf dem Bildschirm verglichen hat.:lol::lol::lol:pdf? welch’ wunschvorstellung
Hat es drauf
AW: Website Format anlegen
Das einzige was in Word oder in einer PDF festgehalten werden kann, sollte der Aufbau der Site sein. Halt als Notiz. Grundsätzlich lege ich per Hand ganz klassisch lege Skribbels auf Papier an. Anschließend wird das Layout in Photoshop oder Fireworks umgesetzt.
Beim layouten bzw. schon vorher stelle ich mir bzw. die Frage ob die Site auch für mobile Geräte wie Smartphone, iPhone und od. iPad umgesetzt werden soll. Wenn ja wird hier entweder ein separates Layout entwickelt oder gleich auf ein "responsive webdesign" setze.
Wenn beides aus ein Pfeder kommt, sprich Layout und Umsetzung mit Html(5) und CSS, weiß man auch gleich was an Grafik überhaupt nötig ist. So kann man dann auch das PSD oder FW-Dokument passend aufbauen.
Um jetzt auf die eigentliche Frage einzugehen, obwohl einiges von meinen Vorredner ja bereits beantwortet wurde, achte auf den Viewport. Dafür habe ich mir mal eine Aktion aufgezeichnet. Per Knopfdruck wird dann mein PSD/FW Dokument mit Hilfslinien versehen.
Wenn ich ohne diese Aktion arbeite, erstelle ich mir ein Dokument mit den Maßen 1500 Px (B) x 800 Px (H), wobei der letzte Wert meistens verändert wird. Halt nach unten hin wachsend. Der eigentliche Bereich der Site so wie die Mitte meines Dokuments wird dann mit Hilfslinien markiert.
Die 1500 Pixel Breite nutze ich um in meinem Browser schnell mal alles anzuschauen. Halt in einer Größe bei der die Jpeg/Png Vorschau (Preview) direkt mittig angezeigt wird mit dem jeweiligen Hintergrund des Layouts.
Grüße Patrick
Das einzige was in Word oder in einer PDF festgehalten werden kann, sollte der Aufbau der Site sein.
Halt als Notiz. Grundsätzlich lege ich per Hand ganz klassisch lege Skribbels auf Papier an. Anschließend wird das Layout in Photoshop oder Fireworks umgesetzt. Beim layouten bzw. schon vorher stelle ich mir bzw. die Frage ob die Site auch für mobile Geräte wie Smartphone, iPhone und od. iPad umgesetzt werden soll. Wenn ja wird hier entweder ein separates Layout entwickelt oder gleich auf ein "responsive webdesign" setze.
Wenn beides aus ein Pfeder kommt, sprich Layout und Umsetzung mit Html(5) und CSS, weiß man auch gleich was an Grafik überhaupt nötig ist. So kann man dann auch das PSD oder FW-Dokument passend aufbauen.
Um jetzt auf die eigentliche Frage einzugehen, obwohl einiges von meinen Vorredner ja bereits beantwortet wurde, achte auf den Viewport. Dafür habe ich mir mal eine Aktion aufgezeichnet. Per Knopfdruck wird dann mein PSD/FW Dokument mit Hilfslinien versehen.
Wenn ich ohne diese Aktion arbeite, erstelle ich mir ein Dokument mit den Maßen 1500 Px (B) x 800 Px (H), wobei der letzte Wert meistens verändert wird. Halt nach unten hin wachsend. Der eigentliche Bereich der Site so wie die Mitte meines Dokuments wird dann mit Hilfslinien markiert.
Die 1500 Pixel Breite nutze ich um in meinem Browser schnell mal alles anzuschauen. Halt in einer Größe bei der die Jpeg/Png Vorschau (Preview) direkt mittig angezeigt wird mit dem jeweiligen Hintergrund des Layouts.
Grüße Patrick
Hat es drauf
AW: Website Format anlegen
Selbstverständlich! Vor allem auch vorab klären / festhalten was alles nötig ist, damit der Webauftritt auch ein Erfolg wird. Unter anderem auch ob und wenn ja wie Werbung geschaltet werden soll. Nur um mal ein Punkt zu nennen.
Allein im Vorfeld gibt es da doch einige Fragen zu beantworten. Das sollte dann natürlich mit einfließen. Auch was den Einsatz von CMS angeht. Daher die Frage was soll od. ist später der eigentlich Content (Inhalt) der Site. Nur eine "Präsentation" von XY oder doch eine Site auf der laufend neue Inhalte hinzukommen.
Selbstverständlich! Vor allem auch vorab klären / festhalten was alles nötig ist, damit der Webauftritt auch ein Erfolg wird. Unter anderem auch ob und wenn ja wie Werbung geschaltet werden soll. Nur um mal ein Punkt zu nennen.
Allein im Vorfeld gibt es da doch einige Fragen zu beantworten. Das sollte dann natürlich mit einfließen. Auch was den Einsatz von CMS angeht. Daher die Frage was soll od. ist später der eigentlich Content (Inhalt) der Site. Nur eine "Präsentation" von XY oder doch eine Site auf der laufend neue Inhalte hinzukommen.
Zuletzt bearbeitet:
Willkommen auf PSD-Tutorials.de
In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.
Nächster neuer Gratisinhalt
03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Flatrate für Tutorials, Assets, Vorlagen
Statistik des Forums