Mike: Wie designe ich mit Photoshop? (Z.B. Grid Design)

Hi,

ich lese schon seit einer Weile Sachen über Design und einiges konnte ich lernen. Selber habe ich das Gefühl, dass ich ein Auge habe für sowas und Ideen kommen mir auch, das sieht dann richtig schön aus im Kopf aber wir bringe ich das ins Photoshop? Als Site von Template ist kein Thema, aber ich bin nicht in der Lage ein Template zu erstellen.

Könnt ihr mir spezielle Tutorials für Photoshop empfehlen, kein allgemeines Zeug sondern auf Webmaster ausgerichtet.

Als nächstes würde ich es mal gerne mit einem "Grid Design" _versuchen_. Aber das Problem fängt ja beim Gitter an, wie erstelle ich ein "gleichmäßiges, richtiges" Gitter, wie teile ich es auf und arbeite damit praktisch? Wie mache ich die Navi? Arbeitet man da tatsächlich mit einfachen "linienziehen" Erkzeugen? (Erscheint mir etwas unpraktisch und unflexibel. Liegt aber vllt an mir.)In dieser Richtung bräuchte was zum nachlesen.

Für allgemeines aber richtig gutes Zeug richtung Webdesign in der Praxis  bin ich auch dankbar.
Vielleicht ist Photoshop auch das falsche Werkzeug und Webdesigner arbeiten mit einem ganz anderen Tool?

Bitte helft mir ;)
Danke
Ciao

  1. hallo,

    Vielleicht ist Photoshop auch das falsche Werkzeug

    Richtig. Photoshop ist zur Bearbeitung von Fotos entworfen und kann das auch ganz gut. Es liefert dir Grafiken. Und nichts weiter.

    und Webdesigner arbeiten mit einem ganz anderen Tool?

    Webdesigner arbeiten mit einfachsten Texteditoren, wenn es darum geht, irgendwelchen HTML-Code zu schreiben.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Webdesigner arbeiten mit einfachsten Texteditoren, wenn es darum geht, irgendwelchen HTML-Code zu schreiben.

      Ich glaube, wir haben uns missverstanden. Es geht hier um das fertigstellen von Templates nicht um das Umsetzen von diesen. Wenn du z.B. in einer Firma einen Auftrag gibst, gibts da ja die Programmierer und die Webdesigner und noch andere. Die möchte wissen, wie die Webdesigner arbeiten und da die auch Fotos und Grafiken brauchen, arbeiten sie auch ganz bestimmt mit Photoshop aber in wie fern ist die Frage. Auch für grundsätzliche Strukturen?

      Oder wie willst du mit einem HTML Editor die Struktur und das Aussehen einer Seite "zeichnen" bevor du mit dem programmieren anfängst???

      Wie schon bereits im ersten Post erwähnt, das Umsetzen kann ich gut, wenn ich eine Vorlage habe. Vorlage zu erstellen ist die Aufgabe des Webdesigners. Und sein Aufgabenbereich muss ich nun auch mal abtasten um als Ein-Mann-Armee ordnetliche Seiten hinzubekommen.

      PS: Englische Materialien sind auch willkommen.

      1. Hallo Mike!

        Ich glaube, wir haben uns missverstanden. Es geht hier um das fertigstellen von Templates nicht um das Umsetzen von diesen.

        Du hast Christoph nicht richtig verstanden. Du redest von Grid Design. Vergiss es gleich wieder, das ist keine Grundlage für sinnvolles Webdesign. Brauchbares Webdesign ist flüssiges Design. Templetes sind keine grafischen Layoutvorlagen, das sind funktionierende Websites.

        [...] möchte wissen, wie die Webdesigner arbeiten und da die auch Fotos und Grafiken brauchen, arbeiten sie auch ganz bestimmt mit Photoshop aber in wie fern ist die Frage. Auch für grundsätzliche Strukturen?

        Du nennst den entscheidenden Punkt: Strukturen. Strukturen werden in (X)HTML erstellt, das ist Markup nicht Design.

        Oder wie willst du mit einem HTML Editor die Struktur und das Aussehen einer Seite "zeichnen" bevor du mit dem programmieren anfängst???

        Die Struktur ja, das Aussehen nicht. Du bringst da zwei ganz verschiedene Dinge durcheinander. Die Diskussion über die Frage was Vorrang hat, die Struktur oder das Design ist etwa so sinnvoll wie der Streit über das Henne-Ei-Dilemma. Webdesign ist kein Printdesign. Punkt.

        Wie schon bereits im ersten Post erwähnt, das Umsetzen kann ich gut, wenn ich eine Vorlage habe. Vorlage zu erstellen ist die Aufgabe des Webdesigners. Und sein Aufgabenbereich muss ich nun auch mal abtasten um als Ein-Mann-Armee ordnetliche Seiten hinzubekommen.

        Das solltest du mal etwas genauer erklären. Für mich widersprichst du damit deinen gerade gemachten Aussagen. Was heisst den Vorlage? Im Gegensatz zu den meisten Postern hier im Forum orientiere ich mich primär am Design, aber eben am flüssigen Webdesign. Layouts sind für mich der Ausgangspunkt, erstellt mit dem von Adobe dafür vorgesehenen Tool: Fireworks. Photoshop ist dafür nur sehr bedingt geeignet. Bis aber daraus Templetes entstehen, ist es noch ein langer Weg, dafür muss dann Layout und Struktur in Einklang gebracht werden.

        Du solltest einfach genau erklären, was du dir von Photoshop beim Erstellen von Websites genau versprichst. Aber sage bitte nicht, ein hübsches Grid Design erstellen. Dann solltest du schlicht nicht von Webdesign sprechen oder zumindest verraten, wie und durch wen daraus auf welchem Wege eine Website entstehen soll.

        Beste Grüsse
        Richard

        1. Also ich bin ein Schüler, der das ganze als Hobby betreibt, wahrscheinlich bin mit Begriffen wie Layout und Template durcheinander gekommen. Ich bin aber sicher, einige Menschen verstehen was ich meine oder können es nachvollziehen.

          Ich mache das ganze als Hobby, habe keine berufliche Erfahrung oder habe jemals in einer Webagentur gearbeitet (außer mal Templates/Layouts umgesetzt). Deswegen bringt es euch und mich nicht weiter mit spezifischen Fragen zu "bombadieren". Ich muss auf die richitge Fährte gebracht werden. Diskussionen, die sich an Begriffe aufhängen, sind bei mir zwecklos ;) Da hilft nur eine Korrektur oder Erklärung...

          Dann solltest du schlicht nicht von Webdesign sprechen oder zumindest verraten, wie und durch wen daraus auf welchem Wege eine Website entstehen soll.

          Das ist eigentlich meine Ausgangsfrage. Was mache ich, wenn ich ein Design im Kopf habe. Wie bringe ich das "professionell" auf den Bildschirm. Bevor man mit einem Editor ankommt, muss man wohl andere Schritte druchgehen.

          Warum du das Grid Design verfluchst, weiss ich jetzt nicht, aber ich bin davon überzeugt. Vielleicht verstehen wir uns hier auch falsch. Wer weiss...

          1. Das ist eigentlich meine Ausgangsfrage. Was mache ich, wenn ich ein Design im Kopf habe. Wie bringe ich das "professionell" auf den Bildschirm. Bevor man mit einem Editor ankommt, muss man wohl andere Schritte druchgehen.

            Leider kann ich dir darauf nicht antworten, da ich nicht Layoute.

            Warum du das Grid Design verfluchst, weiss ich jetzt nicht, aber ich bin davon überzeugt. Vielleicht verstehen wir uns hier auch falsch. Wer weiss...

            Nee, ihr versteht euch nicht falsch, der Punkt ist das ein Gridlayout, also ein Layout, dass auf Spalten und Reihen basiert, mit HTML/CSS nicht leicht umzusetzten ist und das Werkzeug CSS auch nicht dafür ausgelegt ist.

            Das Problem ist, das Webdesign oft wie eine Papierdesign entworfen wird, du nimmst ein (virtuelles) Blatt Papier und machst dort deinen Entwurf. Wenn du damit zu einem Drucker gehst, kannst du ihm sagen, hier ich möchte das auf DIN A4 haben, ihr sprecht die Farben ab und dann wird es gedruckt.

            Eine Internetseite wird aber in den seltesten Fällen gedruckt, sondern soll im Browserfenster der (hoffentlich) zahlreichen Besucher dargestellt werden. Welche Größe dieses Fenster hat, weißt du nicht, muss dich auch nicht interssieren und genau dafür hast du HTML/CSS. Damit bist du in der Lage ein Layout zu entwerfen, dass sich flexibel anpaßt und für alle Besucher egal mit was die deine Seite betrachten, anschaubar und benutzbar ist. Die Grundlage dafür sind Boxen die du z.b. mit float anordnen kannst ohne dass du sie zementieren musst.

            Das ganze erfordert natürlich ein gehöriges Umdenken und ist vermutlich auch wesentlich schwieriger als für ein Blatt Papier zu layouten. Aber es lohnt sich die Arbeit zu machen, da du einmal es deinen zukünftigen Besucher leichter machst und auch dir selber beim umsetzen des Entwurfs.

            Struppi.

            1. Ihr redet von verschiedenen Dingen. Der Grid-Ansatz und flüssiges Layout schließen sich ja nicht gegenseitig aus. Daher ist es auch völliger Unsinn, eine Rasterung bei gestalterischen Entwürfen per se zu verfluchen. Das "Grid" ist kein statisches Grundgerüst einer Website, sondern lediglich ein Hilfsmittel für den Designer, um Proportionen zu wahren und ein in sich stimmiges Layout zu entwickeln.

              Cheers
              Cervantes

              1. Das "Grid" ist kein statisches Grundgerüst einer Website, sondern lediglich ein Hilfsmittel für den Designer, um Proportionen zu wahren und ein in sich stimmiges Layout zu entwickeln.

                Genau das denke ich auch.

              2. Hallo Cervantes!

                Ihr redet von verschiedenen Dingen. Der Grid-Ansatz und flüssiges Layout schließen sich ja nicht gegenseitig aus.

                Ausschliessen tun sich die beiden Dinge selbstverständlich nicht. Es gibt nur regelmässig ein paar Probleme bei der praktischen Umsetzung. Aber auch die können mit Flash ganz elegant gelöst werden. ;-) Es ging aber um Grid Design mit Photoshop und das ist kein sinnvoller Ansatz (ausser allenfalls auf der Ebene des Entwurfs).

                Daher ist es auch völliger Unsinn, eine Rasterung bei gestalterischen Entwürfen per se zu verfluchen.

                Nun redest du aber von verschiedenen Dingen. Grid Design, welches am Ende der Kette beim Betrachter kein Grid mehr ist, ist auch kein Grid Design.

                Das "Grid" ist kein statisches Grundgerüst einer Website, sondern lediglich ein Hilfsmittel für den Designer, um Proportionen zu wahren und ein in sich stimmiges Layout zu entwickeln.

                Eigentlich eine selbstverständliche Vorgehensweise. Nur stellt sich dabei die Frage, in welchem Umfang durch diese Gestaltungsvorgaben spätere Umsetzungsprobleme geschaffen werden.

                Beste Grüsse
                Richard

                1. Ausschliessen tun sich die beiden Dinge selbstverständlich nicht. Es gibt nur regelmässig ein paar Probleme bei der praktischen Umsetzung.

                  Welche Probleme meinst Du?

                  Nun redest du aber von verschiedenen Dingen. Grid Design, welches am Ende der Kette beim Betrachter kein Grid mehr ist, ist auch kein Grid Design.

                  Ne ne, flüssiges Layout bedeuted ja nicht, dass das Layout völlig ohne Struktur und Proportionen sein müsste. Das Grid bleibt daher durchaus bestehen, es passt sich jedoch im Idealfall dem Viewport an.

                  Eigentlich eine selbstverständliche Vorgehensweise. Nur stellt sich dabei die Frage, in welchem Umfang durch diese Gestaltungsvorgaben spätere Umsetzungsprobleme geschaffen werden.

                  Bevor wir uns hier verrennen. Zeig mir doch einfach mal ne Seite, die Deiner Meinung nach alle Anforderungen eines flüssiges Layout erfüllt und ohne jegliches Grid auskommt (aber bitte ne Seite, die über Inhalte und ein Design verfügt).

                  Cheers
                  Cervantes

                2. Nun redest du aber von verschiedenen Dingen. Grid Design, welches am Ende der Kette beim Betrachter kein Grid mehr ist, ist auch kein Grid Design.

                  Wir meinen beide sowas: http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php

                  1. Nun redest du aber von verschiedenen Dingen. Grid Design, welches am Ende der Kette beim Betrachter kein Grid mehr ist, ist auch kein Grid Design.

                    Wir meinen beide sowas: http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php

                    Das ist ein absolut fixes Zweispalten(eigentlich zweineinhalb)-Layout.

                    Struppi.

                    1. Wir meinen beide sowas: http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php

                      Das ist ein absolut fixes Zweispalten(eigentlich zweineinhalb)-Layout.

                      Es geht nicht um die Seite, sondern um den dort beschriebenen Inhalt respektive die Präsentation (weiter unten auf der Seite).

          2. Hallo Mike!

            Warum du das Grid Design verfluchst, weiss ich jetzt nicht, aber ich bin davon überzeugt. Vielleicht verstehen wir uns hier auch falsch. Wer weiss...

            Ich will mal damit anfangen: Grid Design ist ganz profanes Tabellenlayout auf höherer Honorarstufe. Die Frage ist, _warum_ dieser Weg gewählt wird. Nur wegen der Gestaltung ist ein Argument, das den Nutzer beleidigt, für den ja das Ganze gestaltet wird. Und, sobald du dich an die Umsetzung deiner Idee machst, wird deine Überzeugung von Grid Design schon irgendwie nachlassen ...

            Dann solltest du schlicht nicht von Webdesign sprechen oder zumindest verraten, wie und durch wen daraus auf welchem Wege eine Website entstehen soll.
            Das ist eigentlich meine Ausgangsfrage. Was mache ich, wenn ich ein Design im Kopf habe. Wie bringe ich das "professionell" auf den Bildschirm. Bevor man mit einem Editor ankommt, muss man wohl andere Schritte druchgehen.

            Gar nichts! Auf das Veröffentlichen eine Website verzichten. Es ist dann angebrachter die Idee als Computergrafik umzusetzen und bei einer Kustaustellung zu präsentieren.

            Das Design - in welcher Form auch immer - ist Mittel zum Zweck, nicht Selbstzweck. Entscheidend sind Inhalte, entscheidend ist der Nutzen für die Zielgruppe, entscheidend ist die Benutzbarkeit der Website ...  Und ja, ich halte das ansprechende Aussehen einer Website für sehr wichtig.

            Wenn du Websites erstellen willst, kommst du um HTML und CSS nicht herum, du wirst dich damit befassen müssen. Du kannst dafür Werkzeuge benutzen, in der Adobe-Familie wäre dies Dreamweaver, der erstellt dir den HTML-Code automatisch, und du kannst direkt auf Photoshop zugreifen um Fotos zu bearbeiten. Aber mach dir keine Illusionen, du kannst mit diesem komplizierten Werkzeug nicht vernünftig arbeiten, wenn du keine Kenntnisse vom HTML-Code und von CSS hast.

            Um das klar auszudrücken: mit Photoshop allein kannst du deine Idee nicht als funktionierende Website auf die Bildschirme der Nutzer bringen. Mit Photoshop kannst du Entwürfe von Layouts erstellen, die darstellen, wie nach deiner Vorstellung Websites auf dem Bildschirm aussehen könnten. Ob sich das dann auch wirklich so umsetzen lässt, bleibt allerdings eine offene Frage. Ich bevorzuge den Weg, das Machbare schön aussehen zu lassen und finde mich damit ab, dass das Schöne nicht immer machbar ist.

            Als Tipp: bei Adobe findest du für alle Fragen reichlich Anleitungen.

            Beste Grüsse
            Richard

            1. Wenn du Websites erstellen willst, kommst du um HTML und CSS nicht herum, du wirst dich damit befassen müssen.

              Hi,

              vielleicht hast du miene Posts nicht mitgelesen. Ich stelle nun endgültig fest, dass wir uns missverstanden haben, DENN ich kenne mich für einen Ameteur sehr gut mit HTML und CSS aus, aber nicht mit designen, also Photoshop, Skizzen machen, Layout erstellen u.s.w.. www.shyne.net.ms ist valides xhtml strict und css, aber schei** weil es kein Design hat,keine Struktur, keine Hervorhebungen des Wesentlichen, - weil ich es nur mit HTML Editor gemacht habe. Jetzt möchte ich die Seite erneuern, mit Inhalt und Design, dabei bleibt bei mir weder Usibility noch sonst etwas auf der Strecke, sondern steht an erste Stelle.

              Ich spreche hier nicht von Grafiken, die als Design eingesetzt werden, ums kurz zu fassen. Wenn du dir alle Posts kurz anschaust, wirst du wissen, was gemeint ist.

              Aber das Problem hat sich für mich eigentlich erledigt. Ich glaube ich muss einfach lernen mit Photoshop umzugehen, um das Layout zu erstellen, also die Skizze, das Template, wie auch immer aber keine riesige Grafik die als Website missbraucht wird.

              Ciao

        2. Du redest von Grid Design. Vergiss es gleich wieder, das ist keine Grundlage für sinnvolles Webdesign. Brauchbares Webdesign ist flüssiges Design.

          Grid Design bedeutet nur, dass ein mehr oder minder ausgeprägtes Seitenraster verwendet wird, um Inhaltsbereiche zu positionieren, und dass Inhaltsbereiche dieses Raster flexibel nutzen können, um mal nur wenige, mal viele Zellen zu belegen.
          Es bedeutet nicht zwangsläufig auch, dass das Layout nicht flüssig sein kann.

          Ich würde übrigens nicht (mehr) pauschal darauf pochen wollen, dass nur flüssiges Design im Web gutes Design ist. Inzwischen sind nämlich viele Browser/Ausgabegeräte in der Lage, die Aufgabe zu übernehmen, die vorher noch beim Webautor lag: Die Website so zu rendern, dass sie den Viewport sinnvoll und bestmöglich ausnutzt.
          Ein fixes Layout kann sich dabei durchaus überzeugender verhalten als ein flüssiges Layout.

          (Dieser Thread ist mal wieder mächtig schwarz-weiß. Ein paar mehr Graustufen wären schön.)

          Viele Grüße!
          _ds

          --
          »Der Alte in Das Boot: "Das muss das Boot abkönnen." - Immer dann, wenn dir fremdes Eigentum zu Boden fällt oder dein Auto bewegliche Elemente des Straßenverkehrs touchiert.«
          - Top Fives, Best of »Schöne Sätze für den Alltag«
          1. Ich würde übrigens nicht (mehr) pauschal darauf pochen wollen, dass nur flüssiges Design im Web gutes Design ist. Inzwischen sind nämlich viele Browser/Ausgabegeräte in der Lage, die Aufgabe zu übernehmen, die vorher noch beim Webautor lag:

            Darauf wird es wohl hinauslaufen, der Autor macht einen Vorschlag wie es ungefähr auszusehen hat und die Softfware berechnet alles, auf die Einstellungen des Users.

            Wobei "viele" Brwoser auch relativ ist.

            Für mich als User ist gutes Webdesign das, wo ich nicht die Schrift vergrößern muss, um was zu lesen oder mein Browserfenster vergrößern oder verkleinern muss, um den Inhalt lesen zu können. Für Leute vom Fach sieht die Sache wohl anders aus.

            Struppi.

            1. Wobei "viele" Brwoser auch relativ ist.

              Immerhin sämtliche iPhones und Opera Minis, und das entspricht vermutlich mindestens der Hälfte aller Desktop-PCs weltweit. Wenn man davon ausgeht, dass demnächst alle mobilen Endgeräte clever genug rendern, hätten wir schlagartig eine absolute Mehrheit (2- bis 4-fach, naiv-nüchtern gesehen) gegenüber sämtlichen Desktop-Browsern.

              Hinzu kommt, dass inzwischen sowohl Internet Explorer, Opera als auch Firefox nicht mehr nur die Schrift skalieren, sondern stattdessen die gesamte Seite zoomen. Ein schlichter Auto-Zoom in genügend Abstufungen beim Betreten einer Seite als Default-Merkmal dieser Browser würde also ausreichen, um den Viewport bestmöglich auszunutzen und flüssige Layouts in der jetzigen Form ziemlich irrelevant zu machen.

              Viele Grüße!
              _ds

              --
              »Baby in Dirty Dancing: "Ich habe eine Wassermelone getragen." als mögliche Antwort auf Fragen wie "Lange nicht gesehen, was treibst du so?".«
              - Top Fives, Best of »Schöne Sätze für den Alltag«
              1. Wobei "viele" Brwoser auch relativ ist.

                Immerhin sämtliche iPhones und Opera Minis, und das entspricht vermutlich mindestens der Hälfte aller Desktop-PCs weltweit.

                Hinzu kommt, dass inzwischen sowohl Internet Explorer, Opera als auch Firefox nicht mehr nur die Schrift skalieren, sondern stattdessen die gesamte Seite zoomen.

                Ich vermisse irgendwie einen Ironie Tag in deinem Posting.

                Struppi.

                1. Ich vermisse irgendwie einen Ironie Tag in deinem Posting.

                  An welcher Stelle? Auf die mobilen Endgeräte bezogen oder darauf, dass alle Desktop-Browser der neuen Generation nicht mehr nur Schrift skalieren, sondern die komplette Seite zoomen?

                  Ich vermute, du meinst ersteres? Ich mag's gerne genauer erläutern, wenn du mir sagst, was dich verwundert.

                  Viele Grüße!
                  _ds

                  --
                  »Ein Unternehmen, das keinen Kaffeevollautomaten hat, hat das hier: einen Filterkaffee-Mengenbrühautomaten mit Isolierbehälter.«
                  - Top Fives, Orte, an denen man Kaffee trinken kann
                  1. Ich vermisse irgendwie einen Ironie Tag in deinem Posting.

                    An welcher Stelle? Auf die mobilen Endgeräte bezogen oder darauf, dass alle Desktop-Browser der neuen Generation nicht mehr nur Schrift skalieren, sondern die komplette Seite zoomen?

                    Ach, stimmt ich hab irgendwie deine Ausführungen der Relationen von mobilen Endgeräten zu Desktop Rechner nicht verstanden, da für mich die Dinger kein Bedeutung haben und ich auch keine Leute kenne die damit surfen, von daher fand ich die Zahlen sehr hochgegriffen, aber ich kenn auch kaum Leute die sich einen iPhone leisten könnten.

                    Aber das mit dem zoomen hab ich bisher auch nur im Opera gesehen, den ich aber nicht verwende. Mein FF zoomt keine Bilder und wenn ich z.b. im IE 7 die google Seite einmal zoome, dann sind überall Scrollbalken.

                    Wobei ich nicht genau weiß wie du das meinst, ich kenn aus der Werbung die Bilder, wie z.b. das iPhone mit Internetseiten umgeht, aber so ein Verhalten ist noch eher ungewöhnlich

                    Struppi.

                    1. Ach, stimmt ich hab irgendwie deine Ausführungen der Relationen von mobilen Endgeräten zu Desktop Rechner nicht verstanden, da für mich die Dinger kein Bedeutung haben und ich auch keine Leute kenne die damit surfen

                      Verständlich, denn »wir sind hier schließlich noch nicht so weit.« In anderen Ländern sieht's anders aus. Vielleicht mal ein paar Zahlen aus Cameron Molls Buch »Mobile Web Design«:

                      - Der PC ist in 30 Jahren auf eine Verbreitung von geschätzen
                         850 Millionen Geräten weltweit gekommen. Das Mobiltelefon hat's in
                         35 Jahren auf geschätzte 2,7 Milliarden geschafft.

                      - In Kenia ist die Zahl der mobilen Geräte in den letzten fünf Jahren von
                         1 Million auf 6,5 Millionen angewachsen. Die Zahl der
                         Festnetztelefonanschlüsse ist bei etwa 300.000 geblieben.

                      - Indien ist das Land mit dem am schnellsten wachsenden Markt für
                         mobile Geräte. China hat bereits mehr als 300 Millionen Mobile-Nutzer.

                      - Westeuropa hat 2006 die Marke von 100% der Mobiltelefoneinheiten zur
                         Zahl der Bevölkerung überschritten, sprich: mehr Handys als Menschen.

                      Der Anteil der Nutzer, die mit ihren mobilen Geräten wirklich ins Netz gehen, ist zurzeit vermutlich noch verhältnismäßig gering (in U.S. und U.K. schätzt man die Zahl der Nutzer immerhin schon auf etwa 1/5 aller Desktopnutzer), jedoch sind die Zahlen oben markant genug, um schon geringen prozentualen Verschiebungen bei der Webnutzung einige Relevanz zu geben.

                      An dieser Stelle nochmal erwähnenswert: wir sollten nicht davon ausgehen, dass mobiles Internet gleichbedeutend mit stationärem Internet oder zumindest ähnlich ist. Das ist es definitiv nicht. Jedoch fehlt uns Webautoren noch viel Gefühl dafür, in welcher Form mobile Geräte genutzt werden. Denn wenn z.B. ein mobiles Endgerät als Webcontent allein die Nummer eines Kontaktpartners ausspuckt, dann ist das für manche Nutzer bereits »genug Internet« und genug Nutzen, damit online zu gehen.

                      Mein FF zoomt keine Bilder

                      Das macht er ab Version 3, die zurzeit noch Beta ist.

                      und wenn ich z.b. im IE 7 die google Seite einmal zoome, dann sind überall Scrollbalken.

                      Ja, der IE7 zoomt leider noch nicht allzu geschickt und wird dafür auch allerorts kritisiert.

                      Wobei ich nicht genau weiß wie du das meinst, ich kenn aus der Werbung die Bilder, wie z.b. das iPhone mit Internetseiten umgeht, aber so ein Verhalten ist noch eher ungewöhnlich

                      Das iPhone versucht, den »großen« Webcontent in einem recht kleinen Display unterzubringen. Dabei zoomt es ziemlich geschickt, kann Inhaltsbereiche erkennen und per »Klick« über den gesamten Viewport aufspannen: http://www.apple.com/iphone/features/index.html#safari

                      Sicherlich außergewöhnlich, aber eben auch außergewöhnlich komfortabel und sehr wegweisend :)

                      Viele Grüße!
                      _ds

                      --
                      »[..] Meiden Sie schwammige Aussagen wie "Pott Kafffe" oder "'nen Matschato", denn sie beschreiben Ihr gewünschtes Getränk nicht hinreichend und zeigen, dass Sie kein großes Interesse an der Kaffeekultur haben.«
                      - Top Fives, Verhalten im Coffee House
                      1. Hallo Schuer,

                        Die meisten mobilen Geräte sind meiner Meinung nach einfach zu klein, um vernünftig größere Mengen an Inhalten zu konsumieren und länger Texte zu lesen u.ä.
                        Von daher wird die Relevanz solcher Endgeräte für schnelle Informationsbeschaffung sicher noch ziemlich steigen (Fahrplanauskunft, Kinoinformation, Kurznachrichten o.ä.) sich für größere Informationsangebote aber wohl in Grenzen halten. Auch von den Milliarden Handynutzern werden die meisten wohl weiterhin telefonieren und SMS schicken. Sonst müsste sich das auch schon deutlich in irgend welchen Browserstatistiken niederschlagen, wovon ja nicht viel zu merken ist.

                        Was Deine Theorie zu Viewport-Angepasstem Design angeht. Anpassung an den Viewport bedeutet ja nicht einfach gleichmäßige Skalierung.
                        Idr. bleiben gewisse Elemente (Navigation) gleich groß, einige wachsen begrenzt (Inhaltsbereiche) und einige füllen den restlichen Leerraum (Hintergrund, Füllelemente). So eine Skalierung ist eigentlich nur durch mitwirkung des Autors zu erreichen.
                        Ich weiß nicht, wie Browser für mobile Endgeräte arbeiten. Vermutlich versuchen diese (zumindest Opera kann so etwas, meine ich mich zu erinnern) auch, Elemente der Seite anders zu verteilen und sind damit mehr oder weniger erfolgreich.
                        Wenn der Autor solche Entscheidungen dem Browser überlässt, gibt er aber einen Teil seines Gestaltungsspielraumes aus der Hand. Das kann natürlich sinnvoll sein, einfach weil es bequem ist. Man sollte sich aber schon weitergehender Möglichkeiten bewusst sein und deren Nutzung nicht so vorschnell beerdigen.

                        Grüße

                        Daniel

                        1. Von daher wird die Relevanz solcher Endgeräte für schnelle Informationsbeschaffung sicher noch ziemlich steigen (Fahrplanauskunft, Kinoinformation, Kurznachrichten o.ä.) sich für größere Informationsangebote aber wohl in Grenzen halten.

                          Das sehe ich auch so. Und nicht nur wegen des kleinen Screens, sondern auch wegen der physikalischen Art der Nutzung: ein mobiles Gerät wird auch mal beim Laufen verwendet, in wackligen S-Bahnen, an stressigen Orten und unter komischen Lichtverhältnissen; mit nur einer Hand, mit der Aktentasche unterm arm und mit sehr eingeschränkten Möglichkeiten zur Dateneingabe.

                          Auch von den Milliarden Handynutzern werden die meisten wohl weiterhin telefonieren und SMS schicken. Sonst müsste sich das auch schon deutlich in irgend welchen Browserstatistiken niederschlagen, wovon ja nicht viel zu merken ist.

                          Zum ersten Punkt: sehe ich zwar auch so, könnte mir aber vorstellen, dass es nur wenige Jahre benötigen könnte, um eine irre Verbreitung von webtauglichen Mobiles samt Datenflatrates erreicht zu haben.

                          Zum zweiten Punkt: in den Statistiken »normaler« Websites ist nicht allzu viel zu merken, das stimmt. Zurzeit gibt es ja auch noch verhältnismäßig wenige Mobiles, die mit solchem Content überhaupt klar kommen. Das iPhone ist vermutlich das erste richtig populäre Ding, das es kann.
                          Auf Mobiles ausgerichtete Websites jedoch erreichen schon ziemlich viele Zugriffe. Der amerikanische Weather Channel etwa hat bereits mehr Zugriffe von mobilen Geräten als von Desktop-Geräten.

                          Was Deine Theorie zu Viewport-Angepasstem Design angeht. Anpassung an den Viewport bedeutet ja nicht einfach gleichmäßige Skalierung.

                          Zwangsläufig nicht, das stimmt. Jedoch geht der Trend in die Richtung.

                          Ich weiß nicht, wie Browser für mobile Endgeräte arbeiten. Vermutlich versuchen diese (zumindest Opera kann so etwas, meine ich mich zu erinnern) auch, Elemente der Seite anders zu verteilen und sind damit mehr oder weniger erfolgreich.

                          Ja, Opera macht das schon ziemlich gut und findet deshalb auch immer mehr Verbreitung. Ich denke, es ist auch die beste Methode der Zwangsmobilisierung für sehr kleine Viewports, denn dort würde ein Zoom vermutlich eher wenig nutzbar sein. Auf größeren Viewports (360px und mehr) empfinde ich den Zoom wie beim iPhone allerdings überzeugender als ein SmallScreen-Rendering, dass versucht, die Inhaltsbereiche schmaler zu positionieren oder anderweitig umzubauen.

                          Viele Grüße!
                          _ds

                          --
                          »Liam und Noel pöbeln sich durch Top 5-Listen, während Herr Einbecker andächtig der Musik lauscht und wir anderen auf "Wonderwall" warten.«
                          - Top Fives, Top 5 Sponsoren-Memory
                    2. Ach, stimmt ich hab irgendwie deine Ausführungen der Relationen von mobilen Endgeräten zu Desktop Rechner nicht verstanden, da für mich die Dinger kein Bedeutung haben und ich auch keine Leute kenne die damit surfen, von daher fand ich die Zahlen sehr hochgegriffen, aber ich kenn auch kaum Leute die sich einen iPhone leisten könnten.

                      Ein iPod touch reicht vollkommen aus, um von der Couch aus auf dem Laufenden zu bleiben.

                      iPod touch im WWW

                      Das Tippen ist gewöhnungsbedürftig, das Surfen selbst aber recht komfortabel.

                      Roland

      2. hallo,

        Wenn du z.B. in einer Firma einen Auftrag gibst, gibts da ja die Programmierer und die Webdesigner und noch andere.

        Ich beauftrage keine Firmen.

        Die möchte wissen, wie die Webdesigner arbeiten und da die auch Fotos und Grafiken brauchen, arbeiten sie auch ganz bestimmt mit Photoshop

        Grafikabteilungen arbeiten oft mit Photoshop, ja.

        Oder wie willst du mit einem HTML Editor die Struktur und das Aussehen einer Seite "zeichnen" bevor du mit dem programmieren anfängst?

        Gar nicht, aber das will ich auch nicht. "Firmen" haben, je nach ihrer Größe, eine entsprechende Arbeitsteilung. Und die Entwicklung eines künftigen "Corporate Design" ist keine Sache für Entwickler und Prgrammierer, das erledigt eine andere Abteilung. Selbstverständlich wird da häufig Photoshop eingesetzt, manche geben die Design-Entwicklung aber auch an entsprechende spezialisierte Firmen ab - die oft genug auch mit Photoshop arbeiten, ist ja nun wahrhaftig keine schlechte Software. Die malen dann irgendwas, legen das dem Chef vor, sprechen es ab und packen das Ganze danach in einen "StyleGuide", also eine verbindliche Vorlage, wie die Seiten auszusehen haben. Es ist ihnen wurscht, wie der Template-Entwickler das umsetzt. Der kriegt nur gezeigt, was am Ende herauskommen soll, aber wie er das anstellt ist seine Sache. Photoshop braucht er dafür nicht.

        Sowas wird generalstabsmäßig geplant: erst kommt die Luftwaffe (Grafikabteilung) und macht alles kaputt, was sich nur kaputtmachen läßt. Dann kommen die Bodentruppen (Projektmanager) und ebnen mit schwerem Gerät den ganzen Schutt ein, bis alles schön plan und eben ist, danach rücken die internationalen Hilfsorganisationen (Programmierer und Webentwickler) an, die alles wieder hinstellen dürfen. Wenn sie fertig sind, wird in einem feierlichen Akt alles übergeben an den künftigen Besitzer (die Firma), und dann wartet man halt ab, bis der Besitzer sich zu einem unerträglchen und nicht mehr zeitgemäßen Tyrannen (der nur noch in Tabellen oder Frames denkt) entwickelt hat, bestellt bei der UNO ein Mandat und alles geht von vorne los.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. Tut mir Leid, aber ich verstehe nicht was du von mir möchtest. Ich glaube, ich habe relativ klar formuliert, wonach ich suche, du lieferst mir eine genaue Beschreibung wie Firmen arbeiten und vorher mahnst du mich an, dass du keine Firmen beauftragst. Was ich wissen möchte, sprichst du in keinser Weise an sondern deine seltsamen Ansichten. Ich würde dich bitten, das hier zu beenden damit das ganze nicht vom Thema abkommt, denn ich brauche Hilfe bei einer konkreten Sache.

          Wie auch immer. Gute Nacht. Und an alle anderen, hoffentlich könnt ihr mir helfen.

          Ciao

        2. Gar nicht, aber das will ich auch nicht. "Firmen" haben, je nach ihrer Größe, eine entsprechende Arbeitsteilung. Und die Entwicklung eines künftigen "Corporate Design" ist keine Sache für Entwickler und Prgrammierer, das erledigt eine andere Abteilung. Selbstverständlich wird da häufig Photoshop eingesetzt, manche geben die Design-Entwicklung aber auch an entsprechende spezialisierte Firmen ab - die oft genug auch mit Photoshop arbeiten, ist ja nun wahrhaftig keine schlechte Software. Die malen dann irgendwas, legen das dem Chef vor, sprechen es ab und packen das Ganze danach in einen "StyleGuide", also eine verbindliche Vorlage, wie die Seiten auszusehen haben. Es ist ihnen wurscht, wie der Template-Entwickler das umsetzt. Der kriegt nur gezeigt, was am Ende herauskommen soll, aber wie er das anstellt ist seine Sache. Photoshop braucht er dafür nicht.

          Deine Darstellung ist etwas verkürzt, um nicht zu sagen falsch. Corporate Design bezieht sich immer auf die gesamte visuelle Außendarstellung eines Unternehmens (also auch auf Produkte, Verpackungen etc.). Ein StyleGuide ist in der Regel medienspezifisch, also nur eine Teilmenge des CIs. Der StyleGuide ist auch keine Vorlage für den Entwickler/Programmierer, sondern für den Designer, der diesen bei seinen gestalterischen Entwürfen (z.B. für die Website) zu berücksichtigen hat. Du unterschlägst also mindestens einen wichtigen Zwischenschritt, der nämlich genau dafür da ist, um das folgende Szenario zu verhindern.

          Sowas wird generalstabsmäßig geplant: erst kommt die Luftwaffe (Grafikabteilung) und macht alles kaputt, was sich nur kaputtmachen läßt. Dann kommen die Bodentruppen (Projektmanager) und ebnen mit schwerem Gerät den ganzen Schutt ein, bis alles schön plan und eben ist, danach rücken die internationalen Hilfsorganisationen (Programmierer und Webentwickler) an, die alles wieder hinstellen dürfen. Wenn sie fertig sind, wird in einem feierlichen Akt alles übergeben an den künftigen Besitzer (die Firma), und dann wartet man halt ab, bis der Besitzer sich zu einem unerträglchen und nicht mehr zeitgemäßen Tyrannen (der nur noch in Tabellen oder Frames denkt) entwickelt hat, bestellt bei der UNO ein Mandat und alles geht von vorne los.

          Ein Pazifist spricht vom Krieg. ;)

          Cheers
          Cervantes

    2. Ich dachte eigentlich bis jetzt du kennst dich ganz gut aus.
      aber nach diesem beitrag denke ich fast du hast nichtmals grundkenntnisse vom webdesign.
      kann aber auch an der uhrzeit liegen.

      1. Ich habe es mir doch anders überlegt.
        Es lag an der Uhrzeit.

  2. Vielleicht ist Photoshop auch das falsche Werkzeug und Webdesigner arbeiten mit einem ganz anderen Tool?

    Photoshop ist schon genau das richtige Werkzeug für Dein Vorhaben. Grundvoraussetzung ist natürlich, dass man Photoshop richtig bedienen kann - dafür Tutorials zu finden sollte nicht schwer sein.

    Was Dich ja offensichtlich beschäftigt ist die grundsätzliche Herangehensweise. Der Grid-Ansatz ist eine Möglichkeit zum Ziel zu gelangen. Ein schönes Beispiel für diese Arbeitsweise findest Du hier:
    http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php
    (Unten auf der Seite gibts die "Grids are good"-Präsentation, die für Deine Zwecke recht hilfreich sein dürfte)

    In Ergänzung dazu kann das "Praxishandbuch Gestaltungsraster" empfohlen werden. Gibbet hier:
    http://www.typografie.de/verlagsverzeichnis/grafikdesign/571-5.html

    Vernünftige Rasterung ist ne gute Basis für gescheite Templates, aber kein Allheilmittel. Du wirst nicht umhin kommen, Dich darüberhinaus mit Themen wie Farbpsychologie, Typografie, Ergonomie, Usability etc. zu beschäftigen. Mein Tipp: schau Dich mal auf einschlägigen Websites  um (die sich speziell an Web-DESIGNER richten), nimm am Austausch in den Foren teil und tauche auf die Weise peu a peu in die Materie ein. Wenn Du Profi werden willst, such Dir zudem ein entsprechendes Studium.

    Salut
    Cervantes

    1. Hi,

      danke für deine Tipps. Ich glaube Profi will ich nicht werden, aber weiss ich noch nicht. Erst ist das nur Hobby. Ich möchte meine Seite komplett neu gestalten.

      Oh Yeeaahh! kannte ich schon. Auch mit "Farbpsychologie, Typografie, Ergonomie, Usability" habe ich mich schon beschäftigt, aber alles theorethisch. Was mein größtes Problem ist, das ganze praktisch umzusetzen. Die Ideen, die Umrisse der fertigen Seiten habe ich bereits im Kopf.

      Du sagst Photoshop ist richitg. Richard hat z.B. Fireworks erwähnt. Ich finde Photoshop etwas unpraktisch. Tutorials finde ich auch viele, aber es geht eher alles in eine andere Richtung wie Grafiken oder Fotos bearbeiten.

      Ich finde z.B. diesen Blog/Blogger ganz toll: http://www.andyrutledge.com/wall-street-journal-redux.php
      Wie macht er seine "Redux"? Wie geht er (oder allgemein Designer) dabei vor, welche Schritte sind zu tun? Welches Programm benutzt er (Photoshop, Fireworks oder doch was anderes?)?
      Wenn er Tutorials hätte, wie er zu den Endergebnissen kommt, wäre das genau die perfekte Antwort für mich. Leider hat er das aber nicht...

      Vielleicht ist es etwas klarer, was ich meine.

      Danke
      Ciao

      1. Du sagst Photoshop ist richitg. Richard hat z.B. Fireworks erwähnt. Ich finde Photoshop etwas unpraktisch. Tutorials finde ich auch viele, aber es geht eher alles in eine andere Richtung wie Grafiken oder Fotos bearbeiten.

        Zum Vergleich von Fireworks und Photoshop:
        http://de.wikipedia.org/wiki/Adobe_Fireworks

        Ich finde z.B. diesen Blog/Blogger ganz toll: http://www.andyrutledge.com/wall-street-journal-redux.php
        Wie macht er seine "Redux"? Wie geht er (oder allgemein Designer) dabei vor, welche Schritte sind zu tun? Welches Programm benutzt er (Photoshop, Fireworks oder doch was anderes?)?

        Also wenn Du die fertige Seite bereits im Kopf hast, brauchst Du doch nur noch die einzelnen Elemente (Navigation, Textelemente etc.) in Photoshop oder sonst wo zu erstellen und (ggf. mit Hilfe eines Rasters) anordnen. Verstehe nicht ganz, wo da das Problem ist - abgesehen von der Bedienung des Grafikprogramms selbst.

        Gruß
        Cervantes

        1. erstellen und (ggf. mit Hilfe eines Rasters) anordnen. Verstehe nicht ganz, wo da das Problem ist - abgesehen von der Bedienung des Grafikprogramms selbst.

          Vielleicht liegt das Problem wirklich da. Ich shließe das nicht aus. Dann versuche ich es weiter. Vielleicht finde ich irgendwo noch Tricks, wie man sich die Arbeit erleichtern mit Photoshop und Webdesign.

          Danke
          Ciao

  3. Tachchen!

    Unterscheide zwischen den Arbeiten, die grafikbasiert sind und dem
    eigentlichen Webdesign. Das "Gitter" muss im Kopf stehen, denn PS
    kann das nicht flexibel genug.
    Zwar gibt es im Webdesign durchaus solche Gitter, allerdings sind
    viele Einheiten daraus flexibel oder können es schnell werden.
    Dann muss die grafische Umsetzung dies auffangen können ... dies
    klappt aber nur mit sinnvollem Seitenquelltext, der viel Know-How
    und wahrscheinlich auch Erfahrung erfordert.

    Letztlich sind das einfach zwei Paar Schuhe:

    1. Der Quellcode, der auf der einen Seite sinnvoll, richtig und
    maschinenlesbar sein soll, auf der anderen Seite aber schon viele
    deiner gestalterischen Möglichkeiten eröffnet und/oder beschneidet.

    2. Die grafische Aufwertung des Gesamtkonstruktes, die sicherlich
    ihre Umsetzung in PS erfahren kann, wenn man sich bewusst ist,
    welche Umstände/Flexibilitäten PS einfach nicht simulieren kann.

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    Smartbytes Webdesign in Oberhausen