Permalänk

Designtips, någon?

Jag är en hyffsat skicklig programmerare och är väl halvskaplig på att avgöra hur man gör något användarvänligt.

Problemet är att jag suger mule på färgval, design, bildredigering, utseende, layout och allt som har med det som syns att göra.

Nu till frågan, jag har en sida med massor av program listade, tänk ungefär som google play eller det gamla goda programcentrum som listade svensk mjukvara. Jag är i desperat behov av att göra om designen. Jag har gjort några utkast på nya designer, och första skissen ser alltid acceptabel ut. Sen kommer jag på att något saknas så jag måste visa mer och mer information på sidan, till slut ser hela skiten ut som ett rörigt hopkok av kaos!!

Hur gör ni som kan det här med design när ni designar sidor?
Är det någon som känner sig sugen på att hjälpa till eller vill briljera med sin kunskap och bidra med tips?

Tack på förhand..

Visa signatur

Indieutvecklare? - Visa upp dina skapelser hos http://www.programbank.se

Permalänk
Avstängd

Det finns en hel del små tips (patterns) på denna site som egentligen hör till boken Designing Interfaces. Både via "Visit the Old Site" och "Read some of the new patterns". Hur man ska tänka med färger, "extras on demand" (att dölja detaljer tills de behövs) osv.

Permalänk
Medlem

Lättast torde vara att söka igenom lite sidor som säljer templates till t.ex. wordpress, välj nåt du gillar och härma det, eller köp/ladda ner det färdiga.

Permalänk
Medlem

Om du vill bli bättre på design ska du ju studera design - Kolla på massor massor massor av hemsidor, analysera vad som ser bra ut och varför.

Kunskap bygger på tidigare kunskap, man kan inte bygga kärnkraft direkt från kottar, lär dig av andras kunskap, uppfinn inte nya hjul när du inte måste - Ta ett redan befintligt hjul och lägg till spikar och gummi så har du ett tufft dubbdäck.

Permalänk
Medlem

Studera lite typografi och kanske försök rita lite oplika concept på paper innan du börjar koda.

Visa signatur

Nybörjar guide: Xonotic 1on1 | FX-4100 Black Edition X4 @ 3,6GHz, MSI GTX650 1GB OC, Crossair VENGEANCE 8GB @ 1600 MHz, och lite annat skrot ;)

Permalänk

Arbeta i olika steg:
1. Vem ska använda sidan? (Det är viktigt att du designar för användaren och inte dig själv.)
2. Gör en prototyp. Pappersprototyper fungerar bra. Testa på några användare för att se vad du har missat. Upprepa.
3. Börja med hemsidan. Testa på användare. Förbättra. Upprepa.
4. Release.
5. Underhåll.

Fundera på vad som är viktigt och vad som ska synas. Dölj icke-relevant information. Var konsekvent. (Handlingsmönster, färger, typsnitt, placering, former, osv.) Samma handling ska ge samma resultat, alltid.

Text, ikoner eller både och? Är det inte självklart vad en ikon betyder måste du hjälpa användaren med text.

Kan man göra fel, så kommer någon att göra fel. Hjälp användaren förstår vad som blev fel och hur det ska åtgärdas.

Apple har lyckats bra med design, kolla upp varför.

Visa signatur

Phanteks P600S Grå - Ryzen 9 3900X - Phanteks PH-TC14PE Black - ASUS ROG Strix X570-F Gaming - G.Skill Trident Z Neo 32GB (2x16GB) 3600MHz CL16 - HD7970 - Seasonic Focus+ 650W Platinum

Permalänk
Medlem

Öva öva öva.

Efter några helger kommer du kunna designa helt okej hemsidor.

Men om du inte har så mycket tid rekommenderar jag bootstrap: http://twitter.github.io/bootstrap/.
(samt papper och penna för att skissa upp hur du vill ha hemsidan, alternativ moqups: https://moqups.com).

Visa signatur

Programmerare -> PHP | HTML | CSS | JS | Java.

Permalänk

Tack alla!
Jättebra tips, och länkar
Har tittat lite på Bootstrap och det verkar ju smidigt. Eftersom jag inte har så mycket
tid så blir det nog enklare för mig att försöka ändra i deras theme's än att skapa egna.

Men som sagt, bra tips och kanske jag lär mig så småningom

Visa signatur

Indieutvecklare? - Visa upp dina skapelser hos http://www.programbank.se

Permalänk

Ok, nu har jag gjort om den del av sidan som vanliga besökare ser,
håller på att lägga till lite diagram och enkel nedladdningsstatistik i utvecklardelen men den delen är inte klar.

Det behövdes ett par års barnledighet innan jag hittade motivationen men nu är den här.
(Och utan tipset om Twitter Bootstrap från Sony, hade jag nog gett upp.)

Fungerar den här designen?

Tack för er tid, och för alla ofantligt bra tips som jag hitills fått!

Andreas

Visa signatur

Indieutvecklare? - Visa upp dina skapelser hos http://www.programbank.se