Web dizaino ir logotipų skiltis Web dizaino pamokos lietuvių kalba

 Portfolio, ar kito dizaino, kūrimas step-by-step

Įvairios lietuvių kurtos arba išverstos web dizaino pamokos

Standartinė H3.juodikis » 2010 Sau 29, 00:38

Ok, ok. Gal kiek ir perdedu. Čia bus daugiau ne kaip pamoka, o kaip patarimas, kaip reikia daryt (bent aš taip darau) dizainą (ir abskritai webą).

Niekads, pakartosiu - niekados, negalvokite, kad web sukurti yra dviejų-trijų dienų darbas.

Viską aiškinsiu kaip kas darosi visiškai nuo pat pradžių, vien todėl, kad žadu daryti savo naują portfolio (pagrindinė kalba - anglų).



I. THINKING

Gal tai skamba kiek kvailokai, bet to reikia. Kitaip sakant - ką jūs kursite: corporate style, portal, portfolio ar tiesiog pasižaisite. Apgalvokite, ar jūs jį naudosite, kiek jam galite ir/ar sugaišite laiko.

[Aš - darysiu naują portfolio. Žadu sugaišt apie 5-7 savaites.]



II. CAST-MARKETING

Nesvarbu ką jūs darysite. Jei darysite portalą - apsižiūrėkite nišas: kur yra rinka perpildyta, kur trūksta to akcentuko, kuris galbūt jūs būsite. Besižvalgant (nesvarbu Lietuvos ar užsienio rinkoje) jūs taip pat matote kaip tie portalai/folio/corporte'ai ir t.t. išsidėstę - koks jų framework'as (karkasai), ant kokių sistemų "kabo", kokie lankytojų srautai. Tuo pačiu, jūs vėl mąstote, kur galite nusižengti nusistovėjusiems standartams, ką pridėti, kad trauktų lankytoją ir dar daug visokių menkų niuansų.
Šitą žingsį galite kartoti kone kasdieną.

[Aš - pradėjau porfolio "kūrimą" (šį žingsnį) prieš geras 2 savaites]



III. FRAMEWORK IN TEXT

Nesuprantate kas tai? Jūs į paprasčiausią tekstinį failą susirašote kaip atrodys ar kas bus naudojama, ar šiaip kokias pastabėles, dėl savo būsimo darbo.

[Aš:

Portfolio:

----- Light;
----- 2 columns;
----- [?] Left aligned // [or centered];
----- [?] Introductory block on top;
----- Navigation horizontal right aligned;
----- Search [JS @ top];
----- No flash;
----- Contacts:
----------- if left: top right;
----------- if centered: left;
----------- + footer;
----- [?] Newsletter;
----- Pages:
----------- works:
------------------- [?] clients;
------------------- detailed info;
----------- about:
------------------- CV.pdf
------------------- [?] HTML CV
----------- [?] serivices;
----------- contacts:
------------------- web form;
------------------- vCard;



Kol kas aš šitame žingsnyje.]



IV. CONCEPT

Šitą dalykėlį buvau "priverstas" atrasti visai neseniai - kai pradėjau darbuotis su vienu žmogumi. Jis man atsiunčia koceptą - aš darau dizainą. Aišku visokius menkniekius paaiškina, kai susėdam kartu (or IM). Konceptop pavyzdys. Dažniausiai jis kuriamas su Axure programine įranga.

[Aš - konceptas yra ČIA]

Pakartosiu - jis skirtas tam, kad turėtum būsimo dizaino "planą/maketą".


V. INSPIRATION v2

Taigi, next step, vėlgi inspiration. Įkvėpimo paieška, detalių ar idėjų generavimas ir t.t. Ir tik vėliau PS įjungimas ir tikrojo dizaino pradžia.

[Aš - pykit-nepykit, bet savo šaltinių, kur ieškau idėjų tikrai neduosiu]

VI. COMING SOON page

Buvau visiškai pamiršęs apie šitą. Tai yra "laukimo puslapis". Šiandien bandysiu padaryt saviškį (2009-11-13). Kaip juos daryti, ką ten dėti, galit paskaityti smashingmagazine.com

[Aš - žiūrėti čia - atliktas kodavimas (HTML+CSS+PHP (mailing system)]



VII. FINAL-beta DESIGN

Taigi pradėjom daryt dizainą - naudojamas tik Adobe Photoshop'as (ir šiek tiek Illustrator'iaus). Bandome neatsilikt nuo dabartinių tendencijų (dominuoja web 2.0), nepersistengt su spalvom (turiu savo 5 spalvų paletę kurią naudojau ir kurdamas logotipą), išlaikant dėmesį ten - kur svarbiausia, žaidžiant su šriftais (fonts), naudoti non-default'inius tik ten, kur bus paveiksliukas, pasiliekant prie savo koncepto, bei nerippinant kitų autorių darbų.

[Aš - žiūrėti čia.]



VII (v2). RE-BRAND

Kadangi sulaukiau daug pašalinių komentarų, dėl nick'o ir puslapio adreso (horde.lt) darau rebrand'ingą - t.y. savo personal įvaizdžio keitimo. Nusipirkau adresą juodikis.lt, kas atitinka mano pavardę. Nuėję jau pamatysite logotipą, kuris yra galutinis (formos atžvilgiu, spalvos derinamos priklausomai kur dedamas logotipas). Taip pat - pradedamas kurti naujas dizainas. Kai bus sukurtas naujas dizainas - tęsiu pamokos rašymą (karpymas, pritaikymas ir t.t.)



VII (v3). RE-BRAND done

Taigi, buvo atliktas rebrand'ingas. Sugalvojau daryt du (vėliau gal jų ir daugės) atskirus puslapius: "apie" ir portfolio.

Tas "apie" puslapiukas bus vCard tipo puslapis (pastebėjau tai ir įkvėpė mane ši nuoroda.

Dizainas atrodo kol kas taip (galbūt bus menki pakeitimai).

Pradinis - http://www.codedpreview.com/folders/f/83126c9d/
Tinklai - http://www.codedpreview.com/previews/f92c5c05/
Kontaktai - http://www.codedpreview.com/previews/6477227b/
Darbai - http://www.codedpreview.com/previews/1c336d3b/


Taigi pradedam kodavimą.

Aš naudosiuos savo senuoju būdu, karpyti ir kodą rašyti rankomis (nors jūs galite naudoti Site Grinder 2 Pro kurį neperseniausiai įdėjau tarp siuntinių).


Trumpai apie karpymą - elementus, kurie negali kartotis iškerpame pilnai (nebent tai dalis, kuri priklauso kartojamui). Dalis, kurios gali kartotis - padarome 1px pločio/aukščio (priklauso kaip kartosis) arba jei tai foninis vaizdas padarome maždaug ~200x200 (maximalios reikšmės)



IIX. Codding in HTML

Taigi, kerpam dalį iš PSD, aprašom dalį CSS'e, parašom HTMLą - skamba paprastai. O taip tikrai nėra.
Kaip karpyt and stuff galit pasimokyt iš šio linko, arba šio, dar iš šio arba daugybės kitų likusių.


[Aš - žiūrėti čia mano HTML'ą]


IX. Rest coding

Tep, tipo viską sukodinom. Patikrinom HTML validumą, CSS validumą, patikrininom, kaip puslapį atvaizduoja skirtingo naršyklės/rezoliucijos/OS. Aišku prakeikiame IE, nes ant jo pusė ko nors neveikia.

Surašom visus likusius scriptus kurie (greičiausiai) jau nebesugadins saito - PHP, JS, prijungiam prie duombazės, jei to reikia.

[Aš - žiūrėti čia pabaigtą saitą]



X. Other

Mums liko labai nebedaug. Pasižiūrim kiek laiko krauna mūsų saitą, optimizuojam jį, padarom neblogą SEO.
Patvirtinam saitą per Google, sukuriam sitemap, įkeliam į Webmaster tools.
Sulaukiam, kol mus suindexuos paieškos gigantai (Google, Yahoo, BING ir kiti)
Laukiam pirmųjų lankytojų, komentarų, klaidų ir kita.


Jei kas neaišku - klauskite.
Vartotojo avataras
H3.juodikis
H3nity™
H3nity™
 
Pranešimai: 1270
Miestas: Vilnius
Medaliai: 16
Taškai: 1309

Kovų lygis: A

Reputacija: 119 Pridėti reputacijos tašką

Standartinė DriverizS » 2010 Sau 30, 22:17

LAbai puikus straipsnis! :!: Labai daug geru patarimu,pritariu kodavimui rankiniu budu ir kaip sakei prakeikiam IE :lol:
O del tavo dizaino,neisizeisk,bet kaip saunus gfxeris manau galetum truputi graziau pasidaryt(mano nuomone). :ahoy:
Vartotojo avataras
DriverizS
Naujokas
 
Pranešimai: 19
Taškai: 15

Reputacija: 0 Pridėti reputacijos tašką

Standartinė H3.juodikis » 2010 Sau 30, 23:44

Čia šitą pamoką užtruko padaryt ~2-3mėn. Todėl pasikeitė "norai", dėl to pasikeitė ir dizainas, saitas.

O šiaip viskas skonio reikalas. Yra gera patarlė - batsiuvys be batų. Manau suprasi ką turiu omeny ;)
Vartotojo avataras
H3.juodikis
H3nity™
H3nity™
 
Pranešimai: 1270
Miestas: Vilnius
Medaliai: 16
Taškai: 1309

Kovų lygis: A

Reputacija: 119 Pridėti reputacijos tašką

Standartinė DriverizS » 2010 Sau 31, 14:01

Kaip bebutu,respect!O patarle supratau. ;)
Vartotojo avataras
DriverizS
Naujokas
 
Pranešimai: 19
Taškai: 15

Reputacija: 0 Pridėti reputacijos tašką

Standartinė Fecond » 2010 Vas 18, 17:15

Labai patiko kaip išdėstei visą šį straipsnį, na aš pats neseniai supratau kaip reikia viską daryti, tačiau dar bijau to imtis, tiksliau neturiu laiko ir reikia dar laaabai gerinti photoshop įgudžius. Ir šiaip man patiko tavo web :P.
Vartotojo avataras
Fecond
Įsijaučiantis
 
Pranešimai: 122
Miestas: Kaunas
Taškai: 86

Kovų lygis: N

Reputacija: 5 Pridėti reputacijos tašką

Standartinė t0x1c » 2011 Sau 16, 21:32

Wow :O Patiko tavo puslapis. O tutorialas irgi saunus! :) :!:
Vartotojo avataras
t0x1c
Aktyvus dalyvis
 
Pranešimai: 296
Miestas: Kaunas
Taškai: 79

Kovų lygis: N

Reputacija: 0 Pridėti reputacijos tašką

Standartinė Moon » 2011 Geg 23, 13:57

Žiauriai gera pamoka :) Ačiū :)
Vartotojo avataras
Moon
Forumo gyventojas
 
Pranešimai: 843
Medaliai: 4
Taškai: 720

Reputacija: 30 Pridėti reputacijos tašką

Standartinė mediaK » 2011 Spa 16, 22:56

Aš maišaus kogero, web dizaino kurimas turėtų būti apsiribojęs ties dizaino (šablono) parengimu kodavimui ir t.t., o šioje temoje aprašyta taip, kad kodavimas ir visa kita įeina į web dizaino kurima, nors tai ju vadinasi puslapio kurimas. Pataisykit jei klystu.
mediaK
Naujokas
 
Pranešimai: 6
Taškai: 4

Reputacija: 0 Pridėti reputacijos tašką



Web dizaino ir logotipų skiltis Web dizaino pamokos lietuvių kalba

cron

Prisijungti

Forumo stilius

Pasirinkimas:

free tattoo Designs mezoterapija