Webbdesign kritik efterfrågas! - "Framtidsbloggen 2.0"

Permalänk

Webbdesign kritik efterfrågas! - "Framtidsbloggen 2.0"

Tjo! Jag efterfrågar ren webbdesign-kritik av min webbplats vad gäller placering av diverse webbelement samt val av typsnitt (färgschemat har jag redan satt i sten dock):

Min projektuppgift berör funktionalitet av PHP OOP så fokuset ligger inte på webbdesignen i sig (menyknapparna hintar om vad för funktionalitet som kommer att finnas i slutprodukt). Men det vore ju lite kul om man kunde få en viss "användbarhetsnivån" efter att jag läst kursen Webbanvändbarhet. Däremot handlade den om att göra webbplatsen användbarhet, inte nödvändigtvis "estetiskt tilltalande".

Här är några frågor jag har rörande webbdesignen (inte funktionaliteten i sig då jag bestämmer den! ):

  1. Som du ser så har jag "Logga ut"-knapp på två ställen. Var någonstans känns den överflödig/onödig? Vilken tycker du jag ska ta bort? Bör jag ta bort "Inloggad" i vita rubriken då den redan finns som mindre text inuti vita rutan? Jag kmr göra den "klickbar" så man kan visa och ändra sin "profil".

  2. Det står "Hantera inlägg" i vitt och sedan har jag "Hantera inlägg - Skriva inlägg". Känns det överflödigt? Bör jag ta bort "Skriva inlägg" som rubrik och bara låta "Skriv nytt blogginlägg" (byta ut "blogginlägg" till bara "inlägg"?) tala för sig själv?

  3. Vad tycker du om typsnittet som används just nu? Det är "Orbitron", men den har sina svagheter när texten inte är fetad. Och jag letar ett efter ett typsnitt som upplevs både "futuristiskt" samtidigt som det behåller en viss del läsbarhet vilket många fräna typsnitt inte brukar göra vad jag sett hittills.

Jag har tittat på följande typsnitt:
- https://fonts.google.com/specimen/Black+Ops+One?preview.text=...
- https://fonts.google.com/specimen/Antonio?preview.text=Hur%20...
- https://fonts.google.com/specimen/Audiowide?preview.text=Hur%...
- https://fonts.google.com/specimen/Luckiest+Guy?preview.text=H...
- https://fonts.google.com/specimen/Michroma?preview.text=Hur%2...
- https://fonts.google.com/specimen/Rajdhani?preview.text=Hur%2...
- https://fonts.google.com/specimen/Syne?preview.text=Hur%20ser...
- https://fonts.google.com/specimen/Exo?preview.text=Hur%20ser%...

  • Vilket eller vilka typsnitt tycker du upplevs både futuristiskt och har tillräcklig läsbarhet? En lösning är att köra med font-weight: bold; men det vore ju kul om det kan finnas "futuristiska" typsnitt som kan klara sig med normal typsnittsstorlek för just brödtexten vilket är där Orbitron-typsnittet varit dålig (läs "Inloggad WKL" och inlägget i andra bilden) som exempel.

Psst! Jag kommer att fixa så de översta menyknapparna är lika stora så inte det stör en. Jag är själv "ok" med färgschemat även om gradientbakgrunden bakom h1-rubriken skriker tidiga 2000-talet!

Jag är 100% okej med att du sågar min webbplats ur ren webbdesignmässig synpunkt då jag inte läser webbdesign utan webbutveckling där majoriteten av kurserna är backend-fokuserade och jag saknar verkligen "känsla" för frontend. Färgschemat jag valt fick jag efter jag hittat en schysst knapp (de som används för menyerna i bilden) som har cool grön box-shadows jag tagit/fixat.

Så vad tycker du för typsnitt är "futuristiskt" (några tog jag härifrån: https://www.graphicpie.com/futuristic-google-fonts/ ) och vad har du för övriga webbdesign-synpunkter?

Trevlig helg!

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Permalänk
Medlem

Kan inleda med säga jag jobbar som Product Designer av IT-system. Vill du ha brutal ärlighet så skulle jag nog hellre vara blind, för att slippa utsätta mina ögon för den där typen av tortyr.

Det är svårt att ge dig mer djupgående feedback då det är bara stillbilder och jag kan inte komma åt att se specifika detaljer som om det vore en sida jag kan inspektera i webbläsaren. Så jag ger mig ändå på ett försök till att ge spontan feedback och lite tankeställningar.

1. Det är för liten kontrast vilket gör att texten på knapparna blir väldigt svårlästa. Det finns verktyg som mäter konstrast för se om ditt färgval uppfyller WCAG (Web Content Accessibility Guidelines). Rekommenderar förövrigt att du kikar på WCAG quick reference då det innehåller nyttig information och bra att ha kännedom om.

För att mäta kontrast så kan du nyttja detta verktyg. Där behöver du bara ange färgkoderna så får du fram resultat om det uppfyller WCAG-kriterier.

2. Även om färgövertoningar kan ses som coolt så skippa det helt. Ska det vara en sorts framtidsblogg så blir det ett motsatt resultat (om det nu inte är en ironisk sida). Futuristiskt typsnitt och färgövertoning är en bra kombination som väcker nostalgi och för ens tankar till webbsidor från tidigt 2000-tal. Då cyberspace-sci-fi-much-wow-future-tech var populär designtrend i ADSL-eran.

3. Knapparna kan ses som flytande objekt och du har som ingen tydlig struktur av navigation. Istället för att varje knapp är fristående så kan du mixtra med att få det till att upplevas som en grupp. Ett vanligt och enkelt exempel är ju att du kör en bakgrundsfärg kant till kant och sen har du en annan indikator på vilken knapp som är active. Just nu har du en glowing effekt som även den är influerad av punkt två. Då får du en bättre och tydligare hierarki.

Gå in på diverse sidor och kollar hur deras navigation ser ut och fungerar i praktiken för inspiration.

4. Typsnittet är futuristiskt som du eftersträvar. Nackdelen med denna typ är att läsbarheten minskas. Märks speciellt när det kommer till brödtexter att det är jobbigt att läsa. Även om jag har perfekt syn så är det ändå för jobbigt att läsa blogginlägget även om svart text på vit bakgrund har bra kontrast.

Ska det vara olika font-size på knapparna? Blir det bättre och mer enhetligt att köra samma storlek? Font-weight som är över regular bör användas varsamt.

5. Less is more. Det är lätt att man fyller sidan med så mycket information som möjligt. Whitespace är någon jag upplever utvecklare rent generellt har väldigt svårt att hantera. Då en vanlig åsikt som nämns är att sidan känns tom. Men att det upplevs som tomt behöver inte vara något negativt. Whitespace kan skapa en bättre hierarki och helhetsbild.

Du har ju faktiskt identifierat en del som kan kännas onödig, vilket är två knappar för logga ut/startsida. Vilket jag instämmer är onödigt. Bara för att man har två knappar som gör exakt samma sak så kan det vara mer stjälpande än hjälpande för användaren. Samma med "Hantera inlägg - skriv inlägg" är den texten nödvändig för att användaren ska förstå att man skriver ett inlägg? Raden under så har du "skriv nytt blogginlägg" så det blir fort repetitivt.

Om du har logga ut i själva bodyn där du skriver inlägg, då behöver du ha det på varje undersida, annars måste ju användaren gå in på en specifik undersida för logga ut. Kommer varje undersida ha samma struktur? eller kommer det vara någon undersida som medför att knappen kan hamna på ett annat ställe? Är det mer fördelar att ha den i huvudnavigationen så att funktionen alltid har samma placering? Då spelar det ingen roll vad undersidans struktur och innehåll är.

Det är alltid bra att stanna upp och fråga sig varför man gör si eller så. Reflektera själv vad för- och nackdelarna är. Bra egenskap för både design och utveckling.

6. Bifogar en bild på en lathund som är en bra vägledare.

7. Nu jobbar jag ju inom UI/UX-världen så man är ju arbetsskadad. Så jag har lite verktyg jag använder till vardags och nedan finner du en bild på din sida som är analyserad av AI. Det är ett verktyg som visualiserar vad människans öga fokuserar på, under dom 3-5 första sekunderna. Det till vänster är vilken turordning ögat färdas. Den till höger är en s.k heat map som visar hur hög sannolikhet ögat kommer att uppmärksamma området. Ju rödare ju större sannolikhet.

Visa signatur

PC: AMD Ryzen 9950X3D | Gigabyte RTX 5070 Ti AERO | Samsung 990 PRO 4TB | Gigabyte B650E Aorus Stealth Ice | Corsair Dominator Titanium White 2x48GB DDR5 6600MHz CL32 | Lian Li O11 Vision Compact White | Lian Li HydroShift LCD 360TL White | Lian Li EDGE Platinum 850W White | Lian Li UNI FAN TL 3-pack 120mm Reverse White

Permalänk
Medlem

Det största problemet är nog att du går en kurs som lär ut PHP år 2023.

Permalänk
Medlem
Skrivet av izzie:

Det största problemet är nog att du går en kurs som lär ut PHP år 2023.

Precis, det som gäller nu är väl nodejs, javascript, ruby och python?

Visa signatur

5820k - 6950 XT

Permalänk
Medlem
Skrivet av Luminous:

Precis, det som gäller nu är väl nodejs, javascript, ruby och python?

https://madnight.github.io/githut/#/pull_requests/2022/4

Permalänk
Medlem
Skrivet av izzie:

Det största problemet är nog att du går en kurs som lär ut PHP år 2023.

Skrivet av Luminous:

Precis, det som gäller nu är väl nodejs, javascript, ruby och python?

Att det alltid ska komma hipsters och klaga på PHP.

Visa signatur

www.fckdrm.com - DRM år 2025? Ha pyttsan.

Permalänk
Medlem

Man kan bevisa lite vad man vill...

https://w3techs.com/technologies/overview/programming_languag...

Permalänk
Skrivet av ztenlund:

Använder inte Sweclockers backend PHP, typ Laravel-ramverket?

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Permalänk
Skrivet av IMPANI:

Kan inleda med säga jag jobbar som Product Designer av IT-system. Vill du ha brutal ärlighet så skulle jag nog hellre vara blind, för att slippa utsätta mina ögon för den där typen av tortyr.

Det är svårt att ge dig mer djupgående feedback då det är bara stillbilder och jag kan inte komma åt att se specifika detaljer som om det vore en sida jag kan inspektera i webbläsaren. Så jag ger mig ändå på ett försök till att ge spontan feedback och lite tankeställningar.

1. Det är för liten kontrast vilket gör att texten på knapparna blir väldigt svårlästa. Det finns verktyg som mäter konstrast för se om ditt färgval uppfyller WCAG (Web Content Accessibility Guidelines). Rekommenderar förövrigt att du kikar på WCAG quick reference då det innehåller nyttig information och bra att ha kännedom om.

För att mäta kontrast så kan du nyttja detta verktyg. Där behöver du bara ange färgkoderna så får du fram resultat om det uppfyller WCAG-kriterier.

2. Även om färgövertoningar kan ses som coolt så skippa det helt. Ska det vara en sorts framtidsblogg så blir det ett motsatt resultat (om det nu inte är en ironisk sida). Futuristiskt typsnitt och färgövertoning är en bra kombination som väcker nostalgi och för ens tankar till webbsidor från tidigt 2000-tal. Då cyberspace-sci-fi-much-wow-future-tech var populär designtrend i ADSL-eran.

3. Knapparna kan ses som flytande objekt och du har som ingen tydlig struktur av navigation. Istället för att varje knapp är fristående så kan du mixtra med att få det till att upplevas som en grupp. Ett vanligt och enkelt exempel är ju att du kör en bakgrundsfärg kant till kant och sen har du en annan indikator på vilken knapp som är active. Just nu har du en glowing effekt som även den är influerad av punkt två. Då får du en bättre och tydligare hierarki.

Gå in på diverse sidor och kollar hur deras navigation ser ut och fungerar i praktiken för inspiration.

4. Typsnittet är futuristiskt som du eftersträvar. Nackdelen med denna typ är att läsbarheten minskas. Märks speciellt när det kommer till brödtexter att det är jobbigt att läsa. Även om jag har perfekt syn så är det ändå för jobbigt att läsa blogginlägget även om svart text på vit bakgrund har bra kontrast.

Ska det vara olika font-size på knapparna? Blir det bättre och mer enhetligt att köra samma storlek? Font-weight som är över regular bör användas varsamt.

5. Less is more. Det är lätt att man fyller sidan med så mycket information som möjligt. Whitespace är någon jag upplever utvecklare rent generellt har väldigt svårt att hantera. Då en vanlig åsikt som nämns är att sidan känns tom. Men att det upplevs som tomt behöver inte vara något negativt. Whitespace kan skapa en bättre hierarki och helhetsbild.

Du har ju faktiskt identifierat en del som kan kännas onödig, vilket är två knappar för logga ut/startsida. Vilket jag instämmer är onödigt. Bara för att man har två knappar som gör exakt samma sak så kan det vara mer stjälpande än hjälpande för användaren. Samma med "Hantera inlägg - skriv inlägg" är den texten nödvändig för att användaren ska förstå att man skriver ett inlägg? Raden under så har du "skriv nytt blogginlägg" så det blir fort repetitivt.

Om du har logga ut i själva bodyn där du skriver inlägg, då behöver du ha det på varje undersida, annars måste ju användaren gå in på en specifik undersida för logga ut. Kommer varje undersida ha samma struktur? eller kommer det vara någon undersida som medför att knappen kan hamna på ett annat ställe? Är det mer fördelar att ha den i huvudnavigationen så att funktionen alltid har samma placering? Då spelar det ingen roll vad undersidans struktur och innehåll är.

Det är alltid bra att stanna upp och fråga sig varför man gör si eller så. Reflektera själv vad för- och nackdelarna är. Bra egenskap för både design och utveckling.

6. Bifogar en bild på en lathund som är en bra vägledare.
https://media.nngroup.com/media/editor/2020/03/02/visual-design-principles-06.png

7. Nu jobbar jag ju inom UI/UX-världen så man är ju arbetsskadad. Så jag har lite verktyg jag använder till vardags och nedan finner du en bild på din sida som är analyserad av AI. Det är ett verktyg som visualiserar vad människans öga fokuserar på, under dom 3-5 första sekunderna. Det till vänster är vilken turordning ögat färdas. Den till höger är en s.k heat map som visar hur hög sannolikhet ögat kommer att uppmärksamma området. Ju rödare ju större sannolikhet.
https://i.imgur.com/JnyYPxT.jpg

Tack så mycket för det oerhörda mastodonta ärliga svaret! Det syns att jag har ingen "ljus" framtid som frontendutvecklare! jag får hålla mig till backend. Och det är såklart pinsam design med tanke på att föregående kurs var inom just Webbanvändbarhet med fokus på att leva upp till WCAG 2.0 riktlinjerna och allt som det innebär.

Jag tror jag döper om bloggen till "Nostalgibloggen" istället så överensstämmer den "gammaldagsa" designen bättre med internets designhistoria!

En utmaning jag har är att behålla samma "visuella design" stationärt som mobilt. Jag kan skapa mer whitespace stationärt men hur ska detta göras på liknande sett mobilt utan att leda till oändligt skrollande och utan att upplevas att vara en helt annan webbplats? (Typ att "varumärkets identitet går förlorad" då)

Sedan kravet på att alla webbplatser ska vara responsiva så har jag följt en "mobile first"-princip (om än dåligt gjort) där det blir kompakt för att få plats med minimalt skrollande. Samtidigt är jag fel målgrupp för mobila webbplatser då jag själv avskyr mobiler och skrollande på mobiler så det blir mer som om jag "designar för mig själv" än majoriteten antar jag? Är folk OK med att skrolla för att hitta runt på webbplatser? Eller ska man fokusera mer på att ha flera (inte bara en) hamburgarmenyer för snabbare navigering mellan sidor och undersidor i mobilversionerna?

Just nu använder jag grönfärgad text för att kommunicera "när något gick rätt/har gjorts" (t.ex. lyckad inloggning, publicerat inlägg) medan röd färg används för att kommunicera det motsatta (t.ex. felaktigt lösenord, du saknar åtkomst, osv). Om man däremot ska kommunicera ett mellanting: "Det finns inga inlägg ännu. Skriv ett först", vad brukar man använda för färg då? Eller använder man någon annan blandning av textstorlek/textdekorering för att kommunicera en "avvikelse" (det saknas inlägg, skriv ett först) istället för att "skrika med rött"?

Det jag kan göra med den "svävande menyn" nedanför h1-an är att göra hela den flexboxen till en bakgrund som skiljer sig från både innehållet och h1-an (t.ex. knapparnas bakgrundsfärg och så lite mer knallgrön textfärg för högre kontrast) och sedan använda outline-bottom som markerar vilken sida man är på (även vid :hover, :focus för varje knapp).

Om du är nyfiken på en Webbanvändbar webbplats (men oxå lika "ful" som denna) jag har gjort så har jag denna färdiga betygsatta projektuppgift från min Webbanvändbarhetskurs: https://maka2207-fardtjanast.netlify.app/index.html där används tomt utrymme mer men det kunde ha använts ännu mer enligt lärarna i kursen.

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Permalänk
Inaktiv
Skrivet av Luminous:

Precis, det som gäller nu är väl nodejs, javascript, ruby och python?

Hur många skriver webb i Python i Sverige? Lär vara en mardröm att rota i större system skrivet i det. Lite samma med JS men där kan man ju iaf slänga på TypeScript och göra det mer seriöst. PHP är helt OK men har ful syntax och verkar sakna en del saker. (Går det att typa en array t ex?)

För övrigt tyckte jag TS skrev någonstans att PHP bara är en del av utbildningen. Inget jag hade gått all in på iaf.

Permalänk
Skrivet av anon320419:

Hur många skriver webb i Python i Sverige? Lär vara en mardröm att rota i större system skrivet i det. Lite samma med JS men där kan man ju iaf slänga på TypeScript och göra det mer seriöst. PHP är helt OK men har ful syntax och verkar sakna en del saker. (Går det att typa en array t ex?)

För övrigt tyckte jag TS skrev någonstans att PHP bara är en del av utbildningen. Inget jag hade gått all in på iaf.

Webbutveckling III (nästa parallellkurs fr.o.m. 20:e mars 2023) går in på NodeJS (alltså JavaScript-baserad serverprogrammering):

Citat:

Syfte
Kursens [Datateknik GR (B), Webbutveckling III, 7,5 hp] mål är att du ska fördjupa dina kunskaper i JavaScript och PHP för att kunna skapa interaktiva webbplatser, baserade på en automatiserad utvecklingsmiljö.

Lärandemål
Efter avslutad kurs ska du kunna:

  • redogöra för hur dynamiska webbplatser med användarbaserat innehåll är uppbyggda och kan skapas

  • beskriva grundläggande säkerhetsaspekter i dynamiska webbplatser

  • beskriva hur webbtjänster är uppbyggda och kan skapas

  • beskriva och skapa JavaScript-kod baserad på senare versioner av JavaScript/Ecmascript

  • beskriva fördelar med CSS-preprocessorer och kunna använda dessa

  • skapa en automatiserad utvecklingsmiljö baserad på node.js

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Permalänk

Jag har jobbat med designers som gått på högskola osv....

Gillar iden du har ser bra ut

Men du kan få hjälp av "color palette generators"

De är bra grejor att få typ ett tema på ens palette

Kommer inte ihåg men:
https://colorkit.co/

Kan vara gött att om du få de där färgerna du har...... och så har du "accent" på border bottom/top som orange eller turkos eller nåt

Prova det så får du kanske ett color theme du är sjukt nöjd med

Permalänk
Medlem
Skrivet av anon320419:

Hur många skriver webb i Python i Sverige? Lär vara en mardröm att rota i större system skrivet i det. Lite samma med JS men där kan man ju iaf slänga på TypeScript och göra det mer seriöst. PHP är helt OK men har ful syntax och verkar sakna en del saker. (Går det att typa en array t ex?)

För övrigt tyckte jag TS skrev någonstans att PHP bara är en del av utbildningen. Inget jag hade gått all in på iaf.

Du ifrågasätter hur många svenska siter som använder JavaScript?

Permalänk
Medlem
Skrivet av izzie:

Du ifrågasätter hur många svenska siter som använder JavaScript?

Jämför
https://w3techs.com/technologies/overview/programming_languag...
med
https://w3techs.com/technologies/overview/client_side_languag...

Notera respektive rubrik.

Permalänk
Medlem

Ja?

Permalänk
Inaktiv
Skrivet av izzie:

Du ifrågasätter hur många svenska siter som använder JavaScript?

Var gör jag det? 🤔

Permalänk
Medlem
Skrivet av anon320419:

Hur många skriver webb i Python i Sverige? Lär vara en mardröm att rota i större system skrivet i det. Lite samma med JS men där kan man ju iaf slänga på TypeScript och göra det mer seriöst. PHP är helt OK men har ful syntax och verkar sakna en del saker. (Går det att typa en array t ex?)

För övrigt tyckte jag TS skrev någonstans att PHP bara är en del av utbildningen. Inget jag hade gått all in på iaf.

Det används ju, åtminstone till delar, men att det inte har en större etablering beror väl på att det har funnits PHP, länge... Och ruby on rails kanske?

Visa signatur

5820k - 6950 XT

Permalänk
Inaktiv
Skrivet av Luminous:

Det används ju, åtminstone till delar, men att det inte har en större etablering beror väl på att det har funnits PHP, länge... Och ruby on rails kanske?

Ser väldigt sällan Python efterfrågas i annonser när det kommer till webb i alla fall, är väldigt mycket .NET och sen ser man lite PHP och Node också.

Permalänk
Skrivet av Luminous:

Det används ju, åtminstone till delar, men att det inte har en större etablering beror väl på att det har funnits PHP, länge... Och ruby on rails kanske?

När jag kikat på W3Tech-sidan så verkar Ruby (on rails) vara populärt på webbplatser med extra hög trafikmängd? PHP verkar - precis som du säger - ha funnits längre och det kanske är lite "Why fix that which is not broken?"

Även HTML & CSS har hängt med ett bra tag om jag inte misstar mig!

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Permalänk
Medlem
Skrivet av anon320419:

Ser väldigt sällan Python efterfrågas i annonser när det kommer till webb i alla fall, är väldigt mycket .NET och sen ser man lite PHP och Node också.

Jepp, jag glömde ASP .NET, jag har aldrig använt det själv.

Visa signatur

5820k - 6950 XT