Am 1. Mai 2018 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Illustrator CC für Webdesigner: Kernkonzepte

Progressive-Entwurf oder Graceful-Degradation-Entwurf

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Video zeigt die Vor- und Nachteile der zwei Design-Entwurfsmethoden "Progressive" und "Graceful Degradation" auf und beschreibt, wie Sie mit Illustrator beide Varianten nutzen können.

Transkript

In diesem Video zeige ich Ihnen den Unterschied zwischen der Graceful Degradation und dem Progressive Design als Entwurfsvorgabe oder Vorgehensweise. Es handelt sich hier um zwei unterschiedliche Herangehensweisen, wie Sie Ihr Design für unterschiedliche Geräte aufbauen. Zu dieser Übung gibt es zwei Übungsdateien. Die können Sie öffnen. Die haben die Namen Graceful und Progressive. Was habe ich hier gemacht? Wir sehen also hier ein Groblayout, was schon mal ziemlich groß aussieht oder zumindestens breit aussieht und das befindet sich in der Datei Graceful.ai. Anders sieht es aus bei Progressive. Dort haben wir das Ganze etwas schmaler dargestellt und schauen wir uns das mal an, indem wir ein wenig Herauszoomen. Dann sieht man, hier gibt es unterschiedliche Zeichenflächen, die die unterschiedlichen Geräte abbilden sollen. Da haben wir also hier ja ungefähr die Dimensionen, wie sie ein älteres Smartphone, ein iPhone aufweisen und dann hier ein Tablet, wie das iPad Air und hier die wirklich gigantische Fläche eines 5k Retina-Displays von Apple Das Gleiche finden wir bei der Graceful-Datei, auch hier, wenn ich herauszoome haben wir den Desktop, das iPad und das iPhone. Also, beides ziemlich ähnlich. Wo ist nun der Unterschied zwischen diesen beiden Dateien? Zunächst einmal legen Sie sich die einzelnen Artboards, also die Zeichenflächen an und haben dann für jedes dieser Geräte unterschiedliche Größen und Dimensionen. Bei der Graceful-Degradation-Vorgehensweise gehen Sie von dem breiten, von dem größten zur Verfügung stehenden Platz aus und überlegen sich nun, welche dieser Elemente sollen in die nächstkleinere Fläche übertragen werden und von hier aus wiederum in die nächstkleinere Fläche. Bei dem Progressive-Vorgehen da macht man es genau umgekehrt. Da haben wir hier die kleinere Vorgehensweise, dass wir also auf dem geringsten zur Verfügung stehenden Platz uns überlegen, was muss da unabdingbar sichtbar sein und wie muss es aussehen und können uns dann Gedanken machen, was auf der nächstgrößeren und auf der daraufhin folgenden nächstgrößeren Fläche erscheinen muss und wie das vor allen Dingen auch aufgebaut sein muss. Im Grunde kann man auch die Begriffe austauschen, indem man sagt, in dieser Vorgehensweise haben wir einen Bottom-up-Entwurf, also vom, von Grund auf auf die nächsthöhere oder breitere Fläche und bei Graceful Degradation haben wir einen Top-down-Entwurf, von der größten bis zur kleinsten Fläche. Mein persönlicher Favorit ist in den meisten Fällen diese Vorgehensweise, aber für welche Sie sich entscheiden, das können Sie ganz alleine selber auswählen, was Ihnen am besten liegt oder was auch einfach der Auftrag oder die Anforderung am besten mit sich bringt Ich persönlich mag diese Vorgehensweise und diese möchte ich Ihnen auch einmal demonstrieren. Ich gehe also ein bisschen näher hier rein. Konzentrieren wir uns zunächst mal auf die Portierung von dem iPhone zum iPad. Wir haben hier Bereiche wie zum Beispiel ein Logo, eine Logo-Sektion, einen Menübereich, dann ein großes Bild oder einen Header, ein Main-Bild, ein Main-Image, zwei Content-Bereiche und einen Footer. So, und ich gehe mal hin und markiere mir all diese Elemente und kopiere das in die Zwischenablage mit Steuerung C oder Command C und dann klicke ich diese Zeichenfläche an und füge das Ganze einfach hier wieder ein. So, und jetzt kann ich natürlich so vorgehen, dass ich mir das einfach alles größer ziehe, also das so anpasse, dass es halt von den Anordnungen identisch ist, aber halt von den Dimensionen her nicht passt. Da wären wir im Grunde jetzt bei einem fließenden Layout. Ich möchte das Ganze aber ein bisschen anders nutzen, weil wir ja ganz andere Flächen, ganz andere Dimensionen zur Verfügung haben. So, auch hierbei möchte ich das Logo gerne so ein bisschen hier oben die Ecke bringen, mache das aber etwas breiter, das passt da etwas besser rein, aber erstrecke diesen ganzen Header über 100% dieser Breite. Das Gleiche mache ich mit dem Footer, auch der soll über die gesamte Breite gehen, also ich setzte den hier unten in die Ecke, so, und habe das Schonmal platziert. Das Bild hingegen hier, das soll allerdings etwas anders angeordnet werden, nämlich auch über die Breite natürlich, also das passt schon, aber ich kann es ein bisschen größer machen so, und hier bei diesen Elementen dort würde ich ganz gerne die Breite natürlich nutzen und in dem Moment, wenn ich jetzt hier die Breite nutze, also das Ganze korrekt anordne, machen wir das mal ein bisschen vom Platz her weg, so, dann habe ich natürlich auch dadurch, dass ich die Breite mehr zur Verfügung habe, die Möglichkeit, das Ganze hier in der Höhe knapp zu halbieren, aber die Breite dafür zu nutzen, So, ich mache es mir jetzt einfach und kopiere einfach diesen Block noch einmal so, und habe das Ganze jetzt hier untereinander. So, und damit ich noch etwas hinzufügen kann zum Beispiel ein paar Bildchen, die auf dem Smartphone überhaupt keinen Platz mehr haben oder ein paar Teaser, die einfach ins Auge fallen, packe ich mir hier nun noch so ein paar Rechtecke drunter, die das demonstrieren, dass ich da einfach noch mehr Fläche habe und, ja gucken wir mal, ob wir das so spontan schnell angeordnet kriegen und noch einer, so ungefähr, ja, ein bisschen muss ich es anpassen. Sie sehen, da hilft mir natürlich auch Illustrator hervorragend dabei. Ich kann es auch ausrichten lassen, all das ist auch möglich. Ich denke zur Demonstration reicht das aus. Sie sehen, was ich meine. Da haben wir noch so eine kleine Differenz. So, sieht es doch ganz gut aus. Also hier kann man schon bei dem progressiven Vorgehen erkennen, dass ich also bei dem kleinsten Layout mir überlegen muss, das ist unabdingbar wichtig, da muss die Maus und mit der... beziehungsweise da muss ich mit dem Daumen hinkommen, das muss ins Blickfeld und hier habe ich nur andere Fläche. Ich könnte auch zum Beispiel sagen, dass mir das sogar noch zu klein ist und dann lege ich das hier raus und ziehe das einfach größer und würde quasi die weiteren Blöcke nach unten ebenso aufbauen. Also hier denke ich, wird es deutlich, wie man da vorgehen kann. Beim nächstgrößeren Prozess, da habe ich schon mehr Fläche. Das heißt, ich kann weitere Elemente hinzufügen, die hier einfach zu viel wären und auch so keine Ausdruckskraft haben. Also es geht ja wirklich ums Groblayout. So und das Gleiche kann ich nun auch beim nächsten Schritt machen. Ich zoome mal raus und jetzt wirklich die Wahnsinnsfläche eines IMAX nutzen und auch da packe ich das Logo wieder in die Ecke, mache es ein bisschen breiter, ein bisschen höher, wieder angepasst. Also das heißt, die ersten Schritte sind ganz häufig durchaus auch nichts anderes wie Größenveränderungen so, und jetzt möchte ich aber komplett ein anderes Aussehen haben, weil, ja auf dem Desktop, da würde ich ganz gerne erstmal ein bisschen mehr Freifläche lassen, und dann aber auch mein Bild, was ja ganz viel aussagen soll, ja also dieses Hauptbild zum Beispiel in der Größenordnung darstelle. So, und dann nehme ich die Texte, die nehme ich jetzt hier seitwärts passe mal das ein bisschen größer an, so ungefähr und platziere diese Abschnitte hier. So, das kann man mal gerade entsprechend ausrichten und ja oder, ja lass mal, es reicht ja im Prinzip hier an der Stelle so ganz grob passt das. So, den braucht man nicht mehr, den Footer zum Beispiel, den möchte ich hier unten natürlich auch am unteren Rand haben, aber mit einem kleinen Unterschied. Er soll diesmal richtig groß werden. So, und ja jetzt muss ich im Grunde mir nur noch die Frage stellen, was mache ich mit diesen Teilen oder ziehe ich sie wirklich so groß, dass sie über die komplette Fläche gehen. Ich lass es jetzt einfach mal so einigermaßen angepasst, obwohl ist es mir doch viel zu groß, nehmen wir das hier mit hinzu, dann könnte man hier, um das zu verdeutlichen einfach weitere Aufzählungspunkte setzen, so in der Richtung. Und ich denke hier wird es deutlich, wie man da vorgehen kann und wie man eben ja, mit den unterschiedlichen zur Verfügung stehenden Flächen und Dimensionen auch tatsächlich Inhalte anders platziert. Meiner Meinung nach ist die Vorgehensweise vom Kleinsten zum Größten deswegen gut geeignet, weil ich mich hier konzentriere darauf, was ist das Minimum, um mein Design, um auch meine Informationen transportieren zu können. Hier kann ich schon mit mehr Dingen spielen, aber ohne dass ich mir Sorgen machen muss, dass ich hier etwas vergessen habe. Gehe ich vom Großen zum Kleinen, dann ist es manchmal sehr schwer, weil hier funktioniert mein Design, mein Layout, meine Benutzerführung und hier habe ich keinen Platz mehr. Ich mache also einfach etwas kleiner, weil ja ich mich darauf konzentriert habe, das ist meine wichtige Aussage und die will ich auch hier haben. Also für mich persönlich ist der Weg von klein nach groß viel leichter umzusetzen, also das Progressive Design als Entwurfsmodell zu verwenden und das habe ich Ihnen vorgestellt. Welche Variante Sie auswählen, das liegt natürlich bei Ihnen.

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!