Workflow ‒ Mockup

[Greasan]

Eine Grundsatzfrage:

Welche Vorgehensweise nutzt ihr bei einem Mockup, also das letztendliche Layout vor der Umsetzung?

Viele arbeiten mit Photoshop, manch einer zieht Illustrator oder gar Fireworks vor. Vielleicht sogar Dreamweaver. Oder geht jemand den direkten Weg und gestaltet im Browser, wie es gerne mit dem Schlagwort Responsive Webdesign angepriesen wird ‒ wenn ja, welche Software/Tools werden dafür genutzt?

Ich selbst bin hin und her gerissen zwischen Dreamweaver ‒ und Illustrator sowie Photoshop als Rückendeckung ‒ und dem Gestalten im Browser. Bei letzterem gibt es jedoch die interessante Frage, womit? Ein Framework wie Bootstrap, eines der zahlreichen Layout-Tools wie Webydo oder Typecast, gleich ein CMS mit einem guten Theme als Grundlage verwenden oder komplett per Hand coden?

Vielleicht mag jemand sein Betriebsgeheimnis Workflow näher erläutern.

 

[Micky261]

Hi Greasan,

ich nutze für MockUps meistens Pencil (http://pencil.evolus.vn/).
Ist auch als Erweiterung für den FF verfügbar. Es bittet eigentlich für alle Bereiche des Webdesign passende Elemente, auch für Android und iOS. Man muss sich allerdings erst ein wenig einarbeiten und es ist auf Englisch. Leider gibt es ein paar Unklarheiten und ein oder zwei Programmierfehler, die aber nicht weiter im laufenden Betrieb auftreten. Ich habe bisher einige MockUps damit umgesetzt und bin nach dem ersten Fehlschlag (wie gesagt Einarbeitungszeit von Nöten) gut zurechtgekommen.

Wobei ich den Code lieber selber schreibe und das obige nur als Vorlage nutze.

Viele Grüße
Micky

 

[cebito]

Ist 'ne Einstellungssache. Hab vor "Jahrtausenden", als die Wysiwyg - Editoren noch grottenschlechtesten Code schrieben mal damit gearbeitet. Das war meine Lernphase. Inzwischen sind die zwar besser, fabrizieren aber immer noch unnötigen Code und kryptographische ID's und Klassen.
Ich schreib lieber von Hand, da weiß ich, woran ich bin, wo und wie ich welchen Mist fabriziert hab. ... wenn man ein mal drin ist, geht das auch sehr fix und die spätere Wartung ist auf jeden Fall 1000 mal angenehmer

 

[afr0kalypse]

Also zuerst erstelle ich ein Wireframe auf Papier um mir das grundlegende Layout zu erstellen.
Wenn ich das habe zeichne ich entweder in Inkscape / Gimp / PS vor bis ich ein passendes Design habe.
Nen Clickdummy erstelle ich dann mobile-first im Browser. Den Code schreibe ich noch komplett von Hand. Bin mir einfach nicht sicher, ob Bootstrap etc. nicht immer noch zu viel Funktionen liefern, als man wirklich benötigt.

 

[Dennis Kovarik]

Mockups erstelle ich für meinen Teil mit Balsamiq Mockups oder Photoshop, direkt im Editor/Browser oder auch mal klassisch auf Papier. Ist auch immer situationsbedingt oder vom Kundenwunsch abhängig. Aktuell schaue ich mir auch Macaw: The Code-Savvy Web Design Tool an. Frameworks sind schön, nützlich und zeitsparend. Ich schreibe aber auch lieber von Hand und verzichte, wenn es geht, auf jegliche Frameworks.

 

[Pixelverwender]

Am Anfang steht das gute alte Papier nebst Bleistiften, Radiergummi und einem grooßen Satz Buntstiften.
Die Umsetzung erfolgt (je nach Bedarf) in PS, Illu und zu 95% HTML zu Fuß.

 

[Greasan]

Danke für die bisherigen Antworten. Hilft mir sehr.

Hat jemand Erfahrung mit Edge Reflow und Edge Code?
Trotz Preview scheinen das bereits anständige Tools zu sein, was meint ihr?