Entwerfen von Websites im Browser (Keuchen!) [Geschlossen

Question

Ich interessiere mich für die Meinungen der Menschen zu den Vor- und Nachteilen oder geradezu "Hell No's" über das Entwerfen von Websites im Browser und den Weg von Photoshop, Feuerwerk usw.

Ich habe einen Relaunch für meine Website entworfen und im Browser ausprobiert, und ich schaue nicht zurück.

Zum Beispiel (ich verwende ein 960px -Gitter mit 12 Spalten):

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

Das Design ist nicht nur wieder Spaß geworden, sondern es war noch nie einfacher, Gitter, vertikaler Rhythmus, selbst das goldene Verhältnis zu verwenden. Ganz zu schweigen davon, dass es die Lücke zwischen Design und statischer Codierung vollständig vernichtet.

Was denkst du?

Answer 1

Wollen Sie damit sagen, dass Sie im Browser (von HTML/CSS) zuerst Drahtrahmen von Seiten erstellen und dann ein Design anwenden? Das tue ich (und 37signals folgt diesem Gedanken zu).

Meiner Meinung nach ist es für Entwickler gut, statische Wireframes zu erstellen, ohne Photoshop zu berühren, da die Website sofort verwendbar ist und es nicht verschwendet wird, wenn die Dinge genau richtig aussehen.

Außerdem gibt es auch keine große Designstreifen mit Programmierern - ich überlasse das den Menschen, die jeden PS -Befehl unter der Sonne kennen :)

Ich benutze auch das Yui -Gitter CSS -Framework zum schnellen Erstellen von Layouts.

Answer 2

Nun, mit dem Browser zu arbeiten, ist nicht das Schlimmste auf der Welt, aber es gibt ein paar "Hölle nein":

1) Unterlassen Sie Entwerfen Sie Ihre App mit IE. Verwenden Sie Chrome oder Firefox. Das nicht komplizierte Verhalten von IE kann Sie täuschen, zu denken, dass Ihr CSS gültig ist, wenn es wirklich nicht ist. Ihr primärer Anwendungsfall für den IE testet Ihre Website in IE.

2) Nennen Sie Ihre Klassen nicht so, wie sie aussehen, wie Sie es in Ihrem Beispiel getan haben.

Answer 3

Nicht!!

Wenn Idesign Steve lernt, direkt im Browser zu entwerfen,

1. Innovation wird leiden: Steve kümmert sich nicht um die Einschränkungen von CSS/HTML/so weiter. Es ist frei, die beeindruckendste Seite, die die Menschheit noch nicht gesehen hat, zu schützen. Es ist der durchschnittliche Programmierer Joes Pflicht, die Grenzen von CSS/HTML/so weiter zu übertreffen, um Deisgn rechtzeitig zu genehmigen, und sehen, dass es von einem dummen Browser, der zufällig eine gute Marktanteilsgröße hat, kurz vor der Frist auf Bits gerissen hat. Wenn Sie sich mit dem Schreiben von CSS wie dem Schreiben von Assembly -Code schreiben. Selbst die grundlegendsten Dinge zu erreichen (Flüssigkeits -Multi -Säulen -Layout jemand?) Ist lächerlich hart und macht Sie für eine Weile hoch.
2. Der Coolness -Faktor von Steves verringert sich: Kein einziger Entwickler, von dem ich weiß, dass es ein Wysiwyg -Tool verwendet, um HTML/CSS zu generieren oder dies zu akzeptieren. Wenn Sie nur einen Texteditor brauchen, sehen Sie nicht so cool aus. Wenn ein Kunde Steve's Monitor ansieht und ein paar Text anstelle von mehreren Fenstern, hundert kleine lustige Symbole und einen halb fertiggestellten farbenfrohen Entwurf sieht, kann er auch denken: "Mein 7 -jähriger Enkel kann auch Sachen eingeben. .. ".
3. Joe hat immer noch mehr Einschränkungen als Steve: Site sollte zugänglich sein, das Layout sollte flüssig genug sein, um alle Arten von Ausgabe zu ermöglichen.

Seien Sie ein guter Teamkollege und starten Sie jetzt Photoshop. Joe braucht seinen Job, um seine Rechnungen zu bezahlen.

Answer 4

Nun, für jemanden mit meiner Konstruktionsniveau Inkompetenz ist es eine weiße Board -Skizze und dann direkt in HTML und CSS.

Trotzdem sehen meine Websites schrecklich aus ...

Answer 5

In den letzten Websites, die ich gemacht habe, habe ich beide Ansätze verfolgt. Jedes Mal hat die Seite, die direkt in HTML/CSS entworfen wurde, viel weniger Arbeit gekostet, war jedoch eine viel weniger ansprechende Website. Wenn Sie sich für eine attraktive Seite interessieren, beginnen Sie in Photoshop. Andernfalls werden Sie zu oft Abkürzungen in Ihrem CSS einnehmen. Eine Idee kann schneller erstellt werden und ist in Photoshop viel flexibler, um mit Ihren Ideen zu experimentieren und eine visuell bessere Website zu finden.

Answer 6

Ich entwerfe nie Websites in Photoshop. Ich gehe direkt von physischen Skizzen zu HTML und CSS. Ich finde es schneller und Sie werfen nicht etwas weg, an dem Sie stundenlang gearbeitet haben (die Photoshop -Datei).

Answer 7

Ich habe mich entschieden, bei Wireframes zu bleiben und von Papier direkt in den Browser zu entwerfen. Natürlich ist es das, wofür ich mich funktioniert, und es hat mich zu einem viel kreativeren Designer gemacht.

Obwohl ich gerne meine eigenen CSS -Bibliotheken dafür benutze, schauen Sie sich an Google Blueprint, und auschecken Dieser Artikel von Web Designer, Mark Boulton.

Answer 8

Auf keinen Fall!

• Sie richten die "Tabellen für alles" -Fehler wieder und verwenden nur Klassen anstelle von Tabellen.
• Sie mischen Präsentation (wo stelle ich das) mit Inhalten. Ihre Klassen sagen nicht, was das ist, sie sagen, wohin sie setzen sollen.
• Ihr Design hat eine feste Größe. Es fließt nicht mit der Fenstergrößen, sodass entweder horizontaler Scrollen oder ein großer Weißraum auf der rechten Seite erforderlich sind.

Aber ich verstehe nicht, warum jemand Photoshop erwähnt. Es ist fast das letzte Tool für Webdesign, vielleicht ist Illustrator das einzige, der dafür noch weniger geeignet ist.

Answer 9

Ich habe festgestellt, dass Sie, obwohl eine physische Skizze Sie auf dem richtigen Weg für ein Design starten kann, aber im Adobe Illustrator weitaus besser aussehende Layouts machen können (was viel einfacher zu bewegen ist als in Photoshop). Sobald Ihr Design abgeschlossen ist, verwenden Sie Photoshop, um es aufzuschneiden.

Answer 10

Eine zu berücksichtigende Meinung ist, für wen Sie entwerfen. Wenn Sie eine Website für einen Kunden entwerfen, kann es hilfreich sein, schnelle Mock -Ups in Photoshop zu machen, damit sie das Layout kennen und sich bei Ihrem Design abmelden können. Sobald der Kunde auf ein Design zugestimmt hat, erstellen Sie einen Drahtrahmen, der die Elemente von Ihrem Mock nach oben entspricht, und dann können Sie Ihre Elemente spleißen, für die tatsächliche Bilder direkt von Ihrem Schein nach oben erforderlich sind.

Wenn Sie diese Methode befolgen, müssen Sie alle verfügbaren Designelemente berücksichtigen, mit denen Sie Ihr Mock implementieren können, und sicherstellen, dass Sie sie gut gestaltet und semantisch zusammenstellen, nicht nur etwas, das die Arbeit erledigt.

Answer 11

Kompass, speziell Blaupause/Semantik, hilft sehr, wenn Sie im Browser entwerfen. Ich mag es auch, Layout und Stile in verschiedenen Dateien zu behalten, damit ich die Stile leichter entsorgen kann, die ich nicht mag, wenn ich den Drahtmodell an einem Ort aufbewahre. Ich würde auch empfehlen, Farbpalletten zu verwenden und an einer Schriftskala zu komponieren. Beide sind nützlich und einfacher mit SASS -Variablen zu erreichen.