Wireframes und GUI-Elemente bei der Konzeption

Transkript

1

2 2 / 79

3 Wireframes // Definition Aus dem Bereich der computergestützten 3D-Modellierung und -visualisierung. Bezeichnet die Drahtgitterdarstellung von 3D-Objekten. 3 / 79

4 Wireframes // Definition Volumenkörper und Flächen werden als Drahtgitter dargestellt. 4 / 79

5 Wireframes // Definition Volumenkörper und Flächen werden als Drahtgitter dargestellt. Vorteile: - schnellere Darstellung - speicherschonend - schnellerer Überblick während der Entwicklung 5 / 79

6 Wireframes // Warum Wireframes? - Entwicklung für einen Prototypen unabhängig vom Design 6 / 79

7 Wireframes // Warum Wireframes? - Entwicklung für einen Prototypen unabhängig vom Design - schnelleres Prototyping der Grundstruktur einer Website 7 / 79

8 Wireframes // Warum Wireframes? - Entwicklung für einen Prototypen unabhängig vom Design - schnelleres Prototyping der Grundstruktur einer Website - Ideenfindungsphase ohne Ablenkung (Design) 8 / 79

9 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

10 Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. 10 / 79

11 Wireframes // Methoden Paper Prototyping Graphical Prototyping Prototypen werden auf Papier gezeichnet. Prototypen werden am Computer erstellt (Layoutversion). 11 / 79

12 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

13 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

14 Paper Protoyping 14 / 79

15 Paper Protoyping 15 / 79

16 Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte 16 / 79

17 Wireframes // Methoden Paper Prototyping Prototypen werden auf Papier gezeichnet. Funktionsbereiche werden z. B. hervorgehoben durch: - unterschiedliche Grauwerte - farbige Kennzeichnung durch Marker (Edding) 17 / 79

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 Stifte. 26 / 79

27 Stifte. Papier. 27 / 79

28 Stifte. Papier. Schere. 28 / 79

29 Stifte. Papier. Schere. Kleber. 29 / 79

30 Stifte. Papier. Schere. Kleber. Hirn! 30 / 79

31 Schnelle Kollagen aus einfachen Mitteln. 31 / 79

32 Prozesse für alle einfach abbilden. 32 / 79

33 Strukturen einfach sichtbar machen. 33 / 79

34 Skizze! Skizze! Skizze! 34 / 79

35 Keine Methode ist schneller! 35 / 79

36 Alle Personen können sich einbringen. 36 / 79

37 Graphical Protoyping 37 / 79

38 Graphical Protoyping 38 / 79

39 39 / 79

40 40 / 79

41 41 / 79

42 42 / 79

43 43 / 79

44 44 / 79

45 45 / 79

46 Wireframe Prototyping 46 / 79

47 Wireframe Prototyping 47 / 79

48 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 49 / 79

50 50 / 79

51 51 / 79

52 52 / 79

53 53 / 79

54 54 / 79

55 55 / 79

56 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

57 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

58 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 59 / 79

60 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

61 Wireframes // Raster 61 / 79

62 Wireframes // Raster 62 / 79

63 Wireframes // Raster 63 / 79

64 Links // Resourcen 64 / 79

65 style-guides-wireframes-und-personas-scenarios.html uncategorized/welches-mockuptool-verwendest-du 65 / 79

66 paperprototyping blogspot.com/2006/06/auf-der-suche-nach-dem-optimalen.html 66 / 79

67 yale/contents.html other/storyboards-wireframe-forprojects,469,ar.html 67 / 79

68 denim/ com 68 / 79

69 index.html how_do_we_do_html_wireframes. html 69 / 79

70 contentmgr/showdetails.php/id/378 Nur für Dr. Web plus Mitglieder / 79

71 view/practical_applications_visio_ or_html_for_wireframes 71 / 79

72 archives/ php com/2008/02/28/the-fine-art-ofwireframes 72 / 79

73 de/2007/12/22/wireframes/ 73 / 79

74 wire-frame-your-site uxd/wireframes.html 74 / 79

75 archives/ php 75 / 79

76 designing_grid_systems/ details/?date= %3a1 8%3A00 76 / 79

77 gridfox/ trends/grid-and-column-designs/ 77 / 79

78

79 Zusammenstellung & Präsentation: weitzeldesign Diplom-Designer Thomas Weitzel Austraße 138 D Stuttgart Telefon 0711 / Telefax 0711 / [email protected] Bild- und Quellennachweise: Bilder Seite 15-25: Seite 26-33: Seite 34, 35: Seite 36: Seite 38-45: 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