Vad behöver man för att börja riktigt med webbdesign?

Permalänk
Medlem

Vad behöver man för att börja riktigt med webbdesign?

Hejsan.
Nu har jag tagit tag i mitt pluggande och ansökt till lite olika kurser.
Första kursen är HTML och CSS medans dem andra 2 är php,mysql och javascript.

Det jag då studerar till är webbutveckling och har lite småproblem som jag hoppas någon kan hjälpa mig med.
Jag verkligen älskar att skriva koder och kan normalt sitta flera timmar i sträck utan att röra mig.

Men nu på sistone har jag tappat det helt, och kan knappt börja.
Så det jag då undrar är om det finns några program som ni kan rekommendera samt vilka plugins, det skolan säger att jag ska använda är Notepad++ vilket är helt okej för mig och funkar jätte bra.
Men det känns som att det finns program där ute som har mycket mer funktioner som kan vara användbara och kanske "hjälpa" en på traven.

Men även om ni vet några Photoshop kurser som är på youtube eller något som har inriktningen webbdesign som visar basic photoshop, eftersom jag har typ 0 erfarenheter inom photoshop.

Men även hur man sätter upp sina skärmar på bästa sätt för att få ut så mycket som möjligt utav dem, alltså hur man ska vinkla dem.
För nu tycker jag det känns väldigt rörigt med allt, med alla program som jag har i bakgrunden ligger ovanför varandra och jag har ingen riktigt koll och huvudet hoppar fram och tillbaka som en person som kollar på tennis.
Jag har 3 skärmar som jag kan vrida åt alla håll.

Förlåt för att det blev lite rörigt men hoppas att ni hängde med på alla punkter.

Tack på förhand
// Mihon

Permalänk
Skrivet av mihon:

Hejsan.
Nu har jag tagit tag i mitt pluggande och ansökt till lite olika kurser.
Första kursen är HTML och CSS medans dem andra 2 är php,mysql och javascript.

Det jag då studerar till är webbutveckling och har lite småproblem som jag hoppas någon kan hjälpa mig med.
Jag verkligen älskar att skriva koder och kan normalt sitta flera timmar i sträck utan att röra mig.

Men nu på sistone har jag tappat det helt, och kan knappt börja.
Så det jag då undrar är om det finns några program som ni kan rekommendera samt vilka plugins, det skolan säger att jag ska använda är Notepad++ vilket är helt okej för mig och funkar jätte bra.
Men det känns som att det finns program där ute som har mycket mer funktioner som kan vara användbara och kanske "hjälpa" en på traven.

Men även om ni vet några Photoshop kurser som är på youtube eller något som har inriktningen webbdesign som visar basic photoshop, eftersom jag har typ 0 erfarenheter inom photoshop.

Men även hur man sätter upp sina skärmar på bästa sätt för att få ut så mycket som möjligt utav dem, alltså hur man ska vinkla dem.
För nu tycker jag det känns väldigt rörigt med allt, med alla program som jag har i bakgrunden ligger ovanför varandra och jag har ingen riktigt koll och huvudet hoppar fram och tillbaka som en person som kollar på tennis.
Jag har 3 skärmar som jag kan vrida åt alla håll.

Förlåt för att det blev lite rörigt men hoppas att ni hängde med på alla punkter.

Tack på förhand
// Mihon

Ett tips på program är brackets, liknar Notepad++ men man kan se en live view i google chrome, alltså du slipper att uppdatera sidan hela tiden. Har iaf underlättat för mig när jag kodar och designar. Tror även det finns fler funktioner i programmet som jag inte utforskat än.

Dock förstår jag inte varför du ska använda photoshop när du utvecklar hemsidor, det är mycket snabbare och mer anpassningsbart att använda html5
Men om du insisterar på att använda photoshop så är det bara att googla, Jag lärde mig ganska mycket igenom att googla på just dem sakerna jag vill lära mig istället för att kolla på en lång tutorial om hela programmet.

Edit:
Ett tips som underlättar för mig är att ha lite musik på medans jag kodar, det underlättar ganska mycket och får iallafall mig att tänka klarare.
Ett annat tips är att använda bootstrap, om du inte har användt det innan så är det en sorts grund som är anpassad till både dator och mobil, enligt mig så får man igång arbetet snabbare och slipper den enkla och simpla kodningen som bara tar tid och att istället få fokusera på designen som är det roliga

Visa signatur

Cpu: Intel i5 4690k @ 4.3gHz (Hyper 212 EVO) Gpu: MSI GeForce GTX 1070 8GB Gaming X Moderkort: MSI H97 Pc mate Minne: Adata 8Gb 1600MHz SSD: OCZ Arc 100 240Gb Chassi: Antec Gx500 Nätagg: Fractal Design Integra M 550W 80+ Bronze

Permalänk
Medlem
Skrivet av Backgård:

Ett tips på program är brackets, liknar Notepad++ men man kan se en live view i google chrome, alltså du slipper att uppdatera sidan hela tiden. Har iaf underlättat för mig när jag kodar och designar. Tror även det finns fler funktioner i programmet som jag inte utforskat än.

Dock förstår jag inte varför du ska använda photoshop när du utvecklar hemsidor, det är mycket snabbare och mer anpassningsbart att använda html5
Men om du insisterar på att använda photoshop så är det bara att googla, Jag lärde mig ganska mycket igenom att googla på just dem sakerna jag vill lära mig istället för att kolla på en lång tutorial om hela programmet.

Tack för tipset, ska kolla brackets senare tänkte jag.
Photoshop, ja jag vet inte vilka andra program man kan använda sig av.
Jag menar inte att bygga hela sidan med photoshop och kopiera ut bilderna som man gjorde förr i html.
Utan mer använda det för att göra en snygg logo eller någon bakgrund som kan vara snygg.
Har ingen erfarenhet typ utav photoshop, det kanske finns program som är lättare att använda till mitt syfte?

Citat:

Edit:
Ett tips som underlättar för mig är att ha lite musik på medans jag kodar, det underlättar ganska mycket och får iallafall mig att tänka klarare.
Ett annat tips är att använda bootstrap, om du inte har användt det innan så är det en sorts grund som är anpassad till både dator och mobil, enligt mig så får man igång arbetet snabbare och slipper den enkla och simpla kodningen som bara tar tid och att istället få fokusera på designen som är det roliga

Musik dunkas det redan i högtalarna
Bootstrap har jag hört talas om men aldrig riktigt förstått mig på vad det är.
Kanske är något man får kolla upp då, för det är liksom den simpla kodning som känns svårt att komma igång med.
När man väl kommit igång och det börjar se ut som något så blir det genast mycket roligare.

Permalänk
Skrivet av mihon:

Tack för tipset, ska kolla brackets senare tänkte jag.
Photoshop, ja jag vet inte vilka andra program man kan använda sig av.
Jag menar inte att bygga hela sidan med photoshop och kopiera ut bilderna som man gjorde förr i html.
Utan mer använda det för att göra en snygg logo eller någon bakgrund som kan vara snygg.
Har ingen erfarenhet typ utav photoshop, det kanske finns program som är lättare att använda till mitt syfte?

Musik dunkas det redan i högtalarna
Bootstrap har jag hört talas om men aldrig riktigt förstått mig på vad det är.
Kanske är något man får kolla upp då, för det är liksom den simpla kodning som känns svårt att komma igång med.
När man väl kommit igång och det börjar se ut som något så blir det genast mycket roligare.

Tycker verkligen du borde testa bootstrap, många kända sidor är byggt på det; bl.a twitter.
Det är ett "pack" med ett färdigt css och en grund för en hemsida med meny som man sedan kan gå in och ändra till nästan hur man vill.
Tror även det finns olika mallar som man kan ladda ner, allt ifrån en bland förstasida med endast css till nästan färdiga sidor.
Länkar bootstrap här: http://getbootstrap.com

Visa signatur

Cpu: Intel i5 4690k @ 4.3gHz (Hyper 212 EVO) Gpu: MSI GeForce GTX 1070 8GB Gaming X Moderkort: MSI H97 Pc mate Minne: Adata 8Gb 1600MHz SSD: OCZ Arc 100 240Gb Chassi: Antec Gx500 Nätagg: Fractal Design Integra M 550W 80+ Bronze

Permalänk

@mihon:

Hallå!

Kul att du ska börja (?) designa! De kurser du valt känns som en väldigt användbar och gedigen grund. Alla som arbetar med webbutveckling bör ha en grundläggande förståelse för de områden du listat. Jag tänkte svara lite på frågor nedan, men först behöver du grunna genom lite grejer – tror jag.

Du bör fråga dig själv vad det är du är mest intresserad av. Är det själva designprocessen, eller är det mer åt "knacka kod"-hållet. Kanske är det något som lossnar allt eftersom du lär dig mer, men ha följande i åtanke:

Fokusera på ett område och bli riktigt grym på det! Vill du framöver arbeta som front end-utvecklare, full stack-utvecklare eller back end-utvecklare; eller kanske webbdesigner? En webbdesigner är (till skillnad från en webbutvecklare) i ordets rätta bemärkelse just en designer. De verktyg du använder är i första hand designverktyg så som Photoshop, Sketch, Invision, Illustrator med mera, och du arbetar i stor utsträckning gentemot eller i paralell med en utvecklare. I dagligt språk slarvas det lite och webbdeisgner är något av en catch-all fras som för lekmän betyder någon som jobbar med att skapa webbsidor.

Du nämner att det är just kodning du tycker är roligt. Då tycker jag att du ska fokusera på det och kanske designa direkt i browsern i stället för att lägga tusentals timmar på att bli grym på Photoshop eller Sketch. En person som är utvecklare, och mindre intresserad av design, kommer med hög sannolikhet aldrig (?) att bli lika vass på design-biten som en renodlad webbdesigner. Därför är det vettigare att du lär dig koden riktigt bra, och att förverkliga de illustrationer som designers skapar. I de fall du behöver ta hela processen från start till slut bör det vara fullgott att designa direkt i browsern. Kunden/uppdragsgivaren kommer inte kunna förvänta sig samma designmässiga resultat som om de även anlitar en designer och det behöver du kommunicera, om utveckling är din grej. Gillar du ändå framsidan av webben mer än baksidan, kan du med fördel fokusera på att lära dig avancerad CSS och köra front end-utveckling; ändå!

Vill du gå lite kurser rekommenderar jag dig att kika på färdiga kurspaket på t.ex. lynda.com. Att kolla på youtube funkar om budgeten inte tillåter exempelvis Lynda; men kommer ge dig en icke kvalitetssäkrad studieprocess och den kommer onekligen vara väldigt brokig. Jag rekommenderar verkligen att kolla in Lynda! Har varit guld för mig!

Brackets är som tidigare nämnts ett fint verktyg (rätt basic) som gör att du kan se live de ändringar du gör i koden.

Vad gäller skärmuppsättningen beror det ju lite på vad du gör. Skulle jag koda hade jag satt huvudskärmen i vertikalt läge och sen haft min sekundära skärm horisontellt för preview. Lagt kodverktyg i skärm 1 och sen preview-browser i skärm 2. Där kan du ju även köra en flik med CSS/Java-toolbox på skärm tre om du nu har tre skärmar. Då kan du enkelt copy-pasta in färdig kod om du behöver! Men du sätter upp det som du gillar det bäst!

Jag tror du behöver välja ett område, fokusera på det och inte lägga så mycket vikt vid redskap/verktyg och skärmar till att börja med. Sätt upp ett mål och försök nå det först!

Skriv gärna en replik på det här om du vill ha ytterligare feedback!

Lycka till!

Permalänk
Skrivet av mihon:

Photoshop, ja jag vet inte vilka andra program man kan använda sig av.
Jag menar inte att bygga hela sidan med photoshop och kopiera ut bilderna som man gjorde förr i html.
Utan mer använda det för att göra en snygg logo eller någon bakgrund som kan vara snygg.
Har ingen erfarenhet typ utav photoshop, det kanske finns program som är lättare att använda till mitt syfte?

När du gör logotyper är det Adobe Illustrator som gäller. Där får du vektorgrafik som är skalbart oberoende av upplösning. Ser alltid lika skarpt ut!

Använd inte pixel-illustrationer som du skapat i Photoshop i din design. Det blir inte snyggt förutsatt att du inte är riktigt, riktigt duktig illustratör. Vill du ha stock-foton eller högupplösta bilder hittar du det exempelvis på shutterstock.com, adobestock.com eller unsplash.com.

Annars använder du HTML eller CSS!

Permalänk
Medlem
Skrivet av larsalarsa:

@mihon:

Hallå!

Kul att du ska börja (?) designa! De kurser du valt känns som en väldigt användbar och gedigen grund. Alla som arbetar med webbutveckling bör ha en grundläggande förståelse för de områden du listat. Jag tänkte svara lite på frågor nedan, men först behöver du grunna genom lite grejer – tror jag.

Du bör fråga dig själv vad det är du är mest intresserad av. Är det själva designprocessen, eller är det mer åt "knacka kod"-hållet. Kanske är det något som lossnar allt eftersom du lär dig mer, men ha följande i åtanke:

Fokusera på ett område och bli riktigt grym på det! Vill du framöver arbeta som front end-utvecklare, full stack-utvecklare eller back end-utvecklare; eller kanske webbdesigner? En webbdesigner är (till skillnad från en webbutvecklare) i ordets rätta bemärkelse just en designer. De verktyg du använder är i första hand designverktyg så som Photoshop, Sketch, Invision, Illustrator med mera, och du arbetar i stor utsträckning gentemot eller i paralell med en utvecklare. I dagligt språk slarvas det lite och webbdeisgner är något av en catch-all fras som för lekmän betyder någon som jobbar med att skapa webbsidor.

Du nämner att det är just kodning du tycker är roligt. Då tycker jag att du ska fokusera på det och kanske designa direkt i browsern i stället för att lägga tusentals timmar på att bli grym på Photoshop eller Sketch. En person som är utvecklare, och mindre intresserad av design, kommer med hög sannolikhet aldrig (?) att bli lika vass på design-biten som en renodlad webbdesigner. Därför är det vettigare att du lär dig koden riktigt bra, och att förverkliga de illustrationer som designers skapar. I de fall du behöver ta hela processen från start till slut bör det vara fullgott att designa direkt i browsern. Kunden/uppdragsgivaren kommer inte kunna förvänta sig samma designmässiga resultat som om de även anlitar en designer och det behöver du kommunicera, om utveckling är din grej. Gillar du ändå framsidan av webben mer än baksidan, kan du med fördel fokusera på att lära dig avancerad CSS och köra front end-utveckling; ändå!

Vill du gå lite kurser rekommenderar jag dig att kika på färdiga kurspaket på t.ex. lynda.com. Att kolla på youtube funkar om budgeten inte tillåter exempelvis Lynda; men kommer ge dig en icke kvalitetssäkrad studieprocess och den kommer onekligen vara väldigt brokig. Jag rekommenderar verkligen att kolla in Lynda! Har varit guld för mig!

Brackets är som tidigare nämnts ett fint verktyg (rätt basic) som gör att du kan se live de ändringar du gör i koden.

Vad gäller skärmuppsättningen beror det ju lite på vad du gör. Skulle jag koda hade jag satt huvudskärmen i vertikalt läge och sen haft min sekundära skärm horisontellt för preview. Lagt kodverktyg i skärm 1 och sen preview-browser i skärm 2. Där kan du ju även köra en flik med CSS/Java-toolbox på skärm tre om du nu har tre skärmar. Då kan du enkelt copy-pasta in färdig kod om du behöver! Men du sätter upp det som du gillar det bäst!

Jag tror du behöver välja ett område, fokusera på det och inte lägga så mycket vikt vid redskap/verktyg och skärmar till att börja med. Sätt upp ett mål och försök nå det först!

Skriv gärna en replik på det här om du vill ha ytterligare feedback!

Lycka till!

Tjena, Tack för svaret.
Det hjälpte mig faktiskt ganska mycket, det känns som jag inte har riktigt hajjat detta med webbdesign eller webbutvecklare.
Jag trodde att en webbutvecklare gjorde allt, men det är mest skriva koden som jag tycker är kul och vill hålla på med.
Så det blir att fokusera på det just nu, och tar åt mig detta med photoshop som du nämnde.
Bättre jag lägger ner en massa tid på att lära mig att koda innan och utantill, för vem vet nån gång i framtiden kanske man får för sig att gå några photoshop kurser eller nått.

Just nu går jag kurser på distans genom NTI skolan och tycker det funkar bra, fram tills nu när jag fastnade på mitt projekt vilket är att göra en hemsida från grunden.
Men blir att göra allt med html och css så det kommer bli "lättare" för mig nu eftersom photoshop är ute ur bilden.

Skrivet av larsalarsa:

När du gör logotyper är det Adobe Illustrator som gäller. Där får du vektorgrafik som är skalbart oberoende av upplösning. Ser alltid lika skarpt ut!

Använd inte pixel-illustrationer som du skapat i Photoshop i din design. Det blir inte snyggt förutsatt att du inte är riktigt, riktigt duktig illustratör. Vill du ha stock-foton eller högupplösta bilder hittar du det exempelvis på shutterstock.com, adobestock.com eller unsplash.com.

Annars använder du HTML eller CSS!

Tack, det underlättar mycket