Design - inte så webbserver
Lite kort om exempel-projektets design.
Design och omdesign
Efter att ha skapat den design som omnämns här nedan så hade jag problem med läsbarheten. Jag gjorde även lite extra arbete med övningssidan vilket resulterade i en del uppdaterad css. Jag hade även en önskan om att exempelsidan till denna bok skulle fungera med sass-middleware.
Av den anledningen gjorde jag om designen, den använder nu en del av koden från övningssidan samt att det nu fungerar med sass-middleware, som en bonus är den nu mycket mer läsbar.
Texten här nedan får stå kvar som reflektion över ett designarbete.
Repot hittar du på GitHub, https://github.com/jensnti/wsp1-node
Idé
För projektets design så användes Figma, skisserna finns här. Det kan underlätta att använda ett digitalt skiss-verktyg, men oftast är det enklast att börja med penna och papper. Design är svårt och en iterativ process som innehåller många ställningstaganden. Under processen så framträder ofta problem med designen, både estetiska och tekniska. Produkten förbättras på så vis stegvis.
Färg
Design-processen för exempel-projektet började med valet av ett färgschema. Färgerna har känslan om något under vatten.
Användaren är på djupt vatten, ny kunskap, osäkerhet, men samtidigt lugna och sköna färger, trygghet.
Allt kommer att bli bra.
När ett färgschema har valts för en sida är det viktigt att testa användbarheten. Wave och Lighthouse är exempel på verktyg för att testa användbarheten. Testerna för exempel-projektet visade att kontrasten inte var tillräcklig. Kontrasten skulle behöva ökas markant för att åtgärda problemet, något som resulterade i att sidan tappar undervattenskänslan. Det leder alltså till ett ställningstagande för design eller användbarhet. Jag gör här valet att behålla designen trots testresultatet.
Testa tidigt och ofta!
Rent praktiskt kan Sass-variabler underlätta arbetet med färger. Sass har även moduler för att manipulera färg.
Bild
Undervattenskänslan i färgschemat ledde sedan till bilden med bubblorna. Bilden skapades i Adobe Illustrator med formatet SVG. Utöver det används ikoner från Material.io och NTI Gymnasiets logotyp, alla i SVG formatet.
Text
Det praktiska arbetet med sidans titel, Webbserverprogrammering, ledde till ett intressant problem. Det visade sig att ett väldigt långt ord som inte kan avstavas av webbläsaren påverkar hur hela sidan ritas ut när meta viewport scale används. Resultatet blev hemskt och behövde åtgärdas. Lösningen blev att lägga till ett bindestreck mellan Webbserver och programmering, Webbserver-programmering. Rent språkmässigt fel för svenskan, men den enklaste och bästa lösningen. En bra illustration av att med HTML och CSS så skapas komplexa layouter, vilket inte alltid fungerar som tänkt. Ibland är den tänkta designen inte genomförbar, därför är det viktigt att genom testning upptäcka problem.
Jag hoppas att dessa exempel från designprocessen kan hjälpa. De är val som behöver göras oavsett om en har skisser att utgå från eller inte. Men att utgå från skisser och design-idéer, ger ett stöd som alltid underlättar. Att planera vad du ska skapa och slipa på det är en del i en process. Processen fortsätter sedan under webbplatsens kodande. Att arbeta med processen i flera steg och att testa leder så gott som alltid till ett bättre slutresultat.
Kom ihåg att sidan ska gå att använda, annars är det en meningslös produkt.
Från HTML till webbplats
På det stora hela så handlar det om att stegvis arbeta utifrån existerande skisser med HTML och CSS. Tänk på att inte försöka designa HTML utan innehåll. Placeringen av element i HTML-kod är beroende av andra element, så innehållet kommer alltid påverka placeringen.
Var noga med att strukturera sidan korrekt och att HTML-elementen är korrekt stängda. Om elementen inte är stänga kan det bli väldigt svårt med stilarna. Det kan även leda till att stilar och annat inte visas med önskat resultat. Testa tidigt och ofta, validera koden regelbundet.
Undvik även att positionera element absolut och tänk alltid på att ändra storleken på webbläsarfönstret, du kan inte förutsätta att användaren alltid kör samma upplösning som du.
Fastna inte heller i evigheter på detaljer innan du ens har någon design. Gå vidare, du kan alltid komma tillbaka.
Minimum Viable Product (MVP). Designa helheten så att det går att använda först. Gör sedan klart allteftersom.
Last updated
