Lise Muusmann online

----Design af forfatteren

Lise Muusmanns hjemmeside----

Erik Steen SvendsenJakob MuusmannOle Isø-Nielsen

Forord til LMOHer snakker vi os varme og fortæller

kort om opgaven.Rekvirentens ønsker og mål for siden.

Målgruppen for Lise Muusmann online

Den uafgrænsede målgruppe

”alle kan vel få lyst til at læse en krimi””ingen bør udelukkes fra sitet”

Segmentmodeller

: ) ;)

: (

; (

Minerva-modellen

Gallup Kompas

Det moderne fællesskabsoriente

rede segmentKulturkonsumenterStøtte til kulturlivetBiblioteksbrugereHyppige brugere af InternettetStorbymennesker

Typer af websitesPersonligeInformerendeOrganisationer PolitiskeKommercielle

Typer af forfatterhjemmesid

er

Den etablerede forfatterDen eksperimenterende forfatterAmatør- og fritidsforfatteren

Ib Michael

Gordon Inc.

Anne Lützhöf

t

Jens Michael Schau

Klaus Kjøller

Målsætning med designet

IdentitetAtmosfærePersonlighedSeriøsitet

Grafisk design af Lise Muusmann

online

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

”Less is more””Less-is-more” i forhold til æstetik blev

et af vores nøglebegreber i hele designfasen. John Morkes og Jakob Nielsen

Det narrative”Words and pictures can be a powerful

combination, but they must work together

Billeder og ord i

kombination ...

Dette er ikke en pibe.

Udkast, forkast og ny indsigt

Brainstorm over temaet, ”forfatter + kriminalroman” :

Gammel skrivemaskine*Film noir* Bogart*

’ROYAL’

Film Noir

Bogart

Første fase... begyndte med, at vi fik konstrueret

et manipuleret billede af en skrivemaskine.

Den første prototype

Anden fasebegyndte 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.

Den anden prototype

Tredje faseog 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.

Det endelige design

Et kompromis mellem 1. og 2.

Fase førte til den endelige design-

version

Konstruktion af Lise Muusmann

online

Som udgangspunkt for konstruktionen af Lise Muusmann online, kom vi frem til at

sitet skulle være overskueligt samt informativt.

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.

Informativt

For at være informativ var det vigtigt at menupunkterne,måtte være enkle og sigende.

CSS

10 html sider6 af siderne er placeret som en menubar som man kan klikke på konstant

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; text-decoration:none;}

a:hover { color:#FF0000;

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;width:700px;overflow:auto;/* kun i IE */scrollbar-face-color: #6E6C6C;

}

#forsidetekst{ position:absolute;

top:100px;left:20px;

width:450px;}

#paparazzimordenetekst{ width:450px;}

H1{ font-size:34px;}

H2{ font-size:18px;}

#lisepic{ position:absolute; top: 50px;

right: 65px;width:100px;

}

#paparazzimordene{ position:absolute;

top: 45px;right: 50px;width: 100px;

}

Navigation

Med navigationen til Lise Muusmann online kom vi frem til en menubar, hvorfra man konstant skulle kunne komme ind på alle

sitets hovedpunkter.

“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.

Sitemap nr. 1

Sitemap nr. 2

Top menubar

Top menubar

Links

Under hovedpunkterne ”Paparazzimordene”samt “ arbejder” findes der sublinks.

De synlige links

Struktur

Strukturen for sitet er primært bygget op omkring, at det er tekst der skal formidles,

og altså I mindre grad noget visuelt.

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)

PAPARAZZIMORDENE

“Paparazzimordene” er blevet til et punkt ihovedmenuen, da sitet i første omgang tjener til promoveringen af denne udgivelse.

DiskussionSelvkritik af LMOValideringBaggrundsfarveMenupunkter