Share
Wireframing ist ein nützlicher Teil des Website-Design-Prozesses. Es ist großartig, diese Planungsphase zu trennen und die Positionierung, Abstand, Layout und andere Elemente wie Textgröße und -ton Ihrer Seite zu klären, bevor Sie in Photoshop springen, um Farbe, Textur, Bilder und Effekte hinzuzufügen, um Ihr Design zu verbessern.
Fireworks ist ein hervorragendes Werkzeug zum Erstellen eines Drahtgitters. Obwohl es in Photoshop nicht perfekt funktioniert, können Sie dort hin exportieren und Ihr Drahtgitter aufbauen. In Fireworks wird der Entwurfsprozess zum Erstellen eines Wireframes für eine iPhone-Anwendungswebsite behandelt. Für diejenigen, die sich mit diesem Programm nicht auskennen, ist es ein guter Ausgangspunkt, um Ihre Webdesign-Projekte mit einem Rahmen zu gestalten. Dies ist ein erster Teil einer mehrteiligen Serie und macht Spaß!
Unten sehen Sie das Drahtmodell, auf das wir hinarbeiten, und Sie können die Drahtmodellversion in voller Größe hier anzeigen. Möchten Sie auf alle Quelldateien und herunterladbaren Kopien jedes Tutorials zugreifen, einschließlich dieses Tutorials? Nehmen Sie an Vector Plus für nur 9 € pro Monat teil.
Das Erstellen von Wireframes als separate Phase in Ihrem Website-Design-Prozess bietet zahlreiche Vorteile. Hier sind einige davon:
Es gibt einige Programme, die Webdesigner für das Wireframing von Websites verwenden können. Einige Kriterien für die Auswahl eines Programms für ein bestimmtes Projekt sind: Ihre Vertrautheit mit dem Programm, Ihre Fähigkeit, schnell darin zu arbeiten, die Funktionalität des jeweiligen Programms, seine Anpassungsfähigkeit an das vorliegende Projekt, die Fähigkeit, wiederverwendbare Elemente zu speichern, und dessen Eigenschaften Flexibilität für die Bearbeitung.
Möglicherweise möchten Sie ein Programm außerhalb der Adobe-Familie wie Omni Graffle verwenden, und es gibt sicherlich auch andere. Wenn Sie ein Programm innerhalb der Adobe Suite für das Wireframing verwenden, obwohl Fireworks-Regeln oberste Priorität haben.
Sie können Photoshop verwenden, es ist jedoch langsamer für das Wireframing und es fehlen mehrseitige Funktionen und andere Funktionen, die Fireworks dazu veranlassen, Websites schnell oder einfach zu planen. Ich habe Anfang 2008 einen Artikel über die Verwendung von Illustrator zum Erstellen von Wireframing geschrieben (eher ein Proof of Concept als eine Empfehlung). Es ist zwar möglich, zu diesem Zweck zu verwenden, es fehlen jedoch die Tools, die Fireworks für das Wireframing hat. Ich empfehle Fireworks in den meisten Fällen für das Wireframing. Es ist wirklich gut für diesen Zweck gebaut.
Wir verwenden Fireworks für dieses Projekt, weil es schnell funktioniert. Sie können auch einfach Boxen erstellen, positionieren, Text hinzufügen, abgerundete Ecken hinzufügen und mit Fireworks schnell Layouts erstellen. Es ist für Webentwicklung und Prototyping eingerichtet. Wenn Sie Boxen zeichnen, werden sie automatisch an Pixeln ausgerichtet. Dies ist ohne die fortgeschrittenen Funktionen des Programms zu berühren.
Es ist auch möglich, nach Photoshop zu exportieren, wenn Sie das Drahtgittermodell erstellt haben. Dies ist ein idealer Arbeitsablauf, wenn Sie mit dem endgültigen Entwurf die am besten in Photoshop erstellten Details erhalten. Es gibt einige Probleme, die ich gerne in der nächsten Version von Adobe sehen möchte, obwohl der Workflow von Fireworks in Photoshop integriert wird.
Beginnen wir nun mit der Planung unseres Projekts und dem Aufbau unseres Drahtgitters.
Bevor Sie in Fireworks einsteigen und mit dem Aufbau einer Website beginnen, müssen Sie einige Schritte durchgehen. Das erste ist natürlich die Definition Ihres Projekts, des darin enthaltenen Inhalts, seines Zwecks usw. Wenn Sie dies mit dem Kunden erarbeitet haben oder sich auf ein persönliches Projekt konzentriert haben, ist es an der Zeit, etwas zu recherchieren.
Für dieses fiktive Projekt erstellen wir eine Werbe-Website für iPhone-Anwendungen für Aurora, eine hypothetische iPhone-App zum Beleuchten Ihres iPhones mit Aurora Borealis-Lichtmustern. Die Idee ist, dass dies eine Seite eines größeren Projekts für ein Unternehmen ist, das mehrere iPhone-Apps verkauft. Wir konzentrieren uns auf diese eine Seite für dieses Tutorial.
Als Designer haben wir von Anfang an etwas mit Stil zu tun. Möglicherweise möchten Sie Notizen zu Stilen machen, auf die Sie bei Ihrer visuellen Suche stoßen, oder ein Moodboard erstellen. Unser Hauptaugenmerk bei der Erstellung eines Drahtgitters liegt jedoch auf der Definition unseres Layouts und unserer Funktionalität (an dieser Stelle sind Farbe und Stil nicht zu berücksichtigen).
Für dieses Projekt habe ich eine Reihe von iPhone-Anwendungsseiten durchgesehen. Mir ist aufgefallen, dass es einige allgemeine Funktionen gibt, die meiner Meinung nach beim Verkauf einer App helfen würden. Ich habe einige Layouts gefunden, die mir gefallen haben. Hier einige davon:
Das Hauptmenü bei Tapulous hat mir gefallen. Es gab ein paar andere Websites, bei denen mehrere App-Symbole vertikal liefen. Dies hat den Vorteil, dass sie unbegrenzt Apps hinzufügen können und das Menü dazu passen würde, aber es hat mir wirklich gut gefallen, dass das Programm horizontal nach oben läuft, wie diese Site tut.
Die Website Tapbots enthält einige Elemente, die auf vielen der erfolgreicheren iPhone-App-Werbeseiten üblich sind. Es verfügt über ein großes iPhone-Bild mit einer eingebetteten Videodatei, die die App in Aktion zeigt. Es verfügt über eine übersichtliche Funktionsliste, Erfahrungsberichte und andere Inhalte in einem organisierten Raster, Miniaturansichten zu größeren Screenshots und einen Link zum iPhone App Store, der sich deutlich abhebt.
Die Sonico Mobile-Site verfügt auch über eine sekundäre Navigation, die aus horizontalen Symbolen besteht, die mir gefallen haben. Mir gefiel auch die Nutzung von Werbeflächen und die Aufteilung des horizontalen Werbefläches durch das vertikal stehende iPhone. Die Art und Weise, wie sie die Preise von der Werbefläche abgebrochen haben, ist auch gut gelungen.
Ich bin mir sicher, dass ich mehr Websites finden konnte, die das Design beeinflusst haben, aber diese Websites wurden am meisten für das grundlegende Layout der Website zusammengefügt. An diesem Punkt habe ich eine gute Vorstellung davon, wie die Site in meinem Kopf aussehen soll. Jetzt muss ich es zu Papier bringen.
Sie können die Skizze unten sehen. Ich mache oft mehrere Skizzen, um verschiedene Layouts auszuprobieren. Das ist sehr schnell, wenn Sie mit Bleistift und Papier arbeiten, aber in diesem Fall fühlte es sich direkt nach dem ersten Entwurf an, also war ich fertig. Beachten Sie, dass ich das Problem sowohl visuell als auch verbal angehe, Notizen mache und Funktionen auflisten möchte, die ich sehen möchte.
Denken Sie daran, dass sich die Dinge ändern müssen, wenn Sie in Fireworks von der Skizze zum Drahtmodell wechseln. Die Skizze hilft Ihnen dabei, Ihre Kernideen auf den Grund zu bringen und Ihre ersten Gedanken zu formulieren.
Nun, da wir wissen, was wir erstellen werden, erstellen wir unser Dokument. Ich entschied mich für das 960-Rastersystem als Grundlage für das Design. Es ist jetzt nicht unbedingt wichtig, ob dieses Framework letztendlich zum Codieren verwendet wird, aber es ist bereits ein Raster, das einfach zu bedienen ist, und ich weiß, dass es in die meisten Monitore passt, daher benutze ich es oft für Entwerfen.
Laden Sie das 960-Rastersystem herunter. Entpacken Sie es, wählen Sie in diesem Ordner Vorlagen> Feuerwerk aus und öffnen Sie das Dokument "960_grid_12_col.png" in Fireworks (die PNG-Datei ist eine geschichtete Fireworks-Datei)..
Gehen Sie zu Modifizieren> Leinwand> Leinwandgröße und ändern Sie die Leinwandgröße in 1060px Breite und 1500px Höhe. Klicken Sie nun in der Ebenenpalette auf den Ebenenordner "12 Col Grid". Entsperren Sie es, wählen Sie dann alle rosa Spalten aus, strecken Sie sie auf die gesamte Länge des Dokuments und sperren Sie den Ebenenordner erneut.
Gehen Sie jetzt zu Datei> Speichern, wählen Sie den Ort, an dem Sie ihn ablegen möchten, und nennen Sie ihn "wireframe.png".
Jetzt richten wir unsere Ebenen ein, um die Organisation der Dateien zu unterstützen. Wir werden Änderungen vornehmen, aber das ist ein guter Anfang. Folgen Sie dem Screenshot unten. Beachten Sie, dass "Web Layer" nicht für dieses Projekt verwendet wird, es kann jedoch nicht aus Fireworks gelöscht werden.
Das Erstellen eines Wireframe-Layouts ist ein bisschen organischer Prozess. Beziehen Sie sich auf Ihre Skizze und beginnen Sie zuerst mit den größten Elementen. Wir beginnen damit, unsere Hintergründe für unsere Hauptabschnitte zu platzieren. Einige Abschnitte verwenden den Hintergrund der Site.
Verwenden Sie das Rechteckwerkzeug (U), um die Hintergründe "Kopfzeile" (80px Höhe) und "Unterseite" (360px Höhe) zu erstellen, die sich über die gesamte Breite unserer Site erstrecken. Erstellen Sie außerdem unseren Hintergrundbereich "Promotion" (der Platz für unsere sekundäre Navigation lässt) und ist 940px breit (die Größe unseres Hauptdokumentbereichs mit 10px-Rändern für jede Größe) und 280px-Höhe.
Ein Vorteil der Arbeit mit Fireworks ist der Eigenschafteninspektor. Ich habe dieser Box vom Inspektor eine Rundung von 10% gegeben, was gut aussieht. Beachten Sie, dass Sie bei der Verwendung von abgerundeten Boxen die manuelle Änderung der Größe vermeiden möchten, da dies die Krümmung der Box beeinträchtigt. Verwenden Sie die Felder Breite und Höhe im Eigenschafteninspektor, um stattdessen die Größe anzupassen.
Beginnen wir mit den Bereichen "header" und "secondary_nav". Viele dieser Bereiche bilden die Hauptnavigation und die Sekundärnavigation sowie einige andere Details. Platzieren Sie zuerst den Namen der Site auf der linken Seite unseres "Headers". Dies ist ein Platzhalter für das endgültige Logo-Design.
Platzieren Sie zunächst den Navigationstext mit dem Textwerkzeug (T) in der Ebene "Header" und verwenden Sie eine standardmäßige serifenlose Schriftart wie Helvetica, Myriad Pro oder eine beliebige andere Schriftart. Möglicherweise möchten Sie bei webfreundlichen Schriftarten bleiben. Ich setzte den Typ auf 13pt, mit einer schwarzen Farbe, und machte ihn fett. Fügen Sie dann abgerundete Boxen hinzu, die 26px hoch und entsprechend breit sind. Stellen Sie den Abstand wie gewünscht ein und richten Sie die Kästchen wie gezeigt an der rechten Hilfslinie aus. Beachten Sie, wie die ausgewählte Navigation mit einem dunklen Hintergrund und weißem Text dargestellt wird.
Fügen Sie nun Felder für die Sekundärnavigation hinzu. Erstellen Sie jede App-Symbolbox mit 57px x 57px mit starker Rundheit. Lassen Sie Platz für eine weitere Box, die 90px breit und 100px hoch ist und hinter die Symbolnavigation passt. Fügen Sie unter jedem Symbol einen Namen hinzu, der auf 10 pt, schwarz und fett gesetzt ist. Ich habe auch eine Platzhaltergrafik für eine rechts ausgerichtete Standard-Schaltfläche für den App Store hinzugefügt, die einen Aufruf zum Handeln und etwas Legitimität hinzufügt.
Der erste Schritt besteht darin, zwei Boxen mit den gleichen Methoden wie oben beschrieben zu erstellen. Das große auf der rechten Seite stellt einen Bereich dar, in den ein Bild eines iPhone gehen wird, dessen Video dem Bildschirm hinzugefügt werden könnte. Die untere Box ist unser Hauptaufruf.
Jetzt hat diese Schaltfläche ungefähr die gleiche Größe wie die Standard-App Store-Schaltfläche, und beide sind mit derselben Stelle verbunden (sie haben eine ähnliche Funktion). Dies mag sich im Gitternetz als übertrieben anfühlen, aber mit Farbe und anderen Details kann dies funktionieren, sobald wir das endgültige Design erstellt haben. Dies ist jedoch etwas zu beachten.
Mein Gefühl ist, dass der Standard-Button ein bisschen Glaubwürdigkeit hinzufügt, und wir können den anderen Button stilistisch so behandeln, dass er sich stärker hervorhebt und als Hauptaufruf zum Handeln die Aufmerksamkeit auf sich zieht.
Beachten Sie, wie diese Felder den Hintergrund des Werbebereichs überlappen. Durch diese Art von Layout werden diese beiden Elemente auf der Seite besonders hervorgehoben.
Lassen Sie uns einen Bereich erstellen, um den Preis der App zu platzieren. Erstellen Sie zuerst eine Box mit dem Rechteckwerkzeug (U). Halten Sie beim Erstellen der Box die Umschalttaste gedrückt, um ein perfektes Quadrat zu erhalten. Fahren Sie fort und machen Sie diese 170 Pixel breit und 170 Pixel hoch.
Drücken Sie nun Befehlstaste + T, halten Sie die Umschalttaste gedrückt und drehen Sie das Quadrat in einem Winkel von 45 Grad. Richten Sie es dann wie unten gezeigt so aus, dass es gleichmäßig über dem Hintergrund des Werbebereichs platziert wird. Kopieren Sie nun (Befehl + C) den Hintergrund des Werbebereichs und Einfügen (Befehl + V), wodurch in Fireworks automatisch eine Kopie eingefügt wird.
Wählen Sie nun das Quadrat und den Hintergrund aus und gehen Sie zu Modifizieren> Pfade kombinieren> Überschneiden. Und Sie links mit der Form, die wir wollen.
Fügen Sie nun den gesamten Text wie zuvor hinzu. Sie können an dieser Stelle verschiedene Textoptionen erkunden. Ich konzentriere mich hauptsächlich auf Größe, Gewicht und Position in diesem Drahtgitter und arbeite im letzten Design an Stil und Schrift. Der Preis wird auch erstellt, indem Sie Befehlstaste + T drücken, die Umschalttaste gedrückt halten und den Text um 45 Grad drehen. Ändern Sie dann den Abstand und die Größe, bis es gut aussieht.
Fügen Sie auch eine horizontale Regel unter dem größten Text (1px Höhenrechteck) hinzu. Aktivieren Sie dann die Hilfslinien, indem Sie die Befehlstaste + Doppelpunkttaste drücken. Vergewissern Sie sich, dass alles, was Sie erstellt haben, wie unten gezeigt ausgerichtet ist.
Die zum Platzieren dieser Informationen verwendeten Techniken sind alle grundlegend. Es sind alles grundlegende Boxen und Text. Fahren Sie also fort und platzieren Sie die Körperinformationen wie unten gezeigt (Sie können Ihre Hilfslinien und die Rasterüberlagerung wie im nächsten Abschnitt gezeigt aktivieren). In diesem Abschnitt werden Verkaufsdetails hinzugefügt. Wir beschreiben die App und zeigen, was sie tut, zeigen Screenshots in Aktion, fügen kleine technische Details hinzu und bieten Testimonials.
Fahren Sie fort und aktivieren Sie die Ebene "12 Col Grid", die unsere Rasterüberlagerung hält, und aktivieren Sie unsere Guides. Beachten Sie, wie dieser Abschnitt ein dreispaltiges Setup verwendet. Jede Spalte ist 300px breit. Das Raster ist oben nicht so offensichtlich, aber Sie können sehen, wie die iPhone-Box mit der dritten Spalte und der Werbetext mit den ersten beiden Spalten des Hauptteils ausgerichtet wird. Die Struktur unseres Gitters zeigt sich jetzt wirklich.
Stellen Sie sicher, dass Ihre Ebenen wie unten dargestellt organisiert sind.
Das Bild unten zeigt, was wir für den unteren Abschnitt erstellen. Es gibt vier Abschnitte, halten Sie Ihre Ebenen entsprechend organisiert. Dieser Abschnitt konzentriert sich auf das Unternehmen und nicht auf die Anwendung. Auf vielen Websites, die iPhone-Apps verkaufen, werden mehr als eine App verkauft, oder in einigen Fällen werden mehr als nur iPhone-Apps verkauft. Der Zweck dieses Abschnitts besteht also darin, das Unternehmen, seinen Blog, seinen Kundensupport und seinen Twitter-Feed zu fördern.
Beachten Sie, wie wir unser Raster für diesen Abschnitt unterschiedlich einsetzen. Wir haben hier eine vierspaltige Kolumne aufgestellt, die jede Spalte 220px breit macht.
Der größte Teil der Konstruktion dieses Abschnitts besteht aus grundlegendem Text und Feldern. Die Linkboxen am unteren Rand jedes Abschnitts haben dieselbe Größe wie unsere Hauptnavigation und können von dort kopiert werden. Schauen wir uns ein paar Aspekte dieses Abschnitts an. Zunächst wird beschrieben, wie Sie eine gepunktete Linie erstellen. Dies ist in Fireworks einfach durchzuführen.
Sie können natürlich das Linienwerkzeug (N) verwenden, um die Linie zu erstellen, aber ich habe stattdessen das Rechteckwerkzeug (U) verwendet. Machen Sie die Größe 220px breit und 1px groß. Geben Sie keine Füllung und eine Strichfarbe an, die dunkler als der Hintergrund ist. Erstellen Sie die Stichgröße 1. Klicken Sie dann auf die Schaltfläche neben der Konturgröße, um Linienoptionen zu erhalten. Gehen Sie zu Bindestrichen und wählen Sie, wie unten gezeigt, Punkt.
Was ich beim Erstellen von Wireframes oft mache, ist, über die Symbole nachzudenken, die im endgültigen Design verwendet werden. In diesem Fall gibt es nur eine, die wir an anderer Stelle verwenden werden. Sie können das Symbol zwar in voller Farbe anzeigen, aber ich möchte, dass dieses Drahtmodell in Graustufen dargestellt wird und sich auf das Layout und den Abstand konzentriert.
Laden Sie das kostenlose Practika Icon-Paket vom Smashing Magazine herunter. Ziehen Sie die 64px by 64px-Datei "twitter.png" in das Dokument. Platzieren Sie es wie gezeigt, und stellen Sie sicher, dass das Feld, in dem es platziert ist, breit genug ist, um darin Platz zu finden. Gehen Sie nun mit dem ausgewählten Bild zu Filter> Farbe anpassen> Farbton / Sättigung und drehen Sie dann die Sättigung ganz herunter.
Lassen Sie uns wieder unsere Ordner organisieren.
Das ist wirklich einfach. Stellen Sie sicher, dass Sie den Site-Namen und das Copyright hinzufügen. Platzieren Sie auch Textlinks, die die Hauptnavigationsnavigation wiederholen. Wenn es wichtige ergänzende Links gibt, sollten Sie sie auch hier platzieren. Richten Sie das Copyright an der linken Kante und die Links an der rechten Kante aus (siehe unten).
Im Lernprogramm Erstellen eines Website-Drahtmodells in Illustrator bespreche ich das Hinzufügen von Beschriftungen zu einem Drahtmodell. Dies ist eine nützliche Methode, um einem Drahtmodell Notizen hinzuzufügen. Eine andere nützliche Möglichkeit ist, die Notizen inline zu platzieren. Dies ist ziemlich einfach und hilfreich für die Kommunikation von Funktionen, Funktionen oder Problemen mit Clients.
Ich platziere gerne Notizen in Blau, so dass die Notizen auf dem Drahtgitter liegen und Blau ein Blaupausengefühl vermittelt. Das letzte Drahtgitter befindet sich unten und Sie können die Drahtgitterversion in voller Größe hier anzeigen.
Heben Sie die Gruppierung aller Elemente auf, die Sie nicht rastern möchten, wenn Photoshop verwendet wird. Wenn Sie beispielsweise die Textbarkeit für Text beibehalten möchten, müssen Sie sicherstellen, dass der Text zu nichts gruppiert ist. Es ist in Ordnung, Dinge in Ordnern abzulegen. Dies ist eine der Besonderheiten des Exports von Fireworks nach Photoshop.
Vielleicht möchten Sie auch entscheiden, ob es sich lohnt, den Text von Fireworks in Photoshop zu übernehmen (Sie können ihn löschen und anschließend in Photoshop neu erstellen). Ich hatte die Erfahrung gemacht, dass die Textfelder merkwürdig wirken, was Sie im nächsten Tutorial sehen werden, das dieses Drahtmodell verwendet und ein farbiges Photoshop-Website-Design erstellt. In diesem Fall behalten wir den Text bei.
Gehen Sie zu Datei> Speichern unter und klicken Sie auf Optionen. Die Standardeinstellung ist "Editierbarkeit über Aussehen halten". Gehen Sie weiter und belassen Sie es bei der Standardeinstellung und klicken Sie dann auf Speichern. Wenn Sie die Essbarkeit beibehalten, werden unsere Formen in Photoshop als Formebenen platziert, anstatt sie zu rastern, was in diesem Fall bevorzugt wird.
Fireworks eignet sich hervorragend für Wireframing und Prototyping von Websites. Selbst bei einem einseitigen Design werden Sie feststellen, wie schnell Sie verschiedene Layout-Optionen ausarbeiten und schnell die Struktur Ihres Designs erstellen können. Sobald Sie mit diesem Programm für größere Projekte arbeiten, werden Sie auch eine Vielzahl von Tools entdecken. In unserem nächsten Lernprogramm dieser Serie nehmen wir diese iPhone-Anwendung in einem Drahtmodell und beenden das Design in Photoshop.
In Fireworks gibt es einige zusätzliche Funktionen, die in diesem Lernprogramm nicht behandelt wurden, aber Ihnen bei Ihrem nächsten Projekt helfen würden. Nachfolgend finden Sie einige nützliche Anleitungen zur Verwendung von Fireworks for Wireframing, die Sie möglicherweise ebenfalls lesen möchten. Wenn Sie auf relevante Lernprogramme oder Ressourcen stoßen, müssen Sie in den Kommentaren darauf verweisen, dass sie mit der Community geteilt werden sollen.
Abonnieren Sie den Vectortuts + RSS-Feed, um mit den neuesten Vektor-Tutorials und Artikeln auf dem Laufenden zu bleiben.
Accentsconagua