Grundsätzliche Frage: Web-Design mit Adobe XD?

[draupnir]

Hallo zusammen,
in der guten alten Zeit habe ich meine Websites in Adobe Fireworks grafisch gestaltet und vorbereitet. Meine div-Boxen dann manuell in Dreamweaver mit XTML und CSS2 erstellt und so weiter. Seit dem ist viel Zeit vergangen und viel Programm gekommen. Ich möchte das grundsätzliche manuelle Coden vermeiden und von einer grafischen Gestaltung zu brauchbaren HTML/CSS-Dateien kommen, an denen man dann noch genug rum schrauben muss.

Meine Fragen dazu:
1. Es ist sinnvoll sich in XD einzuarbeiten, um Websites von Grund auf vorzubereiten?
2. XD hat von Hause aus kein HTML5/CSS3-Export. Es gibt Plug-Ins, die das machen? Welches ist empfehlenswert?
3. Gibt es ein besseres Programm/Programmkombination um von einer grafischen Gestaltung zu HTML/CSS-Datei zu kommen?

Danke für eure Antworten im Voraus.

P.S. ich arbeite auf macOS 10.14 und am Ende sollen TYPO3-Website entstehen.

 

[lachender_engel]

1. Es ist sinnvoll sich in XD einzuarbeiten, um Websites von Grund auf vorzubereiten?

Für Deinen Zweck, nein.

2. XD hat von Hause aus kein HTML5/CSS3-Export. Es gibt Plug-Ins, die das machen? Welches ist empfehlenswert?

Nein.

...am Ende sollen TYPO3-Website entstehen.

In dem Fall würde ich sagen ist Dein Vorhaben schon beendet. TYPO3 ist ein CMS-System Dort werden Inhalte vom Layout getrennt. Entsprechend müssen dort PHP-Blöcke eingebunden sein. Ich wage es zu bezweifeln, dass es einen Konverter gibt, der aus einer Grafik ein fertiges TYPO3-Theme macht.

 

[draupnir]

In dem Fall würde ich sagen ist Dein Vorhaben schon beendet. TYPO3 ist ein CMS-System Dort werden Inhalte vom Layout getrennt.

Danke für die Antwort, aber auch für TYPO3 brauche ich ein Layout. Statt der <p>- und andere Inhalte stehen dort dann Variablen, die von TYPO3 gefüllt werden. Trotzdem muss das HTML/CSS-Gerüst ja passen, syntaxfehlerfrei und barrierefrei sein.

 

[Myhar]

Dann wirst du nicht darum herumkommen jemanden zu bezahlen dir diese Templates zu erstellen. Der Grund warum es kein "drag and drop" Editoren mehr gibt ist schlichtweg der, dass diese dies kein wirklich syntaxfehlerfreies, barrierefreies HTML produzieren können.

Sie können tabellen erstellen und divsuppen generieren, aber das ist für eine moderne Website nicht zielführen.

Alternativ kannst du dir auch überlegen ein fertiges Theme/Template (wie auch immer das bei Typo3 heißt) zu verwenden/kaufen und dieses dann mit deinem Inahlt zu füllen.

 

[groove]

Wenn du niemanden im Team hast, der mit TYPO wirklich umgehen kann, kann ich dir nur raten, die Finger davon zu lassen. TypoScript ist eine geniale, aber ganz eigene Welt. Von normalem Coding weit entfernt.
lg

 

[draupnir]

Danke für Eure Rückmeldungen. Das das Layout am Ende in TYPO3 laden soll, ist für meine Fragestellung völlig unerheblich. Den Schritt von HTML/CSS-Dateien zu einem TYPO3 Template schaffe ich.
Meine Frage bezog sich auf einen cleveren Weg ohne manuelles Coden von einer grafischen Darstellung der Website zu HTML/CSS-Dateien.

In zwischen habe ich einige Export-Plug-Ins in XD probiert und fand keines, was meinen Vorstellungen entspricht.
Ich habe meine Layout zum Texten in Illustrator, bestehend nur aus Rechtecken erstellt, aber siehe da, von dort gibt es keinen (brauchbaren) Weg nach HTML. das war früher auch mal anderes. Einzig der CSS-Export ist gut. Doch der alleine hilft nicht wirklich weiter.

 

[Myhar]

Mir ist kein Programm bekannt welches das machen kann. Selbst dreamweaver bietet das ja nicht mehr wirklich an. Einfach deshalb weil man so keine sinnvollen, angenehm zu bedienenende Websites erstellen kann.
Was ich dir empfehlen kann: Verwende ein Framework für Layout wie zB bootstrap. Damit hast du dann den Vorteil dass du dir keine Gedanken machen musst ob es auch auf tablet/mobile passend aussieht.
Früher war das deshalb anders weil da niemand darauf geachtet hat dass es auf jeder Auflösung gut aussehen muss.
Du kannst natürlich auch weiterhin die Programme von früher verwenden, dann musst du dich aber darauf gefasst machen dass für zeitgemäße Geräte die Website wohl eher nicht passen wird.

Ansonsten verwende einen page builder, für Wordpress gibt es da zB elementor und ähnliches, gibt es da für typo3 nichts?

 

[draupnir]

Ich habe mich wieder rein gearbeitet und das alte Problem entdeckt: Die Programmen, die HTML/CSS aus grafischen Darstellungen umschreiben, nutzen im CSS den Befehl "position: absolute". Klar, das ist einfach und sieht erst mal richtig aus. Ideal für eine Präsentation von Seiten mit fixen Inhalt. Aber für Textseiten, die sich ausdehnen und/oder scrollen ect., ist das nicht brauchbar. Ein Anpassen in float-div-Boxen ist unumgänglich, also doch manuelles coden.

Ich schauen mir aber noch an, wie Grafikprogramme responsive Webseiten erstellen. Vllt. ist da der Trick drin versteckt, daß es ohne "position: absolute" geht.

J.

 

[Aeon-112]

Wie schon bereits erwähnt solltest du auf vorhanden Frameworks zurückgreifen, um das manuelle codeing wirst du in der heutigen Zeit nicht drum herum kommen. Bootstrap ist sehr einfach in der Handhabe und sehr mächtig, damit kannst du in wenigen Minuten ein sehr flexibles Grundgerüst bauen. Was ich noch empfehlen kann ist mal bei w3schools vorbei zu schauen, da gibt es gute Tutorials für Bootstrap.