»Layout Grid Bookmarklet« als Webdesign Hilfe
Nachdem Khoi Vinh früher und Christian Watson aka Smiley Cat aktuell in Using a Background Image Grid to Lay Out Your Web Site über die Verwendung eines Gitternetzes im Hintergrund einer Webseite berichtet haben, kam Andy Budd auf die glänzende Idee, das Layout Grid Bookmarklet zu gestalten, das diese Idee aufgreift. Das Bookmarklet lädt eine Gitternetz-Grafik in den Hintergrund des Bodys der jeweiligen Site. Eine nette Idee, die sich als nützlich erweisen könnte.
Werbeunterbrechung
Kommentare und Feedback (12)
Folgende Seiten verweisen auf diesen Beitrag
Werbung
Vorheriger Artikel: Iconfactory Redesign in Progress, nächster Artikel: Screencast: Weniger Ablenkung an Windows Desktops
24.07.2006, 21:34
Ha, witzig! Ich habe mir letze Woche die Arktikel von Mark Boulton ( Five simple steps to designung grid systems) ausgedruckt und mit grossem Interesse gelesen! Die Idee mit dem Grid im Hintergrund fand ich schlichtweg genial. Eigentlich wundere ich mich, dass nicht schon früher darauf hingewiesen wurde… Ich habe daraufhin ein Test-Layout mit einem Grid im Hintergrund entworfen. Super Sache, wirklich!
25.07.2006, 03:18
boah! wie lange hat ein jeder von uns nach soetwas gesucht! danke für den link, das werden sicher viele benutzen in zukunft!
nur schade das es nicht geeignet für dunklere seiten ist!
25.07.2006, 07:44
Diese Hintergrundgrafik finde ich als Webdesigner das Überflüssigste in meiner Arbeit überhaupt. Wenn ich ein Design erstelle, dann mache ich das in Photoshop – einzig dort benötige ich Hilfslinien. In HTML und CSS arbeite ich keineswegs in Pixeln, sondern ausschließlich in em und %.
Und selbst wenn ich einmal eine gerade Linie brauchte, schiebe ich mir einfach mal fix ein Fenster darüber. ;-)
25.07.2006, 08:25
E sist immer wieder schön, wenn nette Hilfsmittel im Internet die Arbeit ein klein wenig besser, schneller machen, indem sie alternative Möglichkeiten anbieten. Das schöne ist eben, man muss es nicht nutzen. Aber die Zeit kommt, wo der Tipps ggf. wirklich hilfreich ist. Da bin ich mir sicher.
Dass Macx als Profi das Tool nicht braucht, mag uns verblüffen, aber auch damit können wir leben. Ich hatte allerdings schon gehofft, dass er bei der Übung die Pixel aus dem Kopf visuell ermitteln und berechnen kann. Aber es sind wohl eben noch keine Meister vom Himmel gefallen. :))
@Alexander:
Code ansehen, Grafik downloaden, invertieren und die Farben im Ton anpassen. Dann brauchst Du nur noch das Bookmarklet editieren und Deine Grafik anpassen. Dann sollte es auch mit dunklen Layouts passen!
25.07.2006, 08:34
Für eigene Projekte, bei denen ich keine Grafik zur Veranschaulichung des zu gestaltenden Layouts brauche um sie jemandem zu zeigen, arbeite ich in Photoshop nur die Grundelemente wie Logo, Navigation, Hintergründe aus und erstelle nie die komplette Voransicht. Den Rest habe ich im Kopf.
Ich habe das Grid in der Form noch nicht probiert, bei der letzlichen Positionierung von Elementen und dem Finetuning stelle ich es mir aber sehr hilfreich vor. Was mich verblüfft, ist dass ich so lange an einer so einfachen Lösung vorbei gearbeitet habe.
25.07.2006, 09:30
Ich kann die Meinung von Macx absolut verstehen. Doch finde ich, dass es keine einfachere und bessere Möglichkeit gibt Layoutänderungen vorzunehmen bzw. mit dem Layout zu spielen. Vorausgesetzt natürlich das man Pixel und nicht % Angaben gebraucht. Bei em’s und % macht das ganze verständlicher Weise weniger Sinn, aber das ist dann ein anderes Thema.
Div’s verschieben, umpositionieren, neue Elemente einbinden und mit den Positionen spielen, geht so halt viel einfacher. Zudem hat man eine Kontrolle und diese lässt sich ja schnell ein bzw. ausschalten.
25.07.2006, 09:31
Zu diesem Thema möchte ich auch auf den Screenruler hinweisen. Der leistet mir seit Jahren gute Dienste. Leider gibt es den nur für Windows!
25.07.2006, 13:03
Besser als der Screenruler (weil man 2 Dimensionen aufziehen kann) ist diese Erweiterung für Firefox. Kann dann aber allerdings auch nur innerhalb des Browserfensters benutzt werden.
http://www.kevinfreitas.net/extensions/measureit/
Den Grid halte ich übrigens auch für überflüssig, oder habe den Nutzen für mich eben noch nicht erkannt. Bei mir tuts meistens das frei floatende pixelgenaue Auge ;-)
25.07.2006, 13:06
Da will ich nur noch einmal schnell hinweisen, dass unser aller Lieblings-Erweiterung für Firefox, die Web Developer Extension, auch ein Lineal mitbringt.
25.07.2006, 15:23
Ich finde Xscope für Mac immer noch unschlagbar :)
25.07.2006, 19:34
Ich halte das Ding für gefährlich.
Den Satz muss ich erklären, denke ich.
Sicher mag es hin und wieder von Nutzen sein. Aber ich sehe darin die Gefahr, noch mehr ungeeignetes Pixel-Design zu machen als es ohnehin schon gibt. Es könnte verleiten, vor allem Leute, die den Unterschied zwischen Web und Print immer noch nicht wirklich verstanden haben.
Ich vermute die Mehrzahl der Nutzer einfach mal in dieser Gruppe, natürlich ohne dass ich es wirklich weiß.
Für die anderen kann es hier ud da vielleicht auch eine Hilfe sein. Ich kann mir vorstellen, dass man in Seitenköpfen durchaus mal Abstände an ein Logo oder etwas ähnliches anpasst.
Ob man es dafür braucht, oder ob man die Grafik kennt und mal eben im Grafikprogramm nachsieht, wo man z.B. Texte in Bezug darauf ansetzt, ist sicher Geschmackssache. Jeder hat seinen Arbeitsstil, und den soll er auch haben. Ich denke, ich werde es eher weniger verwenden.
Für andere Bereiche innerhalb einer Seite fällt mir im Moment nicht ein, wo man es nutzen könnte.
Verblüffend einfach gemacht ist, das muss man dem Autor wirklich lassen. :-)
29.07.2006, 14:44
@franXX:
Das Gegenstück zu Screenruler für den Mac heißt “Free Ruler”. Das Teil gab es schon für OS 9.
Wer das Programm “ArtDirectorsToolkit” (war auf meinem G5 vorinstalliert) sein eigen nennt, besitzt bereits ein Lineal. Und zahlreiche weitere nützliche Tools für Screen-, Web- und Grafikdesign sowie für DTP.