Fra teori til virkelighed med lancering af ny blog
Muligvis du har bemærket, at jeg har lanceret en ny blog til alt det andet, der ikke hører sig hjemme indenfor webdesign og -udvikling.
I den forbindelse har jeg skrevet et blogindlæg med de mange tanker bag valg af farver, struktur og lignende.
Det hele kan ikke blot handle om teori, så træd nærmere og se nogle af de begreber, jeg tidligere har gennemgået, brugt i praksis.
Indholdsfortegnelse
- Indledningsvis
- Brugen af et grid
- De valgte farver
- De valgte skrifttyper
- De valgte ikoner
- En grundig fedtsugning
- Afprøve teorierne i praksis
- Grave dybere i WordPress, HTML og CSS
- Konklusion
- Afgiv en kommentar
1. Indledningsvis
Jeg kommer ikke til at gennemgå alt ned i mindste deltalje, men du er selvfølgelig altid velkommen til at stille mig spørgsmål.
Derimod får du med dette blogindlæg en stor del af de mange overvejelser, jeg har gjort, før og under udarbejdelsen af den nye blog. En blog der viser helt andre sider af den ellers seriøse (forhåbentlig en delt mening) webdesigner.
Eksempelvis startede jeg faktisk hele denne process med en meget sparsom og simpel stregtegning. Hele ideen startede slet ikke i Photoshop. Hele min idé har aldrig været at lave et eller andet lækkert, som verden kunne dvæle over/ved.
Se den sparsomme stregtegning
… Der ligger et stykke fra det endelig resultat med kirurgisk indgreb og fedtsugning. Sværdet kommer til at give mening – en dag!
Nyd oplevelsen og/eller giv mig ros!
2. Brugen af et grid
Jeg har før – i del 1 af Sådan bliver du en bedre webdesigner – snakket om brugen af et grid. For mig er fordelene ganske positive, da det giver mig nogle gode, men også defineret rammer at strukrere sit design efter. Dine elementer skal jo stykkes sammen på den ene eller anden måde, så hvorfor ikke bruge et grid?
Et grid kan medvirke til en – måske ubevidst – bedre struktur for den besøgende, hvorved hele webdesignet kan virke væsentlig mere afstemt. Det hele virker ikke så henkastet og løst placeret. Øjemål er måske acceptabelt, når du bygger en fuglehus.
Samtidig er det også noget nemmere for webudviklerende at opsætte et webdesign til et færdigt og bæredygtigt website. De har bl.a. gode linier at klippe og måle efter i Photoshop.
Se webdesign med grid tilføjet
Mikee.dk med grid – eksempel 2 af 2
Hvordan opstod det valgte grid?
Førhen brugte jeg altid 960.gs, men i dag bruger jeg i stedet for en anden, men rigtig fin service, Gridulator.
Med denne service kan du helt selv bestemme, hvor mange kolonner og den samlet bredde, du vil arbejde med.
Jeg har valgt 960 pixels i samlet bredde, 12 kolonner, 47 pixels pr. kolonne, 36 pixels pr. gutter.
12 kolonner er nemt at arbejde med, fordi 12 kan deles på mange måder. Ganske enkelt, giver det mange gode muligheder.
3. De valgte af farver
Fra start havde jeg egentlig en god idé omkring en delvist skrigende signal farve, der samtidig kunne bære lidt varme med sig. Det valgte farveskema – fra Colourlovers.com – giver både varme og bløde/kolde farver at arbejde med.
Gul, varm og signalerende
Den gule er udelukkende valgt for at være prægende, påtrængende, skrigende og iøjenfaldende. Samtidig har den en vis varme over sig uden at blive for varm.
De skrigende træk afspejler sig ikke i min person, men nærmere i mine holdninger og mit arbejde, hvor jeg slår et slag for webdesign med brugerne på første række, og dermed ikke mig selv og kunden.
Selvom området til bloggen og undertegnet, på forsiden, har fået tildelt lige meget plads, så er den gule farve med til at fremhæve, hvad der gælder og tæller mest – nemlig bloggen. Det her de fremtrædne holdninger og farvede udsagn af karakter vil komme til udtryk – forhåbentlig!
Tyrkis, blød og afdæmpet
Den dejlige og afdæmpet tyrkis har en snert af blå, der i den grad er at finde i min personlighed. Struktur, kæft, trit og retning.
Samtidig danner den det nærmest perfekte modstykke til den frembrusende gule signalfarve – som Ying og Yang.
Orange, ekstra varm og blussende
Den orange farve er faktisk slet ikke blevet en del af webdesignet, men er alligevel en del af farveskemaet, hvis farven en dag skulle blive nødvendig.
Den har ekstra varme, men også en gennemslagskræft, der siger spar to.
Grå, fra mørk til lys
Sidst men ikke mindst, så har vi de grå nuancer, der – hovedsageligt – repræsenterer alt tekst. Samtidig er de ikke en del fra farveskemaet fra Colourlovers, men en række typiske nuancer, der gør sig godt til web.
De bløde nuancer er valgt, fordi de spiller ekstra godt sammen med en blød baggrund. Sort kontra hvid er ekstra hårdt for øjnene at læse.
Samtidig har jeg gjort en ekstra indsats for at holde det på så få nuancer som muligt. Og samtidig nogle ret klassiske valg. Jeg synes faktisk det er god praksis, at holde valget af grå nuancer indenfor nogle ret faste rammer. Det gør det blot nemmere for dig selv og webudviklingen.
4. De valgte af skrifttyper
Ganske vidst er det en af de hotte trends i tiden, nemlig at benytte sig af skrifttyper med føder, men det har, som sådan, ikke været årsagen til mit valg.
Der ligger noget traditionelt og gammeldags over gode skrifter med føder. De står som sådan – metaforisk – solidt plantet i jorden. De afspejler på mange måder en personlighed med faste holdninger.
Derfor faldt valget mig ret logisk, da jeg har mine gode og solide holdninger omkring håndværket at bygge hjemmesider. Et håndværk, der i min verden, handler om meget andet end blot en flot facade.
Selvom pågældende website ikke kommer til at handle om webdesign og udvikling, så afspejler valget stadig mig som person. Eksempelvis kan jeg være gammeldags af visse holdninger – bl.a. børneopdragelse.
Sidst men ikke mindst, så er de valgte skrifttyper (ses nedenfor) ikke alt for kantede, men derimod bløde. De runde og bløde finesser går godt i flæng med cirklerne.
5. De valgte ikoner
Nu bugner bloggen dog ikke af ikoner, men alligevel har jeg lagt tanker i de få ikoner, bloggen kan præsentere.
Den generelle stil på bloggen er enkelthed og et minimalt virvar af farver. Af samme årsag faldt det mig ret logisk at vælge et ikonersæt, der er farveløst. Ja, sort/hvid er ikke farver, men kontraster.
Samtidig benytter jeg cirkler, der står som god kontrast til de “traditionsbundne” skrifttyper. Endnu en logisk årsag til at vælge ikoner i cirkelformat, så de passer ind i det generelle look.
Jeg har samtidig nedtonet ikonerne, så de ikke nødvendigvis får al din opmærksomhed – alligevel har de en god og prominent placering med masser af luft. Deres funktionalitet er jo ikke helt uvigtig.
Klik og du skal finde det brugte ikonsæt
Det kan diskuteres, at ikonerne virker lidt komiske, hvorfor de måske kunne tåle en udskiftning til noget mere enkelt og afstemt i udtrykket.
6. En grundig fedtsugning
Fra start af har det været mit mål at fjerne meget af den sædvanlige funktionalitet, du møder på en blog. Jeg har arbejdet målrettet efter at fjerne features og andet gøgl, der faldt mig overflødigt.
Langt de fleste af os, der bevæger sig i blogverden, kender alligevel strukturen og rækkefølgen af tingene. Derfor kunne jeg sagtens vælge at fjerne mange ting, fordi de i bund og grund ikke var og er nødvendige. Mange elementer skaber støj.
Jeg har skåret følgende overflødige fedtdepoter fra:
- Ingen kategorier
- Ingen tags
- Ingen overskrift over kommentarerne
- Ingen overskrift på kommentarfeltet
- Ingen fremhævelse af samlet antal kommentarer pr. blogindlæg
- Ingen “mest populære/kommenteret”
- Ingen blogroll aka “jeg læser også…”
- Ingen sidebar
- Ingen footer
- Ingen typisk hovednavigation – først synlig på undersider
Nogle af tingene vil normalvis ikke kunne skæres fra, som eksempelvis kategorierne. Jeg har fjernet disse grundet den frie snak.
Ellers har jeg fjernet et par overskrifter, som i den grad virkede overflødige, fordi den normale bruger alligevel kender flowet og strukturen af en blog. Hvorfor benævne, at nu starter kommentarerne? Det er somregel ganske indlysende. Samtidig, hvorfor beskrive, at her kan du skrive en kommentar?
Jeg har også fundet det vigtigt at fjerne fokus fra antal kommentarer. Min professionelle blog omkring webdesign og -udvikling har i større grad fokus på kommentarerne, selvom antal kommentarer ikke er grundlaget for en successfuld blog.
Ved fjernelse af alle disse elementer, har jeg skabt en simpel og overskuelig blog, der i den grad har fokus på indholdet, mine holdninger og alt det, jeg ellers kommer til at skrive. Ordet er ganske enkelt kommet i centrum – stærkt belyst af en fremtræden signalfarve.
Der er såmænd en mening med “galskaben” 
7. Afprøve teorierne i praksis
Med udarbejdelsen af en ny blog har jeg haft rig mulighed til at afprøve nogle af de mange ting, som jeg har skrevet om i:
- Sådan bliver du en bedre webdesigner – del 1
- Sådan bliver du en bedre webdesigner – del 2
- Sådan bliver du en bedre webdesigner – del 3
Det er ikke verdens største udfordring at skrive om teori fremfor at praktisere teorien. Derfor har det både været udfordrende og sjovt at afprøve dem i praksis. Det har været sjovt at sætte ord på det hele, jeg har gjort – eller det meste.
Det går fint i flæng med, at webdesign i min verden ikke blot handler om at dekorere. I min verden er et flot webdesign ikke nøglen til et godt website. Nøglen er nærmere en håndhævelse af alle de muligheder, en webdesigner har, så man opnår de ønskede mål for pågældende website.
Ganske enkelt handler det om at have en mening, med alle de ting, man gør. Begrundelsen, at det ser flot ud, holder ikke vand.
8. Grave dybere i WordPress, HTML og CSS
Hele processen har også givet gode muligheder for bl.a. at afprøve andre plugins til WordPress, andre hacks og andet godt.
Af nye plugins har jeg kastet mig over
Specielt WordPress SEO af Yoast har vist sig at være super lækker. Du har mange skønne indstillingsmuligheder, og samtidig er det forholdsvis nemt at benytte. Derimod er jeg lidt tøvende med henholdsvis Extended Analytics og Hyper Cache.
Specielt Extended Analytics lader til at være ret nytteløs – i hvert fald for undertegnet. Det plugin synes jeg ikke har medført ret meget ekstra, jeg kunne bruge til noget.
HTML og CSS
Det er dog mest på området for CSS, at jeg har afprøvet nye muligheder. Jeg har valgt at skrive min CSS anderledes end normalt – hovedsageligt for at vende mig til fremgangsmåden, vi benytter på min arbejdsplads.
Fremadrettet vil jeg kaste mig mere ud i CSS3, hvor jeg vil benytte CSS3 Media Queries til at skabe et mobilt webdesign. Media Queries er en stærk måde, hvorpå man kan lave et fleksibelt website.
Udbredelsen af skærme og enheder har ændret sig eksplosivt de seneste år med tablets og smartphones.
Heldigvis har den nye blog et enkelt udtryk, så jeg forventer ikke de store komplikationer i processen. Derimod kunne det blive en væsentlig større udfordring, hvis jeg vælger samme fremgangsmåde med bloggen, hvorpå du netop befinder dig.
Ikke desto mindre, så glæder jeg mig til at prøve kræfter med CSS3 Media Queries.
9. Konklusion
Det endte med at blive et af de lange blogindlæg, men sådan går det, når tankerne skal udtrykkes – grundigt!
Jeg har gennemgået en lang række punkter, over de valg, jeg har truffet. Jeg har prøvet at skabe en bro imellem teori og praksis, men er det lykkedes?
Det at være webdesigner er ikke nemt, og ønsker man blive god i branchen, skal man i den grad igennem mange overvejelser. Man kan ikke blot tilføje trends samt andet lækkert og derved tro, at man er en god webdesigner. Du skal som webdesigner kunne forsvare de valg, du har foretaget dig i processen.
Det at være en god webdesigner handler i den grad om at tænke.
Unknown
Design without meaning or reason is nothing more than a pretty picture
Kære læser, jeg håber du har kunne bruge min brokobling mellem teori og praksis? Jeg håber læseren har fået en vis forståelse for, hvad det egentlig kræver at være webdesigner? Måske den kære læser selv er webdesigner? Uanset hvad er din kommentar altid velkommen!
Skriv en kommentar
… Helt klart noget jeg vil følge med i!
