<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Projekt 3 &#8211; Anja Kristensen</title>
	<atom:link href="https://proces.kwebdesign.dk/category/1-semester/modul-3/eksamensprojekt/feed/" rel="self" type="application/rss+xml" />
	<link>https://proces.kwebdesign.dk</link>
	<description>Multimediedesigner - Procesportfolie MMD-uddannelsen, UCL</description>
	<lastBuildDate>Wed, 18 Dec 2024 10:25:14 +0000</lastBuildDate>
	<language>da-DK</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>Projekt 3 &#8211; Eksamensprojekt</title>
		<link>https://proces.kwebdesign.dk/2024/12/16/projekt-3-eksamensprojekt/</link>
					<comments>https://proces.kwebdesign.dk/2024/12/16/projekt-3-eksamensprojekt/#respond</comments>
		
		<dc:creator><![CDATA[adminkwebdesign]]></dc:creator>
		<pubDate>Mon, 16 Dec 2024 21:34:02 +0000</pubDate>
				<category><![CDATA[Projekt 3]]></category>
		<guid isPermaLink="false">https://proces.kwebdesign.dk/?p=1130</guid>

					<description><![CDATA[Opgavebeskrivelse Eksamensprojektet består af: Opdagelse, idé, definition, prototyping Jeg har arbejdet ud fra Design Thinking metoden for at kunne strukturere og organisere mit arbejde med&#8230;]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph"><strong>Opgavebeskrivelse </strong></p>



<p class="wp-block-paragraph">Eksamensprojektet består af:</p>



<ul class="wp-block-list">
<li>Et hjemmeside kodet fra bunden (præsentationsportfolio), som skulle vise mit personlige brand og mine kompetencer</li>



<li>En hjemmeside der dokumenterer bl.a. opgavebesvarelser og refleksion (procesportfolio) </li>



<li>En plakat, der viser processen bag præsentationsportfolioet. </li>



<li>Dertil skulle der også udarbejdes et afleveringsdokument indeholdende refleksion over opnåelse af læringsmål.</li>
</ul>



<p class="wp-block-paragraph"><strong>Opdagelse, idé, definition, prototyping</strong></p>



<p class="wp-block-paragraph">Jeg har arbejdet ud fra Design Thinking metoden for at kunne strukturere og organisere mit arbejde med opgave.</p>



<p class="wp-block-paragraph">Det var svært lige at finde ud af hvilke retning og målgruppe jeg ville bruge. Valget faldt på små lokale kulturhuse og lokale spillesteder på Østfyn da jeg interesserer mig for musik, kulturelle begivenheder og teater.</p>



<p class="wp-block-paragraph">Målet er at tilbyde skræddersyede multimedieløsninger, der kan styrke deres visuelle identitet således de bedre kan nå deres publikum.  </p>



<p class="wp-block-paragraph">Jeg startede med at lave research af hvad der er af kulturhuse og spillesteder på Østfyn, og på baggrund af deres hjemmesider lavede jeg en brainstorm i.f.t. farver, design, typografi m.m. Derefter udarbejdede jeg styletile, moodboard og lo-fi wireframes (på papir) og senere i Figma. </p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="768" height="1024" src="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Sketch-lo-fi-768x1024.jpg" alt="" class="wp-image-1142" srcset="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Sketch-lo-fi-768x1024.jpg 768w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Sketch-lo-fi-225x300.jpg 225w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Sketch-lo-fi-1152x1536.jpg 1152w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Sketch-lo-fi-1536x2048.jpg 1536w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Sketch-lo-fi-scaled.jpg 1920w" sizes="(max-width: 768px) 100vw, 768px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="709" src="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Figma-lo-fi-2-1024x709.gif" alt="" class="wp-image-1141" srcset="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Figma-lo-fi-2-1024x709.gif 1024w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Figma-lo-fi-2-300x208.gif 300w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Figma-lo-fi-2-768x532.gif 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" width="1024" height="592" src="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/moodboard-1024x592.gif" alt="" class="wp-image-1143" style="width:685px;height:auto" srcset="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/moodboard-1024x592.gif 1024w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/moodboard-300x173.gif 300w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/moodboard-768x444.gif 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>Silent feedback</strong></p>



<p class="wp-block-paragraph">Til feedback på holdet var der nogle ting jeg skulle genoverveje bl.a. CTA-farven, anden font og større tekst. Der skulle fokuseres mere på den visuelle identitet og tydeliggørelse af mine kompetencer. </p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="550" height="413" src="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Silent-feedback.jpg" alt="" class="wp-image-1144" srcset="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Silent-feedback.jpg 550w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Silent-feedback-300x225.jpg 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></figure>



<p class="wp-block-paragraph"><strong>Kodning: HTML/CSS</strong></p>



<p class="wp-block-paragraph">Jeg havde ikke helt forstået kodning endnu og måtte i gang med at læse en masse på nettet (på dansk) og se tutorials på Youtube og ikke mindst bruge <a href="https://www.w3schools.com/">https://www.w3schools.com/</a> inden jeg kunne komme i gang med denne del af opgaven, og jeg syntes det var rigtig svært. Undervejs når der var noget der ikke virkede, eller noget jeg ikke forstod, så kunne jeg spørge mine holdkammerater eller min studiegruppe om der var nogen der havde lidt tid til at forklare mig tingene, men jeg har også forsøgt mig meget frem &#8211; Learning-by-doing.</p>



<p class="wp-block-paragraph">Jeg startede med at lave index.html og styles.css (forside), derefter lavede jeg &#8220;om mig&#8221;, &#8220;kontaktside&#8221; samt &#8220;portfolio&#8221;. I første omgang brugte jeg font og farver som angivet i moodboardet, men det blev for meget rødt og fonten passede ikke ind og var ikke særlig læsbar, og derfor måtte jeg re-tænke ny font og farver ind i processen.</p>



<p class="wp-block-paragraph">For at kunne strukturere og overskue kodningen på de forskellige sider oprettede jeg et html-dok og et css for hver side.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="173" height="271" src="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Oversigt_html_css.gif" alt="" class="wp-image-1145"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="927" src="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/indexside_html-1024x927.gif" alt="" class="wp-image-1146" srcset="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/indexside_html-1024x927.gif 1024w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/indexside_html-300x272.gif 300w, https://proces.kwebdesign.dk/wp-content/uploads/2024/12/indexside_html-768x695.gif 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<p class="wp-block-paragraph">Efter at have opnået et rimeligt vellykket resultat gik det op for mig at jeg manglede media queries i css-filerne, og det var et stort arbejde at finde ud af hvor og hvordan disse skulle ændres og jeg fik ikke løst det hele inden afleveringsfristen, men det kan danne grundlag for at have det med til eksamen, således at den er bedre respondsiv i.f.t. mindre skærmstørrelser/devices. </p>



<p class="wp-block-paragraph">Jeg validerede både HTML og CSS koder ved slutningen af projektet.</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="789" height="784" src="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/validering-af-kode.gif" alt="" class="wp-image-1147" style="width:416px;height:auto"/></figure>



<p class="wp-block-paragraph">Filerne skulle derefter uploades til Filezilla og derefter gemt på Github. </p>



<p class="wp-block-paragraph"><strong>Plakat og afleveringsdokument</strong></p>



<p class="wp-block-paragraph">Jeg brugte de samme farver og visuelle elementer fra præsentationsportfoliet for at danne en rød tråd mellem de forskellige opgaver. Det gav mest mening at lave det til sidst når den sværeste del var lavet, kodningen. </p>



<div data-wp-interactive="core/file" class="wp-block-file"><object data-wp-bind--hidden="!state.hasPdfPreview" hidden class="wp-block-file__embed" data="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Plakat.pdf" type="application/pdf" style="width:100%;height:600px" aria-label="Embed Plakat."></object><a id="wp-block-file--media-4b096d68-3680-44e0-b912-57d141c6e9d9" href="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Plakat.pdf">Plakat</a><a href="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Plakat.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-4b096d68-3680-44e0-b912-57d141c6e9d9">Download</a></div>



<p class="wp-block-paragraph"><strong>Finpudsning af procesportfolio</strong></p>



<p class="wp-block-paragraph">En gennemgang af alle indlæg og tilføjelse af lidt mere tekst under refleksion. </p>



<p class="wp-block-paragraph"><strong>Refleksion</strong></p>



<p class="wp-block-paragraph">Jeg syntes det var en svær opgave at gå i gang med, da jeg ikke helt havde forstået kodning endnu. </p>



<p class="wp-block-paragraph">Jeg synes selv, at jeg kom langt med opgaven, men jeg har også brugt rigtig meget tid på det, for jeg havde meget svært ved forstå teorien/processen og derfor løb jeg ofte ind i fejl og måtte lege med de forskellige ting for at finde ud af hvad der fungerer og hvad der ikke fungerer. </p>



<p class="wp-block-paragraph">En anden gang vil jeg samle css i ét dokument for at gøre det nemmere at rette f.eks. media queries. </p>



<p class="wp-block-paragraph">Validering af koderne skulle jeg have lavet løbende, så havde jeg undgået en del fejl. </p>



<p class="wp-block-paragraph">Github skulle jeg ligeledes have anvendt fra starten af, da det kunne have givet mig et godt overblik over de rettelser jeg havde foretaget mig undervejs, men også så jeg kunne have fundet tilbage til en gammel kode, hvis jeg havde haft brug for det. </p>



<p class="wp-block-paragraph">Jeg har fået en bedre forståelse af kodning og hvordan man opbygger hjemmesider fra bunden, og jeg gjorde nogle fodfejl som måske kunne have været undgået, hvis jeg havde forstået teorien inden opgavebesvarelsen. Men man lærer af sine fejl og for mig er det den bedste måde at lære nyt på. </p>



<p class="wp-block-paragraph"><strong>Her er afleveringsdokument indholdene links :</strong></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div data-wp-interactive="core/file" class="wp-block-file"><object data-wp-bind--hidden="!state.hasPdfPreview" hidden class="wp-block-file__embed" data="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Afleveringsdokument-m.-refleksion-interactive.pdf" type="application/pdf" style="width:100%;height:600px" aria-label="Embed Afleveringsdokument m. refleksion-interactive."></object><a id="wp-block-file--media-75d1a226-edcb-4ac2-8600-ae391d5c156f" href="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Afleveringsdokument-m.-refleksion-interactive.pdf">Afleveringsdokument m. refleksion-interactive</a><a href="https://proces.kwebdesign.dk/wp-content/uploads/2024/12/Afleveringsdokument-m.-refleksion-interactive.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-75d1a226-edcb-4ac2-8600-ae391d5c156f">Download</a></div>
</div>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://proces.kwebdesign.dk/2024/12/16/projekt-3-eksamensprojekt/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Object Caching 41/49 objects using Disk
Page Caching using Disk: Enhanced 

Served from: proces.kwebdesign.dk @ 2026-08-28 07:54:54 by W3 Total Cache
-->