Download præsentationen
1
Lise Muusmanns hjemmeside
Lise Muusmann online ---- Design af forfatteren Lise Muusmanns hjemmeside Erik Steen Svendsen Jakob Muusmann Ole Isø-Nielsen
2
Forord til LMO Her snakker vi os varme og fortæller kort om opgaven.
Rekvirentens ønsker og mål for siden.
3
Målgruppen for Lise Muusmann online
4
Den uafgrænsede målgruppe
”alle kan vel få lyst til at læse en krimi” ”ingen bør udelukkes fra sitet”
5
Segmentmodeller : ) ;) : ( ; (
6
Minerva-modellen
7
Gallup Kompas
8
Det moderne fællesskabsorienterede segment
Kulturkonsumenter Støtte til kulturlivet Biblioteksbrugere Hyppige brugere af Internettet Storbymennesker
9
Typer af websites Personlige Informerende Organisationer Politiske
Kommercielle
10
Typer af forfatterhjemmesider
Den etablerede forfatter Den eksperimenterende forfatter Amatør- og fritidsforfatteren
11
Ib Michael
12
Gordon Inc.
13
Anne Lützhöft
14
Jens Michael Schau
15
Klaus Kjøller
16
Målsætning med designet
Identitet Atmosfære Personlighed Seriøsitet
17
Grafisk design af Lise Muusmann online
18
Design-fasen LMO skulle have de bedste muligheder for at blive opfanget på forlagenes, bibliotekernes og kritikernes radarer. En side indeholdende: Identitet Atmosfære Personlighed Seriøsitet
19
”Less is more” ”Less-is-more” i forhold til æstetik blev et af vores nøglebegreber i hele designfasen. John Morkes og Jakob Nielsen
20
Det narrative ”Words and pictures can be a powerful combination, but they must work together
21
Billeder og ord i kombination ...
Dette er ikke en pibe.
22
Udkast, forkast og ny indsigt
Brainstorm over temaet, ”forfatter + kriminalroman” : Gammel skrivemaskine* Film noir* Bogart*
23
’ROYAL’
24
Film Noir
25
Bogart
26
Første fase ... begyndte med, at vi fik konstrueret et manipuleret billede af en skrivemaskine.
27
Den første prototype
28
Anden fase begyndte ved, at vi tilfældigt faldt over en hjemmeside, som også var bygget op omkring en skrivemaskine. Dette site var gået skridtet videre og benyttede ”papiret” udelukkende som område for lokale links. Brødteksten var derimod placeret ovenpå et område, hvor tastaturet burde have været.
29
Den anden prototype
30
Tredje fase og begyndelsen på det endelige produkt blev således til igennem 1. og 2. fases designs. Vi konstruerede en ny maskine, der havde mere karakter af igen at være en skrivemaskine. Der var lidt mere ”sjæl” og lidt mere ”Bogart” over designet.
31
Det endelige design
32
Et kompromis mellem 1. og 2. Fase førte til den endelige design-version
33
Konstruktion af Lise Muusmann online
34
Som udgangspunkt for konstruktionen af Lise Muusmann online, kom vi frem til at sitet skulle være overskueligt samt informativt.
35
Overskuelig “In general, users have difficulty with horizontal scrolling, so it's best to design to avoid it at 800 X 600 screen resolution.” Building Web Sites With Depth , Jakob Nielsen og Marie Tahir.
36
Informativt For at være informativ var det vigtigt at menupunkterne,
måtte være enkle og sigende.
37
CSS 10 html sider 6 af siderne er placeret
som en menubar som man kan klikke på konstant
39
body { background-color: #000000; text-align: center; padding-top: 70px; /* float: left;*/ } #container{ background-image: url(grafik/Mastermuusmann.gif); background-repeat: no-repeat; background-position: center; height:600px; width:800px; margin-left:auto; margin-right:auto; #menu{ font-family:"Courier New", Courier, mono; font-size:19px; font-weight: bold; color:#000000; word-spacing: 20px; width:700px; height:30px; position:relative; top:131px; left:34px; float: left; #menu ul,#menu li { display: inline; #menu, a{ color: #000000; text-decoration:none; /* "du er her"-funktionen */ .aktiv { color:#FF0000; .tekstlink{ color:#FFFFFF; a:hover { text-transform: uppercase; #indhold{ width:700px; height: 355px; left:40px; bottom:0px; position:relative; top: 226px; float: left; } #tekst{ font-family:"Courier New", Courier, mono; color:#FFFFFF; text-align: left; height:310px; overflow:auto; /* kun i IE */ scrollbar-face-color: #6E6C6C; #forsidetekst{ position:absolute; top:100px; left:20px; width:450px; #paparazzimordenetekst{ H1{ font-size:34px; H2{ font-size:18px; #lisepic{ top: 50px; right: 65px; width:100px; #paparazzimordene{ top: 45px; right: 50px; width: 100px;
40
Navigation
41
Med navigationen til Lise Muusmann online kom vi frem til en menubar, hvorfra man konstant skulle kunne komme ind på alle sitets hovedpunkter.
42
“One of the oldest guidelines for usable interaction design is to increase the user's sense of control and freedom. It feels good to be in control. It feels bad to be dominated by a machine.” Building Web Sites With Depth , Jakob Nielsen og Marie Tahir.
43
Sitemap nr. 1
44
Sitemap nr. 2
45
Top menubar
46
Top menubar
48
Links Under hovedpunkterne ”Paparazzimordene” samt “ arbejder” findes der sublinks.
49
De synlige links
50
Struktur
51
Strukturen for sitet er primært bygget op omkring, at det er tekst der skal formidles, og altså I mindre grad noget visuelt.
52
Conventional guidelines include carefully organizing the information, using words and categories that make sense to the audience, using topic sentences, limiting each paragraph to one main idea, and providing the right amount of information. Concise, Scannable, and Objective: How to Write for the Web by John Morkes and Jakob Nielsen (1997)
53
PAPARAZZIMORDENE “Paparazzimordene” er blevet til et punkt i
hovedmenuen, da sitet i første omgang tjener til promoveringen af denne udgivelse.
54
Diskussion Selvkritik af LMO Validering Baggrundsfarve Menupunkter
Lignende præsentationer
© 2024 SlidePlayer.dk Inc.
All rights reserved.