1 / 54

Lise Muusmann online

Lise Muusmann online. ---- Design af forfatteren Lise Muusmanns hjemmeside ---- Erik Steen Svendsen Jakob Muusmann Ole Isø-Nielsen. Forord til LMO. Her snakker vi os varme og fortæller kort om opgaven. Rekvirentens ønsker og mål for siden. M å lgruppen for Lise Muusmann online.

barny
Download Presentation

Lise Muusmann online

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  38. 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; }

  39. Navigation

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

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

  42. Sitemap nr. 1

  43. Sitemap nr. 2

  44. Top menubar

  45. Top menubar

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

  47. De synlige links

  48. Struktur

More Related