Grid of Equals

Grid of Equals med rader och kolumner - Ett bra exempel på hur en Grid of Equals kan se ut i en matris med rader och kolumner. Det används här av codecademy för att presentera sitt kursutbud. God användning av Titled Sections och beskrivning för att förtydliga innehållet i denna sektion. Samma format är även applicerad på själva rutorna vilket ger en tydlig hierarki. Fade-out används för att få beskrivningen att passa i rutorna och föreslå att mer information finns på den länkade sidan. Bra användning av whitespace med marginaler och padding för att göra innehållet luftigare. Highlight-effekt ges i form av förstärkta skuggor (se längst ner i mitten).

Grafik används här för att differentiera mellan olika sorts kurser utan att separera i ytterligare sektioner. Kurser som relaterar till HTML och CSS använder blåa rektanglar. Kurser angående JavaScript har istället turkosa ovaler. Grafiken förstärker även kopplingen mellan kurser som relaterar till varandra.

Grid of Equals i kolumn - Så här kan det se ut i en kolumn. Vid låga resolutioner är det vanligt att en Grid of Equals matris eller rad visas i en kolumn istället. Titled Sections används för hela sektionen samt för individuella rutor. Här används också ikoner för att figurativt beskriva innehållet. Här är också hela rutan ett länkat objekt, dock så har den ingen highlight-effekt. Designen är konsekvent och använder rikligt med whitespace.

Irregular Grid vs Grid of Equals - Detta är inte ett exempel på Grid of Equals i sig, utan är en grid layout som brukar kallas Irregular Grid. Objekt i Irregular Grid tillåts att ha en variabel form som anpassas efter innehållet, istället för att innehållet anpassas efter det givna utrymmet som i Grid of Equals.

När man funderar på att använda sig utav ett grid av något slag så bör man noga tänka över hur innehållet bäst kan presenteras för användaren. Speciellt när det gäller att snabbt kunna särskilja innehållet inuti och mellan de olika rutorna.

I detta exempel så har de mycket information under varje ruta. Vilket i vår åsikt inte passar bra ihop med Irregular Grid då det kan upplevas som rörigt. Irregular Grid är bäst använt med bildgalleri eller rutor med liten mängd textinnehåll. De använder sig även av Titled Sections, men dessa kan inte snabbt användas för att differentiera de olika rutorna. Detta på grund av att rubrikerna inte är tillräckligt olik från annat text innehåll för att man ska kunna förassociativt upptäcka dem. Plus att de verkar avsky white space, så man får upplevelsen att det är väldigt trångt och klaustrofobiskt.

I slutändan så är vår poäng att det hade varit bättre med en noga tillämpning av Grid of Equals för att presentera detta sorts innehåll.

Inkonsekvent design och layout - I detta exemplet från Försäkringskassan så inleder de med att ha rutor med ikon, länkad rubrik samt beskrivning. Så långt ser det bra ut, men sedan ändrar de sin design tvärt. De fyra nedersta rutorna har ingen länkad rubrik utan istället en samling av länkar, samt ingen ikon. Det hade varit en fördel att fortsätta att applicera sin design konsekvent. Men, om en sådan skiftning i design verkligen behövs, så bör det också vara en större separation mellan de två “sektionerna”. Dessutom så har dessa rutor en avvikande storlek på grund av att de tillåter dessa rutorna att anpassa sig efter innehållet istället för tvärtom.