Tools für Webkonzept, Webdesign, Usability und Prototyping gibt es wie Sand am Meer. Der erste Schritt besteht also im Eingrenzen der Tools die wir uns ansehen wollen. Und damit fängt das Problem schon an…
Die Ausgangssituation
Für uns war es wichtig, dass wir die Tools in unsere Workflows integrieren können und dabei bestehendes Know-how mitnehmen können. Software-Wechsel können nämlich recht aufwändig sein. Vor ein paar Jahren haben wir in der Agentur mit XPress, Freehand und Golive gearbeitet. Heute arbeiten wir Mit Adobe CS6 und CC und setzen hier und dort auf andere Softwares. Dazu gehören zB. FinalCut, Motion, Compressor, DaVinci Resolve, Logic, Blender, Strata Design und verschiedene Tools. Da wir überwiegend auf Macs arbeiten, kamen reine Windows-Softwares nicht in unsere engere Auswahl. Und da wir öfter Off-Grid arbeiten, waren Online-Lösungen für uns auch nicht interessant. Eure Ausgangssituation sieht vielleicht anders aus, daher werdet ihr andere Tools in die engere Wahl nehmen. Am Ende findet ihr eine Liste mit den Tools die wir gefunden haben. Hier habt ihr einen guten Überblick über den Markt. In erster Linie wollen wir Webseiten designen und ab und zu Apps. In unserem Blog beschreiben wir unsere Erfahrungen mit Indesign und mit Sketch.
Indesign für Webentwicklung
Den Layout-Klassiker von Adobe haben nicht viele am Radar, wenn es um Prototyping geht. Doch gerade in medienübergreifenden Produktionen kann Indesign punkten. Der Lernaufwand ist in der Regel gering, da die meisten Designer Indesign kennen. Bei k25 ist Indesign das Grafik-Tool mit dem alle arbeiten können und somit eine gute Basis für Webentwicklungen. Bestehende Print-Layouts können als Basis für Webdesign einfach übernommen werden. Das spart in der Praxis viel Zeit. Wenn man seine Indesign-Projekte gleich richtig anlegt und z. B. Text-, Design- und Absatzformate verwendet, kann man die Layouts auch schnell und einfach für Online mutieren. Auch die Layout-Varianten erleichtern die Arbeit in der Design-Abstimmung. Musterseiten helfen bei den Seitenlayouts – Zb. bei der Startseite, einer Blogartikel-Seite oder einer Landingpage.
Dokument-Setup
Anders als bei Webprojekten wählt man beim Dokument-Setup Web aus und arbeitet so in Pixeln und nicht in mm oder inch. Das hat den Vorteil dass man direkt in Pixel arbeiten kann und beim Webdesign nicht umdenken muss. Unser Tipp: Indesign beherrscht unterschiedliche Seitengrößen in einem Dokument. Das hilft enorm in manchen Projekten. Wenn man dem Kunden ein PDF präsentieren möchte, dann übernimmt Indesign die unterschiedlichen Seitengrößen automatisch in das PDF.
Wireframe vs. exaktes Layout
Wir setzen unsere Projekte so auf, dass wir zuerst einen schnellen Wireframe mit unseren Kunden abstimmen und dann erst mit dem Layout beginnen, wenn der Wireframe abgestimmt ist. So erkennt man früh ob man zB. alle wichtige Elemente integriert hat und vermeidet logische Fehler im Webdesign. Für viele Projekte ist es auch einfacher Wireframes abzustimmen, da sich Kunden sonst sehr auf das Webdesign konzentrieren und so leicht wichtige Dinge übersehen können. Wir verwenden Indesgin auch für die exakte Ausarbeitung der Layouts. Vom Seitenraster und Farben über Headlines, Bodytexte, Links, Bilder, bis zu interaktiven Elementen wie Buttons und kleinen Animationen.
