Richtiges Designen für das Web - Grids für Bootstrap und Vorbereiten von Dateien in Photoshop

Sie werden feststellen, dass jeder Designer einen anderen Prozess hat. Früher war ich PS oder nichts, aber jetzt, da Websites weniger fotobasiert sind und mehr auf CSS und SVG für Grafiken angewiesen sind, habe ich mich Illustrator verschrieben. Ich benutze immer noch PS, um meine Fotos zu bearbeiten. Die Verwendung von Symbolen ist wertvoll geworden, da sie auf lange Sicht Zeit spart, sagen wir, Sie müssen eine Änderung an einem Symbol vornehmen, Sie können das Symbol bearbeiten und es aktualisiert die Symbole auf allen Zeichenflächen. Die 9-Slice-Skalierung für das Symbol hilft bei bestimmten Formen.

Der Nachteil von Illustrator ist, dass die Invision-Unterstützung dafür noch in Arbeit ist. PS ist immer noch der Industriestandard.

Was Sketch betrifft, habe ich keine wirklichen Vorteile gegenüber Illustrator gefunden. Außerdem ist es nur eine weitere Software, die man lernen und bezahlen muss, jeder hat Adobe und es ist einfacher, eine Adobe-Datei weiterzugeben als eine Sketch-Datei.

Axure ist großartig, aber teuer und ein UX-Tool. Ich habe keine starke Meinung dazu, aber wenn Sie Adobe/invision verwenden, dann glaube ich nicht wirklich, dass ein Bedarf für ein anderes Programm besteht.

Was invision betrifft, so sind für mich die mobilen Skins das wertvollste Feature. Es ist leicht, das Handy zu vernachlässigen, aber es ist so wichtig. Invision sorgt dafür, dass ich es nicht vernachlässige.

Ich habe Bootstrap nie verwendet, da ich Designer bin, und Bootstrap ist ein Framework, das Entwickler verwenden können, wenn sie nicht über viele Designressourcen verfügen. Dazu habe ich keinen fundierten Rat.

Grids sind eine lustige Sache. Ich habe versucht, mit Rastern zu entwerfen, und bin jedes Mal gescheitert. Mein Team hat entschieden, dass es der richtige Weg ist, denselben Bildschirm an mehreren Haltepunkten zu entwerfen. So habe ich mehr Gestaltungsspielraum und muss nicht mit Prozentzahlen rechnen oder mit ungeraden Zahlen arbeiten. Ich kann alles in mein Standard-Illy-Raster einrasten. Das bedeutet oft Mehrarbeit, weil ich 3 verschiedene Versionen des gleichen Bildschirms bereitstellen muss, aber es zahlt sich langfristig aus.

Um Ihrem Entwickler eine Richtung zu geben, fragen Sie ihn, wie er gerne arbeitet. Einige möchten die Design-Arbeitsdateien, einige möchten detaillierte Anmerkungen, die das Design in einer PDF-Datei überlagern, einige möchten ein PNG, das sie mit einem Chrome in den Browser einfügen und dann darüber codieren können.

Eine Sache, die allen Entwicklern bisher zu gefallen scheint, ist ein detaillierter Styleguide. Es gibt viele Artikel darüber, und wenn ich „Styleguide“ sage, meine ich ein Dokument mit allen Typografien, Farben, Formularfeldern/Schaltflächen/Tabellen/Stilen sowie Effekten wie Eckenradius, Schlagschatten und Rahmen. Das Entwicklungsteam, mit dem ich zusammenarbeite, verwendet meinen Styleguide als Bibel, und wenn ich ihn nicht aktualisiere, passieren schlimme Dinge. Sehen Sie sich den Styleguide für Google Material Design an, um sich inspirieren zu lassen.

Es gibt eine andere Art von Styleguide, auf die sich UI-Entwickler beziehen, von der ich glaube, dass sie tatsächlich codiert ist. Ich kann das nicht kommentieren.

Es ist ein sehr subjektives Thema, Sie werden einen Prozess finden, der für Sie funktioniert!

Ich dachte nur, ich würde als Entwickler kommentieren, der sich mit Design befasst, und auch als jemand, der Bootstrap mehr verwendet, als ich zugeben möchte.

Über die Verwendung von Rastern ...

Da Sie bereits mit dem Adobe-Workflow vertraut sind, würde ich nur lernen, mit Rastern in Photoshop zu arbeiten. Es gibt viele Tutorials, die Sie zusammen mit PSD-Rastervorlagen finden können. Hier ist eine , die wie ein guter Ausgangspunkt aussieht. Als Entwickler fällt es mir leicht, in Rastern zu denken, da die meisten Markups in einer Art „Container“ ( aside, div, span, etc) organisiert sind, die normalerweise rasterartig unterteilt sind. Als Designer mag ich die zusätzliche Einschränkung, meine Inhalte in relativen Abteilungen organisieren zu müssen, und es hilft sicherzustellen, dass das Design in einem Browser ähnlich wie in statischer Form funktioniert.

Über Design für Mobilgeräte und Desktops...

Wenn Sie bereits mit dem Adobe-Workflow vertraut sind, insbesondere wenn Sie CC-Versionen verwenden, sollten Sie Edge Reflow ausprobieren . Es macht es super einfach, Ihre Designs für verschiedene Bildschirmgrößen anzupassen, Sie können PSDs direkt importieren und es gibt sogar CSS-Code aus, den Sie in der Entwicklung verwenden können. Macaw ist ein weiteres großartiges Tool und der Code, den es ausgibt, ist meiner Meinung nach einer der besten, die ich gesehen habe, aber ich verstehe, dass ich nicht will oder die Zeit habe, einen Haufen neuer Tools zu lernen, also ist Reflow immer noch eine wirklich gute Option.

Über die Verwendung von Bootstrap ...

Bootstrap ist großartig, besonders für Rapid Prototyping. Ich würde mich jedoch nicht zu sehr auf Frameworks einlassen. Bootstrap ist sehr eigensinnig und ich verbringe viel Zeit damit, Stile zu überschreiben, die ich einfach von Grund auf neu hätte erstellen können. Ich stimme einigen der anderen Antworten zu, dass das Erstellen eines Styleguides, der definiert, wie Elemente konstruiert werden sollen, viel hilfreicher ist, insbesondere wenn Sie nicht bereits mit Bootstrap arbeiten und mit der Art und Weise, wie Dinge gestaltet werden, nicht vertraut sind.

Wenn Sie sich für Bootstrap entscheiden, verbringen Sie einige Zeit damit, ein benutzerdefiniertes „Thema“ zu erstellen, das zu den von Ihnen erstellten Mocks passt. Es gibt eine großartige Seite zum Anpassen, auf getbootstrap.comder Sie alle benötigten Werte anpassen und dann ein benutzerdefiniertes Design erstellen können, mit dem Sie arbeiten können. Sie müssen ein wenig über CSS-Werte wissen, aber Sie müssen nicht lernen, CSS zu schreiben, also geht es viel schneller. Auch wenn Ihr Entwickler bereits mit Bootstrap arbeitet, muss sich nichts ändern. Er tauscht einfach Ihre Datei mit der Standarddatei aus.

Denken Sie in jedem Fall daran, dass es viele gute Tools gibt und Bootstrap nur eines davon ist. Wenn Sie viel für das Web (oder sogar für Mobilgeräte) arbeiten, müssen Sie zumindest damit vertraut sein, wie sie funktionieren. Sie müssen keinen Kurs oder irgendetwas anderes belegen, sondern die Grundlagen von CSS und vielleicht einen Präprozessor wie Sass oder LESS lernen. Es wird Ihnen helfen zu verstehen, wie Ihre visuellen Komponenten tatsächlich erstellt werden, und Sie werden darüber nachdenken, wenn Sie später Designentscheidungen treffen.

Wie kann ich mein Grid sowohl für die mobile Version als auch für den Desktop mit Bootstrap planen? Sollte ich Photoshop in Kombination mit einer anderen Software verwenden?

Sie müssen CSS lernen und lernen, wie Bootstrap funktioniert, um eine responsive Website zu entwerfen. Dies ist nicht etwas, was Sie mit Photoshop tun.

In der Tat, wenn Sie CSS/Bootstrap nicht kennen, wird Photoshop Ihnen im Weg stehen, da Sie anfangen werden, Dinge zu entwerfen, die in der Logik eines Mock-ups gut funktionieren, aber eine große Aufgabe sein werden, sie tatsächlich in brauchbarer Weise zu implementieren Auszeichnung.

Wenn Sie CSS/Bootstrap nicht kennen, schlage ich vor, dass Sie sich an jemanden wenden, der dies tut, und sich von ihm helfen lassen, während Sie mit Ihren Mockups fortfahren, um große Fallstricke für Sie zu finden.

Ich sehe hier zwei Fragen:

1. Ich möchte eine Bootstrap 3-Site entwerfen, wo fange ich an?
2. Sollte ich „Designer“-Schaltflächen und Flair für eine Website kaufen, die ich erstelle?

Ein paar Hinweise:

1. Ich persönlich empfehle die Erfahrung, die Sie gesammelt haben, indem Sie mit Ihrem Photoshop- oder Illustrator-Mockup beginnen und dann von Hand in HTML und CSS programmieren. Trotzdem gibt es keine Schande oder einen großen Nachteil, wenn Sie mit Bootstrap 3 beginnen - es wurde entwickelt, um Websites schnell auf den Weg zu bringen. Bootstrap selbst hat keine offiziell unterstützten .psd-Vorlagen, aber eine schnelle Google-Suche wird Ihnen viele freigegebene Ressourcen wie This Link finden .
2. Fraglich. Ein Designer hat hart daran gearbeitet, etwas Wertvolles für Sie zu schaffen, damit Ihre Website hübsch aussieht. Kaufen Sie es einfach und verwenden Sie es und machen Sie sie stolz.