Šiandien kalbėsime apie tai, ką naujokas dizaineris turėtų žinoti kurdamas svetainės dizaino maketą. Dizaino kūrimas, galima sakyti, yra visas mokslas, ir, kaip ir bet kuris mokslas, jis turi savo „cheat sheets“ ir pagrindinius priimtus standartus, padedančius sukurti gerą maketą. Nesvarbu, kokia svetainė tai bus ateityje – vizitinė kortelė, įmonės, reklaminė, internetinė parduotuvė ar kita. Yra keletas punktų, į kuriuos reikia atsižvelgti ir žinoti nuo pat pradžių, šie punktai padės tiek jums, tiek maketuotojui ateityje kuriant projektą. Taip, taip, maketuotojas visada turi galvoti, kaip bus išdėstytas tas ar kitas maketas, kitaip maketuojant gali kilti problemų, o tai iškraipys dizaino, kurį parodėte makete, išvaizdą. Reikia pagalvoti ir apie tai, kad dizainerio darbo rezultatas vis tiek bus svetainė. Taigi, pradėkime, taškų tvarka nebūtinai gali atrodyti taip:

1. Planavimas.
2. Išdėstymo pagrindai arba kaip tai daroma.
3. Tipografija.
4. Tinkamų spalvų pasirinkimas projektui.
5. Naudojamumas.
6. Gerai apgalvotas interaktyvumas (navigacija, mygtukai, nuorodos ir pan.).
7. Turinio dizainas.
8. Išdėstymo šaltinio tvarka.

Na, atrodo, kad tai nubrėžė pagrindinius dalykus, kuriuos patartina žinoti dirbant su svetainės dizainu. Dabar pažiūrėkime į šiuos punktus iš eilės ir šiek tiek atskleiskime jų reikšmę, visko neaprašysiu, tik išdėstysiu pagrindą, o apie visus punktus pakalbėsime konkrečiai, manau artimiausiu metu naujuose įrašuose atskirai išsamiau.

Svetainės maketas – kūrimas arba kaip susikurti svetainės maketą

Planavimas - Manau, kad pats žodis kalba pats už save, išvestinis planas. Mūsų atveju tai reikia suprasti taip. Jūs turite techninę specifikaciją (techninę specifikaciją) arba trumpą, pagal kurį turite sukurti maketą, kuris bus mūsų būsimos svetainės dizainas. Remdamasis specifikacijomis arba iš trumpo, dizaineris turi sukurti. Taigi nuo ko pradėti?Čia mums į pagalbą ateina paprastas pieštukas ir popierius, taip, pieštukas ir popierius, o ne kompiuteris. Nėra prasmės piešti tiesiai kompiuteryje, nes... tai neapgalvota. Štai kodėl mes kuriame savo maketo planą arba tiesiog eskizą. Nubraižykime eskizus, pageidautina kelis, atsižvelgsime į visus punktus, meniu, tekstus, blokų išdėstymą, nuorodas, iliustracijas, apytikslį tinklelį, ir mes su jumis susidarysime tikslesnį ir suprantamesnį būsimo svetainės dizaino vaizdą. Ir kai turėsime eskizus, galime pereiti prie dizaino įgyvendinimo kompiuteryje.

Modulinis tinklelis - Tai išdėstymo proporcijų sistema, susidedanti iš modulių, kurie savo ruožtu sudaro tinklelį. Mums to reikia dėl blokų suderinamumo išdėstymo, taip pat dėl ​​išdėstymo ir elementų struktūrizavimo vienas kito atžvilgiu. Tinkleliai gali būti paprasti (blokuoti) arba sudėtingi. Paprasčiau tariant, modulinės tinklelio naudojimas labai supaprastina išdėstymą ir tolesnį išdėstymą. išdėstymas svetainę.

Išdėstymo pagrindai arba kaip tai daroma, čia, manau, nėra jokios ypatingos prasmės jį apibūdinti, pasakysiu, kad čia svarbiausios yra šios savybės, į kurias reikia atsižvelgti:

• tai mastelio keitimas svetainės išdėstymas, jei tai guminė aikštelė (atsižvelgiame į tai, kaip išdėstymas atrodys suspaustas ir ištemptas);
• turite atsižvelgti į svetainės augimą ateityje, pavyzdžiui, didinant meniu elementus ir sukurkite išdėstymą atsižvelgdami į tai;
• punktus, susijusius su blokų su užapvalintais kampais išdėstymu, į tai taip pat reikia atsižvelgti
• ir daug kitų punktų.

Tipografija - Tai Grafinis dizainas tekstą į dizaino projektą naudodami atitinkamas taisykles. Paprasčiau tariant, tipografijoje naudojamos tam tikros taisyklės, nurodančios, kaip geriausiai naudoti šriftus ir dizainą, kad žmonės būtų geriausiai suvokiami ir perskaityti. Tipografijos dėka galime pabrėžti vieną ar kitą svarbų tekstą. Dizaineriai kuria tipografinius kontrastus, taip pagerindami teksto suvokimą, tai būtina norint nurodyti svarbiausią tam tikrų žodžių, sakinių, pastraipų svorį. Kurdami tekste mums reikalingus akcentus, taip pageriname skaitytojo teksto suvokimą, o savo dizainą darome patrauklesnį. Taip pat reikėtų pažymėti, kad kuriant interneto svetainę turėtumėte naudoti tik .

Kokie tai šriftai? Tai yra šriftai, kurie egzistuoja ir yra bet kurio vartotojo kompiuteryje, nepriklausomai nuo operacinės sistemos. Pavyzdžiui, šriftai Arial, Georgia, Tahoma, Verdana ir kt. Kuriant dizainą patartina naudoti dviejų tipų šriftą, kartais, žinoma, jų būna ir daugiau, tačiau pagrindas visada yra du – kirčiavimo (antraštės) šriftas ir viso turinio bazinis.

Tinkamų spalvų pasirinkimas projektui –Šis momentas reiškia, kad žmogus suvokia spalvas. Kiekviena spalva sukelia tam tikras emocijas ir su ja galite žaisti kurdami svetainės dizaino maketą, akcentuoti ryskios spalvos ir padarykite pagrindines spalvas pastelinėmis, švelniomis ir neerzinančiomis. Tokiu būdu būsimos svetainės vartotojui galime parodyti svarbiausias blokų dalis ar maketo elementus. Visos spalvos turi įtakos, vienos atstumia, kitos skatina veikti (spustelėti), yra ir neutralių. Žinoma, kartais nutinka taip, kad svetainę užsakanti įmonė turi firminį stilių ir nieko negali padaryti, o reikia jo laikytis.

Naudojamumas – tai patogumo, įsimenamumo ir naudojimo efektyvumo derinys. Tai yra, kurdami dizainą, turite atsižvelgti į tai, kad vartotojui svetainėje būtų patogu, kad jis nepatirtų sunkumų su naršymu ir sąsaja, viskas turėtų būti aišku, suprantama ir informatyvu. Pagrindiniai naudojimo principai mums sako, kad svetainė turi būti lengvai išmokstama, efektyvi naudoti, lengvai įsimenama tolimesniam nuolatinių vartotojų darbui ir, žinoma, tenkinti vartotoją.

apgalvotas interaktyvus – tai reiškia, kad dizaineris, kurdamas svetainės dizaino maketą, turi suplanuoti, kaip tam tikri interaktyvūs elementai elgsis reaguodami į vartotojo veiksmus. Tai reiškia, kad dizaineris, kurdamas, pavyzdžiui, nuorodą, visada turi ją pabraukti, nuoroda turi turėti tokių būsenų formą kaip nuoroda statinė, nuoroda ant pelės žymeklio, nuoroda aplankyta. Taip pat, jei reikia, parodykite, kur esame. Tai turėtų būti nurodyta pabraukiant ir skirtingomis spalvomis. Paprastais žodžiais tariant, visi naršymo elementai, nuorodos, meniu, formos ir panašiai turi būti apgalvoti, kad bet kuris vartotojas suprastų, jog atlieka bet kokį veiksmą.

Turinio dizainas –čia manau viskas aišku, kalbame apie būsimos svetainės turinio dalies turinį. Juk bet kuri svetainė pirmiausia yra puslapių masė, susidedanti iš informacijos, kurią resurso savininkas dosniai pateikia vartotojui, o vartotojas į svetainę ateina būtent dėl ​​informacijos. Daug kas priklauso nuo to, kaip gerai sukurtas turinys. Turinys visada turi būti suformatuotas kitaip, tačiau atsižvelgiant į akcentą ir pagrindinį tekstą. Kuriant reikia naudoti visus reikalingus elementus, tai antraštės nuo H1 iki H6 (žinoma, žymės maketuotojams, bet taip aiškiau), įvairaus pobūdžio sąrašai, citatos, tik tekstas, pastraipos, nuorodos, fotografinė medžiaga , stalai ir kt.

Šaltinio išdėstymo tvarka yra - tai turbūt labiau patarimas už viską svarbus punktas. Kurdamas svetainės dizainą visada stengiuosi laikytis tam tikros grupių ir sluoksnių pavadinimų hierarchijos pradiniame psd faile.

Ką tvarka suteikia svetainės išdėstymui? Dizaineriui ir maketuotojui – greitas vadovas, kas kam priklauso ir kas yra kur. Tai tarsi loginė vieno dizaino elemento schema (psd failas) ji suskirstyta į aplankus, grupes, korpusą, poraštę, žinoma, yra ir slankiklis. Tačiau, savo ruožtu, šios grupės yra suskirstytos į pogrupius, jei reikia, ir juose yra sluoksnių su konkretaus sluoksnio pavadinimu. Teisinga hierarchija padės jums patiems, jei turėsite ką nors redaguoti, daug lengviau nei knistis po krūvą sluoksnių be pavadinimų, o maketuotojas viską išsiaiškins ir išdėstys greičiau. Čia kalbama apie hierarchiją. Dar vienas svarbus momentas, kurio prašė padaryti bent kelis kartus, o po to man tapo įpročiu, nuimti vadovus paskui tave, kad maketuotojas nešvaistytų laiko ir neatneštų svetainės išdėstymas tu tvarkingas.

Pirmiausia pagalvokite, kodėl nusprendėte patys susikurti svetainės maketą. Šis darbas iš žmogaus reikalauja įvairiapusių žinių IT ir dizaino srityse, analitinis ir kūrybinis mąstymas vienu metu. Taip pat dalį savo laiko. Gerai, yra 4 priežastys, kodėl jums to gali prireikti. Jei turite kitokį, rašykite komentaruose, aš pridėsiu.

Svetainių maketų kūrimas: pramoga elitui

Priežastis #1. Domėjimasis svetainių maketų kūrimu

Ar jūsų interesai labai konkretūs? Mes esame čia mes nieko nesmerkiame. Kažkada mums tai tapo įdomu, ir mes pradėjome tai daryti! Be to, žinių troškulys yra mūsų skiriamasis bruožas. Aš vertinu jūsų smalsumą.

Priežastis #2. Svetainės maketo kūrimas kaip būdas užsidirbti pinigų

Jei norite ateityje tapti žiniatinklio dizaineriu, turite kažkur pradėti, būtent nuo pagrindinio svetainės puslapio išdėstymo. Greitas jūsų darbo rezultatas motyvuoja kaip niekas kitas. Laimei, šiame straipsnyje aš tik siūlau Blitz būdai sukurti maketą.

Beje, interneto dizainerio darbas – ne juokas. Čia žemiau tiesiog paliksiu atlyginimų grafiką, priklausantį nuo stažo (pagal DOU 2016 m. gegužės-birželio mėn. duomenis). Aš nieko neužsiimu. Tiesiog paslėpta medžioklė.

Priežastis #3. Svetainės maketo kūrimo techninių specifikacijų parengimas dizaineriui

Dažnai ne dizaineriai susiduria su poreikiu parodyti svetainės maketą – kartais tiesiog norėdami iliustruoti savo idėją, o kartais – norėdami sustiprinti specifikaciją. Žinoma, tai nėra būtina ir kompetentingas dizaineris supras jūsų idėją ir netgi padarys tai geriau nei tikitės. Tačiau jei tiksliai žinote, ko norite, geriau tai parodyti, o ne pasakyti.

Taip pat patogu naudotis programėle „Coggle“, kurią galite prijungti prie „Google“ disko .

Man patinka Coggle, nes tai minčių žemėlapis. visada po ranka, patogu dalintis su kolegomis, puikiai parinktos sąsajos elementų spalvos. Be to, veikia dešinysis pelės mygtukas, kuris leidžia lengvai tinkinti žemėlapį. Aš gavau šią struktūrą pagrindinis puslapis svetainę.

Pirmajame maketo projektavimo etape sukuriamas svetainės minčių žemėlapis

2 etapas: svetainės prototipo kūrimas

Tada galite iš karto pradėti piešti svetainės maketą „Photoshop“, tačiau net jei maketą darote iš tuščio smalsumo, pirmiausia turėtumėte nupiešti svetainės prototipą. Kuriant žingsnis po žingsnio, prototipų kūrimas yra neatsiejamas žingsnis, stiprinantis žiniatinklio dizainerio psichinę sveikatą. Kuriant prototipą, apibrėžiami būsimos svetainės pagrindiniai blokai (antraštė, slankiklis, mygtukai, kontaktai, medžiagos struktūra ir kt.). Tai leidžia žymiai sutaupyti laiko maketo piešimo etape, nes Pamatysite apytikslį rezultatą ir neskausmingai atliksite pakeitimus.

Pavargęs? Palengvinkite gyvenimą ir užsakyti svetainės kūrimą iš KOLORO. Atsižvelgsime į Jūsų norus ir gausite būtent tai, ko norėjote.

Internetinės svetainės prototipo kūrimas

Svetainių prototipams kurti dažniausiai naudoju du populiariausius internetinius įrankius: Moqups ir Mockflow. Abiem atvejais prototipus galima sukurti nemokamai, tačiau riboto funkcionalumo. Pirmosios svetainės tarifai prasideda nuo 13 USD per mėnesį. (10 projektų, 1 GB), o už antrą – nuo ​​14 USD/mėn. (neribotas projektų skaičius + 25 GB debesyje). Visi taip pat rekomenduoja Mockingbird. Ir rekomenduosiu, bet tik iš pagarbos Eminemui, nes čia 3 projektai kainuos 12$/mėn, o nemokamų įrankių mažiau.

Dabar apie mano asmeninius įspūdžius. Moqups yra patogesnis ir intuityvesnis net nuo pirmo apsilankymo. Čia yra daug paruoštų blokų ir piktogramų – kaip tik tai, ko jums reikia norint greitai įveikti prototipų kūrimo etapą. Be to, patogu centruoti elementus, palyginti su puslapio viduriu ar kitais elementais. 300 objektų limitas puslapyje laisvuoju režimu šiek tiek trukdo – vieno puslapio maketui to gali nepakakti. Galima įterpti elementus iš Bootstrap darbo rėmo. „Mockflow“ leidžia padaryti šiek tiek mažiau ir prireiks kelių minučių, kol priprasite ir priprasite, tačiau kai kuriems gali prireikti papildomos vietos diske.

Svetainių prototipai „Moqups“ ir „Mockflow“.

Kaip sukurti būsimos svetainės prototipą?

Naudodami Moqups kaip pavyzdį, pažiūrėkime, kaip galite sukurti tinklaraščio puslapio su tekstu prototipą.

1 veiksmas. Pridėti skrybėlę(tekstą galima keisti).

2 veiksmas. Pridėti blokas už paveikslėlį ir užrašą (straipsnio pavadinimą). Naudodami stilius galite patogiai keisti dydį, šriftą ir kitą teksto formatavimą.

3 veiksmas. Pridėti tekstą ir paklausk plotis stulpelius. Visi blokai yra patogiai centre, palyginti su puslapio viduriu.

4 veiksmas. Tekstas turi būti suskaidytas su paveikslėliu. O stulpelio plotis per didelis, geriau būtų 500 px. Laimei, galite greitai jį pakeisti. Didelis pliusas: pasirinkti elementai yra sumažinti vienas kito atžvilgiu, o mano blokas su paveikslėliu taip pat sumažėjo.

5 veiksmas. Pridėkime šoninę juostą (šoninį stulpelį), tai bus lengva. Įdėsime paieškos laukelį ir bloką naujienlaiškio prenumeravimui (su patraukliu paveikslėliu ir ryškiu mygtuku).

6 veiksmas. Tarkime, kad mūsų straipsnis pasirodė toks mažas. Taip pat galite pridėti apklausa Ir įvertinimas straipsniai. Rezultatas buvo tvarkingas tinklaraščio puslapio prototipas. Pridėkite kitų elementų pagal savo skonį.

Prototipų kūrimas leidžia žiūrėkite puslapio mastelį ir priimti sprendimus dėl tam tikrų blokų. Beje, naudodami šiuos įrankius galite sukurti prototipus skirtingiems įrenginiams. Pavyzdžiui, jei bandysite, gausite kažką panašaus. Tačiau prototipas paprastai apsiriboja juodos ir baltos spalvos dizainu.

Išmaniojo telefono programos prototipas

3 etapas. Gražaus svetainės maketo kūrimas: spalvos pasirinkimas

Iš geras pasirinkimas spalvos turi įtakos vartotojų suvokimui apie svetainę ir prekės ženklą. Nerekomenduoju pasikliauti savo jėgomis - tinkamo atspalvio pasirinkimas gali užtrukti valandas. Todėl rekomenduoju naudoti paruoštas spalvų paletes žiniatinklyje. „Google“ neseniai išleido išsamų gerų medžiagų dizaino spalvų vadovą (žiniatinklio dizaino tendencija). Šios spalvos harmoningai susilieja ir galite būti tikri dėl jų patrauklumo. Naudodami Materialpalette galite sėkmingai pasirinkti dvi spalvas - pagrindinę ir akcentą, taip pat pamatyti, kaip jos atrodys sąsajoje. Šiek tiek daugiau spalvų Material Design Colors.

Ar pristatėte svetainę? Ar sukūrėte prototipą? Ar išsirinkote savo spalvas? Dabar galite pereiti prie paties maketo kūrimo. Siūlau kelis būdus.

Dėmesio! Čia nebus patarimų, kaip padaryti svetainės maketą „Photoshop“ - tai atskiro straipsnio tema, čia yra paprastesni būdai.

1 metodas. Maketo iškirpimas iš svetainės šablono

arba esamas svetaines

Šis metodas jums tinka, jei norite:

• suprasti pagrindinį Photoshop įrankiai;
• rasti įvairių nuorodų savo būsimai svetainei ir jas sudėti;
• porą valandų pasijusti dizaineriu;
• pademonstruoti web dizaineriui ar agentūrai (pavyzdžiui, mums:) detaliausią svetainės viziją;
• remti tinklalapio kūrimo technines sąlygas ne tik „čia yra skambinimo mygtukai, o čia yra separatorius ir švino magnetas“.

Šio požiūrio į maketo kūrimą pranašumai:

• galite išvengti įprastų klaidų žiūrėdami į aukštos kokybės svetaines;
• suprasite, ko nedaryti, kad jaustumėtės gerai;
• interneto dizaino atlikėjai aiškiai supras, ko tikitės;
• tai labai greita – per kelias valandas padarysite visų svetainės puslapių maketus.

Minusai:

• niekada iki galo nesuprasite, kas yra web dizainas;
• Kai kurių nuorodų, kurias rasite, maketuotojas negali įgyvendinti nepakeitęs kitų svetainės dalių.

Kaip tai daroma

Paprasčiausias ir greitas būdas pasidaryti svetainės maketą – pasirinkti konkrečios TVS šabloną ir perdaryti jį sau. Todėl pirmiausia turite nuspręsti dėl TVS, kuri labai supaprastins svetainės kūrimą. Tačiau atkreipkite dėmesį, kad svetainės dizainas apsiribos tais elementais, kurie yra šablone. Žinoma, galite keisti spalvas, tačiau atskiri sąsajos elementai jau yra paruošti ir jūs negalite jų pakeisti.

Jei gaminate „troškinį“ iš skirtingų vietų, nepamirškite pieštuku užrašyti šaltinių kur nors į sąsiuvinį. Tai supaprastins tolesnį dizaino kūrimą ir išdėstymo išdėstymą.

„Wordpress“ svetainių maketai

Populiariausia TVS yra Wordpress. Pavyzdžiui, rasite daug modernių šios TVS šablonų. Kam? Pagal šabloną sukurta svetainė žymiai pagreitina projekto pradžią, tačiau jis nebus unikalus. Nors naudojant originalias iliustracijas, vaizdus ir kūrybišką požiūrį, net šablono išdėstymas gali būti neatpažįstamai pakeistas. Pagrindinis privalumas yra tai, kad jūsų svetainė bus interaktyvi ir apskritai graži įvairiuose įrenginiuose.

Naršykite po įvairius šablonus ir išsirinkite jums labiausiai patinkantį. Dar šiek tiek paieškojau Envato Market ir radau labiausiai patikusį Dalton šabloną. Pasiekę demonstracinę šablono versiją, iš karto pamatysite įmonės svetainės koncepciją. Paspaudę meniu galite plačiau pamatyti, kokias funkcijas turi šablonas ir kaip atrodys skirtingi puslapiai. Geriausia tam skirti pusvalandį ir tikrai suprasti, kas yra šablone.

Kas toliau? Svetainės maketo dydžio parinkimas, karpymas ir klijavimas

Kai jums patogu naudoti šabloną, galite pradėti jį pjaustyti. Puiku, jei ekrano skiriamoji geba yra 1920 px ar didesnė – tai leis tiesiog padaryti svetainės dalių ekrano kopijas ir sujungti jas redaktoriuje. Darbas su maketu pradedamas nuo antraštės, tada – įvairūs blokai (body), o pabaigoje – poraštė.

Jums reikės:

• patogus įrankis nufotografuoti pasirinktą sritį (screen capture tool), aš naudoju Lightshot - siūlo išsaugoti vaizdą į atskirą failą arba nukopijuoti į mainų sritį;
• "Photoshop" - skirtas klijuoti iškirptas vaizdų dalis.

Svetainės maketo kūrimo etapai pagal šabloną

1 veiksmas. Pasirinkite svetainės išdėstymo plotį

Nuspręskite, kurį puslapį atliksite pirmiausia. Nepradėkite nuo pagrindinio – geriau palikite jį paskutiniam, nes... Tai yra svarbiausias svetainės puslapis, todėl geriau pirmiausia susipažinti su juo. Pavyzdyje sukursiu puslapį „Apie mus“ – bus įdomios informacijos apie įmonę ir jos darbuotojus. Jau turiu svetainės prototipą, todėl žinau, ką darau. Beje, kaip laikosi jūsų prototipas?

Atidarykite „Photoshop“ ir nustatykite svetainės išdėstymo plotį į 1920 px. To pakaks norint pamatyti, kaip svetainė atrodys naršyklėje. Jei skiriamoji geba mažesnė, nustatykite ją į monitoriaus leidžiamą plotį. Dėl aukščio dar nesijaudinkite – sunku atspėti ir dar teks patempti/sutraukti plotą.

2 žingsnis. Tęsiame svetainės maketo kūrimą „Photoshop“.

Iš šablono išsirinkite jums patinkančią skrybėlę. Iškirpkite jį su patogus įrankis, atidarykite dokumentą „Photoshop“ ir įklijuokite ten (Ctrl+V). Naudokite perkėlimo įrankį (V), kad antraštė būtų viršuje. Man patinka antraštė su viršutine juosta, kur yra įmonės kontaktinė informacija.

2.A veiksmas. Iš karto sukurkite tinkamą svetainės išdėstymą

Dabar turite dvi galimybes – pakeisti tekstą paveikslėlyje arba įrašyti lydintį tekstą į tekstinį failą. Kuris patogesnis? Viskas priklauso nuo jūsų tikslų. Įjungta Asmeninė patirtis Galiu pasakyti, kad tai geriau padaryti makete, iškart pasirenkant šriftą ir dydžius. Tai bus saugesnė ir WYSIWYG veiksmas (What You See Is What You Get, „What you see is what you get“).

3 žingsnis. Eikime į sėkmę

Užpildykite savo maketą skirtingais blokais ir redaguokite juos pagal savo poreikius. Šiame etape jums nereikia žaisti su spalvomis, jei neturite įgūdžių naudojant Photoshop. Norėdami padidinti išdėstymo aukštį, naudokite rėmelio įrankį (C).

Kas nutiko

Po poros minučių mąstymo, iškirpus ir suklijavus labiausiai patikusius gabalus, tai ir gavosi struktūrinis puslapio išdėstymas"Apie mus"

Ko neturėtumėte pamiršti

1. Skambinti kas sluoksnis su bloku adekvačiai, pagal tai, kas ten yra. Priešingu atveju vėliau būsite visiškai pasimetę.
2. Renkantis šriftą, reikia pasirinkti skirtingo dydžio Dėl antraštės ir korpusas tekstą. Tokiu atveju geriau vadovautis „Google Fonts“ žiniatinklio šriftų biblioteka. Nepamirškite išfiltruoti kirilicos šriftų.

2 metodas. Sukurti svetainės maketą „Photoshop“ yra beveik

2 metodas jums tinka, jei:

• neturite Photoshop (jūsų sąžinė neleidžia arba neturite vietos diske) arba dar neišmokote ja naudotis;
• norite susipažinti su HTML kodu ir CSS stiliais nesikišdami į žymėjimą;
• jums reikia interaktyvaus svetainės išdėstymo.

Rekomenduoju puikų nemokamą maketavimo įrankį Macaw. Norėdami dirbti su programa, turite ją atsisiųsti ir įdiegti – tai užtruks porą minučių. Programoje galite praktiškai maketuoti vizualiniu režimu, nes iškart galite jį publikuoti ir matyti HTML kodą bei CSS. Šiek tiek daugiau apie tai, kaip programa veikia. Macaw turi reikšmingas trūkumas- sukuria nereaguojantį tinklalapį. Kaip su tuo susitvarkyti? Čia jau reikės maketuotojo įgūdžių, kad būtų galima sujungti karkasą (pavyzdžiui, jei kuriate svetainės maketą naudodami Bootstrap). Tačiau jei jums tiesiog reikia parodyti savo kolegoms darbo maketą, Macaw puikiai tiks.

Taip skirtinguose įrenginiuose atrodo nereaguojantis šablonas. aš noriu verkti

Norėdami pradėti, paleiskite programą savo kompiuteryje. Jūsų dėmesiui pristatome tuščią 1200 px puslapio pločio dokumentą su svetainės išdėstymo tinkleliu. Pagal numatytuosius nustatymus tarp stulpelių yra užpildymas, todėl tarp sukurtų elementų bus vietos. Turėsite piešti tik stulpelių viduje, nes jei peržengsite juos, blokai atsiras vienas po kito. Taigi stebėkite juos.

Galite savarankiškai nustatyti stulpelių plotį, skaičių ir atstumą tarp jų. Jei norite, kad elementai „priliptų“ vienas prie kito, nustatykite 100% stulpelio plotį ir pašalinkite tarp jų esančią pamušalą. Kam tau reikalingas šis tinklelis? Naudojant svetainės maketo HTML išdėstymą, bus lengviau sukurti adaptyvų šabloną, nes... šiuolaikiniuose karkasuose naudojama 12 stulpelių tinklelis.

Galite pakeisti darbo srities plotį vilkdami ją į dešinę arba patys nustatydami dydį

Kas toliau? Išdėstymas

Sukurkite savo darbo vietą taip, kaip norite, ir pradėkime dirbti. Sukursiu tą patį puslapį, kurį iškirpau iš Dalton šablono.

1 žingsnis.

Pirmiausia reikia sukurti skrybėlę. Taip ir bus konteineris kurio aukštis 100 px, o apatinė kraštinė – 1 px storio.

Kito konteinerio viduje bus logotipas, o kito viduje – meniu. Nereikia kurti atskirų meniu elementų meniu atskiri blokai, pakanka nustatyti priimtiną atstumą tarp žodžių (žodžių tarpus).

2 žingsnis

Su baigta antrašte galite pereiti prie likusių blokų. Kitame bloke turėsiu fone kuri yra būtina atsisiųsti atskirai.

3 veiksmas. Sukurkite interaktyvų svetainės maketą

Toliau tempiu blokus ir įterpiu į juos tekstą. Mygtuką sukuriu naudodamas specialų „Button“ įrankį (logika!). Macaw leidžia sukurti interaktyvų išdėstymą su skirtingomis mygtukų būsenomis ir galimybe perjungti puslapius.

Atkreipkite dėmesį į šiuos paryškintus elementus. Jie padeda perjungti skirtingus blokus ir juos tvarkyti. Pavyzdžiui, tekstas turi būti tam tikrame konteineryje, o ne tik praleisti laiką.

Jei paspausite Failas ->Paskelbti, gausite paruoštą puslapį, kuriame galėsite peržiūrėti HTML kodą ir CSS skirtinguose skirtukuose. Tai labai patogu, jei norite pamatyti kaip atrodo žymėjimas.

Kas nutiko

Pasirodė kažkas tokio. Čia, palyginimui, kairėje yra suklijuotos redaguoto šablono dalys, dešinėje - Macaw sukurtas maketas. Didelis programos pliusas yra tai, kad galite įterpti mygtukus, pridėti prie jų nuorodas, kurti skirtingus puslapius ir naršyti tarp jų. Tik nepamirškite apie konteinerių hierarchiją ir nepasiklyskite juose.

Šio svetainės maketo kūrimo metodo ypatybės:

• Norint suprasti programos subtilybes, reikia skirti papildomo laiko;
• net kai jau įsigilini į programą, vis tiek kartais neaišku, kodėl ji elgiasi taip, o ne kitaip;
• galite pamiršti apie prisitaikymą, jei patys to nebaigsite;
• Tikrai patogu susikurti maketą ir net šiek tiek suprasti išdėstymą – galite pamatyti, kaip elementai sąveikauja ir kokia apskritai yra struktūra;
• tokie dalykai kaip „width: 16.6666666666%“ gali atsirasti stiliuose, kuriuos reikės pataisyti; jums tereikia suprasti, kad tai yra WYSIWG ir nieko daugiau.

3 būdas. Internetinis maketų įrankis

Jei ieškote varianto, kaip sukurti svetainės maketą programoje su paprasčiausia ir intuityviausia sąsaja, šį metodą parengiau specialiai jums.

Patogus infografikų kūrimo įrankis, kurį naudoju jau seniai – paslauga Creately. Yra dešimtys ir šimtai komponentų, skirtų įvairiems įrenginiams (dažniausiai mobiliesiems įrenginiams) sukurti vartotojo sąsajos dizainą. Jums tikrai patiks, kai kuriuos parodysiu.

Vis dar čia patogu redaguoti elementus, pridėkite tekstą (ir net sukurkite mygtukus su nuorodomis!). Apskritai, vos per porą minučių jau gavau tą patį kaip ir Macaw, tik Atsargiau. Tačiau toks išdėstymas negali būti labai interaktyvus. Šio metodo žingsnių nebus, nes... Paslauga yra gerai intuityvi. Ekrane stengiausi parodyti kuo daugiau aptarnavimo galimybes.

„Creately“ paslaugos ypatybės

Tai viskas. Tai buvo metodai, prie kurių priėjau viename ar kitame kūrybinio tobulėjimo etape. Jei ši medžiaga jums naudinga, džiaugiamės.

P.S. Šis straipsnis skirtas tik informaciniams tikslams ir neleis jums tapti interneto dizaineriu. Norint įgyti rimtų žinių, teks dar daug kasti internete.

Architektūrinio prototipų kūrimo skirstymas į darbinį ir ekspozicinį iš anksto nulemia įvairius architektūrinio projektavimo ugdymo proceso tikslus ir uždavinius. Išsikelti tikslai pasiekiami naudojant beveik tas pačias medžiagas, naudojant skirtingas priemones ir skirtingas technikas.

Veikiantys modeliai gaminami pagal preliminarius brėžinius ir eskizus arba visai be jų, kai dar nėra galutinio sprendimo, juo labiau brėžinių. Išdėstymas šiuo atveju yra savotiškas eksperimentinis būsimo objekto modelis, ant kurio jie gali išbandyti įvairių variantų kompozicijas arba kurti naujas (1.6 pav.).

1.6 pav. Veikimas (išdėstymo juodraštis)

Patvirtinus galutinį tūrinio-erdvinio sprendimo variantą, galima padaryti galutinį parodos maketą (1.7 pav.).

1.7 pav. – Demonstracinis gyvenamojo komplekso išdėstymas

Taigi, jei pirmuoju atveju svorio centras techninis sprendimas maketas priklauso nuo architektūrinės idėjos paieškos ir vystymo, antruoju atveju – nuo ​​vykdymo kokybės.

2 Maketo sudarymas

2.1 Maketo vykdymo tvarka

Abiejų tipų maketų gamybos procesus supaprastinta forma galima pavaizduoti tokia darbų seka:

1. Išdėstymo projektinių ypatybių nustatymas.

2. Maketo išskaidymas į lengvai pagaminamus komponentus.

3. Ruošinių žymėjimas ant maketo medžiagos.

4. Ruošinių pjaustymas.

5. Maketo tūrinių elementų surinkimas ir klijavimas.

6. Galutinis atskirų elementų klijavimas.

Prieš pateiktą maketavimo tvarką eina paruošiamasis etapas, kurį reprezentuoja: pradinio projekto (idėjos) analizė; medžiagų, įrankių nustatymas, mastelio ir detalumo laipsnio pasirinkimas.

2.2 Išdėstymo mastelio pasirinkimas

Modelio kūrimo mastą pirmiausia lemia natūralūs originalaus objekto matmenys, tada suvokimo aiškumo sąlygos ir, galiausiai, mokymosi proceso reikalavimai.

Architektūros projektavimo ugdymo procese maketuoti rekomenduojamos šios masteliai:

Mažosios architektūros formos (mikrokvadratas, žaidimų aikštelė, įėjimo ženklas) – 1:10, 1:20, 1:25 (2.1 pav.);

2.1 pav. – Paminklo išdėstymas

Individualūs, blokuojami mažaaukščiai gyvenamieji namai - 1:25, 1:50;

Mažas visuomeniniai pastatai(paviljono interjeras) – 1:20, 1:25, 1:50;

Vidutinio aukšto pastatas (gyvenamasis namas, garažas) - 1: 100, 1: 200.

3 Pagrindiniai metodai ir prototipų kūrimo būdai

3.1 Submodelio kūrimas

Kompozicijos organizavime formuojamąjį vaidmenį atlieka ne tik ją sudarantys elementai, bet ir pagrindas (3.1 pav.).

3.1 pav. – Poplano klijavimas

Submodelio dydis lemia kompozicijos įtakos organizuotos subbazės erdvei jėgą, „panašią į tikrosios architektūros įtakos jėgą, kurią spinduliuoja laisvai stovintys tūriai už jų užimamos erdvės ribų“. Pakeitus pagrindo dydį matosi, kaip keičiasi kompozicijos prigimties suvokimas: vienur tai įtampos, nestabilumo, kitais – ramybės ir statiškumo jausmas. Submodelio svarba ypač aiškiai parodoma giluminės erdvinės kompozicijos darbuose, kur užduoties turinys submodeliui priskiria kompozicinio elemento vaidmenį ir iškelia užduotį „sutvarkyti tam tikrą teritoriją“.

Svarbu ne tik dydis, bet ir pagrindo forma. Taigi, tūrinės kompozicijos submodelis dažniausiai yra kvadrato formos, tai yra stačiakampis, esantis prie pagrindinės matymo linijos, esant giliai-erdvinei kompozicijai; . Taigi submodelio forma pabrėžia, kokiam tipui jis priklauso. Submodelis gali turėti ir plastikinį dizainą. Aktyviausiai tai pasireiškia užduotyse nustatyti formą

Prieš pradėdami kurti objekto maketą, turėtumėte pasidaryti submodelį, kuris pasitarnaus ne tik kaip tvirtas pagrindas, bet ir kaip didelės apimties teritorijos kraštovaizdžio vaizdas (reljefas, vandens paviršius, kraštovaizdis, apželdinimas, įvažiavimai ir pėsčiųjų takai bei laiptai). Kraštovaizdžio elementai yra pagaminti tokiu pačiu mastu kaip ir išdėstymas.

Didelių maketų tvirtumui užtikrinti, pagrindą rekomenduojama daryti ant faneros arba medienos plaušų kartono neštuvų, skirtų mažiems ir lengviems maketams – ant gofruoto (pakavimo) kartono arba planšetės.

Pagaminus vientisą pagrindą, klijuojamas poplanas (3.2 pav.).

3.2 pav. – Poplano sudarymas su reljefo reljefu

Poplano reljefas padarytas pagal brėžinius su nurodytomis horizontaliomis linijomis. Jei išdėstymas apima vandens paviršius, tada reljefo gamyba prasideda nuo jų - nuo žemiausio lygio. Prototipų kūrimo praktikoje dažniausiai tam naudojamas poliruotas popierius arba kartonas, rečiau – organinis stiklas. Prie pagrindo (vandens veidrodžio) klijuojamas tonuotas (spalvotas) popierius, pažymima ir nubrėžiama pakrantė, nuo kurios prasideda reljefo kilimas.

Atsižvelgiant į pasirinktą mastelį ir ploto aukščių skirtumą, pasirenkamas vienoks ar kitoks reljefo darymo būdas.

1. Esant nedideliam aukščių skirtumui – ramus reljefas su retomis horizontaliomis linijomis išilgai kiekvienos horizontalios linijos kontūro – ruošiniai išpjaunami ir klijuojami nuosekliai, iš apačios į viršų (3.3 pav. a). Jei kartono storis neatitinka aukščių skirtumo mastelio, tarp ruošinių „ant krašto“ reikia klijuoti popieriaus arba kartono juosteles (3.3 b pav.).

2. Esant dideliam aukščių skirtumui – stačiu reljefu (su dažnesniu horizontalumu) – reljefo gamyba gali būti, kaip ir pirmuoju atveju, bet su dideliu skaičiumi ruošinių – horizontaliai, arba klijuojant popieriaus ar kartono juosteles. „ant krašto“ išilgai horizontalių atitinkamo aukščio linijų (3.3 pav. c). Taip padarytas reljefas yra gana išraiškingas, tačiau ant jo sunku išdėlioti pastatų modelius ir kraštovaizdžio elementus, todėl šis metodas labiau tinkamas darbiniam maketavimui.

3. Kai kuriais atvejais, kai vaizduojant reljefą nereikia ypatingo tikslumo, žemės paviršius imituojamas suglamžytu kalkiniu popieriumi arba popieriumi (3.3 pav. d). Šiuo atveju reljefas pasirodo išraiškingas ir natūralistinis, bet gana sutartinis. Pirmaisiais dviem atvejais maketo reljefo išraiškingumas ir kokybė yra tiesiogiai proporcingi ruošinių arba horizontalių juostų skaičiui. Atsižvelgiant į tai, prieš darant modelį, rekomenduojama atkurti ir nubrėžti papildomas horizontalias linijas su tarpiniais aukščiais tarp pagrindinių reljefo kontūrų brėžinyje, kad vėliau būtų galima jas klijuoti modelyje.

Paruošę submodelį, jie pradeda daryti objekto maketą

Kartais pasitaiko situacijų, kai nereikia kurti svetainės nuo nulio, kruopščiai išdirbant jos koncepciją. Šiandien internete galite rasti daugybę nemokamų šablonų, kuriuos naudodami galite greitai sukurti gražią ir šiuolaikišką svetainę. Interneto puslapių dizainas nestovi vietoje – jame nuolat atsiranda naujų tendencijų, kurios daro didelę įtaką dizainerių darbo rezultatams. Labai džiaugiuosi, kad daugelis dizainerių nėra godūs ir dalijasi savo darbo vaisiais, skelbdami maketus ir šablonus, kad jie būtų prieinami nemokamai. FreelanceToday atkreipia jūsų dėmesį į 15 nemokamų PSD svetainių maketų, kuriuos galima naudoti tiek asmeniniuose, tiek komerciniuose projektuose

Nemokamas restorano nukreipimo puslapio šablonas. Išdėstymas pasižymi drąsiu požiūriu į dizainą ir puikiai tinka kavinės ar restorano svetainei. Labai apgalvotas dizainas – išplanavimas turi 37 blokus, kurie išdėstyti taip, kad svetainės lankytojas norėtų apsilankyti restorane.

Gražus ir stilingas šablonas, sukurtas dizainerio Orkan Sep. Pagrindinis šio vieno puslapio skirtumas yra maloni spalvų schema ir šešiakampių, kaip pagrindinio dizaino elemento, naudojimas.

Šis išdėstymas gali būti naudojamas kaip pagrindas kuriant portfelio svetainę fotografams ir iliustratoriams.

Išdėstymas su paryškintu ir modernus dizainas. Šviesūs blokai sąveikauja su tamsiais, o tai labai supaprastina sąveiką su svetaine. Kaip rodo pavadinimas, šis šablonas buvo sukurtas atsižvelgiant į kūrybinių agentūrų, interneto studijų ir kitų kūrybinių asociacijų poreikius.

Puikus šablonas dizaineriams, kūrėjams ar laisvai samdomiems darbuotojams, norintiems pademonstruoti savo darbą ir įgūdžius. Dizainas suteikia galimybę skelbti naujienas ir teminį turinį.

Šis nuostabus šablonas, sukurtas dizainerio Camille Koperwa, gali būti naudojamas kuriant dizaino agentūros svetainę. Kuriant šabloną buvo naudojami tik nemokami šriftai, kuriuos galima naudoti tiek darbalaukio, tiek mobiliosiose svetainės versijose.

Šį universalų svetainės šabloną sukūrė PixelMustashe. Įspūdingas darbas – pagal šabloną galima sukurti modernią kelių puslapių svetainę. Iš viso makete yra 16 failų, kurie yra sluoksniuoti PSD maketai. Puikiai suprojektuotas tinklelis, paprastas ir švarus dizainas – išdėstymas tinka kurti pačias įvairiausias svetaines.

Kitas kūrinys, kurį nemokamai padarė PixelMustashe studija. Šabloną sudaro 8 lengvai redaguojami PSD failai – tokie yra pagrindinio ir vidinio puslapių išdėstymai.

Sukurtas dizainerio Ernesto Asanovo, šis maketas gali būti naudojamas įvairiems tikslams. Tačiau akivaizdu, kad šablonas buvo sukurtas norint sukurti komercinę svetainę, kurioje parduodamos bet kokios prekės. Tai ne internetinė parduotuvė, o svetainė, kurioje parduodami du ar trys produktai tokiu atveju– nuotraukų knygoms. Tačiau tai netrukdo jums naudoti šio išdėstymo savo poreikiams.

Šis nemokamas šablonas puikiai tinka viešbučio ar, pavyzdžiui, kurorto vizitinių kortelių svetainei. Šablonas įdomus, bet turi šiek tiek keistą tinklelį, kuris tiks ne visiems.

Modernus portfelio svetainės šablonas. Tinka tiek agentūroms, tiek solo freelanceriams. Tereikia pakeisti tekstą ir, jei reikia, iliustracijas.

Norite sukurti stilingą tinklaraštį? Atsisiųskite šį nemokamą unikalaus dizaino šabloną, kuris lankytojams paliks puikų įspūdį.

Norite sukurti svetainę tatuiruočių salonui, bet nežinote koks turėtų būti jos dizainas? Galite eksperimentuoti su šiuo nemokamu šablonu arba naudoti jį kaip savo dizaino pagrindą.

„cLand“ šablonas yra labai paprasto ir švaraus dizaino nukreipimo puslapis. Idealiai tinka norint sukurti nukreipimo puslapį su nedideliu turinio kiekiu.

„YukNgalam“ maketas, sukurtas dizainerio Dani Rizki, bus naudingas tiems, kurie nori sukurti vadovo svetainę. Maketas yra nemokamas ir gali būti naudojamas asmeniniams ir komerciniams projektams.

Nedaug žmonių žino, kad vienas iš veiksmingi būdai dizainas yra išdėstymas. Juk kuriant maketą daugelis Momentų tampa aiškesni nei brėžinyje, todėl projektuojant reikia naudoti šį metodą. Tai yra, maketuojame ne galutinei projekto vizualizacijai, o detaliam projektui. Išdėstymas ugdo tūrinį-erdvinį matymą ir architektūrinį-vaizdinį mąstymą. Tai labai svarbu projektavimo procesui. Veikiantis išdėstymas leidžia vizualiai pristatyti savo idėjas ir laisvai operuoti su tūriais ir erdve.

Grandioziniai planai – laivo, katedros, tvirtovės statyba – retai kada būdavo užbaigiami be maketų. Kotrynos laikais Rusijoje veikė dvaro juvelyrikos dirbtuvės, gaminančios nuostabius dalykus – vežimų, laivų, rūmų maketus. Petras Didysis buvo puikus modelių kūrėjas ir labai vertino šį meną. Sankt Peterburge, Karinio jūrų laivyno muziejuje, yra puikus caro pagamintas karo laivo modelis (tai sudėtingiausias modeliavimo tipas).

vidaus išdėstymas iš popieriaus ir kartono

Išdėstymai yra skirtingi:

• Grubus maketai daromi siekiant suprasti dizainą ir tūrius (gali būti pagaminti iš bet kokių medžiagų, bet paprastai tai yra kartonas)
• Galutiniai galutiniai maketai yra trimatė projekto vizualizacija

Medžiagos, iš kurių gali būti pagamintas modelis, gali būti bet kokios, tačiau paprastai pagrindinė modelio medžiaga yra popierius ir kartonas, nes tai yra prieinamos ir lengvai apdorojamos medžiagos. Daugelis elementų gali būti pagaminti iš gofruoto kartono, jį lengva pjaustyti ir klijuoti.

Grubus maketai dažniausiai gaminami iš gofruoto kartono. Tačiau apskritai grubiam išdėstymui galite naudoti bet kokį kartoną ir popierių, svarbiausia, kad dirbdami su medžiaga jaustumėtės patogiai.

Kokiu masteliu turėtų būti padarytas išdėstymas?

Mastelis turi būti parinktas taip, kad jums būtų patogu projektuoti išplanavime ir, žinoma, mastelis priklausys nuo faktinio objekto dydžio, pavyzdžiui, projektuodami buto projektą galite paimti 1 skalę: 10, o tai reiškia, kad vienas tikras metras jūsų išdėstyme bus 10 centimetrų tokio didelio masto. Jums bus lengva suprojektuoti ir viskas bus labai aišku. Bet jei skalė jums vis tiek atrodo didelė, galite pasirinkti kitą mastą.

Kokių įrankių reikia maketui sukurti?

Jums tikrai prireiks gerų įrankių, kurie palengvins ir malonų darbą.

1. Parduotuvėje galite nusipirkti kepimo lentos peilį arba geriau iš karto nusipirkti atsarginius peilio peiliukus, nes jie greitai tampa nuobodu ir lūžta. Arba galite pagaląsti ašmenis, priklijuoti ant medienos plaušų plokštės gabalo su nuliniu švitriniu popieriumi ir, kai bus ištrintas visas abrazyvas, turėsite puikią taisyklę duonos lentos peiliui.
2. Pjovimo kilimėlis, patogus pjaustyti ir ant tokio kilimėlio nesulaužysite duonos lentos peilio galiuko
   
3. Klijais, klijų tikrai prireiks, galite imti PVA arba Moment. , Vis dėlto jie naudoja PVA klijus.
4. Geležinė liniuotė, ant kurios tiksliai iškirpsite savo maketo detales. Jums taip pat gali prireikti metalinio kvadrato.

Žinoma, norint sukurti maketą, reikia tam tikrų įgūdžių ir patirties dirbant su popieriumi. Bet aš tikiu tavimi, tau pasiseks.