Pánácz Design Blog
Redesign koncepció:
A minner.hu újratervezése
A redesign, azaz egy oldal újratervezése, újrarajzolása bizonyos időközönként szükséges lehet, mivel változnak a trendek, a technológia, a fogyasztói szokások stb. A blogomon tervezek egy olyan sorozatot elindítani, ahol egy-egy oldalt (aminek a redesign-ja valamiért érdekes lehet) újrarajzolok és kifejtem röviden, hogy miért úgy alakítottam át bizonyos dolgokat ahogy.
Első alkalommal a választásom a minner.hu főoldalára esett. Azon belül is csak a hajtás feletti részre, ami egyből megjelenik a látogatónak. Azért csak a hajtás feletti részt terveztem újra, mivel az egész főoldal elkészítése jóval időigényesebb lenne, viszont az eredményt tekintve már ezen is jól látszik az új irányvonal.
Fontosnak tartom leírni, hogy az ilyen bejegyzések még véletlenül sem az adott oldal leszólását jelentik. Épp ellenkezőleg olyan oldalakat választok, amiknek szívesen adok ezáltal egy-egy ötletet, egy tervet, hogy akár ilyen is lehetne. A minner esetében ez különösképpen igaz, mivel szabadúszó karrierem kezdetén is a minner csoport volt az egyik, ahol egyedi oldallal hírüladtam szolgáltatásaimat. Erről aztán egy minner cikk is készült. Így csakis építő jellegű bejegyzésnek szánom ezt.
Csapjunk is bele! 2021 július 5-én, délelőtt így festett a minner.hu:
És ez az általam újragondolt verzió:
A két képre kattintva új oldalon benyitva, teljes méretben is megnézhetőek.
Alapok
Az alap elképzelésem az volt, hogy túlságosan ne rugaszkodjunk el a jelenlegi verziótól. Ha egyik napról a másikra tényleg az új oldal fogadná a látogatót, akkor ne legyen az az érzése, hogy most eltévedt, nem tudja hol van, ő a minner.hu-t akarta benyitni. Az elkészült terv esetében még azt is megkockáztatom, hogy hirtelen észre sem venné a látogató, hogy megújult az oldal, csak érezné, hogy valami mintha más lenne.
Színek tekintetében ennek köszönhetően nem sok újdonság van. Az eddig használt több árnyalatú és színátmenetes pirosak helyett egy piros árnyalatot használok. Ezenkívűl a világos szürke, fehér és fekete alapokat vittem tovább.
Betűtípus tekintetében is egyszerűsítettem, egységesítettem a használtakat. Az új terven csak az Open Sans van használva.
Elrendezés
A jelenlegi minner.hu egy fix szélességű sávban jeleníti meg az oldal tartalmát. Maga a sáv egy fehér háttérrel rendelkezik és ami ettől jobbra-balra van, az pedig világosszürke. A világosszürke hátteret én is előszeretettel használom, mivel azon egy-egy fehér box kiemelkedve jelenik meg (főleg, ha még árnyékkal is rásegítünk erre a hatásra). A jelenlegi oldal esetén viszont, mivel az egész sáv fehér, ezzel a módszerrel igazából semmi sincs kiemelve. Az én új tervemen az egész oldal a világosszürke hátteret kapott és a kiemelt boxok (instant, kiemelt cikkek) kapták meg a fehér hátteret. Itt a könnyebb áttekinthetőség miatt nem éreztem úgy, hogy árnyékokkal további mélységet kellene adni ezeknek a boxoknak.
Továbbá ez a sávos megjelenés picit zsúfolt érzést kelthet. Azzal, hogy a fejlécet teljes szélességűre kihúztam, egy tágasabb, szellősebb megjelenést adtam az oldalnak.
Fejléc
Azon kívül, hogy kiszélesítettem a fejlécet, az elrendezést is átalakítottam picit.A felső piros sávba került középre a logó. A két oldalra a dátum és az ikonok. Alatta a menüpontok pedig már a világosszürke háttér előtt jelennek meg. Ezáltal is egy szellősebb, áttekinthetőbb fejléc hatását kelti. A felső sávból két menüpontot el is hagytam. A főoldal egyébként is szerepel már a menüben is és a logóra kattintva is elérhető (ez utóbbi is elég lenne, de a menüben megtartottam még én is). A minner események menüpontot pedig úgy ítéltem meg, hogy nem olyan fontos, hogy a fejlécben helyet kapjon.
Hírek megjelenése
Egy portáltól nem túl meglepő módon az oldal többi részét a hírek foglalják el különböző csoportokba rendezve. Itt is az volt a célom, hogy egyértelmű, informatív és könnyen átláthatóak legyenek. Az elrendezésen és a megjelenésen kicsit módosítva egyrészt szellősebb érzetet kelt ez a rész is szerintem, másrész több információ fért ki a hajtás feletti részre. Tehát több hír látható görgetés nélkül.
Kisebb felhasználói élmény (UX) problémák
Ez már nem a felhasználói felülethez (UI) tartozó rész de pár kisebb módosítást a működésben még javasolnék. Az egyik a fő hír fölé húzásra való effektje. Vagyis annak hiányának a pótlása. A többi elemnél mindenhol látni egy kis elszíneződést, megmozdulást, ha az egeret az adott rész fölé visszük, így jelezve, hogy az bizony kattintható. A másik ilyen kis észrevétel itt a felső szegmensben az a jelenlegi instant box. Ez egy szép nagy, piros csempe, viszont csak a csempe jobb oldalán elhelyezett kis piros gomb kattintható. Egyszerűbb lenne, ha az egészet meg tudnánk kattintani (és akár a gomb el is hagyható).
Ezek persze apróságok, és több ilyen apróság sem jelenti feltétlenül azt, hogy az oldalt nem jó használni. Viszont minél több ilyet sikerül kiküszöbölni, annál kényelmesebb, élményszerűbb lesz az oldal böngészése.
Végszó
Végezetül szeretném leírni, hogy én is rendszeres olvasója vagyok a minner-nek és a fentiek csak építő jellegű kritikák, észrevételek, ötletek. Továbbá az itt bemutatott redesign koncepció egy pár óra alatt összeállított munka, tehát inkább csak az első meglátásaimat, ötleteimet tükrözik.
Hogy tetszett ez a bejegyzés?
További bejegyzések
Admin felület egyedi fejlesztéshez - Filament
A Filament nevű admin csomag bemutatása és ezen keresztül betekintés az egyedi fejlesztés világába és néhány tévhit eloszlatása.
Egyedi webalkalmazás (SaaS) fejlesztése - Optify Fitness esettanulmány
Egyedi fejlesztésű online szolgáltatás készítésének esettanulmánya az ötlettől az élesítésig.
Mitől függ egy bemutatkozó weboldal ára - Árkalkulátorral
Milyen szempontok befolyásolják egy weboldal elkészítésének az árát? Ezeket igyekeztem összeszedni és készítettem egy kalkulátort is.
A data36 redesign-jának esettanulmánya
Mester Tomi data36 nevű, adatelemzéssel foglalkozó oldalát terveztem újra. A teljes folyamat, előtte-utána képek és Tomi véleménye is a bejegyzésben.
Hogy dolgozom szabadúszó webfejlesztőként?
Egyedi fejlesztés, egyedi webdesign alapján. Ahogy én csinálom.
1,5 év szabadúszóként
2021. március 1-én kezdtem bele az egyéni vállalkozásomba, a Pánácz Design-ba. Összeszedtem, hogy mi történt az eltelt másfél évben.
Milyen szoftvereket használok szabadúszó webdesignerként?
Ebben a bejegyzésben azt szedtem össze, hogy milyen szoftvereket, szolgáltatásokat használok szabadúszóként a munkámhoz.
1 perc, 10 perc, 1 óra kihívás - VIDEÓVAL
Webdesign készítés 1 perc, 10 perc és 1 óra alatt. Az egész folyamatot megnézheted egy YouTube videón keresztül is.
Redesign koncepció: legnagyobbvallalkozas.hu
Több helyen is kritizálták a legnagyobbvallalkozas.hu weboldal design-ját, ami az üzenete fényében érthető. Megterveztem, hogy szerintem hogy kellene kinéznie.
Redesign - Hogy csinálják a nagyok?
Netflix, Spotify, Dropbox és további nagy internetes cégek oldalai is folyamatosan változnak. Nézzük meg, hogy 2 év alatt milyen módosításokat csináltak.
Esettanulmány: Torma Valentin új weboldala
Torma Valentin az egyik legnépszerűbb magyar fitnesz YouTuber, így több tízezer emberhez jut el a videói által. Ebből a blogbejegyzésből megtudhatod, hogy készült el az új weboldala.
1 perc, 10 perc, 1 óra kihívás - Mennyi munka van egy webdesign-nal?
Webdesign készítés 1 perc, 10 perc és 1 óra alatt. Mennyi munka van egy design-nal és miért kerül annyiba amennyi? Ezekre a kérdésekre igyekszem válaszolni.
Animációk a weboldalon: Gagyi - Menő, Zavaró - Hasznos
Ebben a bejegyzésben a weboldalakon használt animációkat csoportosítom, elemzem. Melyek azok, amik elérik a kívánt hatást, és melyek azok, amik egyenesen rontják a felhasználói élményt?
“Olyan weboldalt szeretnék, mint az Apple-é!” Biztos?
Gyakran hallani a címben szereplő idézetet ügyfelektől, amikor az első egyeztetésekre kerül sor az oldaluk design-jának kialakításáról. Nézzük meg mi a gond ezzel a kijelentéssel és mire gondolhatnak igazából?
Első napom szabadúszóként
A saját vállalkozás elindításának egyik legnagyobb kérdése talán az volt, hogy honnan lesznek ügyfeleim? Hogy jutok majd el azokhoz az emberekhez, akiknek az én szolgáltatásomra van szüksége? Több ötletem is volt, ezekből kettőt az első nap el is sütöttem.
Hírlevél
Iratkozz fel a hírlevélre, így biztosan nem maradsz le az új bejegyzésekről!