Primii pasi in Web Design. Ghid util pentru a incepe cariera ta in web design

5 decembrie 2016

Web design-ul reprezinta un limbaj universal si poti lucra de oriunde te simti creativ pentru persoane din intreaga lume. Este suficient sa ai determinare, un laptop si conexiune la internet iar urmatorul site global poate incepe de la ideea ta.

Resurse web design


Iata lista cu ce ai nevoie pentru a incepe cariera ta in web design: ce programe sa utilizezi, ce limbaje sa inveti, extensii Chrome, site-uri cu poze public domain si alte lucruri utile in viata ta de web designer.

#1. Achizitioneaza propriul tau domeniu si hostingAchizitioneaza domeniul tau si hostingAre un impact important asupra modului in care lucrezi. Alege denumirea domeniului de forma prenume-nume.com sau prenume-nume.ro. Adreseaza-te direct pietei de afara, achizitioneaza domeniul .com, acesta costa aproximativ 9-14$ pe an (sau promo pe GoDaddy.com 4 lei in primul an). Vei avea nevoie si de un pachet de gazduire, iar ulterior poti urca continutul site-ului tau pe server si a fi online 24/24.

Tot ce ai nevoie este determinarea: fondatorul Instagram - Kevin Systrom, lucra pe laptopul propriu in Florenta, iar pentru a pune fisierele pe server mergea in apropiere de o biblioteca publica pana ce laptopul prindea semnal WiFi.

Un domeniu .com iti permite vizibilitate la nivel global si poate fi accesat din Romania dar si de persoane din Canada, SUA sau Australia, ceea ce reprezinta o buna oportunitate de dezvoltare. Trimite-mi un email la dan@digitalskills.ro daca nu te descurci si rezolvam impreuna.

#2. Descarca si instaleaza editorul Sublime Text si clientul FTP File Zilla
Pentru a realiza site-uri web vei scrie cod si vei urca paginile pe server. Pentru asta ai nevoie de programul SublimeText si File Zilla

Descarcare Sublime TextSublimeText - este un editor extrem de rapid si apreciat in prezent, cu ajutorul caruia vei scrie codul necesar. Poti testa gratuit iar daca te decizi sa il cumperi costa 70$. Alte editoare de cod: Notepad++, Atom.io si Bracket.io, alegerea tine strict de preferintele tale.
Descarcare: www.sublimetext.com


Descarcare File ZillaFile Zilla - este un client FTP (File Transfer Protocol) gratuit, rapid si eficient care te va ajuta sa transferi fisiere sau site-ul intreg din calculator pe server si invers. Alte programe FTP: winSCP, CoreFTP, Smart FTP.
Descarcare: www.filezilla-project.org
Citeste mai mult: Cum sa transferi fisiere de pe calculator pe server


#3. Descarca Bootstrap si Font Awesome
Descarcare BootstrapBootstrap - te ajuta sa dezvolti site-uri mult mai rapid. Spre deosebire de SublimeText, Bootstrap nu este un program ce trebuie instalat, ci contine mai mult fisiere pe care le vom insera in proiectele noastre. Acestea contin structuri standard: butoane, meniuri, un carousel si multe lucruri de baza de la care vei incepe dezvoltarea si personalizarea pentru a obtine un site asa cum doresti. Cum si de ce sa inveti Bootstrap de la inceput si care este relatia cu HTML5 si CSS3, vom vedea mai jos, la sectiunea invatare.
Descarcare: www.getbootstrap.com

Descarcare Font AwesomeFont Awesome - asa cum probabil intuiesti reprezinta o combinatie de fonturi care iti permit sa inserezi diverse iconite in proiectele tale web (poti utiliza vectorii si in programele de grafica, acceseaza http://fontawesome.io/cheatsheet). Poti schimba usor culoarea, dimensiunea care iti vor salva timp semnificativ, fara a fi necesar sa apelezi la programe de editare grafica.
Descarcare: www.fontawesome.io/
Lista iconite: www.fontawesome.io/icons

#4. Adauga aceste trei extensii in Chrome
Extensiile de la Chrome se instaleaza rapid si te ajuta in activitatea de realizare site-uri web.

AdaugareScreen Awesome - fie ca vrei sa adaugi la portofoliu fie ca vrei sa trimiti, un "print screen" care sa includa toata pagina inclusiv dupa ce dai scroll, poate fi destul de dificil. Din fericire acest mic addon iti poate realiza un print screen integral pentru intreaga pagina web la o calitate excelenta. Recent au fost adaugate si alte optiuni pe care le poti testa in functie de cerinte.

Adaugare What FontWhat Font - poti vedea rapid ce fonturi utilizeaza alt site, de cele mai multe ori vei primi detalii in forma, imi place fontul de pe site-ul x. Poti inspecta elementul, vizualiza sursa sau poti da un click cu acest addon. In plus este specificata si culoarea in format hex, dimensiunea fontului si proprietatea line height.

Adaugare Eye DropperEye Dropper - un addon util atunci cand doresti sa vizualizezi codul de culoare de pe o fotografie sau site. Poti face asta si inspectand sursa site-ului, insa este mai rapid. (Addon-urile functioneaza doar daca pagina ta se afla pe server).
Un alt instrument util pentru preluarea culorilor este MioTool Box, un program mic dar foarte util.

#5. Utilizeaza imagini gratuite
In proiectele tale vei utiliza imagini. De cele mai multe ori sunt puse la dispozitie impreuna cu textul aferent. Totusi sunt momente in care vei cauta imagini pentru a completa proiectele tale. O sursa excelenta de imagini gratuite o reprezinta pixabay.com.
Citeste mai mult: 12 site-uri cu imagini gratuite

#6. Iconite vectoriale gratuite
Pentru site-urile pe care le realizezi ai nevoie de fotografii. Le poti cumpara de pe site-uri de profil sau poti gasi gratuit imagini public domain.
Freepik: www.freepik.com

#5. Include fonturi moderne de la Google Fonts
Google Fonts - o colectie impresionanta de fonturi moderne puse la dispozitie gratuit de catre Google. Poti cauta fontul potrivit dupa diverse criterii. Printre cele mai utilizate se numara: Roboto, Lato si Open Sans. Pentru a utiliza un font in site-ul tau, tot ceea ce trebuie sa faci este sa incluzi un link in pagina site-ului si specificatiile fontul dorit.
Google Fonts: www.fonts.google.com

Utilizeaza un laptop pe care sa il iei cu tine In prezent programele utilizate in web design sunt mici si consuma putine resurse, achizitioneaza un laptop pe care sa il poti lua oriunde mergi.

Dupa cum observi, web design-ul nu necesita investitii speciale, poti lucra de oriunde, de pe orice laptop, utilizand doar cod. Tot ce ai nevoie este determinare de a invata noi lucruri.

Iata ce trebuie sa inveti


Pentru inceput ai nevoie doar de trei lucruri: HTML5, CSS3 si Bootstrap. Sa ne reprezentam o masina: are roti, volan, caroserie si alte lucruri care o fac sa functioneze. HTML reprezinta scheletul masinii, suruburi, tije, piesele de motor una cate una. CSS ne ofera posibilitatea de a specifica detaliile: lungime, latime, culoarea rosie, margini si forme aerodinamice, tapiterie.

Realizarea unui prototip pentru o masina dureaza insa luni sau ani de zile si fiecare lucru este realizat de la zero. Daca fiecare masina realizata ar trece prin acest proces probabil am calatori foarte mult pe bicicleta. Bootstrap utilizeaza structuri HTML, CSS si Java Script pentru a produce masini in serie, asambland diferse parti componente intr-un timp cat mai scurt, urmand tipare si procedee bine stabilite.

La fel si pentru site-urile web: putem realiza fiecare meniu de navigare in parte sau doar putem asambla structuri deja realizate, personalizand acolo unde este cazul. Exista proiecte speciale unde vei scrie intreg codul.

Dupa ce ai asimilat HTML5, CSS3, Bootstrap te poti indrepta pe frontend catre Java Script, jQuery, Angular, React.js sau backend PHP, MySQL, OOP in functie de cerintele companiei si proiectele pentru care lucrezi.

Exemplu cod HTML 5:
Exemplu cod HTML 5

Exemplu cod CSS 3:
Exemplu cod CSS3

Cursuri si tutoriale


Internetul abunda de informatii inclusiv pentru a invata web design. Poti invata atat singur, urmarind tutoriale pe youtube.com cat si cursuri online pe udacy, lynda.com, teamtreehouse.com. Procesul de invatare iti va consuma destul de multa energie, asa incat este bine sa iti suplimentezi cantitatea de glucoza cu fructe de padure, ciocolata amaruie, banane si ceai verde. Acest aspect este important, altfel, in timp, organismul tau se va simti slabit iti va taia orice chef sa te mai apuci de invatare.

Iata mai jos 3 site-uri de unde poti incepe:

1. Don't fear the internetCurs HTML online video gratuitDontfeartheinternet.com
se adreseaza artistilor: designeri, fotografi si persoanelor creative, care vor sa isi modifice propriul site. Cursul are 8 lectii video, modul de prezentare este creativ, intuitiv si amuzant, avand o nota artistica. Fara a intra prea mult in detalii, cursul surprinde foarte bine esenta a ceea ce ai nevoie,

2. Channel 9 Microsoft Virtual Academy ContentCurs HTML online video gratuitChannel9.msdn.com
un curs online video care acopera foarte bine elementele fundamentale de web design. Vei invata despre structura unei pagini web, texte, imagini, link-uri, liste, formulare si alte lucruri. Modalitatea de lucru si exemplificare este in Notepad, insa poti lucra direct in editorul Sublime Text.

3. 30 Days to Learn HTML & CSS Tutoriale online video gratuite pentru cursuri de web designYoutube.com Envato +
un curs gandit pentru o perioada de 30 de zile, cate un clip video de aproximativ 7-12 minute pe zi. Poate fi comasat si urmarit in 2-3 zile, contine elementele de baza, bine structurate.


Ce sa aleg un curs online sau un curs la sala
Poti incepe cu tutoriale si cursuri online pentru a testa elementele fundamentale. Cursurile online sunt accesibile si pot fi urmarite seara, ziua sau oricand doresti. Cursurile la sala au costuri mai mari si trebuie sa te deplasezi de acasa, in schimb informatia poate fi personalizata in functie de cunostintele tale cunosti si iei contact cu alte situatii expuse de colegii de grupa. In plus cunosti noi prieteni pasionati de aceleasi lucruri ca si tine, cu care poti colabora si dezvolta proiecte online.

Cat de mult conteaza diploma
In ceea ce priveste web design-ul ceea ce conteaza este portofoliul tau, modul in care lucrezi, determinarea ta. Majoritatea companiilor nu cauta diplome. Sunt insa si situatii cand ai nevoie de diploma: de exemplu atunci cand doresti sa iti deschizi un PFA.

Web design si freelancing


Internetul schimba modul in care lucram si ne traim viata, te poti exprima liber urmand pasiunile tale si facand ceea ce iti place, din cei 3 miliarde si 500 milioane utilizatori de Internet la nivel global vei gasi suficient de multe persoane interesate de ceea ce faci.

Ai nevoie de determinare, un laptop si conexiune la Internet.

In SUA exista mai mult de 55 de milioane de freelanceri care acopera o gama variata de servicii, reprezentand 33% din forta de munca activa, trendul fiind puternic ascendent.


Construieste relatii la nivel global
Cel mai bun mod de a avea constant proiecte este sa ai propriul tau site de prezentare pe care sa il cresti constant. Te poti adresa pietei de afara intrand in contact direct cu persoane interesate. Poti face asta utilizand retelele sociale urmarind si adaugand noi prieteni, postand comentarii utile pe bloguri pe care la randul tau le gasesti interesante.


“Love your family, work super hard, live your passion. ”
Gary Vaynerchuk

Rezerva in fiecare dimineata 2 ore pentru a descoperi un blog nou si pentru a citi si comenta pe alte 5 bloguri, adauga numele si site-ul tau, scrie comentarii utile pentru public si care te fac sa fii mandru. In primele 30 de zile vei avea 150 de comentarii care fac trimitere catre site-ul tau si iti vei atrage vizitatori directi interesati.

Nu ai nevoie de bugete de promovare ci doar de constanta si determinare in ceea ce faci. Concentreaza-te pe calitate, succesul peste noapte dureaza de obicei cativa ani.

Citeste constant
In freelancing timpul este de partea ta si il poti organiza asa cum doresti. In primul an scopul tau este sa asimilezi cat mai multe informatii despre branding, antreprenoriat, business, marketing, social media, web design, iar cartile iti permit sa ai acces la experienta celor care au reusit.

"Read 500 pages like this every day. That’s how knowledge works. It builds up, like compound interest. All of you can do it, but I guarantee not many of you will do it."
Warren Buffett

Oamenii de succes tind sa aleaga carti educationale si de dezvoltare in locul povestirilor, tabloidelor si revistelor. In special sunt interesati de biografii si autobiografii ale altor oameni de succes pentru inspiratie si idei utile. Citeste mai multe despre ce au in comun: www.medium.com/the-mission/the-reading-habits-of-ultra-successful-people.

Achizitioneaza un mini poket book este slim si are loc in buzunar. Testeaza in magazin, este important sa te asiguri ca este suficient de mic sa il ai in buzunar cu tine oriunde. Astfel, momentele de asteptare se vor transforma intr-un prilej bun de a gasi idei in cartile tale.

Iata 5 titluri de carti utile la inceput de freelancing si care iti pot schimba modul in care gandesti, actionezi si comunici.
Start with Why - Simon Sinek
Crush It - Garry Vaynerchuck, pe care il poti intalni pe 22 mai 2017 in Bucuresti
The One Thing - Gary Keller, Jay Papasan
Contagious: Why Things Catch On - Jonah Berger
The 80/20 principle - Richard Koch
Rich dad, poor dad - Robert T. Kiyosaki
The Power of Habit - Charles Duhigg

In general o carte buna contine una sau doua idei noi care te vor ajuta in ceea ce faci. De aceea trebuie sa descoperi constant noi autori si titluri, atat pe cont propriu cat si din recomandari. Pentru a gasi usor carti potrivite cu informatii relevante pentru tine, utilizeaza www.goodreads.com aici vei gasi un sistem de recenzii foarte bine pus la punct. O alta sursa utila este www.publica.ro.

Urmareste acesti 5 fondatori iti vor oferi motivatie, determinare si incredere sa schimbi lucrurile din jurul tau.
Kevin Systrom - Fondator Instagram
Gary Vaynerchuck - Fondator VaynerMedia
Travis Kalanick - Fondator Uber
Brian Chesky - Founder Airbnb
Jack Ma - Fondator AliBaba

"Designers + artists see potential in things where others do not. I think artists in many ways are the original entrepreneurs." Brian Chesky

Concluzie

Web design-ul reprezinta un limbaj universal si poti lucra de oriunde te simti creativ pentru persoane din intreaga lume. Este suficient sa ai determinare, un laptop si conexiune la internet, iar urmatorul site global poate pleca de la ideea ta.

Aboneaza-te la noutati

Aboneaza-te pentru a primi articolele direct in inbox-ul tau

Cursuri web design incepatori: vino sa inveti cum sa realizezi site-uri web, poti lucra de oriunde te simti creativ, pentru persoane din intreaga lume.

Cursuri Web Design Acreditate

870 Lei 1100 Lei

Durata 5 saptamani
Invata cum sa realizezi Landing Page-uri, site-uri de tip One Page, site-uri pentru companii si persoane.
Cursuri web design  

© 2016 DIGITAL SKILLS SRL
Registrul furnizorilor de formare profesionala a adultilor numarul 40/7082/21.10.2016
Bulevardul Unirii, Nr. 14, Sector 4, Bucuresti R.C.: J40/6400/2016, C.U.I.: 36031733, Capital social 200 RON. Telefon: 0730.664.580