Web Design: Erstellen von klickbare Wireframes
Früh im Prozess des Aufbaus einer Website, müssen Kunden verstehen, wie die Website organisiert ist. Wireframes (detaillierte Schwarz-Weiß-Zeichnungen der einzelnen großen Web-Seite) zeigen, was auf der Seite geht, wie die Navigation und Interaktion Arbeit und die allgemeine Seitenlayout. Für große oder komplexe Websites, nur auf Blueprint-like Wireframes auf Papier suchen, ist nicht genug für die Kunden, die Interaktion und Organisation einer Website sichtbar zu machen. So, nachdem Sie die Sitemap trainieren und beginnen wireframing, beiseite stellen einige Zeit schnell arbeitDrahtGitter zu montieren Prototyp in HTML-Code der Website, in dem viele der klickbare Elemente funktionieren. Auf diese Weise können Kunden klicken physisch die Skizze Versionen der Navigation und Schaltflächen, um zu sehen, wohin sie gehen. (Hinweis: Für kleine Websites, die viel nicht viel komplexer Interaktion oder viele Abschnitte haben, ist es, Kunden durch ein PDF Ihrer Wireframes zu Fuß.)
Die meisten Designer und Architekten Informationen verwenden, um Microsoft Visio oder Illustration Programme wie Adobe Illustrator und Adobe InDesign Drahtmodelle zu erstellen. Alle drei dieser Programme können Wireframes als GIFs und JPEGs exportieren. Dann können Sie eine HTML-Tool wie Adobe Dreamweaver verwenden, um diese GIFs und JPGs und Overlay-Links auf der Oberseite der anklickbare Bereiche zu importieren.
Versuchen Sie Wireframes als GIF-Dateien zu exportieren. Da Wireframes sind (sollte) Graustufen- und Text, können Sie eine bessere Qualität und Kompression erhalten, wenn Sie sie als GIF-Dateien speichern.
In Dreamweaver, legen Sie die ganze GIF Drahtgitter in die Seite, wie Sie ein Bild einfügen würde. Sie können dann ziehen Hotspots (Anklickbare Bereiche, die Sie definieren) auf Ihre Navigation und verknüpfen sie bis zu Ihrer verschiedenen Seiten zu gehen. Voil # 224-: eine schnelle, klickbare Wireframe-Prototyp, der bereit ist, mit Ihren Kunden zu teilen.
Wenn Sie in HTML handlich sind, können Sie Ihren Prototyp einen Schritt weiter durch den Aufbau sowohl ein funktionierendes Navigationssystem sowie alle dynamischen Funktionen, die Sie planen, zu zählen, wie Drop-Down-Menüs oder Akkordeon Plätze.
Präsentieren Sie Ihre klickbare Wireframe Ausgabe an die Kunden als eine Möglichkeit, sie zu visualisieren, wie die Website organisiert ist und wie Benutzer durch wichtige Aufgaben wie die Bestellung eines Produktes navigieren würde. Sie können auch die klickbare Wireframes präsentieren Benutzer zu beenden, um zu sehen, ob die Website Sinn aus ihrer Sicht macht. In dieser Phase ist es wichtig, alle Knicke in der Arbeit vor Ort und Zustimmung des Kunden erhalten, bevor uns darauf, mit visuellen Design und HTML-Programmierung zu bewegen.
