A webdesign titkai
És most megtudhatja, hogyan készíthet különböző vázlatokat, a jövőbeli helyszínek különböző formatervezési mintáit.
Oké, kezdünk. A téma már, mint mondtam, a teremtés prototípusok, mint ez, amit most látni a képernyőn, mondjuk, a jövőben a helyszínen. Kezdjük egy kicsit részletesebben, hogy mondja el, hogy miért, és hogyan hasznot húznak belőle, mert végül is, tudnia kell a választ arra a kérdésre, hogy mi az, amire szükség van, vagy csinálod hanyagul. Ha megérted az előnyöket, ennek megfelelően mindent megteszek, sokkal nagyobb hajlandósággal. Tehát a téma az interneten, ha megnézi az orosz nyelvű, sokan vannak a különböző módon: néhány nevezni skeyching, valaki felhívja prototípus, valaki felhívja mekapy. Röviden, például nem tanítják az orosz nyelv - a fő cél az, hogy megtanulják a design, ezért vagyunk, hogy úgy mondjam, a szakmai szleng nem zavarja, és meg fogja vizsgálni, mondjuk, a lényege. A lényeg az, hogy a fő cél az, hogy felvázoljuk a helyszínen erről, amit most látni: egy nagyon egyszerű, ahol minden szükséges blokkokat, akkor látni mindent, minden világos, és ennek megfelelően rajta akkor már mozgatni a Photoshop és a munka révén minden elemekkel. Válaszoljunk a kérdésre: miért kell ezt tenni? Valójában az ok nagyon egyszerű.
Tekintsünk egy teljesen normális helyzetet, hogyan kezdődnek a munkások, hogyan működnek a szakemberek. A kezdők általában a folyamat halad, hogy akadozik, és azt hisszük, hogy „Ó, én jobban azonnal folytassa a munkát a Photoshop, megkíméli az időben, és a gyorsabb eredményeket.” Valójában a gyakorlatban mindent pontosan az ellenkező, és az általuk elért eredmények sokkal hosszabbak. Miért történik ez? Nézzük a szokásos, banális helyzetet. Új tagunk lesz, ez egy profi. Az újonnan érkező azonnal megy a Photoshopba és elkezdi rajzolni valamilyen weboldal tervezést ott. Vagyis feltételesen rajzolok néhány elemet. Vagyis képzeljük el egy pillanatra, hogy ez egyfajta gyönyörű grafika. Ugyanakkor a szakember először ugyanazt a dizájnt szereti hagyományos, mondani, papírra, hagyományos ceruzára. Körülbelül ugyanaz a webhely. Képzeljük el, hogy mind az emberek felhívni a tervezési adatok egyes ügyfelek, a munka bármely stúdióban vagy szabadúszó, vagy tudnak felhívni magad, de ez nem számít. Tegyük fel, hogy van az első szakaszunk - ez egy prototípus létrehozása, a második szakasz a Photoshopban végzett munka. Nagyjából elmondható, hogy vannak új kiadási chesov 0, min, szakmai ráfordítás, nos, mondjuk, 3-4 óra. Ezután újonc felhívja a tervezési 2 nap (de általában az újonnan felhívni sokkal gyorsabban és mindannyian kap egy pár óra, 2 nap általában nincs), és, mondjuk, ugyanaz a dolog történik a szakmai, azaz 2 nap. Ha most megnézzük ezt a helyzetet, látjuk, hogy a szakember több időt töltött, és az eredmény elvben ugyanaz. De nagyon gyakran kiderül, hogy az ügyfél nézett munka eredménye, és azt mondja: „És ne átrendezni olyan egység, vagy hogy ez nem egy tér, de például a teljes szélességben. Nos, ezek kompatibilisek, itt a grafikát teljesen el kell távolítani, a menük is változnak, és így tovább ... ". De mi a különbség? Az ügyfél, amikor az elrendezést nézte, itt prototípust készített. Ez azt jelenti, hogy a végeredmény mind ugyanazon 2 nap 4 óra. Itt az ügyfél jóváhagyta. Vagyis minden, a hivatásos az elrendezést. És az újonc mindent vissza kell vonnia, mert nem mutatta az elrendezést. Ennek megfelelően még 1-2 napot tölthet. Azaz, a legjobb, átadja a munka területén 3-4 nap, mert akkor kell újra mindent szinte a semmiből, mert ott valószínűleg menetrend, hogy ha a nagyítás, átméretezés, elveszíti a minőség. Mi lesz, hogy kezelje újra, egyes elemei újra döntetlen (a legtöbb, 80 százalék), és ennek megfelelően, van egy csomó időt. És hasonlítsa össze az eredményt: itt 3-4 nap, és itt - jól, átlagosan 2 nap és 4 óra. Kiderül, hogy a végső soron, ha figyelembe vesszük, az egész folyamat, amikor megkaptuk a sorrendben, amikor elhaladtunk, amikor felhívjuk a prototípus, majd ennek megfelelően végül jön ki még mindig kevesebb, bár kezdetben azt mutatják, hogy ez valamiféle ostobaság, és nem szabad részt venni benne. De ha azt tervezi, hogy nem külsős munka, vagy valahol a stúdióban, akkor az Ön számára ez egy szükséges eleme a kötelező és nélküle nem tudsz. Igen, általánosságban, hogy őszinte legyek, anélkül, hogy ilyen kidolgozásra kerülne, nagyon nehéz lenne magas színvonalú tervezést létrehozni. Mert ha vizuálisan bemutatott legalább néhány modellt, amely akkor már alkalmazza a kiváló minőségű anyagok, blokkok, grafika, és így tovább, akkor sokkal könnyebb lesz. Vagyis a fejed már szabad lesz, csak technikailag kell mindezt végrehajtania. Ha nem, akkor az elméd lesz egy csomó gondolat arról, hogy minden ezen a helyen össze, az elemek egymás tetejére ne mássz, nem bujkál, és így kell, hogy legyen, hogy jöjjön feldolgozás. Ennek megfelelően a fej felrobban egy halom gondolatokból. Nos, azt hiszem, ilyen érvek után meggyőztem, és mindig ilyen prototípusokat fogsz csinálni.
Továbbá ugyanúgy választhatók ki a már látott árnyalatok, vagy átlátható elemekké válnak. Lehet, hogy piros, például aktív menüpontként. Tehát, elvben ez egy egyszerű szerkezet, a ... pontosabban nem a teremtés, hanem a szolgáltatással. Számos egyéb paraméter is létezik. Mutassuk meg. Itt lehet mondani, elemek, tedd valamit a tetejére, valamit alul, vagyis a rétegek a Photoshopban. Vagyis, ha ezt a kört a menü alatt akarjuk elhelyezni, akkor erre a pontra kell menni, és ennek megfelelően a hátsó égőre kell helyezni. Amint láthatja, a menü megjelenik az előtérben. Ennek megfelelően, ha mindezeket az elemeket szerkesztette, ne akarja véletlenül mozgatni őket egérrel, akkor kiválaszthatja ezt az elemet és nyomja meg a zárat. Ennek megfelelően, ha megpróbálja mozgatni ezt az elemet, a nifiga nem működik. Itt van egy tipp egy vörös zárolás formájában, amely azt mondja nekünk, hogy ha módosítani szeretnénk, el kell távolítanunk ezt a beállítást és mozgatni. Ez minden elemre vonatkozik. Nem számít, mi ez: néhány blokk, szöveg vagy kép, és így tovább. Készült a kényelemért. Ugyanúgy, itt, mint egy photoshop-ban, van egy történet, közvetlenül tárolódik a szerveren, a nyilakkal megy keresztül oda-vissza. Vagyis nézz a képernyőre, rákattintok a nyílra, a nyíllal előre, emlékszem néhány műveletre, és mozoghatok. Elvileg ez is nagyon kényelmes feladat. Egyébként a gyorsbillentyűk pontosan ugyanazok, mint a Photoshopban. Elég kényelmes. Ráadásul az elemeket egymáshoz képest is igazíthatjuk. Vagyis itt van egy ilyen paraméter beállítás a felső szélen, balra igazítás és így tovább. Nos, elvileg nagyon hasonlít a photoshop elemeire. És ennek megfelelően tudunk dolgozni néhány elemcsoporttal, mozogni. Ha valamit meg kell mozgatnia, kiválasztja azt, nyomja meg a Shift gombot, ha folytatni szeretné a munkáját, majd kattintson erre az ikonra. Ha később, amikor működött, úgy döntött, hogy egyedileg kell dolgoznia - nyomja meg ezt a gombot, és az elemek egyenként csendben mozognak. Ha van tippje valahol, akkor be- / kikapcsolhatja ezt az ikont. De most még nincsenek, írjunk valahová. Csak írj egy példát. Elrejtettük és megmutattuk. Amikor ilyen pontok vannak a pontokban - ez azt jelenti, hogy van egy nyomunk itt. Amikor az egér fölé tartunk, megjelenik a csúcs szövege. Ugyanaz van itt. Ennek megfelelően, ha akadályozza Önt, kattintson erre az ikonra, és eltűnnek, hogy legyen tiszta elrendezés.
Rendben van. A programot majdnem kitaláltuk. Elég néhány funkció maradt. Itt megváltoztathatjuk ezt a rácsot is. Vagyis most van négyzetünk, itt megváltoztathatjuk a szokásos papírt és ennek megfelelően az oszlopot. Pontosan ugyanaz a rács moduláris, mint a Photoshopban. Továbbá be tudjuk kapcsolni a hálózatot. Nem tudom, milyen hatással van ez a beállítás, bármennyire is keményen próbálkozom. Továbbá megváltoztathatjuk az oszlopok ezen távolságát. Amint látod, növekedünk és a négyzetek nagyobbak lesznek. Akkor megváltoztathatjuk ... az ötletet megváltoztatni ... a vonalak színe itt van, de valamilyen oknál fogva nem változik. Legalább nem látok egy figurát.
Most beszéljünk a lépésenkénti algoritmusról, hogyan rajzolom ezeket az elrendezéseket. Őszintén szólva, barátaim, azt javasolnám, hogy még mindig egyszerű papírdarabot húzzon kézzel, mert ez a folyamat sokkal gyorsabb, érdekesebb, és azt mondja, hogy fejleszt néhány tervezési ismeretet. Itt minden nagyon sokáig történik, és azt javaslom, hogy használja ezt a szolgáltatást, ha szeretnél egy kis bemutatót tenni az ügyfelek számára úgy, hogy szépebben, mondjuk, és bemutathatónak tűnjön. Szóval, nyissunk meg egy új lemezt most, és lépésről lépésre elmondom, mit kell tennie, hogyan kell felhívni. Vagyis egy szokványos ceruzát fogok venni. Ennek megfelelően az első pillanatban mindig meghatároznom az elrendezés szélességét. Általában rögtön világossá válik a technikai feladatról, amelyben megérted, mi lesz a célközönség, vagy az ügyfél azonnal korlátozza Önt - mondja az itt található szélesség, és egyszerűen csak kalapál. Mondjuk 800 pixel széles. Vannak különböző esetek. Néha valami hitelezést szoktál mondani, és az ügyfél azt mondja, hogy 640 képpont szélességűre van szükség. De az ügyfelek különféle furcsairól van szó, ezért először is meghatározom a szélességet. Ezután rajzolok egy kupakot. Vagyis szeretném felhívni az ötletet, és mi lesz ott. Ez például néhány hegy, egy ház. Ha megnézed, hogyan festek papírra, akkor mindent megtörténik. Tegyük fel, hogy itt ül egy család, általában itt helyeztem ezeket a nyilakat, és aláírtam, mert akkor, amikor elkezdem néhány órát rajzolni a Photoshopban, nem értem, hogy mit festettem. A feliratok szerint ennek megfelelően érthető. Azt javaslom, hogy ugyanazt a módszert használja. Plusz tudom írni, milyen hatások lesznek. Ezután egy menüben dolgozom, vagyis különböző elemeket. Ezután különböző tartalmú blokkok vannak. Ez azt jelenti, hogy például tudom, hogy 3 azonos mondatunk lesz, ugyanazok lesznek, és különösebben egyedül dolgozom, mert nem látok okot arra, hogy ugyanezt tegyem a többiekkel, mert ugyanazok. Ennek megfelelően ezt a tömböt veszem el, különösképpen dolgozom. Azaz, például itt, lenne néhány kép itt - valamilyen gomb, itt - mi lesz balra igazított szöveget, itt például valamilyen referencia. Ennek megfelelően, mivel Számunkra ezek az elemek megismétlődnek, csak egy ilyen elemet kell rajzolni. És ennek megfelelően az utolsó pillanatban az alagsorban dolgozunk, ahol különböző kapcsolatok, talán duplikált menük és így tovább. Vagyis az ilyen nem feltétlenül fontos információk. Ez minden.
Nézzük meg újra és írjunk le, valószínűleg, formátumban. Az első pont a szélesség. A második pont a kalap. A harmadik pont a menü (elég fontos pont, mert a navigáció fontos a webhelyen). A negyedik tartalommal rendelkező blokkok. Ide itt lehet néhány kép, néhány blokk szöveggel, termékkártya az online áruházban, töltés valamilyen formában stb. Röviden, mindaz, ami ilyen formában van, vagyis egy olyan tér, amely vizuális határa van rajzolva, vagy sem, és van némi, nagyjából szó szerint információ. Itt osztom ezeket az elemeket ilyen különböző blokkokba. És ennek megfelelően az ötödik pillanatban mindig van egy pincem, vagy amit lábszárnak neveznek. Őszintén szólva egy ilyen egyszerű terv. Ismét, hogy megértsük, melyik működik legjobban: egy papírlapon vagy egy számítógépen próbálkozzunk mindkét irányban. Te magad fogja megérteni, melyiket szereted legjobban, melyik gyorsabban és hatékonyabban működik az Ön számára, és ennek megfelelően saját maga határozza meg, hogy mit fog működni a jövőben. És egyenletesen jöttünk, barátok, a házi feladatra. Igen, majdnem elfelejtettem, ezek az elemek, amelyeken dolgozunk, először a főoldalon keresztül dolgozunk - az oldalról, amelyet az illető kap. Amikor mindezen elemeket dolgoztuk, áttérünk a belső oldalak rajzolására. Miért? Mivel a belső oldalon található elemek nagy része a főoldalról indul. Mivel pontosan ugyanolyan szélesség lesz, pontosan ugyanaz a kalap, pontosan ugyanaz a menü, csak a blokkok fognak változni, az alagsor marad. Vagyis a belső oldalainkban lényegében csak egy pont van, amely változik - a negyedik (blokk). Minden más marad velünk. Ezért először fejlesztjük a fő lépést, és ennek megfelelően a második pillanatban belsőeket fejlesztünk. Ha te, mondjuk, először belső fejlesztést akarsz, majd menj a főbe, ne csináld, mert sok időt töltesz. Pontosan erre kell irányulnia. Nos, ekkor vége lesz. Mint mondtam, azt javaslom, hogy mindkettőt próbáld ki. Szerintem meg fogod érteni, hogy könnyebb rajzolni egy papírlapra. Ezt kinyomtathatja itt egy sablon, próbálja meg festeni rajta.
Köszönjük a figyelmet és hamarosan találkozunk!
