torsdag den 29. september 2011

Sketches







Validation2

Her er html og css valideringen til børne-siden.



Validation1

Her er validering af html og css af Yuppie-siden.




Gestalt lovene

For vores børne-hjemmeside gælder:
-loven om nærhed - skyer, bakker, tekst i box på begge sider,
-loven om ensartethed - skyer, forside og underside - design,
-loven om kontinuitet - solen,

For vores yuppie-hjemmeside gælder:
-loven om nærhed - tekst og knap, overskrift og menuer, footer, tekst (og billede?) på underside
-loven om ensartethed - forside og underside - design,

Inspiration

Inden vi gik i gang med designe Yuppie-siden, besluttede vi os for, at alle skulle lave et individuelt design som de så viste til gruppen bagefter. Vi brugte nogle forskellige elementer fra de forskellige designs, men vi blev også inspireret af en side på internettet kaldet"Bloom", som er en meget simpel og ren side, hvilket passer til vores målgruppe.
Da vi skulle lave logoet, gjorde vi det på samme måde. Alle fik til opgave at komme med en idé til et design.

En af de idéer som gruppen kom med, var at vi kunne lave en silhouet af et træ ude i siden, men til sidst fandt vi ud af, at det for det første var svært at lave, og for det andet at det ikke passede så godt til designet alligevel.

Vi var i tvivl om farverne til at starte med. Nogle af os forbandt yuppier med mørke farver, eks. sort, grå og brun, hvor andre hellere ville have lyse farver. Vi endte så med at bruge lidt en kombination af de to. Baggrunden har en mat, grøn farve, men al teksten er sort.
 

onsdag den 28. september 2011

Design for yuppies

Ideen bag dette design er, at det skal være enkelt, men samtidig skal det være stilet. De grønne farver har vi valgt, på grund af at det er et "grønt" firma der producerer SHEEP.
Vi havde nogle forskellige ideer til logoet, men besluttede os for, at vælge et træ som alligevel var anderledes end bare end et almindeligt træ.
Logoet er placeret i højre hjørne, så siden ikke bliver fuldstændig symetrisk og centreret.
I selve den hvide boks, regner vi med at lægge billeder af SHEEP, hvor der indgår 3 beskårede billeder.
Skrifttypen holdes simpel, da den er nem at læse og det er en af standard typografierne.

Design for kids

Idéen bag dette design er, at det skal være meget barnligt da det skal appellere til børn. Derfor består siden af lyse farver og pasteller. Den blå farve gør siden rolig at se på, hvor den grønne farver henviser til det faktum at vores kunde er Green Furniture Sweden som selv fokusere på at være "grønne". I barnets øjne forventer vi at siden ser lidt landligt eller "bondegård"-agtigt ud pga. både farverne samt illustrationerne af får, bakker, skyer osv.

Vi bruger illustrationer af et får (en slags maskot), for at virkeliggøre produktet SHEEP, hvilket taler til barnets fantasi, og derfor vil produktet være mere end bare et møbel. Barnet vil altså sammenligne møblet med denne maskot.

Designet er relativt simpelt, men illustrationerne og formerne gør alligevel siden spændende at se på. Desuden har vi lavet en animation i bunden af siden som gør det hele lidt mere levende, hvilket giver endnu mere til modtagerens øjne.

mandag den 26. september 2011

Theme 2 - Ideas

Day one, web-design
Hvad angår sproget på de to sider, som vi skal i gang med at lave, vil sproget variere da vi skal tage hensyn til vores målgrupper. Den ene side skal sælge møbler til børn og vil derfor have et nemt sprog, som beskriver SHEEP som et sjovt møbel, hvorimod på siden til yuppier vil sproget være mere teknisk.

Farver
Da vores kunde er et miljøvenligt møbelfirma, skal der klart indgå nogle grønne farver i designet, men samtidig vil der på børnesiden være mange andre farver (evt. pastelfarver), da det appellerer til børn.
Hjemmesiden til den voksne målgruppe vil have mere neutrale farver.

Billeder
Børnesiden vil være præget af tegninger og yuppi siden vil have fotografier.

Typografi
Børnesiden skal have en mere "sjov" overskrift med runde former og voksen siden skal have standard skrift, måske Helvetica.

Menuer
Børnesiden vil have skyer som menuer og den anden vil sandsynligvis have kasser.

Proportioner og rum
På børnesiden skal det være simpelt, men samtidig skal der være noget at kigge på.
På voksensiden skal det også være simpelt, men det skal være stilrent.

Tekst vs. billeder
Mange tegninger / billeder på børnesiden, og kun de strengt nødvendige billeder på voksensiden.

Visuelt hieraki
Blikfanget på børnesiden skal være tegningerne og på den anden side skal det være produktet der fanger ens opmærksomhed.

torsdag den 15. september 2011

Better late than never

Day four, web-basic
Vi glemte at lægge vores tegninger af vores hjemmeside design ind den første dag, men bedre sent end aldrig.
Nedenfor ses tegningerne, hvor den første er hovedsiden og de to sidste er undersiderne:


Audience

Day four, web-basic
Da vi udtænkte vores design fokuserede vi på at lave en stilet hjemmeside, med et gennemgående tema. 
Vores målgruppe var familier med børn, eller par der skal til at starte en familie.
Målgruppe:


Validation sucks

Day four, web-basic
Så er kodningen slut og det er blevet tid til at validere vores arbejde.
Der var et par enkelte fejl som var til at rette, men vi kunne ikke gennemskue hvordan vi skulle rette vores billeder.
Vi har i dag lært hvordan man ændrer farven på links når man holder musen over og vi lærte også hvordan vi fik centeret vores links på forsiden med brug af lister.

onsdag den 14. september 2011

Pictures

Day three, web-basic
Hjemmesiden er så småt ved at være fuldendt og vi har kun et par små problemer tilbage.
I går havde vi problemer med, at placere vores små elementer fra Photoshop, da de ikke var transparente og derfor skabte problemer. Dette var grunden til at vi kodede boksne i stedet for, for at undgå de firkantede hjørner der opstod med indsatte billeder.
I dag fandt vi så ud af, at hvis man gemmer sine elementer som gif filer i stedet for, vil baggrunden fra Photoshop være transparent og det vil ikke skabe problemer, når man koder.

Boxes

Day three, web-basic
Efter at have designet vores hjemmeside i photoshop stødte vi på problemer med vores bokse.
Vi vidste ikke hvordan vi skulle få de runde hjørner over i selve kodningen. Heldigvis fandt vi ud af, at det nye CSS3 kunne kode runde hjørner, men kun nogle browsere kunne læse dem.
Vi valgte derfor at kode hjørnerne i stedet for at indsætte det som billede.
Disse kan både læses i explorer og firefox, så vi er covered til vores præsentation.

tirsdag den 13. september 2011

And the coding begins

Day two, web-basic
Så blev vi færdige med designet til siden og kodningen kan begynde. Desværre opstår der tit problemer og vi er ikke nået så langt med kodningen. Lige nu arbejder vi på at få selve hovedsiden færdig og forhåbentlig i morgen, vil også undersiderne være klar.

Side 2:

mandag den 12. september 2011

Getting started

Day one, web-basic.
Efter mange google søgninger på "website design", fandt vi et par sider, som var med til at danne ramme for vores design.
Efter et par timers arbejde var forsiden på plads og de to undersider er stadig under bearbejdning.
Tanken bag designet var at den skulle være simpel, men stadig med stil. Vi mener, at dette design vil appellere til unge voksne.  

Nedenfor ses et billed af vores forside: