in spiri.dk, www

Et lille redesign

Jepsen! Jeg har givet spiri.dk en lille overhaling. Det er nok ganske tydeligt at der absolut ikke er tale et et helt nyt design. Det er snarere en videreudvikling af det forrige design. Jeg synes selv at det er blevet en del bedre.

Der er sket en del småting hist og pist, men det tydeligste er nok at sitet er centreret. Jeg havde leget lidt med en fast venstre margin. Det var bedre end et absolut venstrestillet design, men jeg er kommet frem til at jeg egentlig kan lide det centreret.

En anden større ting er at jeg har lavet form-knapperne om. Det ses fx ved søgefeltet og ved kommentarformen. I stedet for det klassiske input-tag med type “submit” har jeg brugt button-tagget, som gør det meget nemmere at style knapperne. Det er super smart! Hvorfor i alverden har jeg ikke hørt om det noget før??

Derudover er der sket lidt hist og her. Indholdsområdet er blevet bredere, og på forsiden er datoerne blevet mindre. Der er komet rundehjørner hist og her (i Gecko- og Webkit-baserede browsere). Der er kommet en lidt anderledes baggrund på logoet.

Jeg har også prøvet at integrere preview-delen af wmd-editoren lidt bedre. Jeg er ikke sikker på om det er den optimale løsning, så måske bliver det lavet om. Men sig endelig hvad I mener!

Og sig selvfølgelig endelig hvis I render ind i fejl rundt omkring!

  1. Det ser jo ganske udmærket ud.
    Og tak for henvisningen til button-tagget. Det vil jeg nok begynde at bruge fremover…

  2. Jeg kunne godt li’ “det gamle” design, og jeg vil give dig 100 % ret i, at ændringerne klart er til det bedre :-) Kan især godt li’, at det der tilføjet lidt runde kanter o.lign., så siden på en eller anden måde virker lidt mere levende.

    Lige et forslag til integrationen af wmd-preview’et. Måske kunne du lave en “kasse” af en art, og så med en overskrift der forklarer at det er et preview af ens kommentar.

  3. Menu-baren skal gøres smallere, og dit nye banner er.. Wadr.. Sry, plejer at være god til konstruktiv kritik, men dit tidligere design var virkelig langt mere smagfuldt end det her, og det er bannerets skyld det hele! Det kan sagtens være det kommer til at se bedre ud hvis du får titlen til at se ordentlig ud, men lige nu virker det ikke!

  4. Tænkte jeg lige ville give mit syn til kende :) Håber du kan lide konstruktiv kritik.

    Nu kan jeg så ikke huske dit gamle design, men jeg har nogle ideer som måske kan bruges lidt bredt.

    Grid:
    Det første jeg ser, er dit grid, dvs main/sidebar content hvor reglen 1/3 er ofte den man bruger (sidebar 1/3 af størrelsen af den samlet bredde). Det giver luft til indhold i sidebaren samt gøre dine paragrafer noget smaller og man siger vist at menneskeøjet bedst kan håndtere 10-12 ord på hver linie; fontstørrelsen har jo også en afgørende betydning her. Lidt mere luft i margins omkring brødteksten er også en god måde at give den lidt luft.

    Dybde:
    Noget som gør en webside interessant er at hvis designet har en dybde, istedet for at se flad ud. Jeg synes selv det kan være ret vanskeligt, men det kan virkelig give en lækker fornemmelse og får indholdsruden til at “poppe ud”. Brug en farvepalet med fem farver, kan være en vej til dette, det andet er at man med headeren og baggrunden kan lege en del, dog er det jo en PS/Illy opgave. En smule mere kontrast fra indholdsruden til baggrunden kan også give samme effekt.

    Navigation:
    Din blog består af en sekundær og primær navigation. Primær navigation er din horisontale menu, som drager god fokus, både med sin placering og farverne. Din sekundær navigation derimod drager en del fokus væk fra dit primær indhold, netop din brødtekst, fordi den fylder massivt. Hvorfor give sekundær navigation så meget vægt?
    Jeg siger ofte til bloggere at de bør tænke på sin sekundære navigation og hvordan man kan gemme den lidt væk, en måde er at udnytte sin footer, eller lave et menupunkt hvor det hele ligger. Prøv at se efter “big footer”, mener der ligger nogle fede eksempler på smashingmagazine. Det er okay der ligger nogle links i sidebar, men begræns det til som du synes bør være vigtigst for brugeren.

    Småting:
    Der er en dotted white border i din sidebar, har den nogen funktion? ;-) Den presser indholdet lidt sammen og gør det klumpet, samt lidt mere margin i top og bund ville gøre det lettere at læse.

    Så er der hele diskussion om understregning af links eller ej.. hvis du ikke følger mit råd om at gemme sekundær navigation væk, så synes jeg du bør fjerne understregning af links i din sidebar – masser af streger og kniber man øjnene lidt sammen, så kan du se det ligner en stor massiv klump. Nogle siger at understregning af links er et must, tradition, universal forståelse osv.. og de har da også ret i de to sidste, dog bør man kende lidt til traditionen fra skrivemaskiner, samt terminal, for at forstå at det var logisk med html’en første introduktion. Et argument er at farveblinde bedre kan se det, men color oracle kan hjælpe dig med at finde en bedre farve, som farveblinde kan se.

    Dit rss feed, har en understregning og ser lidt tabt ud i bunden af sidebaren :-)

    Nå det var lige hvad jeg kunne finde så tidligt om morgen, håber du kan bruge det :-)

  5. Hehe, Kasper, det var da lige godt grov at det er så slemt :D. Den nye baggrund på logoet kommer sig af, at jeg var blevet træt af den gamle firkantede baggrund. Det kan godt være at den nye baggrund ikke er perfekt, men det er jo også noget der er nemt at lege videre med :).

    @Esben: Wow! Mange tak for den konstruktive kritik (selvfølgelig kan jeg li’ det :))! Mange af dine pointer kan ganske sikkert drages direkte over på det tidligere design (billede) , da det som sagt mindede en del om dette.

    Du har en mase gode pointer, som jeg nok vil se nærmere på når jeg lige får tid :). Igen, mange tak for din lange kommentar!

  6. Ja, sorry.. Som sagt plejer jeg at være bedre til den konstruktive kritik, men tag det som et kompliment til dit tidligere design, for det var virkelig godt.. Og fiks så det banner :)

Comments are closed.