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

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

jan 5, 2019 | mockup, moodboard, webdesign, weblap készítés, wordpress

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! 🙂

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

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

jan 27, 2018 | divi, Egyedi grafika, illusztráció, mockup, pólógrafika, Szörnyecskék

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.. 🙂
Webáruház küldetés, avagy hogyan készült a webáruházam? 12.rész

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

jan 13, 2018 | Egyedi grafika, mockup, optimlaizálás, webáruház, woocommerce, wordpress

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.