I denne post vil jeg forklare omkring tankerne bag de forskellige designelementer på bloggen. Jeg vil også komme ind på navigationen og hvordan jeg har forsøgt at få siden til at reflektere hvem jeg er.
Som beskrevet i ovennævnte post, søgte jeg på de to ord ”light” og ”simple”, lyst og simpelt, da jeg valgte det tema jeg ønskede at ændre. Det gjorde jeg fordi jeg ønskede at bringe indholdet i fokus på siden, dvs. jeg havde en idé om, at ved at bruge mange billeder i posts og på de statiske sider, ville det gøre siden mere interessant og ikke bare hvid og kedelig.
Jeg har desuden brugt mange af de ord, der kom ud af Hybrid Chart opgaven, til at inspirere mig i arbejdet med min blog. Ord som fx organic, simple, speakers corner og down to earth (se evt. billederne af charten her: http://louiselessel.com/2009/hybrid-chart/).
Som jeg også har skrevet i ”About” sektionen på siden, (http://louiselessel.com/about/) er min intention med bloggens enkle layout at finde den rette balance mellem det simple og det spændende. Jeg mener, at det spændende sagtens kan ligge i detaljerne, hvorfor jeg har valgt, som en detalje, at ændre headeren for hver sektion af siden man kommer ind på.
Headeren
Idéen med de skiftende headers er, at hver sektion får sit eget visuelle udtryk der er i overensstemmelse med hvad der findes på sektionen og hvilken type person jeg er. Jeg har således valgt, at alle symbolerne skal have en tegnet feel over sig, ligesom teksten i headeren er min håndskrift. Dette er valgt fordi jeg er kreativt anlagt og holder meget af at tegne. Jeg ønsker således at give modtageren indtrykket af, at en kreativ person står bag bloggen.
Home og About har et tegnet billede af mig, da det gerne skulle give et indtryk af hvem personen bagved bloggen er.
Portfolio har et gammeldags kamera, hvor jeg har ladet en af mine tegninger (som kan ses under http://louiselessel.com/portfolio/gallery/) blive hældt ud af. Kameraet symboliserer observationen, billedet af det kendte. Blækken der løber ud af det, symboliserer de tanker observationen af omverden afføder. De tanker der bliver til projekterne og billederne i porteføljen.
Lampen under ITU symboliserer den gode idé og oplysningen der sker ved uddannelse.
Speakers Corner, der er min personlige del af bloggen, har en gammeldags grammofon som symbol. Den dybere mening ved at bruge en grammofon som symbol er, at jeg ikke synes en megafon var særlig pæn. Speakers Corner er ellers tænkt som en direkte forlængelse af ”Speakers Corner” traditionen i London (http://en.wikipedia.org/wiki/Speakers%27_Corner), hvor alle kan stille sig op og tale om hvad som helst. Det er altså tænkt som mit personlige sted, hvor jeg kan give udtryk for mine meninger og tanker. Mange af de posts der vil indfinde sig under Speakers Corner vil handle om musik, da det er min store interesse, så grammofonen er ikke helt malplaceret.
Changelog har et træ. Det symboliserer idéerne bag siden og det faktum, at siden vokser hver gang jeg laver en ændring. Desuden synes jeg, at det var et sjovt ordspil med ”log”, altså ”træstamme” og har derfor også valgt at kalde mine changelog posts for ”logs”.
Jeg er udmærket klar over at billederne kan virke tilfældige overfor en modtager, selvom der er lagt betydning i dem, men det gør ikke så meget, for de er stadig med til, at gøre siden mere interessant og give et indtryk af hvem jeg er.
Personen bag bloggen
Som person ønsker jeg at etablere mit ethos (aristoteles) gennem siden ved, at fremhæve det arbejde jeg laver på ITU. Målgruppen for min side er nok mest mig selv, men også lærere, censor og elever på ITU. Forhåbentlig vil min side en dag opnå et layout som jeg tør vise til fremtidige arbejdsgivere, men som det ser ud nu, føler jeg mig ikke god nok til at vise mig frem gennem min side.
I en af teksterne vi har læst til ”Formidling” delen af BFPW faget, skriver den daværende PHD student Elisabeth Hoff Clausen omkring online ethos og hvor svært det er, at blive hørt på internettet: ”…as a rhetor you cannot pressupose an audience, and as a user you cannot presuppose an address of relevance to you”. Jeg er fuldstændig enig, og derfor har jeg valgt at min side mest er til mig selv. Jeg regner ikke med at nogen finder den, medmindre de decideret googler mit navn.
Når jeg en dag ønsker at gøre min blog mere professionel, så den henvender sig til en kommende arbejdsgiver, vil jeg være nødt til at ændre rigtig mange ting.
Ciceros pentagram (se fx http://bogwebs.systime.dk/bogwebs/mundtlighed/eksamensretorik.htm) beskriver hvordan man som taler skal tage mange ting i betragtning. Hvis blot en af betingelserne ændrer sig, er man nødt til at justere det hele. Derfor er alle betingelserne forbundet i pentagrammet. Dvs. at hvis jeg en dag beslutter at min blog skal henvende sig til en arbejdsgiver, ændrer modtageren (eller tilhøreren) sig, og omstændighederne jeg blogger under. Jeg er således nødt til at justere både mit sprog, men også nogle af de emner jeg adresserer på bloggen, for at afgive et mere professionelt udtryk. Desuden ville strukturen skulle ændres, så den lagde mere vægt på hvad jeg har opnået i projekter. Altså siden ville ligne mere et CV end en blog.
Jeg synes dog indtil videre, at bloggen er sjovere, da den giver en større mulighed for at vise min personlighed.
Jeg har valgt at skrive på engelsk, dels fordi det er et sprog jeg tit føler mig mere på hjemmebane i end dansk, men også fordi jeg gerne vil give et internationalt udtryk. Det er vigtigt for mig at sende signalet om, at jeg ved vi lever i en global verden, og gerne vil være en del af den. Også selvom min målgruppe endnu ikke er andre end de nærmeste instanser.
www.louiselessel.com er optimeret til firefox browseren.
Jeg har fra starten haft høje ambitioner for min indlæring i dette fag, da jeg gerne vil lære webdesign. Webdesign kan dog ikke læres på et halvt år, hvorfor jeg valgte et eksisterende wordpress tema og ændrede det så det passede mit ønske.
Da jeg valgte design, søgte jeg på de to ord ”ligtht” og ”simple”, lyst og simpelt, da jeg ønskede at bringe indholdet i fokus på siden.
Det tema jeg fandt hedder ”Dodo” og så sådan ud da jeg startede (http://louiselessel.com/wp-content/uploads/1.jpg).
Det jeg godt kunne lide ved temaet, var den sorte menu-bar der bliver gennemsigtig, den simple struktur og det grafisk flotte header billede.
Alle ting er dog noget jeg har lavet komplet om på.
Mockup og nuværende look
For mockup for siden, se post (http://louiselessel.com/2009/mockup-for-entire-site/).
Mit mockup for siden er stort set implementeret. Og jeg vil nu beskrive alle de ting jeg har lavet om i temaet.
Dropdown menu
I mit mockup ønskede jeg en dropdown menu. Den skulle udgøre navigationen på siden. Jeg ønskede således ikke at have både en global menu (den under headeren) og en sidebarmenu. I Dodo var pages i den globale menu, og categories i sidebaren. Da jeg ønskede at anvende min blog som en hjemmeside, ligeså meget som en blog, duede det ikke at disse to var adskilt. Desuden brød jeg mig ikke om sidebaren, så den slettede jeg (se hvordan her: http://louiselessel.com/2009/8th-log/).
Temaet havde imidlertid ikke nogen mulighed for at blande pages og categories, så jeg blev nødt til at installere det plugin der hedder ”Menubar”. Menubar gør det muligt, at bygge sin egen menu helt fra bunden. Jeg måtte rode rigtig meget med Menubar for at få det til at virke (se fx 9th, 10th eller 11th Log). Specielt det med at få teksten til at blive farvet, i stedet for baggrunden, var svært. Den insisterede på at lave hele menupunktet farvet, og ikke kun current page og page parent’en (se samme Log’er). Efter to uger, hvor hjælpelærer Stina hjalp godt til, gav jeg op og lod den farve alle punkterne under parent’en. Vi kunne simpelthen ikke få den til at makke ret.
Jeg nøjedes så med at lade current page være en lysere farve, så man kunne se præcis hvilken side man var inde på.
Implementering af headers
Den vigtigste idé i mit mockup har været, at billedet på headeren kom til at gå ned ved siden af menubaren. Først ville jeg bare have et træ på alle sider, men jeg fandt siden ud af, at det gav et for ensartet og kedeligt udtryk. Jeg fandt så på idéen med, at alle headers skulle have sit eget foto, der, efter min mening, giver et indtryk af hvad siden indeholder.
Dette var en ting der skulle laves samtidig med menubaren, da menubaren jo skulle ligge oven på headeren. Den nemme løsning var, at lave headeren større en indholdsområdet, sådan, at den naturligt ragede ud over kanten, og så anvende egenskaben ”z-index”. Under hver header fil i CSS’en står der nu, at de har et z-index på -1. Det betyder at de flytter sig bagved menubaren.
Et par ting jeg gerne ville have haft implementeret:
På forsiden ville jeg gerne have haft en velkomst til venstre, og en videopræsentation af min blog til højre. Nedenunder det, ville jeg gerne have haft et galleri med billeder fra siden, og derefter de seneste posts på siden.
Selvom forsiden er det første en modtager af siden vil blive mødt af, valgte jeg at nedprioritere denne del, da det var vigtigere for mig at få navigationen til at fungere ordentlig. Jeg brugte derfor meget tid på at få Menubar til at fungere, og havde ikke tid til at koncentrere mig om forsiden også.
Home symbolet ved siden af menubaren (se mockup igen):
Jeg besluttede i processen, at dette ikke var det vigtigste element og gik væk fra idéen.
Billederne ved hver opgave under ITU-fagenes menupunkt (http://louiselessel.com/wp-content/uploads/Layout-ITU.jpg).
Dette skyldes, at jeg endnu ikke har kunnet finde et plugin der tager de uploadede filer og laver et thumbnail billede, og lader én anvende det som link til filen.
Konklusion
Alt i alt er implementeringen af mit mockup lykkedes. Jeg har dog primært rodet med CSS og designet headers og er ikke gået så meget ind i HTML i denne omgang. Hvis man ser bort fra min implementering af de forskellige headers, der involverede en del HTML i loopet i Header.php filen (se evt. http://louiselessel.com/2009/12th-log-getting-different-headers/).
Jeg er ikke helt nået frem til det ønskede resultat, da jeg gerne så, at mit design indeholdt flere billeder i navigationen på siden, som det fx er synligt i mockup for ITU fagene, hvor jeg ønskede at lade hver fil have sin egen thumbnail.
Jeg er stolt af, at selvom mit endelige design ligner Dodo temaet, er det faktisk lavet næsten 100 % om (med undtagelse af footeren som er ændret meget lidt). Det er kun backend’en af temaet der er beholdt som den var, og det er ikke engang helt sandt, da jeg mange gange har været inde og ændre små ting, som fx header loopet og sidebarfunktionen. Den bedste HTML addition jeg har lavet var, at angive et ny ID, nemlig ID’et maincontent, der i index.php filen nu omslutter alt indholdet på siden, og i CSS stylesheet’et nu angiver, at alt float’er til venstre. Mit tema havde nemlig den fejl, at blog post’ne nogle gange flyttede sig op bagved hinanden, i stedet for at ligge sig under hinanden.
Jeg har også afprøvet min side vha. “the Trunk test” af Steve Krug. Læs mere om hvordan den gik her.
Gruppe 8: OCSEN: Veo, Marc, Thomas, Louise og Morten
Jeg vil i denne post reflektere over vores gruppeproces i Formidling, Projektarbejde og Webdesign (BFPW) faget. Når det er relevant vil jeg inddrage termer fra bogen ”Metode i Projektarbejdet”, af Helle Algreen-Ussing og Niels O. Fruensgaard, til at underbygge mine pointer.
Når man arbejder i en gruppe, er det vigtigt at have et fælles mål (s. 95). Vores fælles mål var, at få bygget hver vores individuelle blogs. Det mål var ikke fælles nok.
I starten var det en god idé at inddele grupperne efter evne til at assistere hinanden, sådan, at nogle i gruppen var gode til én ting og andre noget andet. Hver havde sin kasket (s. 18-20). Vi fulgte ”Metode i Projektarbejdet” bogen meget nøje og havde planer om at udarbejde arbejdspapirer og skrive projektdagbog, som den foreslår at man gør (s. 25-32). Se fx vores første opgave, som var at opbygge en blog for gruppen (http://ocsen8.wordpress.com/), hvor vi har lavet menupunkter til de to typer papirer. Vi udarbejdede også en form for gruppekontrakt ved vores første møde, hvor vi angav blandt andet et standard udseende for disse arbejdspapirer (http://ocsen8.wordpress.com/2009/09/08/project-journal/). Udover gruppebloggen havde vi kun én anden opgave i gruppen, og det var Chindogu designopgaven (for mere om den, se http://louiselessel.com/2009/chindogu-assignment/). I starten af forløbet følte vi os virkelig som en gruppe med et fælles mål, vi havde endda fundet på et gruppe-navn der kombinerede vores slutbogstaver til at danne OCSEN, og planen var, at lave et gruppe logo i form af en okse.
Manglen på et fælles mål og fælles opgaver gjorde dog, at vores gruppe efterhånden splittede op. I arbejdet med de individuelle blogs lå for meget individuelt arbejde, og for mange ting vi ikke kunne hjælpe hinanden med. Vi havde hver vores plan om hvad der skulle være færdigt hvornår, og hvordan det skulle laves. Når vi hver fredag skulle arbejde på bloggen sad gruppen ikke samlet, da det ikke gav mening at sidde sammen, når vi var på hver vores stadie, eller i gang med hver vores ting. Vi oplevede tit, at de ting man ønskede at opnå med sit mockup af siden, ikke kunne implementeres blot med hjælp fra gruppen. I stedet skulle man have fat i en hjælpelærer.
I november gik det op for os at vi ikke længere følte os som en gruppe og vi besluttede, enstemmigt over mail, at splitte gruppen op. Vi besluttede, at vi ville finde egne sparringspartnere i stedet.
Svagheder og styrker
De metoder vi har lært i Projektarbejde har været til god nytte i de andre fag på ITU. Fag hvor det gav mere mening for os at være i en gruppe (se fx http://promotingbands.wordpress.com/ bloggen, hvor det lykkedes os at skrive projektdagbog og to-do aftaler hele vejen igennem projektforløbet).
En af de største styrker ved gruppearbejdet har været starten, hvor alle lige skulle introduceres til webdesign og wordpress. Der var det utroligt givende at være i en gruppe der kunne forklare nogle af elementerne, og ikke mindst hjælpe med at installere wordpress på det domæne man havde købt. I andre tilfælde ville det være rart at benytte gruppen til at få andre øjne på ens arbejde, men da vi forsøgte det i gruppen, var kritikken bare at den var meget hvid og at der ville komme mere feedback senere (se fx http://louiselessel.com/2009/feedback-from-ocsen/). Det var ikke særligt nyttigt.
Svagheden ved gruppearbejdet har, som sagt, været manglen på det fælles mål, men personligt tror jeg, at yderligere en ting kan være skyld i at gruppen i BFPW ikke fungerede. For at vende tilbage til det med kasketterne i gruppearbejdet, så tror jeg ikke at der var mulighed for en optimal gruppeopbygning i det lange løb, hvor hvert medlem havde sin rolle. Der var ikke brug for en referent, en leder eller en ordstyrer, en plan om ”hvem gør hvad og hvornår” (s.29) og hvad skulle vi holde møde om?
Der var også en del forsømmelser (s. 100). Specielt i midten af semestret, blev de der i forvejen var dygtige til webdesign, væk fra undervisningen. Der var ikke det element af forpligtigelse overfor gruppen, der bør være i gruppearbejdet. De var der således ikke til at hjælpe resten af gruppen. Man kan imidlertid diskutere om det var en forsømmelse af gruppen, da det ikke kan være deres ansvar at hjælpe de mindre dygtige. Det er også federe for dem, at anvende sparringspartnere der er på deres niveau, til at få inspiration til implementeringen, i stedet for at skulle bruge tid på os og ikke få lavet noget selv.
Alt i alt er gruppearbejdsformen en god måde at arbejde på, hvis der er et fælles mål, som det har været tilfældet i de andre fag på ITU.
Today we learned valuable tools for testing the usability of our blog. Including the “trunk” test by Steve Krug. And using
eyetracking to test how a person would look around on our page, to determine if elements are visible enough.
We also got many good advice on how to conduct these tests, specifically how to behave, how to ask/not to ask.
We we’re also briefly introduced to the history of usability design and the 80/20 % rule. (fx. you use 20 % of the buttons on a remote control 80 % of the time.)
A collage of bandposters, advertisements mainly, though that has nothing to do with my chosing them. I chose them because i like the simplicity in the design of these things, and music is a great interest of mine.
(Band Art copyright to the artists on the pages postersandtoys.net and robotwalrus.com)
So the reason I did the assignment like this, instead of making it a “Louise Skjoldborg Lesséls blog” with the different topics of “this months issue”, is because I would like to relate this to my blog in another way…
Simply put, I would like this magazine cover to reflect thoughts of the design and color scheme in the design more than be an actual visual capture of the blog. So really it is more of an inspiration in terms of colors and impressions, an interpretation of how it could be made exciting using a simple layout but with many colors and pictures.
An actual design of the blog is beginning to form in my mind. I’ve got a few pretty good ideas for the layout jotted down on a piece of normal analoguepaper.. So more will follow soon.
From todays Chindogu (useless designs) assignment I have learned that rapid design thruogh the process of brainstorming in a group can produce some pretty crazy ideas. Most of which were shot down by the fact that we did not have the supplies to build the prototype. We ended up with a bottle with opening in both ends.
Though it seems stupid to come up with ideas for useless things (which I thought I was not able to do) can actually spark the imagination for many useful ideas. So perhaps I should not constraint my thoughts to just useful things, but also let them float towards the more wild and crazy ideas, because that might just produce ideas that are even more creative and original.