god, flot og brugervenlig hjemmeside

For at det skal lykkes for mig at lave en stilren og overskuelig hjemmeside, arbejder jeg MEGET på det stilrene. Jeg er ikke grafiker, og skal nok bruge 150% af den tid, som en professionel grafiker ville. For hver time en grafiker vil bruge, bruger jeg nok 1½ :/

Mange sider er komplet uoverskuelige, fordi der er tonsvis af udtræk og funktioner, gerne krydret med et hav af reklamer. Så det vigitge for mig er strukturen: Hvad skal med? Hvor meget af det skal med? Hvad skal øverst på siden, og hvad kan godt tåle at komme ned mod bunden, sådan lidt uden for synsfeltet?

Jeg kan ikke give dig en god opskrift, udover at arbejde på at få den stilren. Så følger overskueligheden oftest med.

Efterlyser du et konkret eksempel?

vil anbefalde dig at bruge simple farver, sort på hvidt og ikke omvendt.
brug ikke blikende effekter, popups, osv.

Lav den overskuelig, f.eks. med en menubar.

Men er det koden eller designet du skal forklare/aflevere ?

Ja, der er nogle simple grundregler, såsom ikke at benytte lysegul skrift på hvid baggrund osv. Men det r du bekendt med?

Jeg har kun prøvet at lave en hjemmeside før, så jeg ved ikke så meget om hvad der skal med og hvordan tingene foregår. Jeg kan noget teori men det med at få det til at se godt ud, synes jeg er ret svært. Vi har lært en masse om brugervenlighed, noget med om de vigtigste oplysninger står på alle siderne ovs.
Jeg skal kunne forklare designet, og hvis jeg kan forklare kodningen er det kun et kæmpe plus.

Ja jeg har læst lidt om farver. Hjemmesiden er til en børnehave, så jeg havde lidt tænke mig at der skulle en del farver på så det passer til indtrykket man får af en børnehave

enig med steen.

1) Hold det enkelt.
  En kort menu med få valgmuligheder.
  et simpelt design der ikke skriger.
  få elementer på hver sider der er placeret overskueligt.
  benytte en enkelt velvalgt font til al tekst.

2) overhold standard brugerflade regler
  links der er understreget og hvor musen bliver til en
hånd når den kommer over linket
  aldrig mere end ca 15 valgmuligheder i en select box
helst færre.
  radioknapper hvor der kan vælges kun een udaf flere
  checkbokse hvor flere kan vælges uafhængigt af hinanden
  felter der ligner felter, og ikke camoufleret med CSS så
de ikke er til at finde.

3) alm retskrivningregler
  korte klare sætninger
  simple korte ord hvorsomhelst simple kort ord er nok
  korrekt stavning og tegnsætning.

"smarte ting" såsom ulæselige skrifttyper, flash, stave 'z' iztedet for 's', blande sTOrE oG SmÅ bogstaver; benyttes kun ego-maniske 14-årige og har ingen anden effekt end at jage folk væk fra siden.
 
mvh JakobA

Har man en debat, kan man f.eks. trække de sidste 5 indlæg ud og placere i en kolonne til højre.

Man kan lave en afstemning om aktuelle emner.

Man kan lave mange ting, som vil gøre den dynamisk og interessant. Det vigtigste for mig er, at den er overskuelig. Og så skal den selvfølgelig også være venlig ved øjnene, man må ikke blive træt i øjnene efter 5 min.

Er det ikke noget med at man skal undgå at skriev så meget tekst som overhoved mulig på en hjemmeside? Fordi at folk ikke gider læe alt det

Smukt sagt, jakoba :oD

Man skal altid sørge for, at det er relevant, det man skriver. Undgå fyldord og hold dig til emnet. En artikel kan sagtens være spændende og fange læseren, selvom den fylder en del. Men her er det også vigtigt med overskueligheden. Teksten må ikke være fnidret, vælg en letlæselig font, lave evt. en line-height: 18px;

Hvis jeg nu bygger siden op sådan i fire kasser. En som fylder hele toppen med evt. overskrift, adresse og tlf. En lille side ting i venstre side hvor menuen er, og en ting nede for neden til åbningstider. Så det kun er det inde i midten der bliver skiftet ud. Er det en god ide?

... og lav nogle overskuelige afsnit

Det er en god idé. Til en forside kan du også med lidt held lave en kolonne til højre med flere appetitvækkere. Bare brugeren ikke mister overblikket, når han/hun kommer ind på siden.

Er det ikke dumt med en kolonne i højre side, hvis folk kører med forskelling opløsning på deres skærm?

Jeg plejer gerne at lave den 755 pixels i bredden. Så kan jeg styre indholdet, jeg kan styre, hvordan den skal se ud for brugeren.

EkstraBladet's er 100% bred, og det ser (for mig) tåbeligt ud, hvis man kører med en meget høj opløsning. Så fylder overskrift og manchettekst højst 1½ linie, og det var ikke tiltænkt.

Det er ikke mange mennesker, der stadig kører med 480 x 640, så dem gider jeg ikke tage hensyn til længere. Men der er stadig MANGE, der kører med 800 x 600. Derfor de 755 px i bredden.

Så laver du en fast bredde på din side, kan du styre helt præcist hvordan publikum får det præsenteret. Det er ikke dummere end din menu i venstre side; den har også en fast bredde.

Jo, en vigtig ting: Kontinuitet! Du skal for alt i Verden sørge for, at din kode er i orden. Uanset hvilken side man befinder sig på, skal den i struktur og størrelse være identisk med den side, som brugeren kom fra. Der er næsten ikke noget værre, end en side med tabeller, der forrykker sig konstant. Det skal være ENS, simpelthen helt ned til den mindste pixel :o)

Jeg vil prøve at gå i gang med den. Mange mange tak for hjælpen :)

Fino :o) Håber du fik inspiration.

En aller-sidste ting: Jeg prøver altid at finde frem til en stil, hvor man hurtigt og gerne med nogle få blikke ned over siden kan danne sig et klart overblik over hvad der er at forvente. Igen enkeltheden. Dét er en kunst.

Som jeg startede med, så er der mange sider, hvor alt muligt er kastet ind, og man skal bruge meget tid på at finde ud af, hvad det i det hele taget drejer sig om, og hvad siden indeholder. Tit finder man efter meget lang tid ud af, at der er masser af andre oversigter eller funktioner, og det er med til at gøre den møg-forvirrende. Hold siden enkel! Det er det allerbedste råd jeg kan give dig. Men det er sq svært, jeg bakser lige meget med det hver gang.

Held og lykke! :o)

Jeg går lige i selvsving for sidste gang:

Sørg for, at brugeren når frem til det der ønskes v.hj.a. 2, højst 3, klik. Brugeren giderikke og står af, hvis man skal klikke sig frem gennem 8-10 links.

Nu kan jeg fornemme, at du er lidt nybegynder på området, men prøv at lære det korrekt fra start. Benyt Cascaded Style Sheets, få din side verificeret på http://validator.w3.org/detailed.html. Et eksempel på hvordan en side kan laves:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Velkommen til min hjemmeside</title>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<link rel="stylesheet" type="text/css" href="/includes/style.css">
</head>

<body style="margin-top: 0px; margin-left: 0px; margin-bottom: 0px;">

<div align="center">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" style="width: 755px;" class="text11">
        <tr>
            <td colspan="3"><span class="o17">Banner</span></td>
        </tr>
        <tr>
            <td style="width: 160px; padding: 20px 20px 20px 20px;" valign="top" align="left"><b>Menu</b></td>
            <td style="width: 435px; padding: 20px 20px 20px 20px;" valign="top" align="left">Main</td>
            <td style="width: 160px; padding: 20px 20px 20px 20px;" valign="top" align="left">Appetitvækker</td>
        </tr>
        <tr>
            <td colspan="3">Bund</td>
        </tr>
    </table>
    </center>
</div>

Gem et dokument som style.css og gem det i mappen "includes". style.css kunne bl.a. indeholde dette:

body {
background-color: #396da5;
}
.text11 {
color: black;
font-style: normal;   
font-weight: normal;
font-size: 11px;
font-family: verdana, helvetica, geneva, arial;
line-height: 18px;
}
.o17 {
color: black;
font-style: normal;
font-weight: bold;
font-size: 17px;
font-family: verdana, helvetica, geneva, arial;
line-height: 32px;
}
a {
font-size: 11px;
color: #336699;
font-family: verdana, helvetica, geneva, arial;
text-decoration: underline
}
a:hover {
color: #000000;
text-decoration: none
}

Men det er nok en stor mundfuld, hvis du er nybegynder. Men nu kan du slå mit forslag op, og måske blive inspireret. Der findes en super side www.html.dk, hvor du kan lære meget om HTML, CSS oma.

Se lige bort fra de META-tags øverst i dokumentet. Der er nogle mangler og en enkelt dublet :o)

Her er nogle enkle designs der kan arbejdes med: http://www.eksperten.dk/spm/276705

Du kunne lave noget i stil med denne http://portal.aarhus-m1.dk/htm/inst.php?pasnr=170

Dette syntes jeg er et godt desigsn til en børnehave!

soliduz: Fik du noget ud af det?

Flot og brugervenligt er ikke nødvendigvis det samme. Et utroligt godt eksempel på brugervenligt webdesign findes på www.useit.com, som næsten ikke anvender nogen form for grafik. Derudover er Google også et stjerne eksempel på brugervenlighed.

Jo mere brugervenligt, jo mindre flot behøber siden at være.

ahem, jo mange interesante input, og en frygtelig masse vrøvl!

brugervenlighed = bruger venlig

det handler altså om SAMSPILLET mellem DESIGN og FUNKTIONALITET
1: teknisk SKAL alting fungere optimalt uanset platform og fremvisningsmedie.
2: Designet SKAL være ledende og HJÆLPE bruger til at skabe overblik og forståelse.

en klassisk MISFORSTÅELSE er www.useit.com, som nogle betegner som "brugervenligt"
i min bog er det snarere et patetisk forsøg på et statement fra oldtiden.
og det er absolut ikke "venligt at bruge"...men det er en umulig diskussion
da "brugervenlighed" ikke  kan diskuteres teoretisk, det handler om KOMMUNIKATION
hvilke virkemidler der tages i brug er unikt hver gang, JakobA har dog fat i et par
"regler" man BØR forhold sig til...(hvergang)

:)

mobius6 --> kan ikke være mere enig!! Designet er også meget vigtigt!!

en side som www.useit.com lukker jeg ned lige når jeg åbner den fordi den er SÅ grim!

soliduz, det kunne være rart med noget feedback på alle de indlæg. Kunne du bruge noget af det?

i al beskedenhed: se en simpel side her: www.mifo.dk (hvor der dog er bøvl med opløsningen/størrelsen)

Jeg mener at kontrast er en vigtig faktor. useit.com har tilnærmelsesvis ingen kontrast og det bevirker at øjnene flakker rundt på siden og "leder" efter et fiks-punkt. Husk brug kontraster!
Enten ved:
Former
farver
størrelser
Men lad være med at bruge alle nævnte kontrast-muligheder.
Desuden skal du huske at dine elementers placering giver mening. Og placer elementer der går igen - samme sted på alle siderne.
;o)
Godt design er design der hjælper indholdet til udtryk.
Brug ikke tekniske "overflødigheder" hvis der ikke er grund til det.
Husk hele tiden at tænke på hvem du henvender dig til og hvilke
tekniske begrænsninger det giver.

Held og lykke med det.

Kan kun være enig i alle de retningslinie folk kommer med.
Dog lige en ting til: siden skal være hurtig at loade.

Jeg har selv 512/128 adsl linie, jeg åbene www.mifo.dk, og jeg måtte virkelig tage mig sammen for ikke at lukke den igen... Den side tager 5 år, en summer og min madpak at åbne. sådan nået gider folk ikke vente på.

dl, de 4 billeder fylder rundt regnet 1 MB tilsammen. Jeg er enig i, at de burde tilpasses :o)

soliduz, er det ikke på tide at lukke? :o)

gaaaab, den er gammel den her, måske var det på tide at få lukket spørgsmålet?

14 måneder, er det lang tid? :)

soliduz se så at få lukket dine spørgsmål!