hozzon létre egy tiszta Webhelyelrendezést a Photoshopban – a webhelyelrendezés megtervezése több, mint színes képek rendezése és néhány szöveg kitöltése a szövegkeretekben. Ez egy olyan megközelítés, amely sokat beszél az ügyfél üzleti tevékenységéről. A weboldal színei és grafikája határozza meg az üzlet jellegét, míg a design minősége és a weboldal könnyű navigációja összekapcsolja a felhasználót a szervezettel, és potenciális vásárlóvá teszi.
minden wannabe webdesigner számára kötelező egy jól kinéző és könnyen hozzáférhető weboldal elrendezés megtervezése. Ez a bemutató célja, hogy végigvezeti Önt a weboldal elrendezésének egyszerű és tiszta webhelyének létrehozásának folyamatán a semmiből. A folyamat során fontos pontokat fog megtanulni, amelyek segítenek abban, hogy további ismereteket szerezzen a webtervezéssel kapcsolatban.
írja le a követelményeket a weboldal elrendezésének megtervezése előtt.
mielőtt elkezdené a weboldal elrendezését, tudnia kell, hogyan fog kinézni a webhelye, és milyen témákat kell tartalmaznia a webhelyen. Nagyon fontos, hogy egy listát a honlapon elrendezés elemek az ügyfél igényeinek a honlapján. Ezzel együtt, a jó tervező minősége az, hogy elkészíti a teljes weboldal makettjét, mielőtt elkezdi dolgozni a végső sablonon.
indítsa el ingyenes tervezési tanfolyamát
3D animáció, modellezés, szimuláció, játékfejlesztés & egyéb
különböző tervező cégek alkalmazkodnak az előtervezési stratégiák különböző szintjeihez, amelyek tartalmazhatnak huzalkereteket, prototípusokat, maketteket, béta verziókat és még sok mást. Ebben az oktatóanyagban létrehozunk egy makett verziót, mielőtt elindítanánk az eredeti sablontervet. A szürke árnyalatokat használom, amelyek lehetővé teszik a makettblokk azonosítását.
Canvas
évekkel ezelőtt, bár nagyon kevés operációs rendszer és korlátozott eszköz volt a webhelyek eléréséhez, az oldal méreteit egy vagy két méretre rögzítették. Ma a forgatókönyv teljesen más. A végfelhasználók különböző méretű asztali számítógépeken, mobiltelefonokon, iPadeken és táblagépeken érhetik el a webhelyeket. Ebben a változatos helyzetben nincs esély arra, hogy weboldalát egy adott méretre javítsa. De vannak olyan ipari szabványos méretek, amelyeket minden eszközre alkalmaznak. Lassan megtalálja kedvenc méretét, vagy az ügyfél hivatkozhat egy weboldalra, hogy utánozza a méreteket.
ebben az esetben a következő dimenziókon dolgozunk. Ne aggódjon a magasság miatt, mivel az idővel változni fog. Minél több tartalmat ad hozzá webhelyéhez, annál nagyobb lesz a magasság.
ne feledje, hogy gyakori az oldal függőleges lefelé görgetése, így előfordulhat, hogy nem rögzít egy adott magasságot a weboldalához, hacsak nem akarja, hogy a felhasználó Google-ként görgessen a kezdőlapján. De nem szükséges vízszintesen görgetni. Tehát korlátozza szélességét az ipari szabványok szerint, és ne legyen kreatív a vízszintes görgetéssel.
a web esetében a felbontás 72-re korlátozódik. Nagyobb felbontású képek és oldalak találhatók az iPadeken és néhány táblagépen az utóbbi időben. De ez egy ritka alkalom, és jobb, ha ragaszkodni 72 figyelembe véve az internet sebessége az egész világon.
válassza ki a fájlokat a Ctrl + A paranccsal, és rajzoljon útmutatókat egyformán a sablonban. A weboldalt szépen kell megszervezni, minden elem egymással koherensen elrendezve. A weboldal elrendezési irányelvei pedig segítenek abban, hogy könnyen megszerezzék.
készítsd elő a makettet.
ha a makettfájlt az eredeti sablonra helyezi, rengeteg időt takaríthat meg. A webhely tervezése olyan egyszerűvé válik, hogy néhány percen belül befejezi a keretet. A makett azonban csak a keretek megtervezésében segít. A tervezés elemeinek befejezése részletekkel, típuselrendezéssel és igazítással több időt vesz igénybe, mint a weboldal elrendezésének rajzolása.
színséma és egyéb lehetőségek
a következő dolog, hogy miután a keret készen áll, hogy válasszon egy színséma. De jobb, ha készen áll a színeire, mielőtt elkezdené a tervezést.
az egész dolog arra az üzenetre vezethető vissza, hogy készítse elő a fegyvereket, mielőtt elkezdené a tervezést. Minden, beleértve az ikonokat, képeket és színválasztékot, készen kell állnia a munka megkezdése előtt. A munka megszervezése és megtervezése több időt takarít meg, és a tervezésre összpontosít, akadály nélkül.
a színek kiválasztása a tervező választása lehet, ha a vállalat új, és korábban nem rendelkezik vállalati identitással. Az ügyfelek képet adnak arról, hogy bizonyos esetekben milyen árnyalatokat akarnak a logónak vagy a háttérnek. A meglévő vállalatok esetében, ahol szükség lehet egy teljes webhely újratervezésére, előfordulhat, hogy ugyanazokat a színeket kell választania, mint az ügyfél igényei.
számos olyan weboldal található, amelyek segítségével több millió színsémát választhat az archívumokból. Próbálja ki a következő weboldalakat, hogy élvezze a színkombináció széles választékát.
Szín.vályog.com
Colourlovers.com
itt néhány kék árnyalatot választottam a weboldal használatához. Az egész weboldalt a következő színsémán belül tervezik meg. Ne felejtsen el három vagy négy különböző színkombinációt választani, mivel nem tudjuk, melyik színt részesíti előnyben az ügyfél. Miután az ügyfél véglegesítette a színsémát, mentse el az árnyékértékeket, és győződjön meg arról, hogy a színek létfontosságú szerepet játszanak a szervezet minden vertikális részében, különösen a vállalati identitásban.
tervezési folyamat
számos módja van a tervezők folytatásának. Nincsenek kemény és gyors weboldal-elrendezési szabályok A tervezés folyamatának meghatározására vagy követésére; ez többnyire egy olyan folyamat, amelyet a tervező a kényelme érdekében választ.
egyes tervezők a teljes blokkokat és kereteket szeretnék felépíteni, és a második szakaszban elkezdenek dolgozni a részleteken, majd a típuson, végül az igazításokon és a beállításokon. Néhányan szeretik egyszerre befejezni az oldal egyik részét, és a következő részre vinni. A második stílust követjük.
a következő lépésekben fejezzük be a weboldalt
- fejléc & lábléc
- mit csinálunk
- szolgáltatások
- Form
- hírek
- lábléc
fejléc & lábléc
a fejléc vagy szalaghirdetés dimenzióinak meghatározására vonatkozó ökölszabály a kreativitásra van bízva. A legújabb trendek szerint a webhelyek hatalmas képpel jelennek meg, amely lefedi a számítógép teljes képernyőjét. A stílust Hősképnek nevezik, amely a közelmúltban nagyon népszerűvé vált.
ebben az esetben 120 pixel magasságú fejléccel és 550 pixel magassággal kezdtük a szalaghirdetést. A szélességnek meg kell egyeznie a dokumentum méretével.
az Egyszínű minták lapos megjelenésűek, ami nem megy jól nagyobb képkockákkal vagy képekkel. A lapos megjelenés elkerülése érdekében gradiens overlay réteget alkalmaztam a szalaghirdetés tetejére. Olyan mélységet ad a szalaghirdetésnek, amely lassan átalakul egyik árnyékból a másikba.
ezután elkezdtük importálni a logót, és a fejléc bal felső sarkába helyeztük, egy másik nagyobb logót pedig a banner közepére. Megfigyelheti a jobb felső sarokban található weboldal elrendezési vektoros alakzatokat is, amelyeket a közösségi média linkjeinek megosztására használnak.
ebben a szakaszban befejeztem a típus hozzáadását a fejléc & szalaghirdetés részébe. A cég neve, márkaüzenet, linkekkel és szolgáltatásokkal együtt kerül a szövegbe. Megfigyelhet egy átlátszó gombot is a szalaghirdetésen.
az egyszerű szöveg vagy a speciális funkciók nélküli túl sok típus elrontja a weboldal megjelenését; az oldal hamarosan unja a felhasználót, ami gyorsan elhagyhatja webhelyét. Nézze meg a vektor alakját, amelyet hozzáadtam a szalaghirdetés jobb felső sarkában található szolgáltatási linkekhez. A stílus Egyszerű, mégis kitölti az űrt, elkerülve a hétköznapi megjelenést.
válassza ki a vállalkozásnak megfelelő képet. Több millió stock kép érhető el az interneten, és nem fog túl sokáig találni egy olyan képet, amely megfelel az Ön igényeinek.
az én esetemben találtam egy kiváló minőségű képet, amely szerintem jól fog menni a weboldalammal. Nincs üzleti témám a weboldalhoz, ezért szabadon választhatok bármilyen képet, amely jól néz ki a szalaghirdetésen.
próbálja meg letölteni néhány HD képek a szabad stock kép oldalak alább
www..com.
a keverés olyan művészet, amelyet el kell sajátítania, hogy gyönyörű szalaghirdetéseket készítsen. Itt három réteget kevertem a fenti képen látható hatás elérése érdekében. Itt van, amit tettem
- helyezze a képréteget a kék színű szalaghirdetés tetejére
- helyezze a színátmenet átfedést a kép fölé
- változtassa meg a kép átlátszatlanságát 40 százalékkal, és változtassa meg a keverési módot különbségre.
- nézze meg a rétegek palettáját a fenti képen, hogy megértse, hogyan vannak egymásra rakva a rétegek.
így fog kinézni a fejléc & Banner, amikor éppen befejeztük a munkát. Egyszerre dolgozunk egy részen, és itt az ideje, hogy továbblépjünk a következő szintre.
az Igazítás elengedhetetlen a típushoz; legyen elképzelése arról, hogyan kell kinéznie a webhelyének, és a szöveget hozzá kell igazítani, mielőtt elkezdené. Ezen a szinten két különböző szövegkeretet használtam, mindkettő balra igazítva.
a következő lépés a weboldal szolgáltatások részének megtervezése. Szürke árnyalatú fémcsillagot terveztem a vállalat különféle szolgáltatásainak bemutatására. A csillag szimbólum használatának szándéka az 5 csillagos szolgáltatások.
a szöveg összehangolásakor az útmutatók a legjobb barátok. A típuson és a tárgyakon belüli koherencia a fehér tér és a tervezési elemek közötti egyenlő rések megfelelő kihasználásával érhető el. Sok weboldal-elrendezési irányelvet használtam, hogy lássam, hogy a keretben lévő összes objektumnak megfelelő hézagokat és távolságokat kell fenntartania, amelyek tisztességes mennyiségű fehér helyet hoznak létre.
tervezésünk következő lépése az űrlapmező létrehozása. Ebben az esetben a banner tervezésénél alkalmazott módszerrel ellentétesen dolgozom. A képréteget az Egyszínű réteg alá helyezzük, és a két réteg tetejére gradiens réteget alkalmazunk a jobb megjelenés érdekében. A keverési módokkal való játék mindig elengedhetetlen a nagyobb képek elhelyezésekor.
a választás a képek ezen az oldalon nincs konkrét téma kapcsolódik hozzá. Úgy gondolom, hogy ez a kép segít a webhely jobb megjelenésében.
helyezze a képet a színes háttérréteg alá. A kép pontos rögzítéséhez a színes réteg méretéhez használja a rétegmaszkolási lehetőségeket.
vessen egy pillantást a rétegek palettájára a fenti képen. A szilárd kék színű réteg a kép tetején található, a keverési mód overlay-re konvertálódik, az opacitás pedig 65% – ra csökken.
a két réteg tetején a gradiens térképet használtam. A keverési mód színárnyalatra változik, az opacitás változatlan marad.
az űrlapmező készen áll, ami a weboldal tervezésének negyedik szintjének végére vezet.
következő szintünk két egyszerű szövegkeretből áll. Ez hasonlít a weboldal második szintjére,és a két mezőt a tetejéhez hasonlóan igazítottam. Az összehangolás koherenciájának fenntartása jó módszer a fehér tér használatára.
ahogy elértük az oldal utolsó részét, itt az ideje, hogy újra megnézzük a lábléc méreteit. A tervezőnek meg kell terveznie a lábléc magasságát az ott használt linkek alapján. Ebben az esetben 170 Pixel magasságot adtam a láblécemnek. A szélesség ugyanaz marad, mint a weboldal.
helyezze el a linkeket és képeket az Ön igényei szerint.
ezzel befejeztük weboldalunk tervezési részét. Az általunk használt színkombinációk minimálisak; sok fehér helyet használunk a tervezésünkben, és egyszerű szöveget adunk hozzá minimális betűtípusokkal. A cél egy tiszta weboldal megtervezése, amely reményeink szerint teljesül.
kérjük, tekintse meg még egyszer a teljes oldal kialakítását.
