Noter

deliver Garry Raynolds noter:

K-plan

prepare

SW (studie website) → present (doku) reflektion → projekt site, intro-case, K-plan

K-plan

afsender
budskab
medie/kanal
modtagere↴
persona
effekt↴
evt. modstand

Gode ideer at have på siden i sammenhæng med Projekt:oscar

Site ID

NAV

Næste koncert

links til program

Billetkøb

So-Me buttons

GDPR vores rettigheder på nettet.

<!doctype html>

<html>

<head>

<title>Web design</title>

</head>

<body>

<h1 id="siteidtypo">Web design</h1>

</div>

<a class="active" href="index.html">Forsiden</a>

<a href="tools.html">Gratis værktøjer</a>

<a href="pics.html">Gratis billeder</a>

<a href="guides.html">Gode guides</a>

</div>

<h2 id="h2top">Hvad er web design.</h2>

<p>Når man arbejder med web design, indgår der mange forskellige fagligheder og discipliner. Arbejdet beskæftiger sig således med områder som ’informations design’, ’interaktions design’ og ’grafisk design’.</p>

<h3>Informations design</h3>

<p>Når vi skal lave et website skal man selvfølgelig vide hvad man vil sige på sitet – med andre ord hvad skal indholdet være. Men ligeså snart dette ligger klart er det og vigtigt at forholde sig hvad der så skal stå hvor! Et website består jo af flere sider (webpages), der organiserer indholdet på en hensigtsmæssig måde, så det bliver tydeligt og let for brugeren af finde det ønskede indhold.</p>

<p>Dette betyder at vi er nød til at planlægge detaljeret hvilke oplysninger (og andre elementer som knapper og billeder) vi vil have fordelt på hvilke sider. Det handler om at skabe en tydelig og meningsfuld opdeling af stoffet.</p>

<h3>Interaktions design</h3>

<p>Ligeså vigtigt det er at lave en god opdeling af stoffet på de enkelte sider, ligeså vigtigt er det også at vores brugere kan finde det de leder efter! Det handler i bund og grund om at gøre sit site så brugbart og nyttigt som muligt. Jakob Nielsen [1] har fremsat disse 5 kvalitets komponenter man bør holde øje med:</p>

<ul>

<li>Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?</li>

<li>Efficiency: Once users have learned the design, how quickly can they perform tasks?</li>

<li>Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?</li>

<li>Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?</li>

<li>Satisfaction: How pleasant is it to use the design?</li>

</ul>

<h3>Grafisk design</h3>

<p>Det siger måske sig selv at grafisk design handler om det visuelle udseende af siderne. Det er dog sjældent så ligetil at lave et godt grafisk design, som man måske først kunne tro. At lave et godt grafisk design handler om at tilpasse sitets udseende så det taler til modtagerens øjne på en måde der både bidrager konstruktivt til sitets budskab, og samtidig giver en god æstetisk oplevelse. Et af mange redskaber til dette er gestaltreglerne der bygger på hvordan vores hjerne ser helheder i stedet for detaljer. De mest almindeligt forekommende gestaltregler er:</p>

<ol>

<li>Nærhed (proximity). Figurer der er placeret tæt på hinanden ses som en gruppe.</li>

<li>Lighed (similarity invarians). Ens figurer opfattes som en gruppe.</li>

<li>Lukkethed (closure). Delelementer af et billede stykkes sammen til at skabe helheden.</li>

<li>Kontinuitet og symmetri. Optræder to figurer symmetriske omkring en linje, ses de som en gruppe.</li>

<li>Prægnans (Prägnanz) – figur/baggrund. Hjernen leder efter mønstre, kontinuitet, ensartethed.</li>

<li>Erfaring (Past experience, “Common Fate”). Dækker bl.a. over brugen af ikoner</li>

<li>Forbundethed – Forbindes figurer med en streg, opfattes de umiddelbart som sammenhørende (forbundenhed er et design tips – ikke en gestaltlov).</li>

</ol>

</div>

</div>

<h2>Værktøjer og teknologier.</h2>

<p>Alle kan relativt nemt komme i gang med at lave funktionelle og æstetiske hjemmesider takket være de åbne standarder for HTML og CSS. Begge sprog grundlæggende for produktionen af hjemmesider, og bliver administreret af ’world wide web consortium’ (www.w3c.org).</p>

<p>HTML står for Hyper Text Markup Language, og bruges til at mærke de enkelte bestanddele af hjemmesiden op, sådan at den besøgendes browser ved hvilket element der er tale om – eksempelvis og der er tale om en overskrift, en underoverskrift, et link og så videre. Når HTML filen vises med en browser, viser den således indholdet som det er blevet opmærket, og med et standard udseende.</p>

<p>På moderne websites er udseendet naturligvis vigtigt. Derfor er der behov for at kunne ændre det standard udseende som browseren præsentere indholdet med. Dette gøres med sproget CSS, der står for Cascading Style Sheet. Med CSS kan du få den samme HTML fil til at se vidt forskellig ud.</p>

<h2>Og meget mere…</h2>

<p>Der er selvfølgelig meget mere, og mange flere teknologier der kan tages i anvendelse når man skal producere websites. Ovenstående hører dog til det allermest grundlæggende, og er noget alle der beskæftiger sig med webmediet bør have kendskab til.</p>

</div>

</div>

<p>Grundforløb for komunikation og it og informatik</p>

</div>

</body>

</html>

CSS

body {

background-color: #eae6dd ;

margin: 0px;

}

h1 {

font-family: sans-serif;

font-weight: 200;

color: #3b75a8;

margin-top: 0px;

}

h2 {

font-family: sans-serif;

font-weight: 300;

color: #66ad63;

}

#h2top {

margin-top: 0px;

}

h3 {

font-family: sans-serif;

font-weight: 300;

color: #ad8647;

font-style: italic;

}

p {

font-family: sans-serif;

font-weight: 100;

}

a {

font-family: sans-serif;

font-weight: 100;

}

ul, ol {

font-family: sans-serif;

font-weight: 100;

}

#wrapper {

width: 1200px;

margin: auto;

background-color: whitesmoke;

}

#siteid {

height: 200px;

background-image: url(desk.jpeg);

background-position: center;

background-size: cover;

}

#siteidtypo {

line-height: 200px;

font-size: 100px;

}

.content {

background-color: whitesmoke;

padding: 20px;

}

.topnav {

width: 1200px;

height: 50px;

background-color: #3b75a8;

}

.topnav a {

font-family: sans-serif;

color: #eae6dd;

font-weight: 600;

float: left;

line-height: 50px;

padding-left: 10px;

padding-right: 10px;

text-decoration: none;

}

.topnav a.active {

background-color: whitesmoke;

color: #3b75a8;

}

.topnav a:hover {

background-color: whitesmoke;

color: #3b75a8;

}

#footer{

width: 100%;

height: 100px;

background-color: #3b75a8;

text-align-last: center;

line-height: 100px; `

}

#footer p {

color: whitesmoke;

font-weight: 600;

}

.section {

width: 800px;

display: inline-block;

margin-right: 16px;

margin-bottom: 16px;

}

.aside {

width: 340px;

display: inline-block;

vertical-align: top;

}

prepare

"(1) Turn off the computer." use pen and paper to prepare
"(2) Prepare with the end in mind." think of the expectations, content is more important than design, avoid a data dump, content is king but not alone.
"(3) Know your audience as much as possible." Who is the audience?, What is the purpose of the event?, Why were you asked to speak?, Where is it?, When is it?
"(4) Keep it simple" what is the messege (check "exersise")
"(5) Ask yourself “so what?” is it relavant?, You may think it is cool, but will it help the audience?, “So what?” — always be asking yourself this very important, simple question. If you can’t really answer that question, then cut that bit of content out of your talk. Use this time to really think about your audience, what they need, and how to give it to them in the way that is engaging and memorable.
"(6) Prepare with the 10-min rule in mind" Studies support the idea that we tend to lose attention after 9-10 minutes in meetings, presentations or classes. You probably know this to be true from your own experience; we are not designed to just sit still and listen to a dull delivery of information, even if that information is important. So, as presenters, we need to design changes into our talks.
"(7) Develop a simple structure." simple structure holding our presentation together. Many presentations follow a Problem/Solution structure.
"(8) Use stories and examples to illustrate your point." The more complicated or difficult your point, the more important it is to use an example, a hypothetical, or a true story to illustrate and make things clear. audiences need to hear (and see) your points illustrated and storytelling will help. Remember to use Stories and examples to back up your data.
"(9) Prepare a proper handout" This will be a proper document, though some of your slides such as charts and graphs, important photos, etc. can be included in the document.
"(10) Work on your opening and ending" The audience is likely to remember the beginning and the ending the most. This has some relation to the serial position effect. Do not end your talk simply with Q&A. If there is a time for questions, you can still take a few moments after the last question to share a relevant and evocative story or a short video clip or some other way to both reinforce your key message and leave the stage on a high, memorable note. It may be at this time (though you can bring it up earlier as well) to be explicit with your “call to action.” What is it you want the audience to do or remember long after your presentation is finished?
"(11) Have a back up plan" When I present for smaller events, I always bring two small laptops with me just in case as well as having my data on a thumb drive. Try to plan for the worst-case scenario.

design

"(7) Use the principle of Contrast to highlight and make visuals clear." we notice differences, contrast gives design energy, Every good design has a strong and clear focal point, faint contrast causes cofusion.
"(8) Use the principle of Rule of Thirds to create balance and interest." The rule of thirds is a basic technique that photographers learn for framing their shots. focus on center sometimes tends to get boring. Det gyldne snit.

deliver

Exercise
If your audience could remember only three things about your presentation, what would you want it to be?

(1) ___________
(2) __________
(3) __________

The key word here is restraint. You can not include everything. Make the hard decisions on inclusion and exclusion long before you begin to make slides.