mockup Archives - TéJé Weblap és Grafika

Ilyen lépésekből áll egy kávézós weboldal kezdőlapjának, logójának a tervezése

TéJéGrafika — Sat, 05 Jan 2019 07:48:37 +0000

Egy szakember tudása csak úgy lehet naprakész, ha folyamatosan képzi magát. Én legalábbis ezt az elvet vallom és ennek megfelelően mindig szánok idő a gyakorlásra, tanulásra. Így történt ez a két ünnep között is. Éppen – a karácsonyi vacsora után és az újévi lencsesaláta között – egy remek gyakorlatot találtam az egyik külföldi oktatásos weboldalon. Kapóra jött, mert pont ezt a témakört akartam gyakorolni: wireframe, reszponzív web design, moodboard készítés és logó tervezés.

Az oktatóanyag megtekintését követően, el kellett készíteni önállóan egy kávéző kezdőlapjának web design tervét, logóját, méghozzá asztali gépre, tabletre és mobil készülékre optimalizálva. A web design-on és a logón kívül ikonokat is kellett tervezni.

Remek gyakorlat volt, élveztem minden percét! Percből pedig nagyon sok volt, mert egy-egy ilyen tervezés több órát, sőt, több napot vesz igénybe, főleg akkor, ha az ember lánya alapos akar lenni. Egyébként, egy kicsit dicsekszem is, mert az elkészített projektet feltöltöttem az oktatásos oldalra, ahonnan pár nappal később egy üzenetet kaptam, hogy nagyon tetszik az elkészült munkám és érdemesnek tartanak arra, hogy saját oktatóvidót készítsek. 🙂

Ezen a projekten négy napig dolgoztam. Valószínű több napot is igénybe vett volna, ha élesben, Ügyfélnek készítem a terveket, például csak a színpalettából, moodboardból 4, vagy akár 5 terv is készült volna és éppen ünnep volt, nyugis volt minden. 🙂

Most 1 db moodboard, 1 db logó, 1 db wireframe és 1 db kezdőoldali web design készült.

A logótervezés élesben több körös szokott lenni. Ezért szoktam nagy hangsúlyt fektetni az első megbeszélésekre, mert ilyenkor nagyon sok minden meg tudok az Ügyféltől, Ügyfélről és az elképzeléseiről, és ennek köszönhetően hamar ráérzek, hogy mit is szeretne.

1. Képek összegyűjtése és optimalizálása.

2. Színpaletta kiválasztása, moodboard elkészítése.

3. Logótervek készítése és szerkesztése. Mockup-ok.

3. Wireframe, majd a web design tervezés és szerkesztés. Tulajdonképpen itt történik az igazi varázslat.

4. Weblap látványtervek elkészítése.

1. Weboldal készítés: képek összegyűjtése és optimalizálása

2. Színpaletta kiválasztása, moodboard elkészítése.

3. Logótervek készítése és szerkesztése. Mockup-ok.

Wireframe, majd a web design tervezés és szerkesztés. Tulajdonképpen itt történik az igazi varázslat.

Weblap látványtervek elkészítése.

A végeredmény szerintem gyönyörű lett! A következő lépés az lenne, hogy ezek a tervek weboldal formájában alakot öltenek.. 🙂

Olyan egyedi grafikára, arculatra, weboldalra van szükséged, ami nem csak megfogja a látogatóid figyelmét, hanem még el is ad nekik? Ha ilyen szolgáltatásokra van szükséged, akkor minél előbb vedd fel velem a kapcsolatot! 🙂

The post Ilyen lépésekből áll egy kávézós weboldal kezdőlapjának, logójának a tervezése appeared first on TéJé Weblap és Grafika.

Vonalakkal készülő grafikák

TéJéGrafika — Fri, 23 Mar 2018 07:54:50 +0000

Van egy remek külföldi grafikus blogger, akinek a weblapját és Youtube csatornáját folyamatosan követem. Az Ő blogján találkoztam ezzel a megoldással, ahol is a grafikát csupán vonalak segítségével lehet elkészíteni. Rögtön neki is láttam, hogy leteszteljem magam, hogy ez nekem is menne-e. Az elején egy kicsit döcögve ment az alkotás, de sokat segített a blogger videója, valamint előre lerajzoltam ceruza és papír segítségével a grafikát.

Nagyon megtetszett a végeredmény, így másnap is készítettem ilyen vonal stílusban készült grafikát. Remélem, Neked is tetszik! 🙂

The post Vonalakkal készülő grafikák appeared first on TéJé Weblap és Grafika.

Így dobtam fel az amúgy száraz adatkezelési szabályok aloldalt

TéJéGrafika — Sat, 27 Jan 2018 17:57:15 +0000

Olvastál már unalmas szabályokat? A jelenlegi törvények szerint, minden weblaptulajodonosnak rendelkeznie kell adatkezelési szabállyal akkor, ha a látogatói adatait bármilyen formában gyűjti. Nos, ez a szöveg elég száraz, úgy, mint általában a szabályok. Gondoltam egyet és a szörnyecskéimmel feldobtam az aloldalt! 🙂 Így sokkal jobb, szerintem.. 　

Ezzel rengeteg időm ment el, hiszen az összes figurát, a rajz minden elemét kézzel rajzoltam. Többen is kérdezték már tőlem, hogy milyen technikával dolgozom. Jelenleg ipadpro+apple pencil-lel rajzolok, majd a végleges képet Adobe Illustratorban készítem el.

Mindig le szeretném mérni, hogy mennyi időbe telik elkészítenem egy-egy rajzom, de mire eszembe jut, már szinte végeztem is. A blogomon egyébként megnézheted az egyes fázisokat. Persze, csak elnagyoltam, mert ugye elfelejtettem a lépésről, lépésre dokumentálást. Remélem, Neked is tetszik.. 🙂

The post Így dobtam fel az amúgy száraz adatkezelési szabályok aloldalt appeared first on TéJé Weblap és Grafika.

Webáruház küldetés, avagy hogyan készült a webáruházam? 12.rész

TéJéGrafika — Sat, 13 Jan 2018 18:53:49 +0000

Témaösszefoglaló: mockup-ok készítése, képek optimalizálása

Szombat van, de ennek ellenére sok-sok minden sikerült csinálnom a webáruházban. Mockup-okat készítettem, erről már írtam egy korábbi bejegyzésemben és sikerült véglegesítenem a képek árát a webáruházamban.

Az egész napom elment a megfelelő mockup-ok kiválasztásával, a képek elkészítésével és optimalizálásával. Ha óriási méretben töltjük fel a képeinket, akkor bizony a weboldal lassabban fog betöltődni, amivel látogatókat veszíthetünk, valamint a keresők, így a Google sem fogja nagyon szeretni a weblapunkat. Magyarán, hátrébb fogja sorolni a találati listában.

Itt van néhány oldal, amelyek segítségével le tudod ellenőrizni, hogy milyen sebességgel töltődik be a weblapod, valamint segítséget is kapsz, hogy hogyan optimalizálhatod a weblapod.

Persze, nem csak az olyan képek tudják rontani a weblapod sebességét, amelyek nincsenek optimalizálni, de ez egy olyan művelet, amit Te is el tudsz végezni, ezzel növelve a weblapod minőségét. Ha még nem végezted el ezt a vizsgálatot, akkor minél előbb tedd meg és Te, vagy mestered javítsa a felmerülő hibákat.

Miután elkészítem a mockup-pal a képeket, elmentem webre, majd méretezem és feltöltöm a https://tinypng.com weboldalra, a tömörítés érdekében. Ez egy ingyenes elérhető szolgáltatás. Feltöltöm a képet, majd lementem. Van, hogy 50-60%-kal is tudja a képméretet csökkenteni. A kép minősége romlik ugyan, de nem olyan látványos mértékben. A portfólió oldalon (ezen), az összes kép ezzel az eljárással készült, mégsem veszített a látogatói élményből.

És akkor most jöjjön a pihenés.. Lent egy mockup-olt képem. Ugye milyen jól néz ki?! Természetesen már feltöltésre került a webáruházba..

brisch27 képe a Pixabay -en.

The post Webáruház küldetés, avagy hogyan készült a webáruházam? 12.rész appeared first on TéJé Weblap és Grafika.

Webáruház küldetés, avagy hogyan készült a webáruházam? 7.rész

TéJéGrafika — Mon, 08 Jan 2018 20:54:24 +0000

Elkezdtem szép „köntösbe” öltöztetni a grafikáim. Grafikus nyelven, mockup-oltam. 🙂 A mockup használatát az OWT-n, azaz az Online Webdesign Tanfolyamon tanultam. A tanárom és egyben példaképem Tóth H. Zsuzsanna a megálmodója, megvalósítója ennek a remek online tanfolyam programsorozatnak. Azért programsorozat, mert egyre több remek, gyakorlatias, tananyag kerül fel a palettára és az oktatói, támogatói gárda vérprofi. A tanfolyamokat itt tudod megtekinteni https://webdesigntanfolyam.com/tanfolyamok, a csapatról pedig itt olvashatsz https://webdesigntanfolyam.com/a-csapat. Ha webdesignnal, weblapkészítéssel szeretnél foglalkozni, akkor ezt a tanfolyamot mindenképpen a figyelmedbe ajánlom.

Szóval, a mockup-oknál tartottam. A mockup jelentése mintadarab, modell. Ez lényegében azt jelenti az én esetemben, hogy az adott grafikám ráhelyezem különböző tárgyakra egy program segítségével. Legyen az egy póló, bögre, vagy kép. Eszméletlen jól néznek ki az így készült képek. Nem csak az ügyfél, hanem én is látom az eredményt anélkül, hogy el kellene készíttetnem a pólót, képet, vagy bögrét.

Erre van egy nagyon kedves történetem. Anyukám, aki az egyik legnagyobb rajongóm, megkérdezte, hogy ki az a fiatalember, aki az általam tervezett pólót reklámozza? 🙂 Jót mosolyogtam, aztán elmagyaráztam, hogy a grafika hogyan is került a pólóra.

Munka mellett egy kicsit lassabban haladok, de nagyon örülök, hogy tényleg minden nap hozzá tudok tenni a webáruházamhoz. A TéJé grafika sem hiányozhat a mai bejegyzésből! A egyik mellékelt TéJé grafika között ott van az a fiatalemberes is, akire az Anyukám rákérdezett. Embléma és bögre mockup-okat is töltök fel.

Szerintem eszméletlen jól néznek ki! Szerinted? 🙂 Természetesen, ezek is kaphatóak lesznek a webáruházban!

The post Webáruház küldetés, avagy hogyan készült a webáruházam? 7.rész appeared first on TéJé Weblap és Grafika.