Analyser f\u00f8lgende hjemmesider, herunder deres brug af tekst, farver og ops\u00e6tning. \u2028<\/p>\n\n\n\n
- \n
- Tre valgfri hjemmesider fra\u00a0awwwards.com<\/a>\u2028<\/li>\n\n\n\n
- To (mindre gode) websites i selv finder<\/li>\n<\/ul>\n\n\n\n
Jeg valgte at arbejde videre med 2. Hobby butik\/e-handel med fokus p\u00e5 gaming da det er en af mine hobbyer
Det var fint nok at skulle side og samle inspiration til workshoppen og se tendenserne som g\u00e5r igen p\u00e5 hjemmesiderne.
Jeg var desv\u00e6rre ikke med p\u00e5 selve dagen s\u00e5 jeg laver det s\u00e5 godt jeg kunne hjemmefra.
F\u00f8rste del af opgaven har jeg unders\u00f8gt andre sider omkring gaming for at se hvordan de er opbygget.
F\u00e6lles UI tr\u00e6k for disse sider:
Store produktbilleder i fokus \u2014 ofte med m\u00f8rk baggrund, s\u00e5 produkterne tr\u00e6der frem.
Hero-sektioner med highlights af nye produkter, kampagner eller popul\u00e6re kategorier.
Bruger rigtige billeder eller mockups, ofte med gamingmilj\u00f8 eller RGB-lys for stemning.
Farvevalg:<\/strong>
F\u00e6lles brug af m\u00f8rke baggrunde (#0A0A0A<\/code>,#121212<\/code>) som skaber en moderne gaming-\u00e6stetik.<\/p>\n\n\n\nAccenter i neonfarver som gr\u00f8n, bl\u00e5, lilla eller r\u00f8d:<\/p>\n\n\n\n
- \n
- Spawnpoint: neon-gr\u00f8n og sort<\/li>\n\n\n\n
- MaxGaming: bl\u00e5\/gr\u00f8n highlights<\/li>\n\n\n\n
- Game The Shop: orange og m\u00f8rkebl\u00e5<\/li>\n<\/ul>\n\n\n\n
Kontrasten bruges til at styre brugerens blik mod CTA-knapper og tilbud.<\/p>\n\n\n\n
Typografi og tone<\/strong>
Bruger sans-serif fonte som Poppins, Inter eller Montserrat \u2013 moderne og teknisk udtryk.
Overskrifter er store og fremh\u00e6vende (fx 48\u201372px), og CTA-knapper har klar, aktiv tekst: \u201cShop now\u201d, \u201cK\u00f8b\u201d, \u201cExplore\u201d.
Tone of voice er kortfattet, direkte og energisk, ofte med gaming-slang eller udtryk:
\u201cFind Your Edge\u201d.
\u201cDominate the Game\u201d,
\u201cGear Up\u201d<\/p>\n\n\n\n\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/screencapture-maxgaming-2026-01-30-12_25_52-286x1024.png\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/screencapture-spawnpoint-io-2026-01-30-12_27_19-250x1024.png\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/screencapture-gamestheshop-2026-01-30-12_28_26-285x1024.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nFind 3 valgfrie hjemmesider p\u00e5 awwwards.com<\/h4>\n\n\n\n
Jeg valgte at finde 3 hjemmesider med lidt den samme stil. <\/p>\n\n\n\n
\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Opsaetning-1.png\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Din-afsnitstekst-1.png\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/Din-afsnitstekst-1-1.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nFind 2 mindre gode sider<\/h4>\n\n\n\n
Jeg har bare fundet to. Den f\u00f8rste fordi jeg har brugt den flere gange og jeg syntes den er for\u00e6ldet. Farverne harmonere ikke ordenligt, der mangler CTA og evt. en webshop. For mit vedkommende s\u00e5 g\u00f8r hjemmesiden ikke det den burde.
Hjemmeside nr 2 er meget forvirrende og der er ingen af siderne som er responsive<\/p>\n\n\n\n\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/screencapture-fynsakvariecentrum-dk-2026-01-30-13_54_05-662x1024.png\")
<\/figure>\n<\/div><\/div>\n\n\n\n\n![\"\"](\"https:\/\/proces.mogensen-design.dk\/wp-content\/uploads\/2026\/01\/screencapture-arngren-net-2026-01-30-14_05_03-1024x758.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nDesign en hjemmeside<\/h4>\n\n\n\n
Ud fra den valgte branche (se liste med brancher i \u2018Forberedelse\u2019), skal du designe en hjemmeside. Der er f\u00f8lgende krav til hjemmesiden: <\/p>\n\n\n\n
- \n
- Du skal anvende et grid (i Figma), n\u00e5r du designer.<\/li>\n\n\n\n
- Hjemmesiden skal v\u00e6re designet til b\u00e5de desktop og mobilversion.<\/li>\n\n\n\n
- Brug den viden, du har opn\u00e5et gennem undervisningen \u2013 hav s\u00e6rligt fokus p\u00e5 adf\u00e6rdsdesign, visuel identitet og principper for brugervenlighed.<\/li>\n\n\n\n
- S\u00f8rg for, at din hjemmeside i videst muligt omfang lever op til punkterne \u201cAppearance\u201d, \u201cColor contrast\u201d, \u201cMobile and touch\u201d og \u201cAnimation\u201d i A11Y Projects tjekliste (baseret p\u00e5 WCAG):\u00a0a11yproject.com\/checklist\/<\/a>\u00a0\u00a0
<\/li>\n<\/ol>\n\n\n\nJeg havde sv\u00e6rt ved at komme videre da jeg sad hjemme alene og ikke havde nogen at sparre med.
Jeg kunne is\u00e6r godt lide Inkgames.com og sidens effekter med parallax og det ville jeg gerne gengive, men det drillede mig helt vildt, s\u00e5 jeg gik videre med en anden l\u00f8sning. <\/p>\n\n\n\nPr\u00e6sentation<\/h4>\n\n\n\n
Lav en pr\u00e6sentation af dit hjemmesidedesign.
Der er f\u00f8lgende krav til pr\u00e6sentationsformatet:
1) Dit design skal vises i device mockups (desktop og mobil).
2) Pr\u00e6sentationen skal v\u00e6re f\u00e6ngende og visuelt appellerende \u2013 t\u00e6nk p\u00e5 den som en pitch af dit design!
3) Inklud\u00e9r en kort beskrivelse af dine designvalg og begrund dem ud fra de principper, du har arbejdet med.<\/p>\n\n\n\n
Din pr\u00e6sentation skal afleveres p\u00e5 ItsLearning.<\/p>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Opgavebeskrivelse Inden du kommer til workshoppen er det vigtigt du har gennemf\u00f8rt nedenst\u00e5ende.\u00a0 V\u00e6lg en af f\u00f8lgende brancher du vil arbejde med i workshoppen og\u00a0unders\u00f8g UI tendenser\u00a0indenfor den branche du har valgt.\u00a0 Analyser f\u00f8lgende hjemmesider, herunder deres brug af tekst, farver og ops\u00e6tning. \u2028 Jeg valgte at arbejde videre med 2. Hobby butik\/e-handel med fokus p\u00e5… Design challenge<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-786","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=786"}],"version-history":[{"count":1,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/786\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=\/wp\/v2\/pages\/786\/revisions\/796"}],"wp:attachment":[{"href":"https:\/\/proces.mogensen-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- To (mindre gode) websites i selv finder<\/li>\n<\/ul>\n\n\n\n