2 / 79
Wireframes // Definition Aus dem Bereich der computergestützten 3D-Modellierung und -visualisierung. Bezeichnet die Drahtgitterdarstellung von 3D-Objekten. 3 / 79
Wireframes // Definition Volumenkörper und Flächen werden als Drahtgitter dargestellt. 4 / 79
Wireframes // Definition Volumenkörper und Flächen werden als Drahtgitter dargestellt. Vorteile: - schnellere Darstellung - speicherschonend - schnellerer Überblick während der Entwicklung 5 / 79
Wireframes // Warum Wireframes? - Entwicklung für einen Prototypen unabhängig vom Design 6 / 79
Wireframes // Warum Wireframes? - Entwicklung für einen Prototypen unabhängig vom Design - schnelleres Prototyping der Grundstruktur einer Website 7 / 79
Wireframes // Warum Wireframes? - Entwicklung für einen Prototypen unabhängig vom Design - schnelleres Prototyping der Grundstruktur einer Website - Ideenfindungsphase ohne Ablenkung (Design) 8 / 79
Wireframes // Warum Wireframes? - Entwicklung für einen Prototypen unabhängig vom Design - schnelleres Prototyping der Grundstruktur einer Website - Ideenfindungsphase ohne Ablenkung (Design) - ein echter Prototype eignet sich mehr als ein Struktur-Diagramm (Benutzerperspektive). 9 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. 10 / 79
Wireframes // Methoden Paper Prototyping Graphical Prototyping Prototypen werden auf Papier gezeichnet. Prototypen werden am Computer erstellt (Layoutversion). 11 / 79
Wireframes // Methoden Paper Prototyping Graphical Prototyping Wireframe Prototyping Prototypen werden auf Papier gezeichnet. Prototypen werden am Computer erstellt (Layoutversion). Prototypen der Website werden schematisch dargestellt und angeordnet (Inhalte und Struktur). 12 / 79
Wireframes // Methoden Paper Prototyping Graphical Prototyping Wireframe Prototyping Live Prototyping Prototypen werden auf Papier gezeichnet. Prototypen werden am Computer erstellt (Layoutversion). Prototypen der Website werden schematisch dargestellt und angeordnet (Inhalte und Struktur). Prototypen werden als Wireframe oder Layoutdummy erstellt und via Webbrowser präsentiert (programmiert). 13 / 79
Paper Protoyping 14 / 79
Paper Protoyping 15 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte 16 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) 17 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten 18 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten Vorteile: 19 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten Vorteile: - geeignet für Gruppendiskussionen / Workshops 20 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten Vorteile: - geeignet für Gruppendiskussionen / Workshops - aktive Beteiligung aller Personen 21 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten Vorteile: - geeignet für Gruppendiskussionen / Workshops - aktive Beteiligung aller Personen - schnelle Ergänzungen und Änderungen möglich 22 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten Vorteile: - geeignet für Gruppendiskussionen / Workshops - aktive Beteiligung aller Personen - schnelle Ergänzungen und Änderungen möglich - intuitiver Prozess 23 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten Vorteile: - geeignet für Gruppendiskussionen / Workshops - aktive Beteiligung aller Personen - schnelle Ergänzungen und Änderungen möglich - intuitiver Prozess - Teamplay 24 / 79
Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) - durch Verwendung von PostIt-Etiketten Vorteile: - geeignet für Gruppendiskussionen / Workshops - aktive Beteiligung aller Personen - schnelle Ergänzungen und Änderungen möglich - intuitiver Prozess - Teamplay - kostengünstige Methode 25 / 79
Stifte. 26 / 79
Stifte. Papier. 27 / 79
Stifte. Papier. Schere. 28 / 79
Stifte. Papier. Schere. Kleber. 29 / 79
Stifte. Papier. Schere. Kleber. Hirn! 30 / 79
Schnelle Kollagen aus einfachen Mitteln. 31 / 79
Prozesse für alle einfach abbilden. 32 / 79
Strukturen einfach sichtbar machen. 33 / 79
Skizze! Skizze! Skizze! 34 / 79
Keine Methode ist schneller! 35 / 79
Alle Personen können sich einbringen. 36 / 79
Graphical Protoyping 37 / 79
Graphical Protoyping 38 / 79
39 / 79
40 / 79
41 / 79
42 / 79
43 / 79
44 / 79
45 / 79
Wireframe Prototyping 46 / 79
Wireframe Prototyping 47 / 79
Wireframes // Grundlayout Definition des Grundlayouts / Seitenlayouts LH = Linke Spalte / Hauptspalte LH HR = Hauptspalte / Rechte Spalte LHR = Linke Spalte / Hauptspalte / Rechte Spalte LHR HR 48 / 79
49 / 79
50 / 79
51 / 79
52 / 79
53 / 79
54 / 79
55 / 79
Login: Wortbergen Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. 56 / 79
Login: Wortbergen Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. 57 / 79
Login: Wortbergen Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. 58 / 79
59 / 79
Login: Wortbergen Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. 60 / 79
Wireframes // Raster 61 / 79
Wireframes // Raster 62 / 79
Wireframes // Raster 63 / 79
Links // Resourcen 64 / 79
http://blog.calm-n-easy.de/archiv/ style-guides-wireframes-und-personas-scenarios.html http://www.interactiondesign.at/ uncategorized/welches-mockuptool-verwendest-du http://alistapart.com/articles/avoidedgecases 65 / 79
http://www.alistapart.com/articles/ paperprototyping http://www.andybudd.com/archives/2003/10/blogging_from_the_design_process_skillswap/ http://aol-usability-newsletter. blogspot.com/2006/06/auf-der-suche-nach-dem-optimalen.html 66 / 79
http://axure.com/ http://www.tu-chemnitz.de/docs/ yale/contents.html http://www.jonathanbriggs.com/ other/storyboards-wireframe-forprojects,469,ar.html 67 / 79
http://www.digital-web.com/articles/return_on_design/ http://dub.washington.edu:2007/ denim/ http://www.webdesignerstoolkit. com 68 / 79
http://www.mojofat.com/tutorial/ index.html http://www.guuui.com/issues/01_03_02.php http://atomiq.org/archives/2005/09/ how_do_we_do_html_wireframes. html 69 / 79
http://barrettcommunications.com/ contentmgr/showdetails.php/id/378 Nur für Dr. Web plus Mitglieder. http://www.drweb.de/plus/webdesign/entwurf-wireframes.php http://www.mezzoblue.com/archives/2004/06/25/ia_with_omni/ 70 / 79
http://www.mockupscreens.com http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette http://www.boxesandarrows.com/ view/practical_applications_visio_ or_html_for_wireframes 71 / 79
http://www.strangesystems.net/ archives/000005.php http://geniantsandbox. com/2008/02/28/the-fine-art-ofwireframes http://www.omnigroup.com/applications/omnigraffle/ 72 / 79
http://www.drweb.de/plus/webdesign/prototypen.php http://www.webkrauts. de/2007/12/22/wireframes/ http://www.protoshare.com/ 73 / 79
http://www.paperprototyping.com http://www.sitepoint.com/article/ wire-frame-your-site http://deyalexander.com/resources/ uxd/wireframes.html 74 / 79
http://www.uxmatters.com/mt/archives/000161.php http://960.gs/ http://www.smileycat.com/miaow/ archives/000264.php 75 / 79
http://www.designbygrid.com/ http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_ designing_grid_systems/ http://www.screen-online.de/blog/ details/?date=2008.04.03+08%3a1 8%3A00 76 / 79
http://www.puidokas.com/portfolio/ gridfox/ http://grid.mindplay.dk/ http://www.webdesignerwall.com/ trends/grid-and-column-designs/ 77 / 79
Zusammenstellung & Präsentation: weitzeldesign Diplom-Designer Thomas Weitzel Austraße 138 D-70376 Stuttgart Telefon 0711 / 593 594 Telefax 0711 / 95 97 99 5 typolight@weitzeldesign.de www.weitzeldesign.de Bild- und Quellennachweise: Bilder Seite 15-25: www.istockphoto.com Seite 26-33: www.drweb.de Seite 34, 35: www.weitzelmedia.de Seite 36: www.sxc.hu Seite 38-45: www.weitzeldesign.de Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich. 79 / 79