 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
dashi
Dabei seit: 16.03.2003
Ort: -
Alter: 38
Geschlecht: 
|
|
| |
  |
 |
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
|
Anzeige
|
|
|
dashi
Dabei seit: 16.03.2003
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mi 05.04.2006 08:45
Titel
|
  |
|
 Danke dafür!
(Irgendwas stimmt mit deiner Seite nich, da fehlt irgendwie die hälfte vom css O_o)
|
|
| |
|
|
medienarbeiter
Threadersteller
Dabei seit: 04.10.2005
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 06.04.2006 11:28
Titel
|
|
|
hi.
danke fuer diese links!
diese woche komm ich
leider nicht mehr dazu
irgendetwas raus zu
suchen, aber naechste
woche werde ich mich
wieder daran setzen.
grueße.
|
|
| |
|
|
nonblank
Dabei seit: 06.02.2005
Ort: -
Alter: 43
Geschlecht:
|
Verfasst Mo 10.04.2006 17:59
Titel Re: Formular Design |
|
|
Ich glaube fest, dass die das meinen wenn die nach Formulardesign fragen, was in dem Artikel steht.
Ist eben so das Checkboxen z.B. zum Bestätigen der AGB's da sind, Radiobuttons um Optionen bei z.B. einem Artikel zu wählen und Buttons sind zum Absenden gedacht usw. Man muss bei der Größe der Feldwahl bedenken, wieviel Jemand da
reinschreiben könnte: z.B. Feld für Name: Klaus-Heinz von Musterlingshausen... Und dann noch die Sache mit den Feldern die Pflichteingaben sind... Aber lest selbst...
THX, für den Link
|
|
| |
|
|
spacemarie
Dabei seit: 01.02.2006
Ort: -
Alter: 46
Geschlecht:
|
Verfasst Mi 12.04.2006 11:09
Titel Layout und Konzeption von Websites |
|
|
Hallo Leute,
hier was zum Thema "Layout und Konzeption von Websites" ...
Screen- und Webdesign
Screen- und Webdesign sind nicht dasselbe. Beim Screendesign geht es ums Visuelle, um die sichtbare, von Monitoren oder vergleichbaren Displays dargestellte Oberfläche.
Webdesign ist die Konzeption und Gestaltung von Websites. Hier geht’s nicht nur ums Visuelle, sondern auch um logische Beziehungen und Verknüpfungen.
Stationen des Gestaltungsprozesses
Ein Web-Projekt beginnt mit dem Briefing. Es enthält die Informationen, die zur Auftragsdurchführung gebraucht werden – knapp formuliert.
• Informationen im Briefing:
• Wesentlicher Inhalt der Website
• Funktion der Seite (Werben, Informieren, Unterhalten usw.)
• Mit der Seite verfolgte Ziele (Bekanntheitsgrad erhöhen, Absatz von Produkten steigern, Zugang zu neuen Zielgruppen finden usw.)
• Zielgruppe
• Gibt es ein Corporate-Design, das für die Website übernommen werden soll?Ist bereits ein Domain-Name vorhanden, der übernommen bzw. weiter verwendet werden soll?
• Ergebnisse und Erfahrungen früherer Web-Projekte oder Multimedia-Produkten
• Stil, Tonalität (sachlich, seriös, kompetent, reißerisch, schrill, billig usw.)
• Technische Rahmenbedingungen
• Termine für Re-Briefing, Präsentationen und Veröffentlichung der Seite
Die folgende Aufzählung benennt weitere wichtige Stationen im Gestaltungsprozess der Website.
• Strukturplan (Bestimmen der logischen Positionen der Seite und ihre Beziehungen)
• Navigationsplan (Navigationsmöglichkeiten innerhalb der Seite)
• Gestaltungsraster (Festlegung von grafischen und typografischen Elementen, die auf allen Seiten gleich sein sollen (Logo, Headline der Seite, Navigation), sowie der Räume und Positionen für die von Seite zu Seite unterschiedlichen Inhalte (Text, Bilder, Grafiken).
• Storyboard oder Storybook (Beides bezeichnet die verbindliche, detaillierte Vorlage zur Umsetzung des Web-Projektes. Für jede Seite wird eine Planungsskizze mit inhaltlichen und technischen Angaben angelegt. Zur Visualisierung dienen manuelle Scribbles oder grob und vorläufig mit einem HTML-Editor erzeugte Seiten.
• Die HTML-Demoversion entspricht visuell bereits der fertigen Webseite, die Vorgaben des Gestaltungsprozesses sind vollständig umgesetzt. Technische Optimierungen, Skripte, Programmierungen oder Datenbankanbindungen fehlen aber noch.)
• Usability-Tests (Überprüfung der Webseite mit unterschiedlichen Methoden.)
Typografie
HTML-Seiten enthalten kodierten Text; um ihn darzustellen, müssen die entsprechenden Fonts auf dem Zielrechner installiert sein.
Als Standard-Webschriften gelten Arial, Courier New, Georgia, Times New Roman, Trebuchet MS und Verdana.
Diese Beschränkungen gelten nicht, wenn Schrift als GIF-Grafik dargestellt wird. Das kommt aber nur für kleine Textmengen infrage, also vor allem für Logos, Headlines oder zur Beschriftung von Navigationselementen.
Langer Text sollte nicht als Grafik angelegt werden, da die Übertragungszeut per Modem oder ISDN unzumutbar lang sind und nicht geeignet für Suchmaschinen ist.
Zentrales Problem bei der Schriftdarstellung am Monitor ist die geringe Auflösung. Damit Schriften annähernd wie gedruckt“ aussehen, müsste die Auflösung min. 600/inch betragen – tatsächlich liegt sie aber zwischen 80/inch und 100/inch.
Schriftgröße
Höhe der Großbuchstaben:
• min 3,2 mm (bei üblichen Monitorauflösungen entspricht das einer Versalhöhe von rund 11 Pixel und einer Schriftgröße von rund 16 Pixel)
• Untergrenze ist bei 12 Pixel bei Normalschnitt serifenloser Schrift
• bei kursiv, fett und Schrift mit Serifen sollte sie etwas größer sein
Lesefreundliche Typografie
Wesentliche Mittel zur lesefreundlichen typografischen Gestaltung von Webseiten:
• Monitor-Optimierte, ausreichend große Schriften
• Sparsamer Einsatz kursiver und fetter Schriftschnitte – ganze Sätze oder Absätze sind schlecht lesbar. Nur zum hervorheben von einzelnen Wörtern benutzen.
• Regeln für die Schriftmischung beachten.
• Zeilenbreite etwa 40 bis 60 Zeichen
• Zeilenabstand min. 130% der Schriftgröße, bei Schriften mit hohen Mittellängen (z.B. Verdana, Georgia) eher etwas mehr
• Linksbündiger Flattersatz mit rhythmischem Wechsel kürzerer und längerer Zeilen
• Kurze Absätze mit etwa 5 bis 7 Zeilen
• Ausreichend Abstände zum Rand des Browserfensters und anderen Elementen der Seite (Text, Grafik, Navigation)
• Ausreichend Hell-Dunkel-Kontrast zwischen Hintergrundfarbe und Schrift
Farben
Beim farblichen Gestalten sind weniger die einzelnen Farben für sich, sondern ihre Verhältnisse zueinander –die Farbkontraste- von Bedeutung.
Zur Darstellung am Monitor benötigt man mindestens zwei Farben. Schwarze Schrift auf hellem Hintergrund hat die beste Lesbarkeit. Ein völlig weißer Hintergrund (R255 G255 B255) wird meistens als störend empfunden; die weiße Fläche scheint zu blenden und die Zeichen zu überstrahlen 8Dazzling). Alternativ kann deshalb auch sehr helles Grau (etwa R240 G240 B240) oder eine helle, sehr stark entsättigte bunte Farbe als Hintergrund verwendet werden.
Durch Farbkontraste und –Harmonien lassen sich ruhige, statische oder dynamische, spannungsreiche Anmutungen erzeugen. Die reinen Primärfarben des Monitors sollten wegen ihrer hohen Buntheit allerdings eher sparsam eingesetzt werden, also nicht großflächig, sondern zum Beispiel als farbliche Akzente im weniger bunten Umfeld. Rot-Blau-Kontraste sind in jedem Fall zu vermeiden, da es an den Kanten zu Unschärfe- und Flimmerwirkung kommt.
Bilder und Animationen
Bei der Verwendung von Bildern auf Webseiten sind drei Einschränkungen zu berücksichtigen:
• erstens die – im Vergleich zu kodiertem Text – großen Datenmengen
• zweitens die gegenüber Fotos oder Drucken recht grobe Auflösung des Monitors
• drittens die unsichere Farbwiedergabe
Die vollständige Übertragung einer Seite sollte höchstens 10 Sekunden dauern, wobei heute noch das 56-Kilobit-Moden als Maßstab gilt.
Fotos und vergleichbare Halbtonbilder werden im JPEG-Format angelegt. Bei der skalierbaren, verlustbehafteten JPEG-Kompression kommt es darauf an, einen sinnvollen Kompromiss zwischen Bildqualität und Dateigröße zu finden.
Für grafisch angelegte Bilder, die im Wesentlichen aus Flächen und Linien bestehen, wird das GIF (Graphic Interchange Format) mit verlustfreier LZW-Komprimierung verwendet. Die Dateigröße lässt sich hier vor allem durch die Anzahl verwendeter Farben beeinflussen; die Beschränkung auf z.B. vier oder acht von insgesamt 256 möglichen Farben ergibt deutlich kleinere Dateien.
Gestaltungsraster
Feste oder flexible Seitengröße
Webseiten können fest oder flexible Größen haben. Bei flexibler Größe passt sich die Darstellung an die Breite des Browserfensters an. Das heißt aber nicht, dass die gesamte Seite mit allen Elementen auf die jeweilige Fensterbreite skaliert würde – alle definierten Maße, also insbesondere die Größen von Bildern und Schriften, bleiben unverändert. Angepasst wird nur die Breite der Textzeilen, sodass sich je nach Breite des Fensters ein anderer Zeilenfall ergibt. Nur geeignet für reine Textseiten.
Die grafische Gestaltung von Seiten mit Text, Bildern und anderen grafischen Elementen funktioniert dagegen nur, wenn ihr Darstellung am Zielrechner vorherseh- und steuerbar ist. Hier kommt also nur eine feste Seitengröße infrage – bei flexibler Seitengröße wäre die Entwicklung von Gestaltungsrastern eine müßiges Unterfangen.
Webseiten werden heute durchweg für Monitor- bzw. Fenstergrößen von 800 x 600 Pixel (SVGA) oder 1024 x 768 (XGA) angelegt. Diese Werte beziehen sich aber auf die äußere Ausdehnung des Browserfensters einschließlich Rahmen, Scrollbars, Funktions- und Statusleisten. Der Anzeigenbereich, also die Fläche, die tatsächlich für die Anzeige zur Verfügung steht, ist entsprechend kleiner.
800 x 600 Pixel 720 x 420 Pixel
1024 x 768 Pixel 955 x 600 Pixel
Gestaltungsraster und Templates
Gestaltungsraster garantieren das folgerichtige und wieder erkennbare Erscheinungsbild aller Seiten des Werbeauftritts und erleichtern die Orientierung auf den einzelnen Seiten – Elemente mit gleicher Funktion stehen immer in derselben Position.
Die Entwicklung von Gestaltungsrastern beginnt mit Freihandskizzen (Scribbles), die dann schrittweise in pixelgenaue Gestaltungsraster umgesetzt werden.
Webseiten haben drei wesentliche Funktionsbereiche:
• Die Identifikation der Website (Logo, Name der Seite, des Anbieters oder des Produkts) steht in der Regel am Kopf der Seite; links oben ist die bevorzugte Position für das Logo.
• Navigationselemente, also Verweise (Links) zu anderen oder (seltener) rechts neben dem Inhaltsbereich oder als waagerechte Leiste am Kopf der Seite angeordnet.
• Im Footer stehen zum Beispiel Copyright- Vermerk, Aktualisierungsdatum und andere kurze Angaben. Hier werden oft auch die Links wiederholt, um das zurückscrollen zur Navigation im oberen Bereich der Seite zu ersparen.
Site-Identifikation und Navigation sollten immer vollständig im Top-Screen stehen, damit sie sofort nach dem Öffnen der Seite im Browser sichtbar sind.
Zur technischen Umsetzung werden die Vorgaben der Gestaltungsraster in Templates (Schablonen, Musterseiten) übernommen. Das sind HTML-Seiten mit allen unveränderlichen Elementen sowie vorgegebenen Positionen und Räumen für die von Seite zu Seite unterschiedlichen Inhalte. Das Arbeiten mit Templates sichert die durchgängige Einhaltung gestalterischer Vorgaben bei der technischen Realisierung und ist erheblich rationeller, als jede Seite einzeln aufzubauen.
Struktur und Navigation
Jeder Webauftritt (Website) besteht aus mehreren Seiten (Webpages), die eine logische Struktur bilden und aufeinander verweisen. Es gibt vier Grundstrukturen, die zum Teil auch miteinander kombiniert werden können:
• Lineare (sequenzielle) Struktur: Die Seiten folgen aufeinander wie die Seiten oder Kapitel eines Buchs. Es gibt keine Über- und Unterordnungsverhältnisse, sondern eine logisches Nacheinander; jede Seite verweist auf die folgende.
Bei der jump-linearen (sprung-linearen) Struktur gibt es eine zusätzliche Seite, die auf alle anderen verweist, also die Funktion eines Inhaltsverzeichnisses hat.
• Baumstruktur, hierarchische Struktur: Hier gibt es eindeutige Über- und Unterordnungsverhältnisse – jede übergeordnete Seite verweist auf mehrere untergeordnete. Übergeordnete Seiten haben allgemeinere, überblickartige Inhalte, untergeordnete enthalten speziellere, ins Detail gehende Informationen.
• Matrixstruktur (Gitter-, Tabellenstruktur): Die Seiten stehen logisch in den Spalten und Zeilen einer Matrix oder Tabelle – jede Seite entspricht einem Tabellenfeld. Die Spalten können z.B. für Produkte stehen, die Zeilen für bestimmte Informationen dazu (Produktbeschreibung, technische Daten, Zubehör, Preise). Jede Seite verweist auf Seiten derselben Spalte und derselben Zeile. Zum Aufbau kompletter Webseiten ist die Matrixstruktur weniger geeignet.
• Netzstruktur, Random-Struktur (engl. Random: zufällig, aufs Geratewohl): Hier gibt es weder ein Nacheinander, noch Über- und Unterordnungen oder Spalten und Zeilen. Die Seiten bilden Knoten eines Netzes; jeder Netzknoten verweist auf mehrere Seiten, die wiederum als Knoten fungieren. Umfangreich Netzstrukturen sind schwer zu überblicken und stellen hohe Anforderungen sowohl an die Navigationsgestaltung als auch an die Findigkeit der Nutzer(innen).
Die Meisten Webseiten benutzen die hierarchische Struktur. Sie ist flexibler als die Matrix- und übersichtlicher als die Netzstruktur.
Navigationselemente
Die Gestaltung von Navigationselementen sollte sich an bekannten, allgemein üblichen Standards orientieren; Nutzer(innen) sollen möglichst mühelos und ohne langes Nachdenken durch zuvor unbekannte Sites navigieren. Das funktioniert nur, wenn Navigationselemente mit einem Blick aufzufinden sind und ihre Bedeutung zweifelsfrei erkennbar ist.
Eine gut gestaltete Navigation soll Antwort auf die fünf „W-Fragen“ geben:
• Wo bin ich?
• Woher komme ich (und wir geht es dahin zurück)?
• Wohin geht es als nächstes?
• Wo ist das, was ich suche?
• Was gibt es sonst noch?
Domain-Name
Der Domain-Name ist das Aushängeschild für Unternehmen, Organisationen und Personen im Internet; über ihn werden Seiten im Web gefunden. Er sollte möglichst kurz, aussagekräftig, unverwechselbar und leicht merkbar sein und darf die namensrecht anderer Personen, Unternehmen und Organisationen nicht verletzten. Nach den Bedingungen des DENIC gelten folgende Regeln für die Formulierung von Domain-Namen:
• Es dürfen nur Buchstaben, Ziffern und Bindestriche verwendet werden.
• Länge mindesten 3, höchstens 63 Zeichen
• Wenigsten ein Zeichen muss ein Buchstabe sein.
• Groß- und Kleinschreibung werden nicht unterschieden.
• Umlaute sind möglich, das ß aber nicht.
• An Anfang, Ende sowie an dritter und vierter Stelle des Domain-Namens darf kein Bindestrich stehen.
• Bezeichnungen von Top-Level-Domains (z.B. .com, .org, .net) sind als Domain-Name nicht erlaubt, ebenso die zur Benennung des Zulassungsbezirks auf deutschen Kraftfahrzeug-Kennzeichen verwendeten Buchstabenkombinationen.
Für Verwaltung und Vergabe von Domain-Namen unter der Top-Level-Domain .de ist das DENIC (Deutsches Network Information Center) zuständig, für Domain-Namen unter internationaler Top-Level-Domains wie .com, .org, .biz und .net das InterNIC ( International Network Information Center).
Usability
Der Begriff Usability lässt sich als Nutzbarkeit, Gebrauchstauglichkeit oder Nutzerfreundlichkeit übersetzen.
ISO 9241 beschreibt Usability allgemein als das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Zusammenhang verwendet werden kann, um damit bestimmte Ziele effektiv, effizient und zur Zufriedenheit zu erreichen.
Auf Websites bezogen, lassen sich diese Anforderungen etwa so formulieren:
• Effektivität: Nutzer(innen) suchen Websites auf, um konkrete Ziele zu erreichen; sie wollen sich z.B. über ein bestimmtes Produkt informieren usw. Eine Website ist effektiv, wenn das Ziel überhaupt erreichbar ist – unabhängig vom Aufwand.
• Effizienz: hier geht es um den – vor allem zeitlichen – Aufwand zur Erreichung des Ziels; er darf aus Sicht der Nutzer(innen nicht größer sein als der erwartete oder realisierte Ertrag.
• Zufriedenheit ist das „weichste“ Kriterium: Nutzer(innen) sind zufrieden, wenn sie ihr Ziel mit geringem Aufwand erreicht haben und ihre Erwartungen an die Website zumindest erfüllt wurde.
Usability sollte zentraler Gesichtspunkt bei Planung und Realisierung von Websites sein.
Arbeitsrichtlinien:
• Übersichtliche, durchschaubare Sitestruktur
• Hierarchie weder zu tief noch zu breit (max. 4 Ebenen, max.9 Auswahlmöglichkeiten)
• Folgerichtige, nachvollziehbare Zuordnung von Unter- und Oberkategorien
• Allgemein übliche und verständliche Navigationsbegriffe
• Funktionelle Navigationselemente an festen Positionen
• Kurze Navigationswege
• Alternative Navigationsmöglichkeiten
• Eindeutige Kennzeichnung der geöffneten Seite
• Übersichtliche Seitengestaltung
• Wesentlicher Seiteninhalt im Top-Screen erkennbar
• Lesefreundliche Typografie
• Kurze Ladezeiten
Usability-Verfahren:
• Usability-Inspektion durch Experten: Fachkundige Gutachter(innen) prüfen, ob die Eigenschaften der Site mit allgemeinen gültigen Prinzipien zur benutzerfreundlichen Gestaltung übereinstimmen.
• Usability-Lab: Testpersonen werden im „Labor“ bei der Bewältigung der ihnen gestellten Aufgabe beobachtet.
• Online-Panel: Die Site wird von Personen beurteilt, die sich zur Teilnahme an Online-Befragungen bereit erklärt haben und in der Datenbank eines Konsum- oder Marktforschungsunternehmens registriert sind.
Rechtliches
Bei der Wahl des Domain-Namens dürfen die Rechte anderer Personen, Unternehmen, Organisationen oder öffentlich-rechtlicher Körperschaften am jeweiligen Namen nicht verletzt werden.
Nach § 6 des Teledienstgesetzes (TDG) muss jede geschäftsmäßig veröffentlichte Website eine Anbieter-Kennzeichnung tragen. (Impressum)
Die wichtigsten Angaben nach § 6 TDG sind:
• Name und Anschrift des Anbieters
• Angaben zur schnellen elektronischen Kontaktaufnahme und unmittelbaren Kommunikation (Telefon, FAX, E-Mail)
• Angabe der Aufsichtsbehörde, falls die Tätigkeit des Anbieters eine behördliche Zulassung erfordert
• Handels-, Vereins-, Partnerschafts- oder Genossenschaftsregister und Registrierungsnummer, falls der Anbieter in eines dieser Register eingetragen ist
• Umsatzsteuer-Identifikationsnummer (soweit vorhanden)
Alle persönlichen geistigen Schöpfungen, also zum Beispiel Texte, Grafiken oder Musik, unterliegen dem Schutz des Gesetzes über Urheberrecht und verwandte Schutzrechte (Urheberrechtsgesetz, UrhG). Nach § 12 UrhG hat nur der Urheber das Recht zu bestimmen, ob und wie seine Arbeit veröffentlicht wird.
Verweise auf Webseiten anderer Anbieter oder ihre Einbindung in eigene Frames sind nur zulässig, wenn klar erkennbar bleibt, dass es sich um fremde Angebote handelt. Verlinkung auf Seiten konkurrierender Unternehmen ist nicht zulässig, da beim Verbraucher der unzutreffende Eindruck einer Partnerschaft entstehen könnte.
Auf fremde Seiten darf nur verlinkt werden, solange dort keine rechtswidrigen Inhalte zu finden sind.
Betreiber von Online-Shops müssen neben dem TDG auch das Teledienstedatenschutzgesetz (TDDSG), Regelungen im BGB, die BGB-Informationspflichten-Verordnung (BGB-Info-V) und die Preisangabenverordnung beachten.
Kund(inn)en sind vor dem Bestellvorgang über Art, Umfang und Zweck der Datenerhebung und- speicherung zu informieren und darauf hinzuweisen, dass sie ihre Einwilligung zur Datenspeicherung jederzeit widerrufen können (§ 4 TDDSG).
Nach § 312d Absatz 1 BGB haben Käufer(innen) das Recht, den Kaufvertrag ohne Begründung innerhalb von zwei Wochen zu widerrufen.
Potenziellen Käufer(innen) ist vor dem Bestellvorgang zu erklären, wie der Shop funktioniert und welche technischen Schritte zum Vertragsschluss führen (§ 3 Ziffer 1 BGB-Info-V).
Liefer- und Versandkosten sind anzugeben. Preise müssen unmittelbar bei den angebotenen Waren stehen; Verweise reichen nicht aus. Es ist ausdrücklich darauf hinzuweisen, dass die Mehrwertsteuer in den angegebenen Preisen enthalten ist.
Quelle: Informationen verbreiten
... für Ergänzungen bin ich sehr dankbar.
|
|
| |
|
|
Sady
Dabei seit: 08.12.2003
Ort: Wuppertal
Alter: 42
Geschlecht: 
|
Verfasst Mi 12.04.2006 12:35
Titel
|
|
|
Bitte löschen, doppelpost ...
Zuletzt bearbeitet von Sady am Mi 12.04.2006 16:30, insgesamt 2-mal bearbeitet
|
|
| |
 |
|
Sady
Dabei seit: 08.12.2003
Ort: Wuppertal
Alter: 42
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[AP06] Medienoperating - Nonprint
[AP06] Mediendesign - Print
[AP06] Mediendesign non print 1024er Auflösung
[AP06 - Praxis] Mediendesign Non-Print, W.O-Gestaltung
[AP WI 07] Mediendesign - NonPrint
[AP | Nonprint | Mediendesign]
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
