COVER_2.jpg
 
 

> Átfogó branding & webfejlesztés

Netopgraf - branding & website

 
 

> Kihívás

A projekt egy egyszerű felkéréssel indult: a cég szeretné megújítani fő termékének logóját. 

A Netopgraf lényegében nem egy dobozos termék, hanem egy szoftver, a hozzá kapcsolódó szolgáltatások és megoldások összessége.

Mivel az idők során a Netopgraf vált a cég fő arculatává, viszont annak vizuális megjelenését még 2010 körül hozták létre, helyes volt az igény a megújulásra. A Netopgraf csapata első körben nem tudta pontosan definiálni, hogy mi a tényleges probléma a cég akkori arculatával, azon kívül, hogy mindannyian érezték, szükség lesz ráncfelvarrásra.

Itt jöttünk mi a képbe. Az első egyeztetés után felajánlottunk egy konzultációt, hogy megbeszéljük a problémákat, azonosítsuk a fájdalom-pontokat és elkészítsünk egy tervet a Netopgraf brand [újra]építésére.

 

> Eredmény

A Netopgraf projekt egy átfogó, komplex és tudatos brandépítés példája.

A tervezés eredményeképpen létrejött az új logó és arculat, jelentős mennyiségű grafikai anyag: nyomtatott, digitális és animált grafikai elemek, egy professzionális design system, nem utolsó sorban pedig egy rendkívül felhasználóbarát website. A folyamat során rengeteget tanultunk és tanítottunk; ezek a know-how-k pedig mindkét felet nagymértékben építették. Az elkészült új megjelenéssel és website-tal pedig reményeink szerint nagyban hozzájárultunk a Netopgraf fejlődéséhez és céljukhoz, hogy még több ügyfélhez juttathassák el hiánypótló megoldásaikat az IT szektorban.

Amit terveztünk:

Stylescapes | Logo | Typográfiai rendszer | Színkészlet | Egyedi, többszintes grafikai elemek | Prezentáció sablon | Aruclati kézikönyv | Jegyzettömb | Névjegykártya | Brosúra | Boríték | Levélpapír | Mappa | Ruházat | Komplex, egyedi, több szintes ikon készlet | Egyedi illusztrációk és ábrák | Animációk (karakter és demo videok) | Fotózás | Webdesign elemek | Design System | Kattintható Figma Prototípus | Website

 

Ügyfél:

Netopgraf

Weboldal:

Partner:

Kifli Technologies

webfejlesztés

Kategória:

Branding, Webdesign, Webfejlesztés, Grafikai tervezés, Nyomdai, Animáció

2022


 
 
 

001

a kezdetek

A projekt egy egyszerű felkéréssel indult: a cég szeretné megújítani fő termékének logóját. 

A Netopgraf lényegében nem egy dobozos termék, hanem egy szoftver, a hozzá kapcsolódó szolgáltatások és megoldások összessége.

Mivel az idők során a Netopgraf vált a cég fő arculatává, viszont annak vizuális megjelenését még 2010 körül hozták létre, érthető és helyes volt az igény a megújulásra.

A Netopgraf csapata első körben nem tudta pontosan definiálni, hogy mi a tényleges probléma a cég akkori arculatával, azon kívül, hogy mindannyian érezték, szükség lesz ráncfelvarrásra.

Itt jöttünk mi a képbe. Az első egyeztetés után felajánlottunk egy konzultációt, hogy megbeszéljük a problémákat, azonosítsuk a fájdalom-pontokat és elkészítsünk egy tervet a Netopgraf brand [újra]építésére.

 
 
 
 

002

branding workshop

Mivel a Blank-nél alapelvünk a tabula rasa, a tiszta lap, igyekszünk minden projektet az alapokig lebontani, ha szükségét látjuk, majd megvizsgálni az okokat és tudatosan, alulról építkezni.

Ezért megkértük a Netopgraf csapatát, hogy egy [ az akkor aktuális Covid korlátozások miatt a személyes Braning Workshopunkat kiváltó ] Branding kérdőívet töltsenek ki, megvizsgálva a Netopgrafot, mint márkát: a múltban, a jelenben és a jövőben.

A visszajelzések alapján nagyon hasznos volt a kérdőív, kitöltése után sokkal tisztábban látta a csapat a márka értékeit, vízióját, küldetését, milyenségét. Mi pedig sokkal közelebb kerültünk a helyes megértéshez, ami minden tervezésünk alapja.

 
 
 
 

003

brand definition

A Branding Workshop eredményeként egy nagyon pontos Brand Definíciót hoztunk létre, ami tökéletesen meghatározta azt a zsigeri érzést, melyet a Netopgraf ügyfeleinek a márkával kapcsolatban az elvárások alapján érezniük kell.

A Netopgraf Brand Definíciója (az előzetesen meghatározott brand értékek és tulajdonságok alapján) a “Tiszta Forrás / Clean Flow” lett. A design csapatnak ezt az üzenetet kellett lefordítani vizuális nyelvre.

 
 
 
 

004

stylescape

Miután a Branding Kérdőívet lépésről lépésre végigvettük, értelmeztük és magunkévá tettük, a design csapat hozzálátott 3 különböző Stylescape variáció kidolgozásához, amely a rebranding folyamatunk első lépése.

Gondosan válogatott képi anyagok, néhány egyedi grafikai elem, kezdetleges gombok, geometriai formák, ábrázolási technikák, harmonizáló szín- és betűtípus kombinációkkal való kísérletezésünk elvezetett a Netopgraf brand leendő megjelenésének vizuális esszenciájához.

 
 
 
 

005

logo tervezés

A Netopgraf logó újratervezése nem bizonyult könnyű feladatnak, hiszen a régi embléma meglehetősen idejétmúlt volt és kardinálisan változtatni kellett rajta.

Számunkra egy rebranding folyamatnál kiemelten fontos a storytelling és a konzisztencia. Viszont a Netopgraf esetében sajnos nem igazán volt megfelelő a kiindulási alap, így amellett döntöttünk, hogy csupán a tipografikus irányvonalat őrizzük meg és az ‘N’ betűbe csempészünk vizuális jelentést.

Az új embléma nem csak a flow-t, az összefüggést, komplexitást szimbolizálja, hanem szabad asszociációs alapot biztosít a természetre és egy organikus megközelítésre. Láthatóvá teszi a természeti és az ember alkotta rendszerek közti hasonlóságot. Az embléma formája idézhet számunkra hullámzást, vagy folyamot, de ugyanígy elektromos vezetékeket, melyek az IT világ összekapcsoltságát biztosítják.

 
 
 
 

006

arculati kézikönyv

Két iterációs kör (finomhangolás és enyhe igazítások) után megszületett a Netopgraf új logója. Ezután a Stylescape kibővítéseként elkészítettük a megfelelő szín- és betűtípus kombinációkat, logó elrendezéseket és használatot bemutató,arculati szabályokat magába foglaló egyszerűsített útmutatót.

Ehhez már néhány generatív design alapú geometrikus terjedőmintát is készítettünk, mely a később kialakított teljes arculat szerves részét képzi.

Mindezeket végül egy ízléses, de legfőképpen funkcionális arculati kézikönyvbe szedtük.

 
 
 
 

007

nyomdai anyagok

Prémium minőségű brosúrát és cégbemutatót terveztünk, melyek egyrészt kimagaslóan támogatják az értékesítési folyamatokat, másrészt az arculati elemek reprezentációjával folyamatosan építik a bizalmat és a márkaismertséget.

Úgy hisszük, hogy minden egyes nagy gonddal és odaadással tervezett design elem - tűnjön bármilyen elhanyagolhatónak - hozzáad a nagy egészhez, mely végeredményben meghatározza a márkaélményt. Ezek azok az apró részletek, melyek nem csupán felismerhetővé, hanem emlékezetessé tesznek egy brandet.

 
 
 
 

008

generatív design elemek

A Netopgraf brand vizualitásának meghatározó alkotói az egyedi tervezésű grafikai elemek. Úgy láttuk, hogy a generatív design nyelve írja le a legméltóbb módon azokat a tudattalan asszociációkat, melyek adott esetben megjelennek lelki szemeink előtt a fizikai és felhő alapú IT rendszerek között kapcsolat és infrastruktúrára gondolva.

High-tech, mégis organikus hatást keltő megközelítéssel képzi le ez a stílus a hálózatfelderítés, vizualizáció és dokumentáció fogalmait.

 
 
 
 

009

felhasználóbarát ikon szett

A Netopgraf számára teljesen egyedi, több szinten működő ikon szettet terveztünk. Első körben az elvárásoknak megfelelően megterveztük a keretrendszert, meghatároztuk az általános szabályokat, majd megterveztük a közel 300 db egyedi ikonból álló, igényeknek megfelelően alakítható ikon szettet, első másodlagos és kiegészítő színekben, mind webes, mind pedig software felhasználói felület felhasználásra.

 
 
 
 

010

egyedi illusztrációk

A téma emészthetőbbé tétele érdekében úgy döntöttünk, hogy az arculatba beemelünk némi játékosságot a flat design karakterekkel. Ezek az illusztrációk nem csak megtörik a monoton ritmust a website design-jában, de tájékozódási pontként szolgálnak és reflektálnak a szöveges tartalomra. Feladatuk a szabályos, kötött IT rendszerek világának ellensúlyozása és az emberi aspektus megjelenítése.

 
 
 
 

011

reszponzív design

A tökéletes felhasználói élmény biztosítása érdekében az oldalon szereplő összes design elemet úgy alakítottuk ki, hogy minden felbontásban és elrendezésben tökéletesen működjön. 

Mivel a reszponzivitás minden általunk tervezett és kivitelezett website-nál minimum elvárás, így minden részletre kiemelt figyelmet fordítottunk. A célunk az volt, hogy az oldal mindenképp letisztultságot, egyszerűséget sugározzon; ne vonjuk el a figyelmet a grafikai elemekkel a lényegről, mégis vizuálisan megnyerő legyen.

 
 
 
 

012

kiegészítő arculati elemek / concept-ek

Minden branding folyamat során vannak olyan grafikai elemek, olyan hordozófelületek, melyeket prezentációs célzattal készítünk, majd van, hogy helyet kapnak a megvalósított tervek listáján is. Ezek a kisebb elemek szintén hozzájárulnak a márkaismertség növeléséhez és emelik annak értékét.

 
 
 
 

013

akik nélkül nem jöhetett volna létre a projekt:

Branding, Visual Identity & Graphic Design, Video, Animation - Lengyel Anna, Csizmazia András

Project Management, Prototyping - Gábor Zöldhegyi

Web Development - Gergő Káposzta, Máté Varholik

Photography - Ábel Kondics

Website design: Blank Design

Web development: Kifli Technologies

 
 
 
 

014

köszönet

Ezúton is szeretnénk megköszönni a lehetőséget az egész Netopgraf csapatnak, amiért bíztak bennünk, kooperatívan és hatékonyan tudtunk dolgozni az új brand kialakításán, különösképpen:

Cecília Rácz, Péter Hegedűs, Gergő Hegedűs, Antónia Dohán