<h2 style="margin-left:0px;">Bemutatás</h2><p style="margin-left:0px;">A <a href="http://boxy.hu/"><u>Boxy.hu</u></a> egy úttörő vállalat a logisztikai szektorban, amely a legkorszerűbb megoldásokat nyújtja az e-kereskedelmi áruházak számára. Raktározás, termékkezelés, csomagolás és szállítás terén kínálnak komplex szolgáltatást, mellyel a logisztikai folyamatok terhei alól mentesítik ügyfeleiket. Büszkék lehetnek Magyarország legnagyobb robotizált fulfillment raktárára és saját flottájukra, amellyel aznapi kiszállítást garantálnak. Európa egyik legmodernebb fulfillment központja a Boxy kezei között van, ahol a csomagok mozgatását és szortírozását robotok végzik egy környezettudatos raktárcsarnokban.</p><h3 style="margin-left:0px;">Projekt kontextusa</h3><p style="margin-left:0px;">Az elmúlt években a Boxy számos változáson és szervezeti fejlesztésen ment keresztül. Ezek a változások formálták új szemléletüket és teremtették meg az igényt a brand és a kommunikációs stratégia frissítésére. A változó piaci igényekhez való alkalmazkodásuk részeként felismerték a weboldaluk újragondolásának szükségességét, hogy az az új ismeretek és célok mentén legyen strukturálva és újratervezve.</p><h3 style="margin-left:0px;">Miért mi?</h3><p style="margin-left:0px;">A Boxy fél évvel ezelőtt döntött úgy, hogy minket választ partnernek a projekt megvalósításához. Megbízásunkat több tényező is befolyásolta:</p><ul><li>📐 Először is, korábbi együttműködésünk során bebizonyítottuk, hogy minden területen, amin együtt dolgoztunk, megbízható és hatékony partnernek bizonyultunk.</li><li>📊 Másodszor, egy átfogó auditot végeztünk el, amely feltárta a hibákat és azokra megoldást is adott, ebből egy meggyőző projekttervet dolgoztunk ki számukra.</li><li>💻 Harmadszor, technológiai megoldásaink tökéletesen illeszkedtek a Boxy víziójához, ami megerősítette őket abban, hogy a projektet ránk bízzák.</li></ul><h4 style="margin-left:0px;">Mit csináltunk?</h4><ul><li>Strategy &amp; Research</li><li>Project Planning and Management</li><li>Creative Direction</li><li>Branding &amp; Identity Design</li><li>UI/UX Design</li><li>B2B Web Development</li><li>Maintenance</li></ul><h3 style="margin-left:0px;">Szerepek és felelősségek</h3><ul><li><strong>Varholik Máté (Project Owner)</strong> – Mint projekt tulajdonos, Varholik Máté felelőssége alá tartozott a projekt célok meghatározása és biztosítása, hogy azok összhangban legyenek a vállalat általános céljaival és stratégiájával.</li><li><strong>Juhász József (Project Manager</strong>) – A projekt menedzsereként, Juhász József a projekttervezésért, a határidők betartásáért és a csapaton belüli kommunikáció zökkenőmentes működtetéséért felelt.</li><li><strong>Ambrus Krisztián (Lead UI/UX Designer)</strong> – Ambrus Krisztián, mint vezető UI/UX tervező, azért felelt, hogy a weboldal felhasználói élménye és a cég arculata megfeleljen a projekt céljainak és a Boxy márka elvárásainak, összhangban legyenek az új stratégiákkal.</li><li><strong>Ladányi Dorottya (UI/UX Designer)</strong> – Ladányi Dorottya, UI/UX tervezőként, Ambrus Krisztián mellett dolgozott, támogatva a vizuális és felhasználói élmény tervezési folyamatát, biztosítva, hogy az a Boxy és a célcsoportjainak igényeit tükrözze.</li></ul><h2 style="margin-left:0px;">Arculati Ráncfelvarrás</h2><h3 style="margin-left:0px;">Probléma Definíció</h3><ul><li>⛔ <strong>Régi arculat problémái:</strong> A Boxy kezdeti, startupra jellemző, játékos megjelenése az évek során ellentmondásossá vált a cég piaci pozíciójával és szerepével. Egy olyan vállalatnál, amely piacvezetővé vált és folyamatosan növekvő professzionalizmust képvisel, a régi, könnyedebb arculat már nem felelt meg a várakozásoknak. Emellett a cég arculati anyagai is elavultnak bizonyultak, frissítésük pedig nehézkes volt, ami a márka további erősítése szempontjából hátrányos helyzetbe hozta a vállalatot.</li><li>⛔ <strong>Vezetőség és arculat diszharmóniája:</strong> A Boxy vezetősége egyre kevésbé tudott azonosulni a régi arculattal. Ez a diszharmonia nem csak a vállalat belső képét torzította, hanem a kreatív munkára is befolyással volt, korlátok közé szorítva az újítási lehetőségeket.</li><li>⛔ <strong>Kommunikációs akadályok:</strong> A kifelé irányuló kommunikáció nem tükrözte megfelelően a vállalat egyik legfontosabb értékét: az elérhetőséget. Bár a vállalat rendkívül innovatív és robosztus megoldásokat kínált, kommunikációjukban a túlzottan corporate megközelítés miatt a potenciális ügyfelek úgy érezhették, hogy a Boxy szolgáltatásai számukra elérhetetlenek, vagy túl nagyvállalati jellegűek.</li></ul><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_prezentaciok_d80f430b9e/Boxy_prezentaciok_d80f430b9e.png" alt="Boxy - prezentációk.png"></p><h3 style="margin-left:0px;">Kimondott Elvárások</h3><ul><li>⚡ <strong>Közvetlenebb kommunikáció:</strong> A <a href="http://boxy.hu/"><u>Boxy.hu</u></a> azt szerette volna, ha a kommunikáció középpontjában az elérhetőség áll. A vállalat szolgáltatásai a kisvállalkozásoktól a nagyvállalatokig minden méretű ügyfél számára elérhetőek, elfogadható áron.</li><li>⚡ <strong>Élethű képek használata:</strong> A vállalat új arculata valós, stock vagy AI által generált képek használatával szeretné megjeleníteni a célközönségét saját környezetében.</li><li>⚡ <strong>Dinamizmus és professzionalizmus:</strong> A Boxy hangsúlyozza, hogy bár több év tapasztalata van a hátuk mögött, mégis egy innovatív, lendületes vállalat. Ez a dinamizmus nem csak a szövegekben, hanem az arculati elemekben is meg kell hogy jelenjen.</li><li>⚡ <strong>Logó finomhangolása:</strong> Bár a Boxy logójának alapformáját nem lehetett megváltoztatni, a vállalat szerette volna elérni, hogy a logó arányait optimalizáljuk a professzionális megjelenés érdekében.</li><li>⚡ <strong>Színkonzisztencia fenntartása:</strong> Azonban a vállalat nyitott volt a javaslatokra, hogy mely elemeiben és milyen mértékben lehetne mégis frissíteni az arculatot, anélkül, hogy a már meglévő anyagokat, eszközöket és infrastruktúrát teljes mértékben le kellene cserélni.</li></ul><h2 style="margin-left:0px;">B2B weboldal elkészítése</h2><h3 style="margin-left:0px;">Előzetes kutatások</h3><h4 style="margin-left:0px;">UI/UX audit</h4><p style="margin-left:0px;">A projekt kezdetén egy alapos UI/UX auditot végeztünk a Boxy weboldalán. Ennek során feltártuk az oldal meglévő hiányosságait és fejlesztési lehetőségeit. Csak a főoldalon összesen 4 kritikus UI és arculati, valamint 4 kritikus UX problémát azonosítottunk, és további 27 kisebb javaslatot fogalmaztunk meg. Ezek az észrevételek csak a főoldalra vonatkoztak és céljuk a felhasználói élmény javítása volt. További javaslatokkal álltunk elő az oldal teljes terjedelmét is érintő problémákkal kapcsolatban.</p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_audit_a53e870a2a/Boxy_audit_a53e870a2a.png" alt="Boxy - audit.png"></p><h4 style="margin-left:0px;">Versenytárs elemzés</h4><p style="margin-left:0px;">A versenytársak UI/UX megközelítéseit is alaposan megvizsgáltuk. A stílus, a képi és szöveges tartalmak összhangja, valamint az egyes weboldal szekciók marketing szempontból történő elemzése során kiemelten kezeltük a Boxy és a fulfillment szolgáltatás bemutatását. Megállapítottuk, hogy a Boxy a versenytársakhoz képest nem hangsúlyozta eléggé a fulfillment előnyeit a különböző célcsoportok számára, és nem szólították meg kellőképpen a célközönség fájdalompontjait. Továbbá, a bizalomépítés főként személyi kompetenciák bemutatásával történt, a marketing és sales célok elérését segítő különálló landing oldalak pedig számukban elenyészőek voltak.</p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_versenytars_elemzes_4d145ffec5/Boxy_versenytars_elemzes_4d145ffec5.png" alt="Boxy - versenytárs elemzés.png"></p><h3 style="margin-left:0px;">Probléma definíció</h3><ul><li>⛔ <strong>Nem fenntartható weboldal:</strong> A weboldal nem moduláris, nem komponensekre épített rendszerű volt, és nem támaszkodott egy egységes Design Systemre. Ennek következtében a fenntarthatóság és a könnyű bővíthetőség nem volt biztosított. Az új igények kezelése különálló folyamatokon keresztül történt, ami időigényes és nem hatékony.</li><li>⛔ <strong>Elavult tartalom:</strong> A weboldal tartalmi elemei nem feleltek meg a Boxy jelenlegi kommunikációs stratégiájának. A túlzottan hivatalos hangvételű megfogalmazások és a merev képi világ nem volt képes megragadni a potenciális ügyfelek figyelmét. A Boxy szolgáltatásainak méretétől és komplexitásától való félelmük miatt a bizalom kiépítése és az érintett célcsoportok elérése extra erőforrásokat igényelt.</li><li>⛔ <strong>Hiányzó elemek:</strong> Az oldalon elvégzett audit során kiderült, hogy a landing page-ek nem tartalmaztak minden szükséges elemet, vagy azok nem kaptak megfelelő hangsúlyt. Ez további marketing és sales erőforrások bevonását tette szükségessé a célközönség bizonytalanságának feloldására.</li></ul><h3 style="margin-left:0px;">Kimondott elvárások</h3><ul><li>⚡ <strong>Fenntarthatóság és egységesség:</strong> Fontos, hogy a weboldal hosszú távon fenntartható és könnyen kezelhetővé váljon. A Design System implementálása segített a konzisztens arculat megőrzésében és az oldal könnyű módosíthatóságában, nemcsak a fejlesztők, hanem a Boxy csapata számára is.</li><li>⚡ <strong>Közvetlen kommunikáció:</strong> Célzott, a különböző ügyfélcsoportok igényeire szabott oldalak létrehozása a cél, ahol a tartalom közvetlenül és hatékonyan szólítja meg a célközönséget. Fontos, hogy az oldalak megfelelően kezeljék az egyes célcsoportok specifikus problémáit, elvárásait és bizalmi kérdéseit.</li><li>⚡ <strong>Wow faktor:</strong> A designnak lenyűgözőnek és magával ragadónak kellett lennie, hogy az oldalt megnyitó felhasználó azonnal érezze: minőségi, gondosan megtervezett és jól megvalósított oldallal van dolga. Az oldalnak képesnek kellett lennie arra, hogy minden látogatót magával ragadjon, függetlenül attól, hogy milyen generációból, szakmából vagy élethelyzetből érkezik.</li></ul><h3 style="margin-left:0px;">UI/UX folyamat</h3><h4 style="margin-left:0px;">1. Workshopok és tervezés</h4><p style="margin-left:0px;">A piaci elemzések és versenytársak tanulmányozása után elindítottuk a B2B értékesítési workshopjainkat. Ezek célja a Boxy értékesítési stratégiájának és célközönségének alapos megértése volt, hogy felismerjük a vásárlói fájdalompontokat és megtaláljuk rájuk a megfelelő megoldásokat. Az itt szerzett ismereteket használtuk fel a weboldal és a tartalmi struktúra kialakításánál, biztosítva, hogy az B2B vásárlók számára minden információ elérhető és könnyen feldolgozható legyen.</p><h4 style="margin-left:0px;">2. Wireframe készítés</h4><p style="margin-left:0px;">A tervezési folyamat következő lépése a mid-fidelity wireframek készítése volt. Ezek a vázlatok már tartalmaztak szöveges tartalmat, amely segítette az ügyfelet abban, hogy minimális erőforrásból vizuálisan is átlássa az oldal szerkezetét. A wireframek készítésénél felhasználtuk a workshopok során nyert információkat, beleértve a stratégiai szempontokat és a sitemap struktúrát. Minden szekcióhoz konkrét célokat, szöveges és vizuális elvárásokat rendeltünk, hogy a projekt későbbi szakaszaiban ezekre támaszkodva dolgozhassunk.</p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_wireframe_e2cdc069e3/Boxy_wireframe_e2cdc069e3.png" alt="Boxy - wireframe.png"></p><h4 style="margin-left:0px;">3. Wireframe feltöltése AI szöveggel</h4><p style="margin-left:0px;">A wireframek további feltöltéséhez ChatGPT-t használtunk. Az így előállított szövegjavaslatok segítségével könnyítettük meg a Boxy és a copywriterek munkáját. Bár a végső szövegeket a projekt egy későbbi szakaszában dolgozták ki, a mi javaslataink jó kiindulási pontot szolgáltattak. Az eddigi tapasztalataink alapján, az AI használata felgyorsítja munkafolyamatokat, amennyiben a projekt megfelelően dokumentált és jól paraméterezett.</p><h4 style="margin-left:0px;">4. Vakmerőbb design</h4><p style="margin-left:0px;">Az Atomic Design Systemnek köszönhetően a Boxy weboldala 54 egyedi szekciót tartalmaz, amelyek variációkkal együtt több mint 200 elemet ölelnek fel. A Design System a reszponzivitást is figyelembe vette, öt különböző képernyőméretre tervezve, az ultra wide-tól a mobilig. Ennek köszönhetően a fejlesztési folyamat könnyebb és gördülékenyebb lett. A design fázis első iterációjával mindössze egy hét alatt elkészültünk, köszönhetően a saját, jól dokumentált Atomic Design Systemünknek. Ezt több belső és külső iterációs körök követték melynek végeredményében <strong>mindösszesen három hét alatt lezárhattuk a UI design folyamatokat</strong>.</p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_design_1_3cc1f9d076/Boxy_design_1_3cc1f9d076.png" alt="Boxy - design - 1.png"></p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_design_2_49f32ec076/Boxy_design_2_49f32ec076.png" alt="Boxy - design - 2.png"></p><h4 style="margin-left:0px;">5. Nagyobb elemek, nagyobb tér</h4><p style="margin-left:0px;">Az oldal olvashatóságának és felhasználói élményének javítása érdekében nagyobb white space-ket és nagyobb elemeket használtunk, különösen desktopon. A kutatások során megállapítottuk, hogy az amerikai versenytársak gyakran alkalmazzák ezt a megközelítést. Az oldal domináns színe a fehér lett, ami a letisztultságot hangsúlyozza és kiemeli a lényeges tartalmi elemeket, például az arcokat és a képeket.</p><h4 style="margin-left:0px;">6. Célközönségre tervezve</h4><p style="margin-left:0px;">Minden oldal tervezésekor figyelembe vettük a célközönség specifikus igényeit. A szövegezés, a színek használata és a vizuális beágyazások mind a célközönség paramétereiből indultak ki. A használt képek és videóanyagok is úgy lettek megtervezve, hogy a célközönség tagjai könnyen azonosulhassanak velük.</p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_design_celkoezoenseg_72d8be4712/Boxy_design_celkoezoenseg_72d8be4712.png" alt="Boxy - design - célközönség.png"></p><h4 style="margin-left:0px;">7. Brand színek kihasználása</h4><p style="margin-left:0px;">A brand színeit úgy használtuk, hogy azokat a megnevezett célközönségekhez rendeltük. Mindegyik célcsoportot egy hozzá illő színnel azonosítottunk, amely nemcsak az arculati tervezésben, hanem a későbbi marketing anyagokban is fontos szerepet játszott.</p><h4 style="margin-left:0px;">8. AI által generált képek</h4><p style="margin-left:0px;">Ez volt az első projekt, ahol teljesen magabiztosan alkalmaztuk az AI lehetőségeit a képgenerálás terén. A képeket a célkitűzések és paraméterek alapján generáltuk, vegyesen használva a Boxy által nyújtott fotókat, stock képeket és a Midjourney által generált képeket.</p><h4 style="margin-left:0px;">9. Animáció tervezése</h4><p style="margin-left:0px;">Az oldalra statikus képek mellett animációkat is terveztünk, hogy a wow faktort még jobban ki tudjuk emelni. A felhasználói élmény javítása érdekében több iteráció után végül egy animációt választottunk ki, amely segíti a felhasználót a további navigációban és hozzájárul az első benyomás erősítéséhez.</p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_design_animacio_237c813206/Boxy_design_animacio_237c813206.png" alt="Boxy - design - animáció.png"></p><h2 style="margin-left:0px;">A projekt sikere</h2><h3 style="margin-left:0px;">Elért célok</h3><h4 style="margin-left:0px;">🌲 Fenntarthatóság</h4><p style="margin-left:0px;">Az új weboldal fenntarthatóságát egy egységes, stílusos design system implementálásával értük el. A projekt kezdetétől fogva a fenntarthatóság volt a fő célkitűzésünk, így a tervezési folyamat minden szakaszában a hosszú távú használhatóságot, konzisztenciát és skálázhatóságot tartottuk szem előtt. A design system lehetővé tette a design elemek újrahasznosítását, egyszerűsítette a frissítéseket és a további funkciók hozzáadását, így biztosítva az oldal hosszú távú életképességét.</p><h4 style="margin-left:0px;">Közvetlen kommunikáció</h4><p style="margin-left:0px;"><i>“Mélyen tisztelt megszólításból a kedves megszolításig.”</i></p><p style="margin-left:0px;">A projekt során közvetlen kommunikációs stílust alakítottunk ki, amely a szöveges és vizuális tartalomra egyaránt kiterjedt. Segítettünk a Boxy-nak kialakítani az oldal logikáját és megfogalmazni a cég stratégiáját. A design és a tartalom összehangolásával sikeresen enyhítettünk a szigorú, nagyvállalati megjelenítésen, és egy barátságos stílust hoztunk létre. Ezáltal az oldal megközelíthetőbbé vált, és javítottuk az ügyfélkapcsolatokat.</p><h4 style="margin-left:0px;">👨‍👩‍👦 Célközönség-specifikus tartalom</h4><p style="margin-left:0px;"><i>“Induló webáruházaknak, webáruházaknak, nagykereskedőknek és gyártóknak.”</i></p><p style="margin-left:0px;">Gondosan azonosítottuk a Boxy célközönségének problémáit, igényeit és félelmeit, és ezekre szabott tartalmat készítettünk. A célzott tartalom lehetővé tette számunkra, hogy pontosan és hatékonyan kommunikáljunk a különböző ügyfélcsoportokkal. Ez a megközelítés javította az ügyfél-érdeklődést és az ügyfél-elkötelezettséget, mivel az ügyfelek releváns és értékes információkat kaptak, amelyek közvetlenül megoldották a saját, egyedi problémáikat.</p><h4 style="margin-left:0px;">🎨 Egységes arculat</h4><p style="margin-left:0px;">Egy központi design system segítségével hoztunk létre egy egységes, minden platformon azonos arculatot. Ez az integrált megközelítés biztosította, hogy a Boxy márkája konzisztens és azonosítható legyen minden érintkezési ponton. A központi design systemnek köszönhetően az összes platformon egyszerűen kezelhetővé vált az arculat, és a márka erejét és jelenlétét a piacon megerősítettük.</p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Boxy_lezaro_kep_7ff52b8cc0/Boxy_lezaro_kep_7ff52b8cc0.png" alt="Boxy - lezáró kép.png"></p>

<p>A Boxy arculat- és weboldal frissítésének kivitelezőiként új, fenntartható designt és közvetlen kommunikációt biztosítottunk, így minden vállalkozás számára elérhetővé tettük szolgáltatásaikat.</p>

thumbnail_Boxy - cover.png

Boxy - cover.png

Hogyan segítettük a Boxy-t a márkaépítési és kommunikációs stratégiáik fejlesztésében? - esettanulmány

<p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A Grund csapata egy olyan szakmai partnert keresett, aki az ötletükből olyan appot tud fejleszteni ami üzletileg és funkcionalitás terén is megállja a helyét, és így országos sikert arathat. Már az első találkozó után egyértelmű volt, hogy nem csupán egy platform fejlesztésében gondolkodtunk, hanem abban, hogy egy dinamikus és innovatív hídként működő megoldást tervezzünk meg és hozzunk létre, amely összefogja az amatőr futball közösséget és elősegíti annak fejlődését.</span></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Az alapötlet mögött álló felismerés a következő volt: a futball, mint a világ egyik legnépszerűbb sportja, egyben komplex és szétszórt világot is takar az amatőr szinten. A Grund ezen a területen kíván segítséget nyújtani egy olyan platform képében, mely az amatőr futball közösségének igényeire szabott. A közösen megszervezett termékfejlesztési workshopjainkon keresztül létrehoztuk azt a struktúrát és folyamatot, mely lehetővé tette számunkra, hogy ezt a látomást valósággá alakítsuk.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>A probléma</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Az amatőr futball és annak résztvevőinek feltérképezésekor rájöttünk, hogy számos kihívással találkoznak a mindennapjaik során:</span></p><ul><li><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Játékosoknak kihívás társaságot, és sportolási lehetőséget találni,</span></li><li><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Csapatok nehezen szerveződnek,</span></li><li><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A sportpályák fenntartása nehezen biztosított,</span></li><li><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Sportpálya üzemeltetése támogatása papír alapon működik (ha működik),</span></li><li><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A pályafoglalás nem felel meg a modern kor elvárásainak, aluldigitalizált.</span></li></ul><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Közös munkánk során a Grunddal arra törekedtünk, hogy maradéktalanul válaszokat adjunk ezekre a kihívásokra, és egyben új lehetőségeket teremtsünk az amatőr futball közösség számára.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>Célcsoportunk</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A Grunddal közösen azonosítottuk a két fő célcsoportot, akikre a platformunknak a legnagyobb hatással kell lennie: a B2B partnerek, akik megbízható üzleti megoldásokat keresnek, és az amatőr focisták, akik a környezetükben keresnek sportolási lehetőségeket. Mindkét célcsoport számára célunk volt egy olyan platform létrehozása, amely megkönnyíti és gazdagítja az amatőr futballélményt.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>Előtervezés - Üzleti tanácsadás</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A Grund szakmai partnereként feladatunk volt, hogy közösen formáljuk és közösen alkossuk meg a termék alapjait. Mielőtt a kivitelezési és fejlesztési fázisba léptünk volna, a Grund vízióját összehangoltuk a felhasználók és a piac aktuális igényeivel. Ezen a ponton vált teljesen egyértelművé, hogy milyen célcsoportokat kell megcéloznunk és milyen funkciókkal tudjuk őket legjobban kiszolgálni. Például a társakat és sportolási lehetőségeket keresőknek egy megosztott pályabérlési rendszert és könnyített csapatkeresőt terveztünk, míg az eseményeket rendezők számára egyszerűsített eseménykezelő eszközöket fektettünk le. A sportpálya üzemeltetői oldalon a hangsúlyt a könnyebb adminisztrációra és a pályák jobb kihasználtságára helyeztük.</span></p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/grund_workshop_cab8c5bcc8/grund_workshop_cab8c5bcc8.png" alt="grund_workshop.png"></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A platform fenntarthatósága érdekében egy fenntartható pénzügyi modellt dolgoztunk ki, és teljesen átlátható digitális pénzügyi rendszert terveztünk meg, amely segítséget nyújt a közreműködő partnerek bevonásában.</span></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A Grunddal a vízióalkotástól kezdve a célcsoport azonosításon át, egészen a funkcionális tervezésig közösen tettük le az üzleti alapokat. Az együttműködés alatt számos workshopot tartottunk, amelyek során a termék koncepcióját alaposan körvonalaztuk és finomítottuk. Mind a Grund, mind a mi csapatunk tagjai aktívan részt vettek a terméktervezési folyamat minden lépésében, így egyesítve erőinket a siker érdekében.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>Előkutatás</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Az előkutatás során egy alapos és átfogó branding kutatásba kezdtünk, hogy megértsük a piacot és annak vizuális és funkcionális felhozatalát. Ez a kutatás tette lehetővé számunkra, hogy egy olyan releváns és versenyképes márkát és funkcionális készletet alkossunk, amely a Grund értékeit tükrözi, ugyanakkor megállja a helyét a ma ismert megoldások mellett.</span></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A digitális piac áttekintésének érdekében, azonosítottunk és elemeztünk hasonló applikációkat, amelyek az általunk megtervezett MVP funkciók egy részét már megvalósították. Ez lehetővé tette számunkra, hogy megismerjük a piacon lévő best practice-eket, és azokból tanulva optimalizáljuk saját termékstratégiánkat. Az analízis során nem csak az erősségeiket vettük szemügyre, hanem a hiányosságaikat is, így elkerülve a potenciális buktatókat és az MVP fejlesztését még hatékonyabbá téve.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>App flow tervezés</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Az app flow tervezést az előtervezés során elkészített funkcionális listából és a definiált scopeból indítottuk ki. Az elkészült ábra rávilágított a különböző felhasználói interakciókra és tranzakciókra, ugyanakkor megfelelő alapot szolgáltatott a fejlesztési becslések és a tényleges kódolási munkálatok számára is. Miután elkészültünk az első verzióval, belső egyeztetést tartottunk, ahol a különböző csapatok képviselői – a tervezőktől a fejlesztőkig – alaposan átvizsgálták és ellenőrizték a folyamatokat. Ezen belső audit eredményeként született meg a projekt dokumentációnk végleges változata, amelyet aztán alapul vettünk a fejlesztési munka elkezdésekor.</span></p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/grund_app_flow_317ddcf9a6/grund_app_flow_317ddcf9a6.png" alt="grund_app-flow.png"></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Emellett a fejlesztési folyamat hatékonyabbá tétele érdekében szorosan együttműködtünk házon belüli fejlesztőinkkel. Velük egyeztettünk az alkalmazás kivitelezésének konkrét lehetőségeit illetően, hogy biztosak legyünk abban, hogy a tervezett funkcionalitások technikailag megvalósíthatók, ugyanakkor az alkalmazás használata intuitív és felhasználóbarát marad.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>Wireframing</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Az elkészült app flowból high-fidelity wireframe-eket alkottunk meg. Ezen részletes és magas minőségű vázlatok létrehozása különös fontos volt a Grund számára, hogy partnerünk pontosan láthassa, hogyan néznek majd ki az egyes képernyők és milyen interakciókra lesznek képesek. A wireframe-ekkel nem csak a tervezési irányt szemléltettük, hanem lehetőséget biztosítottunk az ügyfél számára, hogy ellenőrizze a megvalósítást, és biztosítsa azt, hogy azok teljes mértékben összhangban vannak a kezdeti vízióval.</span></p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/grund_wireframe_7ba5499f98/grund_wireframe_7ba5499f98.png" alt="grund_wireframe.png"></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Az elkészült terveket ismét alávetettünk egy belső vizsgálatnak, melynek keretein belül a fejlesztő csapatunk áttekintette az elkészült képernyőket. Ezen egyeztetések során különös figyelmet szenteltünk annak, hogy milyen technikai megoldásokra lesz szükség a tervezett képernyők és funkcionalitások megvalósításához. Ezzel biztosítottuk, hogy a kivitelezés során a design és a fejlesztés szoros összhangban maradjon.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>Prototyping</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A high-fidelity wireframe-ek sikeres elkészítése után a következő lépésben a pontos prototípust hoztuk létre. A wireframe-k alapján elkészült prototípus a legfontosabb gesztusokat és felhasználói interakciókat tartalmazta, de az animációk és egyéb kiegészítő vizuális elemek nélkül.</span></p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/grund_prototype_9e9b53a916/grund_prototype_9e9b53a916.png" alt="grund_prototype.png"></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Az egyszerű, de hatékony gesztusokkal és interakciókkal a prototípus nem csak az alkalmazás designjának és funkcionális elemeinek bemutatására szolgált, hanem lehetővé tette az ügyfél számára, hogy testközelből ismerkedjen meg a tervezett felhasználói élménnyel. Ezzel nem csak a tervezési folyamatot optimalizáltuk, hanem biztosítottuk azt is, hogy az elkészülő termék valóban megfeleljen az ügyfél igényeinek és elvárásainak.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>UI Design</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A projekt egyik legfontosabb szakasza a UI (User Interface) Design volt, mely során a wireframe-ek és a prototípus tapasztalataira támaszkodva hoztuk létre az alkalmazás végső vizuális terveit.</span></p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/grund_design_74aa06e495/grund_design_74aa06e495.png" alt="grund_design.png"></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A tervezési folyamat során az Extended Atomic Design Systemet vettük alapul, amely egy átfogó, moduláris módszertan. Ez a rendszer lehetővé tette számunkra, hogy a tervezés minden lépését logikusan és hatékonyan kövessük végig, valamint elősegítette a designerek és fejlesztők közötti együttműködést. A rendszer alkalmazásával könnyen létrehozható, módosítható és bővíthető felületi elemeket alkottunk, amelyek konzisztens és egységes felhasználói élményt biztosítottak.</span></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Mindenekelőtt büszkék vagyunk rá, hogy az eddigi legfejlettebb Design Systemünket használtuk, amely magába foglalja mindazokat a bevált gyakorlatokat és innovációkat, amelyeket korábbi projektek során tanultunk.</span></p><figure class="image"><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/grund_ui_9149cee887/grund_ui_9149cee887.png" alt="grund_ui.png"></figure><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A projekt záró szakaszában a készült UI terveket bemutattuk az ügyfélnek és egyeztettünk a fejlesztő csapattal, hogy a kivitelezés során minden az elképzeléseinknek megfelelően valósuljon meg.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>A design számokban</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Statisztikailag tekintve a tervezési szakasz rendkívül eredményes volt. Összesen közel 150 UI oldalt hoztunk létre, amelyek mindegyike alapvető fontosságú volt a fejlesztési folyamat során. Ezek az oldalak több, mint 200 wireframe-ből származtak, amelyek az összes lehetséges és lényeges állapotváltozást is bemutattak. A teljes Design System pedig 24 UI atomi elemből állt össze, amelyek az alkalmazás összes felületén alkalmazhatóak voltak.</span></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>Az elért célok</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A Grunddal való közös munkánk során elértük a kívánt célokat, és az eredmények magukért beszélnek. A projekt befejezésekor létrehozott termék nem csak a mi elvárásainkat teljesítette, hanem a Grund ügyfeleinek és befektetőinek visszajelzései alapján is pozitívan fogadták. Az általunk kifejlesztett megoldás a piacra lépésre készen állt, és bizonyította, hogy a közös munka és az alapos előkészületek milyen értékes eredményekhez vezethetnek.</span></p><p><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/grund_mockup_e283c372e9/grund_mockup_e283c372e9.png" alt="grund_mockup.png"></p><h2><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;"><strong>Tanulságok és fejlődési lehetőségek</strong></span></h2><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Természetesen, mint minden projekt esetében, itt is voltak tanulságok, tökéletes projekt nem létezik. Az app flow kidolgozottsága és részletessége egyrészről hozzájárult a projekt sikeréhez, másrészről viszont rámutatott arra, hogy túl komplexre sikeredett. Kevesebb megjelenített adat, több információ átadással jár, mert a projekt résztvevőinek kevesebb, de annál fontosabb részletekre kell figyelniük.</span></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A funkcionális tervezésnél az ügyfélnek számtalan jó ötlete volt arra vonatkozólag, hogy merre lehetne tovább vinni a projektet. MVP funkcionalitás terén azonban érdemes törekedni a minimalitásra és csak egy adott funkciócsoport megvalósítására fókuszálni, amellyel validálható az alap elképzelés. Tanulva ebből az esetből még szigorúbban határoznánk meg az MVP funkcionalitásának körét, hogy a projekt mérhetőbb és gyorsabban szállítható legyen.</span></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">Alapvetően a wireframing és a prototyping folyamatok akkor indokoltak, hogyha a felületekkel kísérletezni szeretnénk. Ez a két eszköz lehetőséget ad gyors, hatékony és olcsó iterációk kipróbálására. MVP alapú projektbe most csak a prezentálhatóság és a befektetők korai bevonása érdekében került sor. Alapvetően nem javasolt.</span></p><p><span style="background-color:transparent;color:#000000;font-family:'Open Sans',sans-serif;">A tanulságok mentén Grund projekttel kapott tapasztalatok nem csak az adott munka eredményeit javították, hanem hosszú távon is növelték a csapatunk hatékonyságát és szakmai tudását.</span></p>

<p>Hogyan segítettük létrehozni Magyarország első fociesemény-szervező alkalmazását. A Grundról – esettanulmány</p>

thumbnail_grund-cover.png

grund-cover.png

Hogyan segítettük létrehozni Magyarország első fociesemény-szervező alkalmazását. A Grundról – esettanulmány

<h2><strong>Atomic Design - A kezdetek</strong></h2><p>Ez a cím úgy hangzik, mint egy film címe… na de a lényeg! ✌😎</p><p>Bátran kijelenthetjük a piacot az vezeti, aki kész a megújulásra, ahol automatizálva működik a rendszer, ahol a vevő a legkevesebb erőfeszítésből juthat hozzá a vágyához. Ebben segíthet Brad Frost 2016-ban megjelent ATOMIC DESIGN könyve, amely azonnal felkerült a legjobb UX-könyvek listájára, megtalálható a honlapján, online elolvasható vagy e-book formájában is megrendelhető, és mindent lefed, ami a hatékony tervezési rendszerek létrehozásával és karbantartásával kapcsolatos.</p><p>Brad Frost neve sokaknak ismerős lehet, korábban a Google tervezője volt, de hírnevét nem csak ennek köszönheti, elismert webdesigner és tanácsadó, rengeteg workshopot tart webdesign és webfejlesztés témakörben is, mindemellett előadások tucatjait tartotta már meg, így aki kicsit is mozog a design világában, legalább egyszer biztosan találkozott már a nevével és munkásságával. Azonban az Atomic Design 2016-os megjelenése óta neve kétségtelenül összeforrt egy teljesen új, holisztikus szemléletű tervezési rendszerrel.&nbsp;</p><figure class="image"><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/Brad_Frost_image_7eee170b95/Brad_Frost_image_7eee170b95.png" alt="Brad Frost-image.png" srcset="https://storage.googleapis.com/kifli.tech/strapi-assets/thumbnail_Brad_Frost_image_7eee170b95/thumbnail_Brad_Frost_image_7eee170b95.png 245w,https://storage.googleapis.com/kifli.tech/strapi-assets/small_Brad_Frost_image_7eee170b95/small_Brad_Frost_image_7eee170b95.png 500w,https://storage.googleapis.com/kifli.tech/strapi-assets/medium_Brad_Frost_image_7eee170b95/medium_Brad_Frost_image_7eee170b95.png 750w," sizes="100vw"><figcaption>Brad Frost - Design System tanácsadó</figcaption></figure><p>Brad szerint a legtöbben elkövetik azt a hibát, hogy egy oldalt egységes, elszigetelt, számszerűsíthető dolognak gondolnak, holott a valóságban a web gördülékeny, interaktív, egymástól nagyon is függő médium. Véleménye szerint a leghatékonyabb webszerkesztési, fejlesztési eszköz a modularitás, mely messze megelőzi a modernkort. Már Henry Ford is alkatrészeire bontotta az autót, majd 1923-ban modularizálta az összeszerelési folyamatot, melynek hála egységesebb, megbízhatóbb és legfőképpen biztonságosabb autókat tudtak gyártani, nem mellesleg sokkal gyorsabban gördültek le egymásután a gyártósorról. A részekre bontás pedig ma, a felgyorsult világunkban fontosabb, mint valaha volt.</p><p>Miután nagy nehezen sikerült elérni azt, hogy a létrehozott weboldalak stabilan jelenjenek meg a különböző böngészőkben, most újabb feladat áll előttünk. A webes élményeket ugyanúgy tudni kell átadni telefonon, tableten, phableten, netbookon, notebookon, asztali számítógépeken, televízión, játékkonzolon és még jó ég tudja mi mindenen a közeljövőben. Ahhoz, hogy ez könnyebben sikerüljön Frost azt ajánlja, hogy tegyünk egy lépést hátra, és ahelyett, hogy a teljes egész megoldandó feladatra koncentrálnánk inkább bontsuk részeire, kisebb, kezelhetőbb darabokra.</p><p>Ezen a ponton már tökéletesen tisztában vagyunk a rendszer történelmével, most ássuk magunkat kicsit mélyebbre a témában és nézzük meg a rendszer alapjait.</p><figure class="image"><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/letdothis_9173f80611/letdothis_9173f80611.gif" alt="letdothis.gif"></figure><h2><strong>A módszertan alapjai</strong></h2><p>Ehhez segítségül hozta létre az Atomic Design tervezési módszertant. A benne használt első három elnevezést – <strong>atomok, molekulák, organizmusok</strong> – a természet ihlette. &nbsp;A kémiában az atomok minden anyag alapvető építőelemei, a molekulák kettő vagy több atomból álló csoportok és az organizmusok olyan molekulák együttesei, amelyek egységként működnek együtt.</p><p>Tehát az Atomic Design egy olyan tervezési módszertan amely egy könnyen értelmezhető &nbsp;keretrendszert ad a már ipari standardnak mondható komponens alapú fejlesztés hatékonyabb rendszerezéséhez. Olyan moduláris minta, ami öt különböző szintből áll, melyek együttműködésével létrejön egy konzisztens rendszer (<span style="color:hsl(150,75%,60%);">Design System</span>), ezzel a képlettel megteremtjük az egyik legmodernebb módszertanát a felhaszánlói felületek tervezésének. &nbsp;</p><figure class="image"><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/atomic_design_standard_6e0c4fb2ea/atomic_design_standard_6e0c4fb2ea.png" alt="atomic-design-standard.png"><figcaption>Az Atomic Design felépítése</figcaption></figure><h2><strong>A módszertan öt szintje</strong></h2><ol><li><strong>Atomok:</strong> Mint ahogy a kémiában is, olyan alapvető építőelemek, alapvető HTML tagek, mint az űrlapcímkék, buttonok, inputok, egy szövegmező, animációk, betűtípusok és minden olyan eszköz, amit már nem lehet tovább bontani anélkül, hogy működésképtelenek lennének.</li><li><strong>Molekulák:</strong> UI-elemek viszonylag egyszerű csoportjai, melyek egységként működnek együtt. Például egy űrlapcímke, a button és az input összekapcsolható egy keresési űrlapmolekula létrehozásához.</li><li><strong>Organizmusok:</strong> Viszonylag összetett UI-komponensek, melyek molekulák és/vagy atomok és/vagy más organizmusok csoportjaiból állnak. Egy interface különálló szakaszait alkotják. Például a fejléc, ahol már van egy logó, menü és az előbb említett keresési űrlapmolekula.</li><li><strong>Sablonok:</strong> Ennél az elnevezésnél Brad már visszatért a megrendelő által is jobban érthető, köznyelvben használt kifejezéshez. Organizmusok halmaza, oldalszintű objektumok, melyek megfogalmazzák a terv mögöttes tartalomszerkezetét. Ez már majdnem a kész remekmű.</li><li><strong>Oldalak:</strong> A sablonok konkrét példányai, felhasználói felület valódi reprezentatív tartalommal.</li><li><strong>+1 Szekciók:</strong> A tapasztalataink alapján a fejlesztők és desginerek közötti könnyebb együttműködés és értelmezés jegyében létrehoztunk egy újabb szintet. Ezt szekciónak neveztük el. A szekciók organizmusokat és annál kisebb szinteket tartalmazó egységek, amelyek térbeli tulajdonságokat – mint például margin és padding távolságok és orientációk – és a gyerekeik egymáshoz viszonyított elrendezését határozzák meg.</li></ol><figure class="image"><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/atomic_design_plus_section_3b94538413/atomic_design_plus_section_3b94538413.png" alt="atomic-design-plus-section.png"><figcaption>Az Atomic Design kiegészítése a section struktúrával</figcaption></figure><h2><strong>Előnyei és hátrányai</strong></h2><p>Okay, szóval mire fel ez a nagy felhajtás? Mire jó ez az egész rendszer? Megtanulunk új fogalmakat és új struktúrákat, sőt még új logikára is váltunk. De miért? 🧐</p><p>Ezek jogos kérdések, tekintve, hogy már régóta építünk úgy UI rendszereket, hogy ezt az ötlépcsős módszert alkalmaznánk – és azok is működnek. Ez is jogos felvetés. Ez a módszertan egy tervezési formát biztosít, amely alapjaiban máshonnan közelíti meg a tervezés folyamatát, ezáltal segít hatékonyabb, átgondoltabb UI <span style="color:hsl(150,75%,60%);">Design Sytem</span> létrehozásában.</p><p>A módszer egyik legnagyobb előnye az absztrakt és konkrét közötti gyors váltás képessége. Egyszerre láthatjuk a UI elemeket atomi szintre bontva és azt is, hogy ezek az elemek hogyan kombinálhatóak egymással, és hogyan alkotják végső elképzelésünket, az oldalakat amelyeket végül szállítunk a megrendelőinknek.</p><p>Az ilyen módú körültekintő tervezés nem engedi, hogy hanyagul végezzük a munkánkat, amivel <a href="https://uxdesign.cc/what-is-design-debt-and-why-you-should-treat-it-seriously-4366d33d3c89"><span style="color:hsl(150,75%,60%);">Design Dept</span></a>-et halmozhatnánk fel. A keretrendszer rákényszerít minket, hogy hogyan, és miként haladjunk a tervezéssel.</p><p>Ez az elmélet elsőre furcsának, szokatlannak és bonyolultnak hathat, de ha ráérzünk és megértjük, akkor valójában sokkal gyorsabb lehet vele a munka. Lehet, hogy nem rögtön az első alkalommal leszünk gyorsabbak, sőt. Aki elsőre találkozik a rendszerrel, számítania kell majd azokra a kérdésekre, hogy:</p><ul><li>Mi számít egyáltalán atomnak? A szövegek például atomok?</li><li>Ez az input field a rajta ülő labellel atom vagy molekula?</li><li>A social gombok (amik atomok) azok egymás melletti felsorakoztatása az molekula? Ha igen, akkor micsoda a kártya, ami azokat tartalmazza?</li><li>Egy adott szint – mondjuk az organizmusok – tartalmazhatnak magukhoz hasonló elemeket?</li></ul><figure class="image"><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/what_wait_410fd07cb2/what_wait_410fd07cb2.gif" alt="what-wait.gif"></figure><p>Igen, ilyenkor jönnek ezek a reakciók...<br><br>A lényeg, hogy nem kell aggódni! Ezek azok a dolgok, amelyek a maguk idejében a helyére kerülnek majd mindenki fejében. Persze elmondhatjuk a nagy titkot és a választ ezekre a kérdésekre: Nincs semmi sem kőbe vésve. Használd úgy, ahogy te és a csapatod minél jobban érteni tudja.&nbsp;<br><br>Frost hangsúlyozza, hogy a módszert nem egy kőbevésett szabályként kell kezelni. Sokkal inkább egy elvként, ami azon alapszik, hogy ha már csinálod, csináld jól minden egyes elemét!</p><h2><strong>8 érv az Atomic Design mellett</strong></h2><p>Az elmúlt 2 évben 14 sikeres projektet valósítottunk meg atomic design alapokon, ezen tapasztalatok projektek és az ügyfeleink visszajelzése alapján az alábbi érveket szedtük össze a módszertan mellett. (Sikertelen projekt nem volt 😉)</p><ol><li><strong>Keverhetőek és párosíthatóak az elemek</strong> kedvünk szerint. Az elején szükséges némi idő- és munkabefektetés, amíg legyártjuk az atomokat, de a későbbiekben ez többszörösen megtérül.</li><li><strong>Gyorsabbá válik a további weboldalak szerkesztése</strong>, hiszen gyorsan elővehetjük a már meglévő atomokat, molekulákat, amiket újra használhatunk, maximum egy kis módosítás, testre szabás lehet szükséges.</li><li><strong>Egyszerű Style Guide készítés.</strong> Amennyiben egy webhelyet a kezdetektől ezen elv alapján készítünk, akkor az összes atom és molekula alapvető stílusvezetőként szolgálhat. Egyébként még más elven készített oldalak esetében is könnyen konvertálhatunk.</li><li><strong>Könnyen érthető elrendezés.</strong> A weboldal kódja jellemzően sokkal könnyebben olvasható, mint más módon létrehozott webhely kódja. Ez nem csak a szerkesztés idejére igaz, hanem a későbbiekben is, amikor egy weboldalt módosítani szükséges, vagy referenciaként tekintünk rá vissza.&nbsp;</li><li><strong>Következetesebb kódok.</strong> Az Atomic Design segítségével előre definiált atomokat használunk a felhasználói felületekel rendezésének létrehozásához, így könnyen látható, hogy mely összetevőket alkalmaztuk a webhely különböző részein.<br>Ez csökkenti a duplikált kód írásának valószínűségét is. Például, ha valaki egy piros gombot szeretne létrehozni, vagy átalakítani a kéket pirossá, akkor az egész oldalt át kell néznie, hogy van-e már ilyen piros gomb, ha van, akkor mennyi és hol, majd másolni vagy szerkeszteni az összes kódot. Atomic Design segítségével viszont könnyen visszaléphetünk az atomok listájára és megtaláljuk a piros gombot, vagy ha kék, akkor könnyen átszínezhetjük – az összeset egyszerre.</li><li><strong>Hatékonyabb komponens alapú fejlesztés</strong>hez képest az atomic design a egy mankót ad, segít joban strukturálni a kódbázost.</li><li><strong>Könnyebb és gyorsabb frissítés, vagy eltávolítás.</strong> Mivel egyszerre csak egy atomot, molekulát vagy organizmust módosítunk, könnyen biztosítható, hogy mindenhol ugyanaz a változás létrejöjjön.</li><li><strong>Alacsonyabb learning curve.</strong> A Fejlesztő / Designer hamarabb meg tudja érteni a folyamatokat és a témát, a jól felépített rendszerben hamarabb lehet értéket teremteni.</li></ol><h2><strong>Alkalmazási lehetőségek</strong></h2><p>Természetesen nem minden megrendelés esetén alkalmazható a módszer, de nem árt ismerni a már jól bevált eszközök mellett, hiszen nem a megszokott módon különíti el a szerkezeti egységeket, hanem eltérően, a kicsitől halad a nagyobb felé.</p><p>Magyarországon az egyik legismertebb atomic design alapú fejlesztése a <a href="https://dotcreative.hu/projects/MVMagyarllamVasutak">MÁV csoport megújult online jegyvásárló rendszere</a>, amely tökéletes példája annak, hogy mennyire felhasználóbaráttá szabható egy elavult és nem igazán működő rendszer.</p><figure class="image"><img src="https://storage.googleapis.com/kifli.tech/strapi-assets/dot_creative_mav_465d33aa44/dot_creative_mav_465d33aa44.png" alt="dot-creative-mav.png"><figcaption>A Dot Creative ügynökség elkészítette a MÁV megújult online rendszerét</figcaption></figure><p>A Kiflinél az elmúlt 2 évben minden felhasználói felületet atomic design felépítésben készítettünk el, ez idő alatt ügyfeleink visszaigazolták a módszer hozzáadott értékét, megbízhatóbb, konzisztensebb felületeket tudunk létrehozni és fenntartani rövid iterációs idő mellett. A legnagyobb kihívás és ezzel siker is, amikor ezt a folyamatot egy idősebb szervezetnél tesszük, mint ezt tettük az ELTE weboldalainál is.&nbsp;</p>

<p>Emlékszel még a kémia órák gyötrelmeire a molekulák atomok és organizmusok bűvöletében? Az Atomic Design módszertana a szoftverfejlesztést a kémia törvényeivel párosítja, hogy könnyen módosítható felhasználói felületeket hozzon létre. De, mi is ez és hogyan kell elképzelni a gyakorlatban?</p><p>Nézzük meg részletesen…</p>

large_atomic-design.png

medium_atomic-design.png

small_atomic-design.png

thumbnail_atomic-design.png

atomic-design.png

Atomic Design – digitális tervezés stabil alapokon 📏

kifli.tech @ 2024 - Minden jog fenntartva.

A megoldásaink amelyeket szolgáltatunk nem csak az ügyfeleink által látható problémákra adnak megoldást, mi túl megyünk azokon is.

kifli_logo.svg

Szükség van külső segítségre a projektedhez?

Digitális tervezés és szoftverfejlesztés.
Támogatjuk a projektedet platformok elindításától az MVP-kig. Gyors, szép, hatékony megoldásokat szállítunk. Dolgozzunk együtt a sikerért!

thumbnail_kifli.tech.png

kifli.tech.png

A kifli.tech tagjainak érdekfeszítő gondolatai mindenféle témában, vagy valami ilyesmi.