Arbejdsflade

Vælg et mønster og prøv det.

Sortér

Frit layout

To paneler

Materiale

Valgt note

Venstre panel 35 %

Titel Indhold

Gemt lokalt

Edit Kompleks

Valg - redigering - visning

Vælg indhold

Redigér

Titel Manchet Brødtekst

Ændringer gemmes lokalt i prøven.

Preview

Sidetyper

Vælg efter den opgave, brugeren skal løse. Åbn et eksempel for at prøve strukturen.

Kontekstbeskeder

En kort forklaring efter en handling, knyttet til knappen der blev brugt.

Bekræftelse

Vis, hvad der netop skete. Ingen ekstra handling kræves.

Tip

Giv en nyttig forklaring, når brugeren vælger en funktion.

Næste skridt

Tilbyd én relevant vej videre, når den er konkret.

Prøv også temaknappen øverst. Beskeden vises, når du vælger Mørk.

Desktop	Tablet og telefon
Hover kan give et kort hjælpesignal. Tryk på ? i bundbaren for at slå konteksthjælp til. Hold derefter musen over temaknappen, tipknappen eller eksempeldata herunder. Seneste kørsel10.42	Hoverbaseret konteksthjælp er ikke mulig på tablet og telefon. Spørgsmålstegnet vises derfor ikke her.

Desktop

Tablet og telefon

Hover kan give et kort hjælpesignal. Tryk på ? i bundbaren for at slå konteksthjælp til. Hold derefter musen over temaknappen, tipknappen eller eksempeldata herunder.

Seneste kørsel10.42

Hoverbaseret konteksthjælp er ikke mulig på tablet og telefon. Spørgsmålstegnet vises derfor ikke her.

Profil

Din konto og dine valg Prøvedata

Login og adgang

Læsbare kontooplysninger

Loginadresse: alex@example.org Bekræftet
Rolle: Systemadministrator
Adgang: Brugere, indhold, publicering og drift

Rolle og loginadresse ændres af en administrator i den konkrete applikation. Profilprøven ændrer kun personlige oplysninger og beskedvalg.

Brugerstyring

Konti og adgang Prøvedata

Brugere Indlæser

Vælg en bruger

Kontodetaljer

Dashboard

Arbejdsdagens overblik Prøvedata

Kræver handling3Én fejl og to opgaver

Afsluttet18I dag

Aktivitet1.284Visninger i dag

Systemstatus 3 af 4 fungererUndersøg den stoppede kørsel

Kræver handling

Prioriteret efter konsekvens

Produktionslinje

Seneste publiceringsrunde - 10.42

Udgivelse - stoppet

Overførslen stoppede, før den nye version blev synlig. Den tidligere version vises fortsat.

10.42.04 - 10.42.05 - 1 fejl

Udgivelsesplan

Prøve på indhold, status og tidspunkt i samme flade

Artikler

Nyhedsbrev

Analyse - planlagtI dag kl. 14.30 - artikel

Indholdet er klar til den planlagte udgivelse.

Aktivitet over tid

Visninger pr. time - i dag

2000

0006121824

Indkommet

Én arbejdskø på tværs af kanaler

Vælg en post

Vælg en række for at se næste skridt.

Mikro

Lister og små oversigter

Besøg-Seneste periode

Indsendelser-Eksempeldata

Aktive læsere-Eksempeldata

Sidepanel

Ved siden af en artikel eller side

Artikelvisning - prøve

Sådan ser tallet ud ved siden af indholdet

Grafen skal kunne stå i et smalt panel uden at overtage artiklen. Periode, værdi og udvikling er stadig læsbare.

På en telefon flyttes panelet efter indholdet.

Helside

Analyse og undersøgelse

Vælg et punkt på grafen for at se dato og værdi.Mus eller piletaster

Tidsserier

Prøvedata - 1 måling pr. sekund

--:--:--

CPU

-% belastning

Hukommelse

-af 8 GiB

Sidevisninger

-pr. sekund

Log

-hændelser i udsnittet

--:--:----:--:----:--:----:--:----:--:--

Hold markøren over en graf for at sammenligne målinger på samme tidspunkt.

Seneste hændelser

Prøvelog

Tidslærred - kørsler

Prøvedata - gentagne job og planlagte kørsler

Indlæser tidsrumTræk for at flytte - rul eller knib for at zoome

GennemførtKørerFejlPlanlagt

Tidslærred - udgivelser

Prøvedata - indhold på tværs af kanaler

Indlæser tidsrumTræk for at flytte - rul eller knib for at zoome

UdgivetKlargøresKræver handlingPlanlagt

Farver og tema

Identitet, signaler og visning i administrationen.

Identitetsfarver

De fire farver kommer fra dags.dk-logoet. De bruges sparsomt til afsender og enkelte accenter.

Lys blå#00D3FF

Positiv accent og fokus. Mørk tekst på lys blå.

Dybblå#000030

Seriøs betjening, links og afsender.

Bleg gul#FFFFB0

Noget man kan eller bør gøre.

Logoets rød#FF0000

Genkendelig del af logoet. Bruges sjældent i fladen.

Driftssignaler

Signalernes farver er et selvstændigt lag. Grøn og orange er tilføjet til administrationsfladen; de er ikke farver fra logoet.

Grøn - gennemførtEn proces er lykkedes. Vis altid status med ord.

Gul - til handlingBrugeren kan gøre noget nu eller bør lægge mærke til det.

Orange - i gangEn proces kører, venter eller kræver opfølgning.

Rød - fejlStatusfladen er lys og teksten siger Fejl. Den klare logorøde er en særskilt identitetsfarve.

Blå - informationFokus, valgt element eller en neutral oplysning.

Neutrale arbejdsfarver

Tekst#1C1C1C

Papir#FFFFFF

Sekundær tekst#5C5C5C

Regel#D8D8D8

Tema og style

Tema bestemmer lys, mørk eller høj kontrast. Style bestemmer det grafiske udtryk. Indhold, funktion og farvernes betydning er de samme.

Valget gemmes lokalt og kan også ændres under Visning øverst. Farve må aldrig stå alene som forklaring. Tal, statusord og handling skal kunne læses i alle tre temaer.

Typografi

Tekstroller og fontvalg i administrationsfladen.

Fontfamilier

Administrationens grundfont er Helvetica. Systemets installerede fonte bruges som fallback; prøven henter ingen skrifttyper udefra.

dags.dkAa Bb 012345Helvetica, Arial, "Nimbus Sans", sans-serif

MagasinAa Bb 012345Georgia, "Times New Roman", serifKun overskrifter og redaktionel indledning. Resten følger grundfonten.

GitHubAa Bb 012345-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif

Kode og værdierAa Bb 012345ui-monospace, SFMono-Regular, Consolas, monospace

Tekstroller

Grundværdierne nedenfor gælder ved læsbarhed Normal. Hver rolle har et bestemt formål, så nye sider kan vælge en eksisterende rolle.

Brug	Eksempel	Størrelse	Vægt og linje	Eksempel i CSS
Sidetitel	Brugerstyring	20 px	700 / 1,1-1,35	`.account-header h1`, `.pane-heading h1`
Dokumenttitel	Godkend ændring	27 px	700 / 1,12	`.document h2`
Paneltitel	Indhold og adgang	14-15 px	700 / 1,35	`.account-panel-heading h2`, `.palette-content h2`
Rækketitel	Gennemgå ændringen	12 px	700 / 1,25	`.row-title`
Identitet	Admin UI	12 px	700 / 1,35	`.identity-section`
Navigation	Brugerstyring	12-13 px	400 / 1,35	`.nav-item`, `.nav-child`
Grundtekst	En post kan åbnes og behandles.	13 px	400 / 1,35	`body`
Forklaring	Her står årsag og næste skridt samlet.	13 px	400 / 1,45-1,55	`.document-copy`
Feltetiket	E-mailadresse	11-12 px	700 / 1,35	`.account-form-grid label`, `.field label`
Feltværdi	alex@example.org	13 px	400 / 1,4	`.edit-editor-fields input`
Knap og valg	Gem ændringer	10-11 px	400 / 1,35	`.users-table-tools button`, `.menu-nav-item`
Tabeldata	alex@example.org	11 px	400 / 1,35	`.data-table-grid`
Tabelhoved	Seneste login	10 px	700 / 1,35	`.data-table-grid th`
Metadata	Opdateret 10.42	10-11 px	400 / 1,35	`.data-table-footer`, `.account-header p`
App-footer	Klar til næste handling	11 px	400 / 1,35	`.statusbar`
Nøgletal	250	21 px	700 / 1,15	`.dashboard-summary strong`
Artikeltekst i preview	Eksempel på den viste artikel.	16 px	400 / 1,5	`.edit-preview-surface`
Artikel i preview	Artikeloverskrift	32 px	700 / 1,12	`.edit-preview-article h1`

Læsbarhed

Visningens valg Tæt, Normal og Stor skalerer administrationens tekst sammen med afstande og panelbredder. Grundværdierne multipliceres med faktoren. Artikelvisningen er et særskilt preview med egne faste mål.

Tæt92 %

Flere rækker på samme flade. Grundtekst bliver cirka 12 px.

Normal100 %

Grundtekst 13 px og den normale paneldeling.

Stor130 %

Grundtekst cirka 17 px med større kontroller og paneler.

Overskrifter i Magasin bruger serif; GitHub bruger systemfont. Artikelvisningen er et særskilt preview og følger den viste artikels egne mål. Typografiske roller styres i style.css; styles kan ændre fontfamilien uden at ændre indholdets rolle.