Brainstorm Hjemmeside Grafisk interface med billeder af computer dele billederen skal så kunne klikkes og få information omkring delene,



Relaterede dokumenter
Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

Spil Rapport. Spil lavet i GameMaker. Kevin, Mads og Thor

Computerens - Anatomi

Dokumentation. Karen-Louise Fejerskov

Grafisk design. Ide. Designprocess. Målgruppe

AFSLUTTENDE PROJEKT KOM/IT

Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW. Proces. Kodning. Fonts:

Roskilde Tekniske Gymnasium. Afsluttende opgave Ældre og handicappede Frederik & Peter

nødvendige at vide noget om hvis man skal vide noget om det indre at en computer, de 5 emner er harddisk, RAM, grafikkort, bundkort og processer.

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Komunikation/It C Helena, Katrine og Rikke

GRAFISK WORKFLOW. Hjemmeside design til Chem-Tec Plating

Afsluttende Projekt - Kom/IT

Infographic Klasse arbejdsmiljø

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

Læringsprogram. Christian Hjortshøj, Bjarke Sørensen og Asger Hansen Vejleder: Karl G Bjarnason Fag: Programmering Klasse 3.4

[AFSLUTTENDE OPGAVE I KOM/IT]

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

Grafisk Design 70% Skitser

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen.

Portfolio. Udvikling af min portfolio Link til portfolio: Michell Aagaard Dranig

ActiveBuilder Brugermanual

Trin for trin guide til Google Analytics

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

Mediator 9. Materiale til elever. Version: August 2012

HESTBJERG WEB GRAFISK WORKFLOW

Afsluttende opgave. Navn: Lykke Laura Hansen. Klasse: 1.2. Skole: Roskilde Tekniske Gymnasium. Fag: Kommunikation/IT

Computerens Anatomi. Kom/IT C - Computer Anatomi - Daniel og Fie - 3/ Planlægning af kommunikationsvalg og medieprodukt.

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Andreas Lauge V. Hansen klasse 3.3t Roskilde HTX

srum Fritidsaktiviteter : 1. Semester. Multimediedesigner Projektstart: 17/ Aflevering: 4/

grafisk workflow OPGAVE: EMBRACE-IT WEBSITE

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Overvågningskamera. ~Af Svend, Valdemar og Frederik~

GRAFISK DESIGN. webdesign af pl.dk

Guide til din computer

Kommunikation/IT Rapport Roskilde Tekniske Gymnasium

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine

Lav din egen hjemmeside/blog. Dag Agenda d. 25. oktober Pc ere på nettet. Præsentation. Hvad er WordPress? Hvad er WordPress?

Web 2.0. Af Frederik Adamsen. Definitionen af Web Problemstilling og løsning... 2 Udvikling af produkt... 3 Tankegang... 4 Konklusion...

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave.

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

Indholdsfortegnelse. Side 1

Indhold Formål:... 3 De 6 faser:... 3 Fase 1: Problemanalyse... 3 Fase 2: K-strategi... 3 Fase 3: Idéudvikling... 4 Fase 4: Medieproduktion...

BørneIntra hjemmesidekursus

Produkt. Index side GRAFISK DESIGN

GRAFISK DESIGN. Webdesign til fodboldportal

Jigsaw Box - Vejledning - Android

IsenTekst Indhold til Internettet. Manual til Wordpress.

Kevin Matin Teis Nielsen

GRAFISK WORKFLOW. 1 Grafisk workflow

IT projekt uge 4 9. Marie Vinter, Roskilde Tekniske Gymnasium, klasse 2.6 IT, bw, uge

Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

AFSLUTTENDE OPGAVE. Lad Grønsted forblive Grøn

Tillæg til Libris-hæftet: WordPress. Temaredigering og sikkerhed m.m.

PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas

Grafisk produktion & workflow

Opstart. I gang med Dreamweaver. Læs mere om...

Grafisk Workflow. Website til European Blues Challenge

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

Fronter for elever - Første undervisning

Grafisk Design. rafisk Design

Reklame af Air Fresher.

Vejledning til opbygning af hjemmesider

Mit grafiske workflow inkluderer:

GRAFISK DESIGN GRAFISK PRODUKTION & WORKFLOW

Lav din egen forside i webtrees

Brugerundersøgelse på nyidanmark.dk 2008

GRAFISK DESIGN DOTHOST HJEMMESIDE

Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding

Afsluttende opgave Webdesign Den 24. maj 2007 Klasse 1.2

Portfolio - Grafisk Workflow

HTX BUBBLEFUN EVENT

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Superskolernes kampagne

TANDLÆGE KAMPAGNE. Marc Sztuk, Simon Drabsch og Marcus Rasmussen

Lundtofte skole 2007/08. Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden.

Grafisk workflow. bl.udbudsnet.dk

Grafisk design. sundfertilitet.dk

TrimbleConnect. Vejledning til personal version. Geoteam A/S Energivej Ballerup

Event. Projektbeskrivelse: (ALLE) Planlægning. Navne: Carina, Heise, Peter. Kommunikationsteori: Navne: Carina, Heise, Peter

ViKoSys. Virksomheds Kontakt System

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

The GIMP. The GIMP til windows kan hentes fra siden: win.sourceforge.net/stable.html

Projekt - Valgfrit Tema

Grafisk. Workflow. Side 1

Manual til WordPress CMS

Transkript:

Idefasen. Brainstorm Hjemmeside Grafisk interface med billeder af computer dele billederen skal så kunne klikkes og få information omkring delene, Sider med hver hardware del og en forklaring til hvordan de relaterede til computeren, muligvis en liste over modeller Vores målgruppe er 16-30 der kan sætte en computer sammen hvis de har viljen til det, men ikke ved hvad ver del gør, der gerne vil vide lidt mere om hvordan en computer virker og kan engelsk. Områder Motherboard(emil) Wireless Chipset Pci Sata Usb Lyd strømforsyning(christoffer) grafikkort(emil Dvd(christoffer) Cpu(Begge) ram(emil) Harddisk(Christoffer) I/o Kabinet Software siden. Kommunikative plan: Vores ide er en hjemmeside med en enten et billed af computeren hvor man kan klikke på dele og læse mere om dem, eller en wiki/blog style side hvor at man kan klikke igemmen flere sider der kortlægger hvordan en computer virker med orientation mod folk

der muligvis gerne vil bygge deres egne computer, og derfor vil vi måske integer links til sider hvor man kan købe dele og forslag til hvilken dele man kunne købe. Vi er afsenderne, vores valgte kommunikative kanal er internettet igemmen html og css og vi ønsker at folk kan opnå en forståelse af computeres indre virkninger Kravfangst Vi har valgt at lave en hjemmeside, som har nogle specifikke krav i forhold til hvem den skal målrettes mod. Vores målgruppe er unge, som ved noget om computere, men gerne vil vide en smule mere. Hver side skal designes, sådan at man ikke behøver ekstrem forhåndsviden omkring emnet på sidet. Man skal bare kunne åbne siden, og læse omkring emnet. Hvis et emne kræver noget forhåndsviden, så linker vi til den side på vores hjemmeside, som har den forhåndsvisning. Det primærere som vores hjemmeside skal vise er information om hver essential komponent i en computer om hvordan at de virker under the hood, og forskellige varianter. Det passer med vores vision der er at lære folk der ikke ved enormt meget om computere lidt mere om computere Design på hjemmesiden: Vi har tænkt på en lidt blog agtigt side med et banner og en box som ikke går helt ud til venstre og højre kant af skærmen, hvor brødteksten og informationen står, vi vil gerne have nogen rolig farver for at stipulere noget som er læseligt og ikke skræmmende. Fordelen ved dette design er at det er overskuligt, man kan hurtigt se ned til brødteksten og indeholdet, men på samme tid let navigere over hele siden. Det er meget overskuligt når man

har et relativt lavt antal sider og kun et emne på siden, men vis man skal lave flere emner bliver det hurtigt overskuligt, der dette layout typisk ikke har en søge funktion og har et begrænset antal pladser i dens plads til links, derfor passer den meget godt til vores side, hvor vi har et emne med et relativt begrænset antal sider. Et alternativ er en mere wiki styled side, hvor content har en form for header over i venstre side og en brødteksten i højre side, den er helt vildt god hvis man har rigtigt meget content, fordi den tilbyder let at seache og indexe ind i de forskellige dele af wikien, men ulempen er at vis man ikke har så vildt mange sider kan siden virke lidt tom og fattig, og det kan være lidt uovers*kuligt at skulle finde den side man skal ind på, der siden er optimiert for at der er virkeligt mange sider at kigge igennem og ville derfor se underligt ud med et lille antal sider, der man skal bruge mere tid på at slå op, og er ikke særlig pænt med en hjemmeside der ikke har flere 100 sider, vi har derfor valgt ikke at bruge den model. Implementering Vi har valgt at lave en hjemmeside, og vi har valgt at lave denne hjemmeside i programmet Bracket, som er et let brugbart program, som har en nem måde at samle alle ens filer til én hjemmeside. Vi startede med at lave vores basale skabeloner på hjemmesiden, og derefter brugte vi dem til at indsætte alle vores forskellige sider. Vi fik lavet et større antal forskellige skabeloner, og afprøvede dem i afprøvningsfasen, for at se hvilke nogle der virkede bedst, og så mest clean ud, så de fangede øjet mere. Da vi så fik valgt en skabelon, som var den skabelon vi syntes virkede bedst, så indsatte vi de sider vi havde lavet færdige, og havde på dette tidspunkt 8 forskellige emner, der var indsatte på vores hjemmeside. De kunne alle sammen linke med hinanden, og der var ingen forskel mellem de forskellige sider (Dvs. Ingen bugs). Vi syntes ikke den gule farve var helt perfekt og måske lidt ulæsligt så vi vil afprøve nogen andre versioner. Der kunne måske også være et banner i stedet for bare tekst hvor der står forside ville gøre det lidt visuelt intressant. Afprøvning

Vi havde en masse forskellige tanker om baggrundsfarve. Før vi satte den permanente farve på siderne spurgte vi forskellige mennesker omkring deres meninger omkring forskellige farvemuligheder, så lavede vi en konkurrence mellem de forskellige skabeloner. Vi valgte 5 forskellige skabeloner som vi ville lave en konkurrence imellem. Vi viste herefter de 5 sider til nogle forskellige elever, og personer uden for skolen, for at se hvad den brede margin (ikke bare HTX ere) ville have. Vores Pie chart er en sammenligning af hvor mange % af dem vi spurgte der ville have de forskellige hjemmesider. Vi havde et klart resultat, idet 42% af dem vi spurgte ville have vores BlåGrå baggrundsfarve. Som jeg har nævnt i implementering, så satte vi nu alle vores sider ind i den skabelon. Round 2 Vi har nu været igennem runde 1 af vores udviklingsfase. Vi vil nu bruge den feedback vi har fået fra afprøvningsfasen, og implementeringsfasen, til at forbedre/optimere vores hjemmeside i forhold til vores krav fra tidligere. Planlægning Vi har valgt at fokusere på vores flow på hjemmesiden. Dvs. hvor let det er at bruge/læse vores hjemmeside. Vi har valgt at lave et par ændringer som gør det nemmere at overskue de forskellige elementer på hjemmesiden. Design De ændringer vi har valgt at lave på vores hjemmeside er, at vi laver et banner i toppen af siden, som linker videre til nogle af de forskellige emner vi har på siden. Før havde vi kun links på startsiden Home, men vi har valgt at lave 3 overlinks på banneret som gør det nemmere at overskue. Vores 3 links i banneret er: Home, Stuff og Info. Home er vores forside, som har links der fører til alle vores forskellige computerdele, og har vores generelle info omkring hjemmesiden. Stuff, er en oversigt over vores forskellige dele, sådan at man ikke behøver at gå mellem forskellige sider, til gengæld skal man lede mere for at finde det man vil se. Info, er vores information, og hvad vi vil med siden, bare skrevet sådan at en uforstående (se, ikke medlem af 1.1) kan forstå hvad og hvorfor vi har lavet det. Implementering

Vi har nu sat vores banner og vores links ind på vores side. Den fungerer upåklageligt, og har ingen bugs (som vi har set). Vi har også sat den forskellige information, og vores oversigt over de forskellige computerdele ind, og der er heller ikke nogen bugs der. Afprøvning Vi har nu afprøvet vores produkt på 20 personer, og de har næsten alle sammen sagt, at vores hjemmeside er nem at overskue, og informationen der står der er meget nem at forstå.