web designer • web developer • webmaster • web programmer

Uppgiftsbeskrivning

Jag har valt att göra en relativt tidlös design, med influens av modern design — i form av lite 3D-utseende. Idén till 3D med skuggor (både tydliga och subtila) fick jag i modul 2 Webbsidans struktur och grafiska uppbyggnad.

Liksom i tidlös design har jag inte alltför mycket visuell ornamentering (The Smashing Book #2, 2011, s. 22 – ”Avoid Ornamentation”). Möjligtvis kan bakgrundstexturen räknas som ornamentering, men den ingår i 3D-designen.

Jag fokuserar på bilderna, vid sidan av texten såklart, vilka har lite extra funktioner såsom bildbyte och visa/göm tonad genomskinlig platta över vissa bilder. Syftet med detta är att visa vad jag kan med Javascript och någon av funktionerna (slumpa bild) var ju en av övningsuppgifterna.

Färgval, känsla, kontrast

Jag valde att använda en färgkombination av Split Complimentary Colors, med rött som bas. Rött symboliserar passion och energi: FreddyOlsson.se/färgpsykologi. Samtidigt som syftet med färgvalet, med rött som bas, är att förmedla energi och dynamik -- så är det kontrastverkan mellan färgerna. Jag illustrerar texten med att presentera mitt val av färger i olika mättnad, i högerkolumnen.

Kontrast är det också mellan färger överallt gentemot fotografierna, som är i svartvitt (med toning som går att avaktivera, på vissa). Kontrast hjälper till att göra sidan intressant (vid enbart ett fåtal element på sidan) (The Smashing Book #2, 2011, s. 26 – ”Contrast”).

Bilder, komposition

Fotografierna är väl valda, jag och mina katter! Att visa fotografier på webbsidan på det sätt jag gör, är ett av sätten att skapa kommunikation med bilder. Dvs bilderna är fotografier och visar människor eller saker. Det andra sättet att kommunicera med bilder är med metaforer, vilket jag inte använt här. (The Smashing Book #2, 2011, s. 30-33 - ”Communicating With Images”). Illustrationerna har jag använt för symmetrins skull och för att stödja innehållet såklart. Undantaget är operatorerna på sidan om uppgift 2, vilka är ren utsmyckning.

Kompositionen bygger på Gyllene Snittet, dvs förhållandet mellan textkolumnen och bildkolumnen motsvarar GS. För att visualisera GS, har jag valt att med hjälp av Javascript, kunna visa gömma en ”grid”. Huvudnavigeringen återfinns i huvudet, med klickbara tabbar som tydligt visar aktiv sida. Sidonavigering ligger flytande i vänstermarginalen. Den visar samma som huvudnavigeringen, men mer detaljerat. Sidonavigeringen försvinner, när den kolliderar med textkolumnen, vid smalare sidbredder.

Att jag valde att ta bort underlinjering på länkarna i huvudnavigeringen beror på att det är uppenbart att de är klickbara. De tillhör ”common patterns” och är välkända för användare (webbsurfare) (Courtsey of Theresa Neil, co-author of ”Designing Web Interfaces”, O’Reilly Media 2009 | The Smashing Book #2, 2011, s. 65).

Typografi

Typografin på min sida är lågmäld. Den konkurrerar inte med de livligare färgerna. Jag har även ökat radavståndet lite och ökat tillriktning på en del stycken (huvudet och foten) för att få ett lite luftigare intryck. Tillriktning är det generella mellanrummet mellan alla tecken i texten. Någon annan tanke än att typografin ska vara ”klassisk” har jag inte. Texten är helt enkelt bara tänkt att vara funktionell utan att dra ögonen till sig.

Sammanfattning

Med min portfolio vill jag förmedla en känsla av ”klassisk tidlöshet” men med djärvhet i valet av färger och ett visst mått av modernitet (3D och skuggor).

Syftet med portfolion är såklart att visa upp meriter samt vad jag kan, och jag är nöjd med mitt arbete :-)

Bild på Split Complimentary Colors
Split Complimentary Colors, normal kulör.
Bild på Split Complimentary Colors
Split Complementary Colors, mörkare variant.
Bild på Split Complimentary Colors
Split Complementary Colors, ljusare variant.