WN

WN (https://www.wn.se/forum/index.php)
-   Feedback (https://www.wn.se/forum/forumdisplay.php?f=20)
-   -   Synpunkter kring portfolio (https://www.wn.se/forum/showthread.php?t=1056191)

Unik 2012-12-27 00:07
Synpunkter kring portfolio
 
Hejsan!

Jag har skapat min första portfolio, ni får jätte gärna kommentera vad ni tycker! Jag tar jätte gärna åt mig all kritik ni har så ska jag göra så gott jag kan att förbättra mig själv till nästa gång. Men hoppas den ser ändå bra ut, syftet är ju att jag ska börja så småningom försöka komma ut i marknaden, har ni några tips kring den delen med är ni hjärtligt välkomna med det.

Min portfolio hittar ni här: www.nyastockholm.webb.se

jonssondesign 2012-12-27 00:21
Sidan i sig såg okej ut. Lite småmissar dock. Såsom: kommentarfälten ligger inte i en och samma vertikal linje, utan verkar ha lite olika mellanrum från själva "tidslinjen".
Kanske även aningen för mjuka kontraster på texten i rutorna.

Vet inte om du bara är väldigt lat eller hur det kommer sig. Men du har inte någon som helst text på sidan? utöver de i footern vill säga.. Allt är i bilder? Hur tänker du dig att du ska kunna prestera hos sökmotorerna när dom inte ens kan läsa vad som står på sidan?

Om du skall framstå som en seriös webbutvecklare bör du nog försöka arbeta endel på dina frontend kunskaper.

I det stora hela ser sidan bra ut. Från ett design perspektiv vill säga.

Försök du göra om hela sidan, och byt ut ALL text på sidan till "riktig" text. :) Kan bli en bra träning tror jag!

Conny Westh 2012-12-27 06:37
Jag vet inte vilken målgrupp sidan vänder sig till om det inte är rent ockulta kunder.

Svart bakgrund är så sabla trist, att man måste rulla ner sidan för att se ganska tomma sidor förbättrar inte intrycket.

sen har du texterna uppe till höger som knappt syns, och drar man musen över så försvinner de helt, vansinniga färgkombinationer som gör att det inte går att se vad det står.

Loggan uppe i vänstra härnet har för tunna linjer och ordet Stockholm försvinner bakom och texten blir osynlig/oläslig.

Gör om hela konceptet och tänk på hur sidan ska kunna användas av en kund, du ska inte vinna någon intern designtävling med den utan sidan ska locka till sig nya kunder. För det syftet är sidan helt feltänkt från början till slut.

Jag har inte ens börjat prata om information som jag saknar, jag skulle aldrig söka vidare på sidan.

Dessutom händer inte ett skvatt, annat än att texten försvinner, när jag klickar på texterna uppe till höger.

Vad är det för idiot som lärt dig att göra såna sidor, sparka den personen i arslet omedelbart!

jonssondesign 2012-12-27 06:43
Nu var Conny lite väl elak. Men han faktiskt rätt i det han säger.

Men alla gör vi misstag som vi lär oss av!

Lycka till!

Conny Westh 2012-12-27 07:02
Nejdå jag är inte elak, jag ger sakliga och konkreta konstruktiva synpunkter som TS får jobba med att förbättra.

Jag tycker man som webbdesigner måste ha som miniminivå att uppnå åtminstonde en nivå som dessa webbsiter, annars ska man göra något annat:

http://www.ica.se/
http://www.skatteverket.se/
http://www.regeringen.se/
http://www.riksdagen.se/
http://www.skf.com
http://www.volvo.se
http://www.volvocars.com
http://www.ssab.com
http://www.sandvik.se
http://www.ehandel.se/
http://www.wn.se/

finns många fler bra siter....

Men man måste först tänka igenom sin affärsplan:

- Vilken målgrupp riktar man sig till?
- Vad är det för konkret problem den målruppen har? Man måste verkligen försöka förstå vad kunden har för problem.
- Vad skulle en lösning på målgruppens problem kunna vara?

Dessa är de tre viktigaste punkter man måste fundera på. Jag kunde inte ens komma förbi punkt ett dvs vilkem målgrupp denna sida riktar sig till, det är ett klassiskt nybörjarmisstag. Man måste veta vilken kund man riktar sig til, annars är det omöjligt att veta hur man ska utforma marknadsföringen mot dem.

Sen måste man åtminstonde besitta basala kunskaper i användbarhetsdesign, dvs vad ska användaren/besökaren få ut av ett besök på sidan, exempelvis om en potentiell kund besöker sida så vill de se:

- vad den här webbdesignern kan erbjuda för tjänster,
- visa upp exempel på de bäst awebbsiter som webbdesignern gjort tidigare,
- och slutligen kontaktuppgifterna ska vara lätt åtkomliga.

Det var den mest grundläggande oinformationen som ska synas och den bör synas på första sidan, det ska inte finnas någon tröskel för att komma åt informationen, för annars går besökaren vidare, man har inte tid at let ainformation på en dåligt designad sida.

Vad ger det för intryck när en webbdesigners sida är så dåligt designad att beställaren inte ens hittar ens den mest grundläggande informationen på sidan? Den kunden tappar man direkt.

Unik 2012-12-27 07:20
Jaha okej jag är jätte glad att ni la ner tid och svara. Tycker inte conny är elak ska tänka på det du sa till nästa gång :D! Så mer text och tänka på målgruppen!

Conny Westh 2012-12-27 07:27
Jag sökte på "riktlinjer webbdesign" i Google och hittade denna länk som kan var aen bra start (finns mycket mer....): http://vilomedia.se/dokument/Vikings...jobb05_RAW.pdf

P3N 2012-12-29 17:46
Kalla mig pedant kanske men jag (och kanske en del till hehe) kollar på källkoden på sidorna. Ordning och reda på tabbar och dylikt gör det hela snyggare ;-). Sen hade du något tecken efter </html> taggen... Skall man sälja sina tjänster så kanske kunderna inte kollar på sånt. Men jag tycker det är lite tecken på yrkesstolthet om det är ordning även om funktionen i sig inte påverkas. I övrigt så behövs kanske lite anpassning till explorerfolket också (är en del tyvärr än som kör 8an). Men putsa lite till så ger jag tummen upp :)

Mvh

jayzee 2012-12-29 18:55
Citat:
Ursprungligen postat av P3N (Inlägg 20458489)
Kalla mig pedant kanske men jag (och kanske en del till hehe) kollar på källkoden på sidorna. Ordning och reda på tabbar och dylikt gör det hela snyggare ;-). Sen hade du något tecken efter </html> taggen...
Om vi nu pratar om pedant så verkar du ha missat att sidan körs i en <iframe>, två (!) olika jquery versioner laddas in, sidan validerar inte för 5 öre (html4 transitional), m.m. :D
Orkade inte kolla på resten efter detta, men jag skulle inte anlita denna person att göra en "professionell hemsida" åt mig om man säger så.

P3N 2012-12-29 19:01
Jag försökte uttrycka det försiktigt :-)

jayzee 2012-12-29 19:03
Citat:
Ursprungligen postat av P3N (Inlägg 20458493)
Jag försökte uttrycka det försiktigt :-)
Sanningen varar alltid längst :)

Conny Westh 2012-12-30 02:21
Jag tror det skulle tillföra en del värde om någon som har koll på riktlinjerna för frontend på detaljnivå och kan hänvisa till en sån sida eller, PDF av något slag. Jag bidrog med en pdf med riklinjer ur ett användbarhetsperspektiv. Men jag jobbar inte med frontend så jag är inte tillräckligt uptodate/insatt i detaljerna för frontend. Jag utevecklar bara backend och brukar överlåta frontend till de som jobbar med det.

jayzee 2012-12-30 19:33
Personligen har jag ingen PDF att referera till, har professionellt jobbat med både front- och backend i 10+ år (bla. på Opera Software där jag fortfarande har väldigt bra kontakter) så det mesta sitter i ryggmärgen :rolleyes:

Här är dock några bra länkar:
https://developers.google.com/speed/...es/rules_intro
http://isobar-idev.github.com/code-standards/
http://taitems.github.com/Front-End-...nt-Guidelines/

P3N 2012-12-30 23:33
Citat:
Ursprungligen postat av jayzee (Inlägg 20458492)
Om vi nu pratar om pedant så verkar du ha missat att sidan körs i en <iframe>, två (!) olika jquery versioner laddas in, sidan validerar inte för 5 öre (html4 transitional), m.m. :D
Orkade inte kolla på resten efter detta, men jag skulle inte anlita denna person att göra en "professionell hemsida" åt mig om man säger så.
Ooo, btw där finns 3 jquery versioner (och jag som inte ens tycker om en) :)

Conny Westh 2012-12-31 21:18
Citat:
Ursprungligen postat av jayzee (Inlägg 20458552)
Personligen har jag ingen PDF att referera till, har professionellt jobbat med både front- och backend i 10+ år (bla. på Opera Software där jag fortfarande har väldigt bra kontakter) så det mesta sitter i ryggmärgen :rolleyes:

Här är dock några bra länkar:
https://developers.google.com/speed/...es/rules_intro
http://isobar-idev.github.com/code-standards/
http://taitems.github.com/Front-End-...nt-Guidelines/

(OBS!!! Såg att när jag har mer än ett mellanslag i rad eller tab ('\t') klipps dessa bort i mitt inlägg så källkoden jag skrivit in blir helt sjuk i inlägget, men den ser bra ut i editläget)

Jag såg på githubben att de hade en rekommendation som jag tycker är helt fel. Som jag vill kommentera.

Måsvingar ska alltid stå på egen rad när man markerar block, för att det er en tydlig linje för ögat att följa. I den ursprungliga boken om K&R C så skrevs måsvingarna på det dåliga sättet men Kernigan själv ändrade denna standard när han skrev boken om ANSI C.

Det var enmycket logisk och begriplig ändring därför att det är hart när omöjligt att följa strukturen i koden om man måste flacka med blicken till slutet på en rad för att hitta en matchande måsvinge.

På githubben så had eman motsatt rekommendation och det motsätter jag mig bestämt.

Enkelt exempel:
Citat:
// Dåligt
if (foo){
bar();
}

// Bra
if (foo)
{
bar();
}

Mer komplext exempel:
Citat:
// Dåligt
if (foo1){
bar1a();
if (foo2){
if (foo3){
bar3a();
}
else{
bar3b();
}
}
else{
bar2b();
}
}
else{
bar3b();
}

// Så här blir betydligt bättre...
if (foo1)
{
bar1a();
if (foo2)
{
if (foo3)
{
bar3a();
}
else
{
bar3b();
}
}
else
{
bar2b();
}
}
else
{
bar3b();
}
Citat:
// Se den tydliga linjen för ögat.....
if (foo1)
{
| bar1a();
| if (foo2)
| {
| | if (foo3)
| | {
| | | bar3a();
| | }
| | else
| | {
| | | bar3b();
| | }
| }
| else
| {
| | bar2b();
| }
}
else
{
| bar3b();
}

Använd alltid måsvingar för att markera vilka block. Det är ett extremt vanligt problem att man missar att lägga till måsvingarna när man lägger till en rad i koden och då får man inte den funktionalitet man önskat. Samtidigt är det betydligt svårare att snabbt öga igenom en kod och frstå vad den gör om man använder olika "format" för att skriva sin kod, var konsekvent och använd alltid måsvingar.

Citat:
// Dåligt
if (foo)
bar();

// Bra
if (foo)
{
bar();
}
Det finns ett undantag och där är om man har extremt många korta oberoende if satser (som i sig inte kan ersättas av switch/case) som i detta exempel:

Citat:
// Dåligt!
if (foo1) bar1();
if (foo2) bar2();
if (foo3) bar3(); bar7(); // bar7() Kommer alltid att exekveras,
if (foo4) bar4(); // men det är lätta att missa det.
if (foo5) bar5();
if (foo6) bar6();

// Ok! men inte idealiskt.
if (foo1) bar1();
if (foo2) bar2();
if (foo3) bar3();
if (foo4) bar4();
if (foo5) bar5();
if (foo6) bar6();
Men såna här villkorssamlingar är inte så vanliga och man ska använda dem med försiktighet. För lägger man till en sats till på samma rad så kommer den alltid att exekveras och det var kanske inte vad man tänkt.

Unik 2013-01-01 06:54
Ja ska tänka på allt ni skrev och försöka göra det bättre till nästa gång :)!

jonssondesign 2013-01-01 11:57
Jag skriver alltid första måsvingen precis efter ... vad man nu kallar det ... (frågan/bestämmelsen?), och en precis i slutet av blocket på en egen rad.

HTML-kod:
Såhär gör jag:
---------------------
if (foo){
        bar();
};

eller

.wrapper {
        background:#000;
}
Har alltid gjort, och kommer alltid göra, oavsett.

Tidigare skrev jag såhär (dock bara när jag skrev css):

HTML-kod:
.wrapper {background:#000;}
Man såg mycket mer kod på ett mindre utrymme, och man slapp scrolla så mycket.

Nu skriver jag dock alltid:

HTML-kod:
.wrapper {
        background:#000;
}
Att lägga varje måsvinge på enskilda rader tar bara inte längre tid, det tar även större plats (större filer), och man får himla lite kod per "sida", så man måste scrolla himla massa.

Är man inte gammal och trött, så tror jag mitt sett fungerar lika bra som connys. :)

Conny Westh 2013-01-01 17:14
Om du gör så här så ser det betydligt proprare ut:

Kod:
Såhär gör jag:
---------------------
if (foo)
{
        bar();
};

eller

.wrapper
{
        background:#000;
}

Det blir tydligare ändå om du har mer komplex kod:

Kod:
// Dåligt
if (foo1){
        bar1a();
        if (foo2){
                if (foo3){
                        bar3a();
                }
                else{
                        bar3b();
                }
        }
        else{
                bar2b();
        }
}
else{
        bar3b();
}

// Så här blir betydligt bättre...
if (foo1)
{
        bar1a();
        if (foo2)
        {
                if (foo3)
                {
                        bar3a();
                }
                else
                {
                        bar3b();
                }
        }
        else
        {
                bar2b();
        }
}
else
{
        bar3b();
}

jonssondesign 2013-01-01 17:18
Sure, jag kan hålla med om att det ser bättre ut med mer komplex kod. Men annars håller jag mig alltid till mitt gamla vanliga sätt :)

P3N 2013-01-02 01:20
Jag kör med måsen direkt efter och utnyttjar tab för att hålla koll på i vilken div, if sats eller vad det nu är.

Provade att köra som Conny tycker ett tag men blev så himla långt och kändes onödigt när tabbarna ändå strukturerar upp det. Själv tycker jag det blir för ostrukturerat och spretigt med att inte ha den direkt efter. Men är nog en vanesak också.

jonssondesign 2013-01-02 01:21
Precis min åsikt också :)

entep 2013-01-02 13:22
Jag tycker ni är tråkiga, som klankar ner på denna portfolio.
Tycker det bara är kul med sajter som tänker annorlunda.
De exempel på hemsidor som Conny länkar till är dom tråkigaste och minst kreativa sidorna som nätet har att erbjuda. Sidorna utnyttjar inte bredden på skärmen, litet typsnitt och, ursäkta språket, en jävla röra med information. Finns ingen användarvänlighet alls för dessa sidor. Enklaste sättet att navigera på dessa sidor är att Googla sig fram.

Jag tycker Portfolion är en bra början.
Det jag skulle vilja se är att menyn uppe till höger hänger med när man skrollar. position: fixed; samt att dina referenser presenteras med stora bilder så man ser ditt arbete.

P3N 2013-01-02 18:14
Citat:
Ursprungligen postat av entep (Inlägg 20458646)
Jag tycker ni är tråkiga, som klankar ner på denna portfolio.
Tycker det bara är kul med sajter som tänker annorlunda.
De exempel på hemsidor som Conny länkar till är dom tråkigaste och minst kreativa sidorna som nätet har att erbjuda. Sidorna utnyttjar inte bredden på skärmen, litet typsnitt och, ursäkta språket, en jävla röra med information. Finns ingen användarvänlighet alls för dessa sidor. Enklaste sättet att navigera på dessa sidor är att Googla sig fram.

Jag tycker Portfolion är en bra början.
Det jag skulle vilja se är att menyn uppe till höger hänger med när man skrollar. position: fixed; samt att dina referenser presenteras med stora bilder så man ser ditt arbete.
Jag kan hålla med om att rent grafiskt är det en kul och snygg lösning. Helt klart. Håller också med om att menyn borde hänga med samt större bilder på alsterna. Gärna så att bilderna/länkarna till vad som är gjort är responsive så man utnyttjar så mycket av skärmen som går för att visa upp vad som finns i portfolion.

Men, tyvärr ett stort "Men", skall man sälja det som en tjänst går det ju inte att ha röra i källkoden. Att ladda 3 olika versioner av jquery för att ta ett exempel... Känns ju inte direkt proffsigt. Personen vill ju sälja sin tjänst och då kan man ju inte visa upp en sådan minst sagt ooptimerad källkod. Inget illa ment till personen ifrån min sida. Bättre att någon säger det nu än att en eventuell kund kommer med feedbacken.

Jobba på helt enkelt, det finns potential :-)

Unik 2013-01-02 20:15
Tack så mycket det var jätte snällt sagt! Jag ska jobba med källkoden det är jätte bra att ni kritiserade det. Skickade privat PM till jayzee där han föklarade för mig väldigt mycket om hur jag kan förbättra källkoden och det med jquery så ska absolut göra det (Y)!

Conny Westh 2013-01-02 20:32
Även om jag tyckte sidan i sig var crappig så tycker jag att TS har en sund attityd som förtjänar ett positivt omnämnande. Jag uppfattar att TS verkligen uttrycker en genuin vilja att lära sig hantverket "på riktigt", och det förtjänar i sig min respekt.

Alla är vi barn i början, och det är mänskligt att fela, det viktiga är att man lyssnar på synpunkter och lär sig av sina misstag mfl ordstäv...!

tartareandesire 2013-01-02 23:45
Citat:
Ursprungligen postat av ConnyWesth (Inlägg 20458598)
Jag såg på githubben att de hade en rekommendation som jag tycker är helt fel. Som jag vill kommentera.

Måsvingar ska alltid stå på egen rad när man markerar block, för att det er en tydlig linje för ögat att följa. I den ursprungliga boken om K&R C så skrevs måsvingarna på det dåliga sättet men Kernigan själv ändrade denna standard när han skrev boken om ANSI C.
Nja, det beror ju på vilken kodstandard man väljer att följa (om man nu följer någon). Man kan välja PEAR, PSR-0 eller något helt annat.

Den där listan på webbplatser som Conny listade är inte så mycket att bry sig om. Många som arbetar med webbdesign skulle aldrig någonsin få för sig att jobba med något som ser ut som exempelvis Skatteverkets hemsida. Unika, kreativa individer utvecklar ofta en egen stil och så ska det också vara. Sedan finns det också webbdesigners som har lite mindre intuitiv design och istället designar mer rationellt. En del kan tycka det tidigare är helt onödigt ögongodis eller att det senare är tråkigt men inget av dessa alternativ, eller allting däremellan, behöver vara bättre än något annat. Var man/kvinna (det finns inget hen-ord för detta? :)) har sin plats helt enkelt.

alisso 2013-01-04 19:43
Säger vi verkligen "designer" ?
Jag skulle nog skriva fascinerande design (stryka er)

alisso 2013-01-04 19:47
Be ngn hjälpa snäll själ hjälpa dig med korrekturläsningen, "marknades halva pris"

marknads.
Jag tror du menar till under halva marknadspriset, vilket är väldigt diffust.

Jag fick inte lust att klicka mig in på någon av de vita ballongerna och förutom läckra bakgrundern känner jag efter att ha kollat igenom hela sidan uppifrån och ner att jag fortfarande inte sett några konkreta referenser eller tydliga länkar till projekt du skapat/arbetat med.

Och varför Skicka / Submit ? Om hela hemsidan är på svenska i övrigt, så fyller väl ändå inte "Submit" något syfte alls?

jonssondesign 2013-01-04 20:21
Kolla vad jag kan göra! :)

http://gyazo.com/781514f149116872413a14f4f33810a6

allstars 2013-01-04 22:22
+ Snygg!
+ Rolig
+ Kul timeline, men gör dem till riktig text och skriv ut årtal

o Svart som inledningsfärg tror jag inte på - de andra var skönare
o Bild på dig?
o Några länkar till faktiska projekt

- Följer inte kodstandard
- Städa upp i koden, all css i egen fil, inte dubletter av js-script
- Comhemsida istället för helt egen domän
- Ingen text på sidan, vilket kommer att resultera i att sökmotorer kommer ta med formuläret, inte det du vill säga.

Conny Westh 2013-01-05 17:01
Citat:
Ursprungligen postat av tartareandesire (Inlägg 20458693)
Nja, det beror ju på vilken kodstandard man väljer att följa (om man nu följer någon). Man kan välja PEAR, PSR-0 eller något helt annat.

Den där listan på webbplatser som Conny listade är inte så mycket att bry sig om. Många som arbetar med webbdesign skulle aldrig någonsin få för sig att jobba med något som ser ut som exempelvis Skatteverkets hemsida. Unika, kreativa individer utvecklar ofta en egen stil och så ska det också vara. Sedan finns det också webbdesigners som har lite mindre intuitiv design och istället designar mer rationellt. En del kan tycka det tidigare är helt onödigt ögongodis eller att det senare är tråkigt men inget av dessa alternativ, eller allting däremellan, behöver vara bättre än något annat. Var man/kvinna (det finns inget hen-ord för detta? :)) har sin plats helt enkelt.
De webbplatser jag listade var inte de jag tycker är bäst i världen, men jag betraktar det som en miniminivå att göra något som är bättre än dessa om man erbjuder sina tjänster som webbdesigner.

Sajterna är ändå ganska bra exempel att utgå ifrån och göra något som är ännu bättre. Bland annat är färgval en viktig fråga för att öka läsbarheten på texten.

alejandr0 2013-01-05 19:11
Jag tycker det är alarmerande dåligt att man inte kan markera texten utan allt är i bilder. Det skulle jag fixa till först! Sedan är texten åtminstone i Portfolio-avdelningen och kontaktformuläret väldigt svårläst.

heavenclouds 2013-01-06 16:27
Tre punkter som jag tänkte på:

1. Gör texten större under din "Portfolio" och "Om mig"-avdelning
2. Gör om citatet på startsidan till text istället för en bild.
3. Varför ska jag berätta min budget? Har "auto-delete" på alla som har för låg budget eller vad är grejen? :D

Snygg i övrigt, riktigt goa färger!

brandt 2013-01-10 16:43
Tycker du gjort det bra för en första portfolio :) Kollar man koden är det som sagt några grejer som skulle behöva fixas med. Sen kanske kolla så att den ser bra ut i olika skärmstorlekar, för mig blev det mycket outnyttjat utrymme längst ner på alla "slides" hade nog sett bättre ut om content i alla vyer låg centrerade vertikalt.

jonssondesign 2013-01-10 19:06
Oavsett vad alla inkl. jag säger så ser sidan helt okej ut. Bra kreativitet, och det gillar jag. Forstätt på den banan! Förbättra dig hela tiden dock, och ta åt dig av kritiken du fått från denna tråden. Men allra viktigast är nog att du inte skall se någon som helst kritik som negativ - se dem som en möjlighet att förbättra dig!

Du kommer bli en duktig och framgångsrik webbutvecklare, det vågar jag tro!


Alla tider är GMT +2. Klockan är nu 01:49.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson