{"id":2841,"date":"2026-10-21T13:27:05","date_gmt":"2026-10-21T11:27:05","guid":{"rendered":"https:\/\/szmartindesign.hu\/?page_id=2841"},"modified":"2026-10-27T15:21:33","modified_gmt":"2026-10-27T14:21:33","slug":"gabilak-ux-ui-case-study","status":"publish","type":"page","link":"https:\/\/szmartindesign.hu\/en\/gabilak-ux-ui-case-study\/","title":{"rendered":"Gabilak UX \/ UI Case Study"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2841\" class=\"elementor elementor-2841 elementor-bc-flex-widget\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0cada50 e-con-full smv e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"0cada50\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16bf247 elementor-widget elementor-widget-html\" data-id=\"16bf247\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\nbody:has(.smv) .page-header{display:none!important}\nbody:has(.smv) #main,body:has(.smv) .site-main{padding:0!important;background:#EFE6D8}\nbody:has(.smv) .si-container{max-width:none!important;padding:0!important}\nbody:has(.smv) #colophon{display:none}\nhtml{scroll-behavior:smooth}\n.smv{--cream:#EFE6D8;--cream2:#E6DAC7;--ink:#141414;--ink2:#1E1C1A;--rust:#B4442B;--rust2:#8F3220;--ochre:#D88A3D;--muted:#5E574E;--line:rgba(20,20,20,.16);--disp:'Anton',Impact,'Arial Narrow',sans-serif;--body:'Archivo',system-ui,sans-serif;\n background:var(--cream)!important;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}\n.smv,.smv .e-con{padding:0!important;gap:0!important;margin:0!important;min-height:0!important}\n.smv .e-con{width:100%!important;max-width:none!important}\n.smv .elementor-widget{margin:0!important;width:100%!important;max-width:none!important}\n.smv .elementor-widget-container{margin:0!important;padding:0!important}\n.smv *{box-sizing:border-box}\n.smv a{color:inherit;text-decoration:none}\n.smv h1,.smv h2,.smv h3,.smv h4,.smv p{margin:0;font-weight:inherit;color:inherit;text-transform:none;font-family:inherit;letter-spacing:inherit}\n.smv img{display:block;max-width:100%;height:auto}\n.smv [id]{scroll-margin-top:72px}\n.smv .wrap{max-width:1240px;margin:0 auto;padding:0 40px}\n.smv .disp{font-family:var(--disp);text-transform:uppercase;font-weight:400;line-height:.92;letter-spacing:.005em}\n.smv .lbl{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}\n.smv .arrow-link{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:gap .3s,color .3s}\n.smv .arrow-link:hover{gap:18px;color:var(--rust)}\n.smv .btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--cream);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:14px 20px;border:1.5px solid var(--ink);transition:background .3s,border-color .3s}\n.smv .btn:hover{background:var(--rust);border-color:var(--rust)}\n.smv .bar{display:block;width:44px;height:5px;background:var(--rust);margin-bottom:18px}\n\n\/* top bar *\/\n.smv .elementor-widget:has(.top){position:sticky!important;top:0;z-index:60}\nbody.admin-bar .smv .elementor-widget:has(.top){top:32px}\n@media (max-width:782px){body.admin-bar .smv .elementor-widget:has(.top){top:0}}\n.smv .top{background:var(--cream);border-bottom:1px solid var(--line)}\n.smv .top .wrap{display:flex;align-items:center;gap:32px;height:68px}\n.smv .logo{font-family:var(--disp);font-size:26px;letter-spacing:.01em;text-transform:uppercase;margin-right:auto;line-height:1}\n.smv .nav{display:flex;gap:28px}\n.smv .nav a{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:relative;padding:4px 0}\n.smv .nav a::after{content:\"\";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--rust);transform:scaleX(0);transform-origin:left;transition:transform .3s}\n.smv .nav a:hover::after{transform:scaleX(1)}\n\n\/* hero *\/\n.smv .hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);min-height:min(640px,calc(100vh - 100px))}\n.smv .hero-copy{padding:56px 40px 48px max(40px,calc((100vw - 1240px)\/2 + 40px));display:flex;flex-direction:column;justify-content:center;gap:28px}\n.smv .hero h1{font-size:clamp(54px,6.4vw,100px)}\n.smv .hero h1 span{color:var(--rust)}\n.smv .hero-sub{font-size:18px;line-height:1.55;max-width:30em;color:var(--ink2)}\n.smv .hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}\n.smv .art{position:relative;overflow:hidden;background:var(--cream)}\n.smv .art .b-rust{position:absolute;left:0;top:0;bottom:0;width:82%;background:var(--rust)}\n.smv .art .b-ochre{position:absolute;right:0;bottom:0;width:34%;height:44%;background:var(--ochre)}\n.smv .art .b-strip{position:absolute;right:0;top:0;width:18%;height:56%;display:flex;align-items:center;justify-content:center}\n.smv .art .vtext{writing-mode:vertical-rl;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:16px}\n.smv .art .vtext::after{content:\"\";width:1.5px;height:70px;background:var(--ink)}\n.smv .art img{position:absolute;left:6%;bottom:0;width:86%;height:auto;max-height:96%;object-fit:contain;object-position:bottom;filter:grayscale(1) contrast(1.08)}\n.smv .art .plus{position:absolute;left:12%;top:58%;width:30px;height:30px;opacity:.7}\n.smv .art .plus::before,.smv .art .plus::after{content:\"\";position:absolute;background:var(--cream);left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}\n.smv .art .plus::after{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}\n.smv .art .pix{position:absolute;right:5%;bottom:5%;display:grid;grid-template-columns:repeat(5,11px);gap:5px}\n.smv .art .pix i{width:11px;height:11px;background:var(--ink)}\n.smv .art .pix i:nth-child(3n){background:var(--rust)}\n.smv .art .pix i:nth-child(4),.smv .art .pix i:nth-child(7){background:transparent}\n\n\/* about *\/\n.smv .about{display:grid;grid-template-columns:1.05fr .7fr .95fr;border-bottom:1px solid var(--line)}\n.smv .about-copy{padding:56px 40px 56px max(40px,calc((100vw - 1240px)\/2 + 40px));display:flex;flex-direction:column;gap:20px}\n.smv .about-copy h2{font-size:56px}\n.smv .about-copy p{max-width:32em;color:var(--ink2)}\n.smv .stats{padding:48px 32px;display:flex;flex-direction:column;justify-content:center}\n.smv .stat{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}\n.smv .stat:last-child{border-bottom:0}\n.smv .stat b{font-family:var(--disp);font-weight:400;font-size:44px;line-height:1;min-width:78px}\n.smv .stat span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.35}\n.smv .mono{position:relative;background:var(--ink);overflow:hidden;min-height:360px;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px);background-size:5px 5px}\n.smv .mono .big{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-family:var(--disp);font-size:clamp(220px,22vw,340px);color:var(--rust);line-height:.8;mix-blend-mode:normal;opacity:.95}\n.smv .mono .sq1{position:absolute;right:16%;top:12%;width:22px;height:22px;background:var(--ochre)}\n.smv .mono .sq2{position:absolute;left:14%;bottom:14%;width:22px;height:22px;background:var(--cream)}\n\n\/* services *\/\n.smv .services{background:var(--ochre);padding:48px 0 52px}\n.smv .sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:36px}\n.smv .sec-head h2{font-size:46px}\n.smv .svc-grid{display:grid;grid-template-columns:repeat(4,1fr)}\n.smv .svc{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:4px 28px}\n.smv .svc+.svc{border-left:1.5px solid rgba(20,20,20,.35)}\n.smv .svc:first-child{padding-left:0}\n.smv .ico{width:52px;height:52px;background:var(--ink);position:relative}\n.smv .ico.i1::after{content:\"\";position:absolute;inset:15px;background:var(--ochre)}\n.smv .ico.i2::after{content:\"\";position:absolute;inset:13px;border-radius:50%;border:7px solid var(--ochre)}\n.smv .ico.i3{background:transparent}.smv .ico.i3::before{content:\"\";position:absolute;inset:0;background:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 45%,55% 45%,55% 0)}\n.smv .ico.i4{background:transparent;display:grid;grid-template-columns:1fr 1fr;gap:4px}.smv .ico.i4 i{background:var(--ink)}.smv .ico.i4 i:nth-child(4){background:transparent;border:3px solid var(--ink)}\n.smv .svc h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}\n.smv .svc p{font-size:14px;line-height:1.5;color:#2A2017}\n\n\/* skills *\/\n.smv .skills{display:grid;grid-template-columns:1fr .85fr .9fr;border-bottom:1px solid var(--line)}\n.smv .skills>div{padding:52px 40px}\n.smv .skills>div:first-child{padding-left:max(40px,calc((100vw - 1240px)\/2 + 40px))}\n.smv .skills>div+div{border-left:1px solid var(--line)}\n.smv .skills h2{font-size:46px;margin-bottom:26px}\n.smv .sk{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:16px;padding:7px 0;font-size:13.5px}\n.smv .sk .track{height:6px;background:rgba(20,20,20,.1);position:relative}\n.smv .sk .track i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}\n.smv .sk .track i::after{content:\"\";position:absolute;right:-28%;top:0;bottom:0;width:28%;background:var(--ochre)}\n.smv .is-in .sk .track i{width:var(--w)}\n.smv .sk em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-width:70px;text-align:right}\n.smv .steps{display:flex;flex-direction:column;justify-content:center}\n.smv .step{display:flex;align-items:center;gap:22px;padding:14px 0;border-bottom:1px solid var(--line)}\n.smv .step:last-child{border-bottom:0}\n.smv .step b{font-family:var(--disp);font-weight:400;font-size:58px;line-height:.9;min-width:74px}\n.smv .step:nth-child(2) b{color:var(--ochre)}.smv .step:nth-child(3) b{color:var(--rust)}\n.smv .step span{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}\n.smv .step small{display:block;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}\n.smv .philo{display:flex;flex-direction:column;justify-content:center;gap:28px}\n.smv .philo p{font-size:20px;line-height:1.45;font-weight:500;max-width:17em}\n\n\/* projects *\/\n.smv .projects{padding:52px 0 60px;border-bottom:1px solid var(--line)}\n.smv .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}\n.smv .proj .ph{display:block;overflow:hidden;background:var(--cream2);aspect-ratio:4\/3}\n.smv .proj .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}\n.smv .proj:hover .ph img{transform:scale(1.04)}\n.smv .proj-meta{display:flex;align-items:center;gap:14px;padding-top:16px}\n.smv .proj-meta b{font-family:var(--disp);font-weight:400;font-size:30px;line-height:1;white-space:nowrap}\n.smv .proj-meta .arrow-link{white-space:nowrap;flex:none}\n.smv .proj-meta span{font-size:14px;font-weight:600;margin-right:auto;line-height:1.3}\n.smv .proj-meta span small{display:block;font-size:12px;color:var(--muted);font-weight:500}\n\n\/* results (dark) *\/\n.smv .results{background:var(--ink);color:var(--cream);padding:56px 0}\n.smv .results .wrap{display:grid;grid-template-columns:.8fr auto 1.6fr auto;gap:40px;align-items:center}\n.smv .results h2{font-size:46px;color:var(--cream)}\n.smv .q{width:84px;height:84px;background:var(--rust);display:grid;place-items:center;font-family:var(--disp);font-size:70px;line-height:1;padding-top:22px;color:var(--ink)}\n.smv .slides{position:relative;min-height:120px}\n.smv .slide{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}\n.smv .slide.on{opacity:1;transform:none;pointer-events:auto;position:relative}\n.smv .slide p{font-size:21px;line-height:1.45;font-weight:500;max-width:30em}\n.smv .slide p strong{color:var(--ochre);font-weight:700}\n.smv .slide cite::before{content:\"\u2014 \"}\n.smv .slide cite{display:block;margin-top:14px;font-style:normal;font-size:13px;color:#B9AE9C}\n.smv .arrows{display:flex;gap:10px}\n.smv .arrows button{width:44px;height:44px;border:1.5px solid rgba(239,230,216,.5);background:transparent;color:var(--cream);font-size:18px;cursor:pointer;transition:background .3s,color .3s;border-radius:0;padding:0;line-height:1}\n.smv .arrows button:hover{background:var(--cream);color:var(--ink)}\n.smv .dots{display:flex;gap:6px;margin-top:22px}.smv .dots i{width:22px;height:3px;background:rgba(239,230,216,.25)}.smv .dots i.on{background:var(--ochre)}\n\n\/* contact *\/\n.smv .contact{display:grid;grid-template-columns:1fr 1fr 1fr}\n.smv .c-left{background:var(--rust);padding:52px 40px 52px max(40px,calc((100vw - 1240px)\/2 + 40px));display:flex;align-items:center}\n.smv .c-left h2{font-size:clamp(38px,3.3vw,54px);color:var(--ink);line-height:.95}\n.smv .c-left h2 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--ink)}\n.smv .c-mid{padding:52px 40px;display:flex;flex-direction:column;justify-content:center;gap:20px}\n.smv .ci{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}\n.smv .ci svg{width:20px;height:20px;flex:none}\n.smv .ci a:hover{color:var(--rust)}\n.smv .c-right{background:var(--ink);color:var(--cream);padding:52px 40px;display:flex;flex-direction:column;justify-content:center;gap:22px}\n.smv .c-right p{color:#C9BFAE;font-size:15px}\n.smv .c-right .btn{background:var(--rust);border-color:var(--rust);color:var(--ink);align-self:flex-start;font-size:13px;padding:16px 22px}\n.smv .c-right .btn:hover{background:var(--cream);border-color:var(--cream)}\n.smv .c-right .arrow-link{align-self:flex-start;color:var(--cream)}\n.smv .c-right .arrow-link:hover{color:var(--ochre)}\n.smv .foot{border-top:1px solid var(--line)}\n.smv .foot .wrap{display:flex;align-items:center;gap:24px;height:72px}\n.smv .foot .logo{font-size:24px}\n.smv .foot small{font-size:12px;color:var(--muted);margin-right:auto}\n.smv .foot nav{display:flex;gap:22px}\n.smv .foot nav a{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}\n.smv .foot nav a:hover{color:var(--rust)}\n.smv .totop{width:36px;height:36px;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:14px;transition:background .3s,color .3s}\n.smv .totop:hover{background:var(--ink);color:var(--cream)}\n\n\/* motion *\/\n.smv-js .smv .rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}\n.smv-js .smv .rv.is-in{opacity:1;transform:none}\n.smv-js .smv .art .b-rust{transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.7,0,.2,1)}\n.smv-js .smv .art .b-ochre{transform:scaleX(0);transform-origin:right;transition:transform 1s .25s cubic-bezier(.7,0,.2,1)}\n.smv-js .smv .art img{opacity:0;transition:opacity 1s .45s}\n.smv-js .smv .art.is-in .b-rust,.smv-js .smv .art.is-in .b-ochre{transform:none}\n.smv-js .smv .art.is-in img{opacity:1}\n.elementor-editor-active .smv .rv,.elementor-editor-active .smv .art *{opacity:1!important;transform:none!important}\n@media (prefers-reduced-motion:reduce){.smv *{transition:none!important;animation:none!important}.smv-js .smv .rv{opacity:1;transform:none}}\n\n\/* responsive *\/\n@media (max-width:1100px){\n .smv .nav{display:none}\n .smv .svc-grid{grid-template-columns:1fr 1fr;row-gap:32px}.smv .svc:nth-child(3){border-left:0;padding-left:0}\n .smv .skills{grid-template-columns:1fr 1fr}.smv .philo{grid-column:1\/-1;border-left:0!important;border-top:1px solid var(--line)}\n .smv .results .wrap{grid-template-columns:auto 1fr;}.smv .results h2{grid-column:1\/-1}\n}\n@media (max-width:860px){\n .smv .wrap{padding:0 20px}\n .smv .top .btn{padding:11px 14px}\n .smv .hero{grid-template-columns:1fr}.smv .hero-copy{padding:40px 20px}.smv .art{min-height:420px}\n .smv .about{grid-template-columns:1fr}.smv .about-copy{padding:44px 20px}.smv .stats{padding:0 20px 32px}.smv .mono{min-height:280px}\n .smv .svc-grid{grid-template-columns:1fr}.smv .svc{padding:0!important;border:0!important}\n .smv .skills{grid-template-columns:1fr}.smv .skills>div{padding:40px 20px!important;border-left:0!important;border-top:1px solid var(--line)}\n .smv .sk{grid-template-columns:120px 1fr}.smv .sk em{display:none}\n .smv .proj-grid{grid-template-columns:1fr}\n .smv .results .wrap{grid-template-columns:1fr;gap:24px}\n .smv .contact{grid-template-columns:1fr}.smv .c-left,.smv .c-mid,.smv .c-right{padding:40px 20px}\n .smv .foot .wrap{flex-wrap:wrap;height:auto;padding-top:20px;padding-bottom:20px}\n .smv .sec-head{flex-direction:column;align-items:flex-start}\n}\n<\/style>\n<script>\ndocument.documentElement.classList.add('smv-js');\n(function(){function go(){\n var els=document.querySelectorAll('.smv .rv,.smv .art');\n if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-in')});return}\n var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-in');io.unobserve(x.target)}})},{rootMargin:'0px 0px -8% 0px',threshold:.1});\n els.forEach(function(e){io.observe(e)});\n document.querySelectorAll('.smv [data-slider]').forEach(function(s){\n  var slides=s.querySelectorAll('.slide'),dots=s.querySelectorAll('.dots i'),i=0;\n  function show(n){i=(n+slides.length)%slides.length;slides.forEach(function(el,k){el.classList.toggle('on',k===i)});dots.forEach(function(el,k){el.classList.toggle('on',k===i)})}\n  s.querySelector('[data-prev]').addEventListener('click',function(){show(i-1)});\n  s.querySelector('[data-next]').addEventListener('click',function(){show(i+1)});\n });\n}\nif(document.readyState!=='loading')go();else document.addEventListener('DOMContentLoaded',go)})();\n<\/script><style>\n\/* case study \u2013 bold *\/\n.smv .cs-hero{display:grid;grid-template-columns:1.1fr .9fr;border-bottom:1px solid var(--line);min-height:min(620px,calc(100vh - 100px))}\n.smv .cs-copy{padding:52px 40px 48px max(40px,calc((100vw - 1240px)\/2 + 40px));display:flex;flex-direction:column;justify-content:center;gap:22px}\n.smv .cs-copy .back{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}\n.smv .cs-copy .back:hover{color:var(--rust)}\n.smv .tag{display:inline-flex;gap:10px;align-items:center}.smv .tag i{width:10px;height:10px;background:var(--rust)}\n.smv .cs-copy h1{font-size:clamp(50px,5.6vw,88px)}\n.smv .cs-copy h1 span{color:var(--rust)}\n.smv .cs-copy p{font-size:18px;line-height:1.55;max-width:32em;color:var(--ink2)}\n.smv .cs-art{position:relative;overflow:hidden;background:var(--ink)}\n.smv .cs-art .b-rust{position:absolute;right:0;top:0;width:72%;height:70%;background:var(--rust)}\n.smv .cs-art .b-ochre{position:absolute;left:0;bottom:0;width:30%;height:24%;background:var(--ochre)}\n.smv .cs-art .card{position:absolute;left:10%;right:8%;top:50%;transform:translateY(-50%);background:var(--cream);box-shadow:14px 14px 0 rgba(0,0,0,.35)}\n.smv .cs-art .card img,.smv-js .smv .cs-art .card img{position:static!important;left:auto;bottom:auto;width:100%!important;max-height:none!important;aspect-ratio:16\/10;object-fit:cover;filter:none!important;opacity:1;transition:none}\n.smv-js .smv .cs-art .card{opacity:0;transition:opacity .9s .5s}.smv-js .smv .cs-art.is-in .card{opacity:1}\n.smv-js .smv .cs-art .b-rust{transform-origin:right}\n.smv .cs-art .vlbl{position:absolute;right:18px;bottom:22px;writing-mode:vertical-rl;color:var(--cream);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}\n.smv .meta{background:var(--ochre)}\n.smv .meta .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:34px;padding-bottom:34px}\n.smv .meta .m{padding:2px 24px;display:grid;gap:6px}\n.smv .meta .m+.m{border-left:1.5px solid rgba(20,20,20,.35)}.smv .meta .m:first-child{padding-left:0}\n.smv .meta .m span{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}\n.smv .meta .m b{font-size:15px;font-weight:600;line-height:1.4}\n.smv .meta .m a{border-bottom:1.5px solid currentColor}\n.smv .nums{background:var(--ink);color:var(--cream);padding:52px 0}\n.smv .nums .wrap{display:grid;grid-template-columns:repeat(4,1fr)}\n.smv .nums .n{padding:0 26px;display:grid;gap:8px;align-content:start}\n.smv .nums .n+.n{border-left:1px solid rgba(239,230,216,.2)}.smv .nums .n:first-child{padding-left:0}\n.smv .nums b{font-family:var(--disp);font-weight:400;font-size:clamp(54px,5.4vw,82px);line-height:.9;color:var(--cream)}\n.smv .nums b small{font-size:.5em;color:var(--ochre)}\n.smv .nums .n:nth-child(2) b{color:var(--ochre)}.smv .nums .n:nth-child(3) b{color:var(--rust)}\n.smv .nums span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.35}\n.smv .nums em{font-style:normal;font-size:13px;color:#B9AE9C}\n.smv .ch{border-bottom:1px solid var(--line)}\n.smv .ch .wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;padding-top:60px;padding-bottom:60px}\n.smv .ch-lbl{position:sticky;top:110px;align-self:start}\n.smv .ch-lbl b{display:block;font-family:var(--disp);font-weight:400;font-size:78px;line-height:.85}\n.smv .ch:nth-of-type(3n+2) .ch-lbl b{color:var(--ochre)}.smv .ch:nth-of-type(3n) .ch-lbl b{color:var(--rust)}\n.smv .ch-lbl h2{font-family:var(--disp);text-transform:uppercase;font-size:34px;line-height:.95;margin-top:10px}\n.smv .ch-body{display:flex;flex-direction:column;gap:22px;max-width:760px}\n.smv .ch-body p{font-size:17px;line-height:1.65;color:var(--ink2)}\n.smv .ch-body ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}\n.smv .ch-body li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:16.5px;line-height:1.5}\n.smv .ch-body li::before{content:\"\";width:12px;height:12px;background:var(--rust);margin-top:7px}\n.smv .ch-body li:nth-child(2n)::before{background:var(--ochre)}\n.smv .pull{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;background:var(--ink);color:var(--cream);padding:26px 28px}\n.smv .pull i{width:64px;height:64px;background:var(--rust);display:grid;place-items:center;font-family:var(--disp);font-style:normal;font-size:54px;line-height:1;padding-top:18px;color:var(--ink)}\n.smv .pull p{color:var(--cream)!important;font-size:20px!important;font-weight:600;line-height:1.45!important}\n.smv .fig{margin:6px 0 0}\n.smv .fig .frame{border:2px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--rust);overflow:hidden}\n.smv .fig:nth-of-type(2n) .frame{box-shadow:10px 10px 0 var(--ochre)}\n.smv .fig img{width:100%}\n.smv .fig figcaption{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}\n.smv .pair{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}\n.smv .pair .frame img{aspect-ratio:auto;height:100%;object-fit:cover;background:var(--cream2)}\n.smv .next{display:grid;grid-template-columns:1fr 1fr 1fr}\n.smv .next .n1{background:var(--rust);padding:52px 40px 52px max(40px,calc((100vw - 1240px)\/2 + 40px));display:flex;flex-direction:column;justify-content:center;gap:12px}\n.smv .next .n1 span{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}\n.smv .next .n1 a{font-family:var(--disp);text-transform:uppercase;font-size:clamp(44px,4.4vw,66px);line-height:.92;transition:color .3s}\n.smv .next .n1 a:hover{color:var(--cream)}\n.smv .next .n2{padding:52px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px}\n.smv .next .n3{background:var(--ink);color:var(--cream);padding:52px 40px;display:flex;flex-direction:column;justify-content:center;gap:20px}\n.smv .next .n3 p{color:#C9BFAE}\n.smv .next .n3 .btn{background:var(--rust);border-color:var(--rust);color:var(--ink);align-self:flex-start}\n.smv .next .n3 .btn:hover{background:var(--cream);border-color:var(--cream)}\n@media (max-width:1100px){.smv .ch .wrap{grid-template-columns:220px 1fr;gap:36px}.smv .nums .wrap,.smv .meta .wrap{grid-template-columns:1fr 1fr;row-gap:28px}.smv .nums .n:nth-child(3),.smv .meta .m:nth-child(3){border-left:0;padding-left:0}}\n@media (max-width:860px){.smv .cs-hero{grid-template-columns:1fr}.smv .cs-copy{padding:40px 20px}.smv .cs-art{min-height:360px}\n .smv .ch .wrap{grid-template-columns:1fr;gap:16px;padding-top:44px;padding-bottom:44px}.smv .ch-lbl{position:static}.smv .ch-lbl b{font-size:56px}\n .smv .pair{grid-template-columns:1fr}.smv .next{grid-template-columns:1fr}.smv .next .n1,.smv .next .n2,.smv .next .n3{padding:40px 20px}\n .smv .meta .wrap,.smv .nums .wrap{grid-template-columns:1fr}.smv .meta .m,.smv .nums .n{border-left:0!important;padding-left:0!important}}\n\n\/* \u00e9kezetek: nagyobb sormagass\u00e1g a display c\u00edmeken *\/\n.smv .disp{line-height:1.05}.smv .c-left h2{line-height:1.05}.smv .ch-lbl h2{line-height:1.08}.smv .next .n1 a{line-height:1.02}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bb46a5 elementor-widget elementor-widget-html\" data-id=\"8bb46a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<header class=\"top\"><div class=\"wrap\">\n <a class=\"logo\" href=\"https:\/\/szmartindesign.hu\/\">Szab\u00f3 Martin<\/a>\n <nav class=\"nav\" aria-label=\"F\u0151 navig\u00e1ci\u00f3\"><a href=\"https:\/\/szmartindesign.hu\/#rolam\">R\u00f3lam<\/a><a href=\"https:\/\/szmartindesign.hu\/#munkak\">Munk\u00e1k<\/a><a href=\"https:\/\/szmartindesign.hu\/#kapcsolat\">Kapcsolat<\/a><\/nav>\n <div class=\"lang\" data-no-translation><a href=\"#\" data-lang=\"hu\" hreflang=\"hu\">HU<\/a><span>\/<\/span><a href=\"#\" data-lang=\"en\" hreflang=\"en\">EN<\/a><\/div>\n <a class=\"btn\" href=\"https:\/\/szmartindesign.hu\/#kapcsolat\">Besz\u00e9lj\u00fcnk <span aria-hidden=\"true\">\u2197<\/span><\/a>\n <button class=\"mtog\" type=\"button\" aria-expanded=\"false\" aria-label=\"Men\u00fc\"><i><\/i><i><\/i><\/button>\n<\/div><\/header><style>\n.smv .lang{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em}\n.smv .lang a{color:var(--ink);opacity:.4;padding:4px 0;border-bottom:2px solid transparent;transition:opacity .2s}\n.smv .lang a:hover{opacity:.8}.smv .lang a.on{opacity:1;border-color:var(--rust)}.smv .lang span{opacity:.3}\n.smv .mtog{display:none}\nbody:has(.smv) #si-scroll-top{display:none!important}\n@media (max-width:1100px){\n .smv .top{position:relative}\n .smv .top .wrap{gap:16px}\n .smv .mtog{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:0 11px;background:transparent;border:2px solid var(--ink);border-radius:0;cursor:pointer}\n .smv .mtog i{display:block;height:2px;background:var(--ink);transition:transform .25s}\n .smv .top.open .mtog i:first-child{transform:translateY(4px) rotate(45deg)}\n .smv .top.open .mtog i:last-child{transform:translateY(-4px) rotate(-45deg)}\n .smv .top.open .nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:2px solid var(--ink);padding:4px 20px 16px;z-index:50}\n .smv .top.open .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}\n .smv .top.open .nav a::after{display:none}\n}\n@media (max-width:560px){.smv .top .btn{display:none}}\n<\/style><script>(function(){var t=document.querySelector('.smv .top');if(!t)return;var b=t.querySelector('.mtog');b&&b.addEventListener('click',function(){var o=t.classList.toggle('open');b.setAttribute('aria-expanded',o)});t.querySelectorAll('.nav a').forEach(function(a){a.addEventListener('click',function(){t.classList.remove('open');b&&b.setAttribute('aria-expanded','false')})});var alt={};document.querySelectorAll('link[rel=alternate][hreflang]').forEach(function(l){var k=l.hreflang.toLowerCase().slice(0,2);if(k!=='x-')alt[k]=l.href});var en=(document.documentElement.lang||'').toLowerCase().indexOf('en')===0;var p=location.pathname,s=location.search+location.hash;var huU=alt.hu||(p.replace(\/^\\\/en(\\\/|$)\/,'\/')+s),enU=alt.en||('\/en'+(p==='\/'?'\/':p)+s);t.querySelectorAll('.lang a').forEach(function(a){var h=a.getAttribute('data-lang')==='en';a.href=h?enU:huU;if(h===en)a.classList.add('on')})})();<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36a174c elementor-widget elementor-widget-html\" data-id=\"36a174c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"cs-hero\" id=\"top\">\n <div class=\"cs-copy rv\">\n  <a class=\"back\" href=\"https:\/\/szmartindesign.hu\/#munkak\">\u2190 \u00d6sszes munka<\/a>\n  <span class=\"lbl tag\"><i><\/i>Esettanulm\u00e1ny 03 \u00b7 Gabilak Vend\u00e9gh\u00e1z<\/span>\n  <h1 class=\"disp\">Egy vend\u00e9gh\u00e1z, ahol <span>nyugodtan lehet d\u00f6nteni<\/span><\/h1>\n  <p>A Gabilak egy kis gyulai sz\u00e1ll\u00e1shely, ahol a foglal\u00e1s \u00e9rzelmi d\u00f6nt\u00e9s. Val\u00f3s vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n terveztem meg a weboldal d\u00f6nt\u00e9si \u00fatj\u00e1t: az els\u0151 benyom\u00e1st\u00f3l a megnyugtat\u00f3 inform\u00e1ci\u00f3kon \u00e1t az egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1sig.<\/p>\n <\/div>\n <div class=\"art cs-art\" aria-hidden=\"true\"><div class=\"b-rust\"><\/div><div class=\"b-ochre\"><\/div><div class=\"card\"><img decoding=\"async\" src=\"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2026\/01\/gabilak-screens-mockup-e1769435869787.png\" alt=\"\"><\/div><span class=\"vlbl\">Gabilak \u00b7 Gyula<\/span><\/div>\n<\/section>\n<section class=\"meta\"><div class=\"wrap rv\">\n <div class=\"m\"><span>Term\u00e9k<\/span><b>B2C szolg\u00e1ltat\u00e1s \u2013 hospitality weboldal<\/b><\/div>\n <div class=\"m\"><span>Felhaszn\u00e1l\u00f3k<\/span><b>P\u00e1rok, csal\u00e1dok \u00e9s kisebb bar\u00e1ti t\u00e1rsas\u00e1gok, akik csendes pihen\u00e9st keresnek<\/b><\/div>\n <div class=\"m\"><span>Szerepem<\/span><b>UX design, inform\u00e1ci\u00f3s architekt\u00fara, d\u00f6nt\u00e9si \u00fatvonalak, tartalomstrukt\u00fara<\/b><\/div>\n <div class=\"m\"><span>Id\u0151t\u00e1v<\/span><b>1 h\u00f3nap, t\u00f6bb iter\u00e1ci\u00f3ban \u00b7 <a href=\"https:\/\/gabilak.hu\" target=\"_blank\" rel=\"noopener\">gabilak.hu \u2197<\/a><\/b><\/div>\n<\/div><\/section>\n<section class=\"nums\"><div class=\"wrap rv\">\n <div class=\"n\"><b>4,97<\/b><span>\u00f6sszes\u00edtett Airbnb-\u00e9rt\u00e9kel\u00e9s<\/span><em>a tervez\u00e9s kiindul\u00f3pontja<\/em><\/div>\n <div class=\"n\"><b>5<small>\u2605<\/small><\/b><span>tisztas\u00e1g, val\u00f3s\u00e1gh\u0171s\u00e9g, \u00e9rkez\u00e9s<\/span><em>Airbnb r\u00e9sz\u00e9rt\u00e9kel\u00e9sek<\/em><\/div>\n <div class=\"n\"><b>5<\/b><span>d\u00f6nt\u00e9si f\u00e1zis<\/span><em>erre \u00e9p\u00fcl az oldal szerkezete<\/em><\/div>\n <div class=\"n\"><b>1<small>h\u00f3<\/small><\/b><span>tervez\u00e9s<\/span><em>t\u00f6bb iter\u00e1ci\u00f3ban<\/em><\/div>\n<\/div><\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d41bf54 elementor-widget elementor-widget-html\" data-id=\"d41bf54\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>01<\/b><h2>Kontextus<\/h2><\/div><div class=\"ch-body\"><p class=\"rv\">A Gabilak Vend\u00e9gh\u00e1z kis l\u00e9pt\u00e9k\u0171 sz\u00e1ll\u00e1shely Gyula kertv\u00e1rosi r\u00e9sz\u00e9n. Els\u0151sorban p\u00e1rokat, csal\u00e1dokat \u00e9s kisebb bar\u00e1ti t\u00e1rsas\u00e1gokat v\u00e1r, akik tudatosan pihenni szeretn\u00e9nek, nem t\u00f6megturizmust keresnek.<\/p><p class=\"rv\">A projekt el\u0151tt a foglal\u00e1sok k\u00fcls\u0151 platformon (Airbnb) futottak, \u00edgy a vend\u00e9g\u00e9lm\u00e9ny kommunik\u00e1ci\u00f3ja \u00e9s a d\u00f6nt\u00e9si folyamat nagy r\u00e9sze nem volt k\u00e9zben. A c\u00e9l egy \u00f6n\u00e1ll\u00f3 weboldal volt, ami m\u00e1r foglal\u00e1s el\u0151tt \u00e1tadja a hely hangulat\u00e1t, \u00e9s cs\u00f6kkenti a bizonytalans\u00e1got.<\/p><\/div><\/div><\/section><section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>02<\/b><h2>A probl\u00e9ma<\/h2><\/div><div class=\"ch-body\"><p class=\"rv\">Az \u00e9rdekl\u0151d\u00e9s magas volt, de a d\u00f6nt\u00e9si folyamat:<\/p><div class=\"rv\"><ul><li>er\u0151sen platformf\u00fcgg\u0151 maradt<\/li><li>nem volt tudatosan vezetve<\/li><li>sok k\u00e9rd\u00e9s csak foglal\u00e1s ut\u00e1n der\u00fclt ki<\/li><\/ul><\/div><p class=\"rv\">A vend\u00e9gv\u00e9lem\u00e9nyekb\u0151l egy\u00e9rtelm\u0171 volt, hogy a sz\u00e1ll\u00e1s val\u00f3di \u00e9rt\u00e9ke az \u00e9lm\u00e9nyben \u00e9s a nyugalomban van, ezt viszont a digit\u00e1lis jelenl\u00e9t nem k\u00f6zvet\u00edtette k\u00f6vetkezetesen.<\/p><div class=\"pull rv\"><i aria-hidden=\"true\">\u201c<\/i><p>Hogyan lehet egy \u00e9rzelmi d\u00f6nt\u00e9st biztons\u00e1goss\u00e1 \u00e9s magabiztoss\u00e1 tenni?<\/p><\/div><\/div><\/div><\/section><section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>03<\/b><h2>UX c\u00e9lok<\/h2><\/div><div class=\"ch-body\"><div class=\"rv\"><ul><li>\u00e9rzelmi meger\u0151s\u00edt\u00e9s m\u00e1r az els\u0151 k\u00e9perny\u0151n<\/li><li>kevesebb bizonytalans\u00e1g a d\u00f6nt\u00e9s sor\u00e1n<\/li><li>val\u00f3s elv\u00e1r\u00e1sok, t\u00fal\u00edg\u00e9r\u00e9s n\u00e9lk\u00fcl<\/li><li>egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1si \u00fatvonal<\/li><li>a vend\u00e9gv\u00e9lem\u00e9nyek tudatos be\u00e9p\u00edt\u00e9se<\/li><\/ul><\/div><div class=\"pull rv\"><i aria-hidden=\"true\">\u201c<\/i><p>A f\u00f3kusz v\u00e9gig azon volt, hogy a vend\u00e9g nyugodt d\u00f6nt\u00e9st tudjon hozni.<\/p><\/div><\/div><\/div><\/section><section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>04<\/b><h2>Insight-alap\u00fa tervez\u00e9s<\/h2><\/div><div class=\"ch-body\"><p class=\"rv\">A tervez\u00e9s alapj\u00e1t t\u00f6bb tucat vend\u00e9g\u00e9rt\u00e9kel\u00e9s elemz\u00e9se adta. A visszat\u00e9r\u0151 \u00e9rz\u00e9sek:<\/p><div class=\"rv\"><ul><li>\u201ecsendes, nyugodt k\u00f6rnyezet\u201d<\/li><li>\u201epont olyan, mint a k\u00e9peken\u201d<\/li><li>kuck\u00f3z\u00e1s, otthonoss\u00e1g<\/li><li>kert, s\u00fct\u00f6get\u00e9s, egy\u00fctt t\u00f6lt\u00f6tt id\u0151<\/li><li>bar\u00e1ts\u00e1gos, gyors kommunik\u00e1ci\u00f3<\/li><\/ul><\/div><figure class=\"fig rv\" style=\"max-width:480px\"><div class=\"frame\"><img decoding=\"async\" src=\"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2025\/04\/gabilak_posztok_gabilak_poszt_ertekelesek.png\" alt=\"Az Airbnb-\u00e9rt\u00e9kel\u00e9sek \u00f6sszes\u00edt\u00e9se\" loading=\"lazy\"><\/div><figcaption>Az Airbnb-\u00e9rt\u00e9kel\u00e9sek \u00f6sszes\u00edt\u00e9se<\/figcaption><\/figure><\/div><\/div><\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cead072 elementor-widget elementor-widget-html\" data-id=\"cead072\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>05<\/b><h2>Inform\u00e1ci\u00f3s architekt\u00fara \u00e9s d\u00f6nt\u00e9si \u00fat<\/h2><\/div><div class=\"ch-body\"><p class=\"rv\">Az oldal a vend\u00e9g ment\u00e1lis \u00fatj\u00e1t k\u00f6veti:<\/p><div class=\"rv\"><ul><li><span><b>\u00c9rzelmi azonosul\u00e1s<\/b> \u2013 \u201eEz nekem val\u00f3?\u201d<\/span><\/li><li><span><b>Vizualiz\u00e1lt \u00e9lm\u00e9ny<\/b> \u2013 \u201eMilyen ott lenni?\u201d<\/span><\/li><li><span><b>Bizalom\u00e9p\u00edt\u00e9s<\/b> \u2013 \u201eM\u00e1sok is j\u00f3l \u00e9rezt\u00e9k magukat?\u201d<\/span><\/li><li><span><b>Racionaliz\u00e1l\u00e1s<\/b> \u2013 \u201eMit kapok pontosan?\u201d<\/span><\/li><li><span><b>D\u00f6nt\u00e9s<\/b> \u2013 \u201eFoglalok.\u201d<\/span><\/li><\/ul><\/div><p class=\"rv\">Az oldalak nem funkci\u00f3k, hanem d\u00f6nt\u00e9si f\u00e1zisok ment\u00e9n \u00e9p\u00fclnek fel.<\/p><\/div><\/div><\/section><section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>06<\/b><h2>Strukt\u00far\u00e1b\u00f3l fel\u00fclet<\/h2><\/div><div class=\"ch-body\"><p class=\"rv\">A wireframe-ekn\u00e9l ezekre figyeltem:<\/p><div class=\"rv\"><ul><li>vizu\u00e1lis ritmus \u00e9s leveg\u0151ss\u00e9g<\/li><li>k\u00f6nnyen szkennelhet\u0151 tartalom<\/li><li>a k\u00e9pek mint els\u0151dleges inform\u00e1ci\u00f3hordoz\u00f3k<\/li><li>kev\u00e9s, de egy\u00e9rtelm\u0171 CTA<\/li><\/ul><\/div><div class=\"pull rv\"><i aria-hidden=\"true\">\u201c<\/i><p>A c\u00e9l nem az \u00f6szt\u00f6nz\u00e9s volt, hanem a meg\u00e9rkez\u00e9s \u00e9rz\u00e9se.<\/p><\/div><\/div><\/div><\/section><section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>07<\/b><h2>Foglal\u00e1s mint UX-pillanat<\/h2><\/div><div class=\"ch-body\"><p class=\"rv\">A foglal\u00e1si folyamat sz\u00e1nd\u00e9kosan egyszer\u0171 maradt:<\/p><div class=\"rv\"><ul><li>d\u00e1tumv\u00e1laszt\u00e1s<\/li><li>r\u00f6vid \u0171rlap<\/li><li>egy\u00e9rtelm\u0171 visszajelz\u00e9s<\/li><\/ul><\/div><p class=\"rv\">A hangs\u00faly a biztons\u00e1g\u00e9rzeten volt, nem az automatiz\u00e1l\u00e1son. A vend\u00e9g azt \u00e9rezze, hogy emberhez foglal, nem egy rendszerhez.<\/p><\/div><\/div><\/section><section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>08<\/b><h2>A megold\u00e1s<\/h2><\/div><div class=\"ch-body\"><figure class=\"fig rv\"><div class=\"frame\"><img decoding=\"async\" src=\"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2026\/01\/gabilak-flying-macbook-mockups.png\" alt=\"A k\u00e9sz weboldal: kezd\u0151lap \u00e9s foglal\u00e1s\" loading=\"lazy\"><\/div><figcaption>A k\u00e9sz weboldal: kezd\u0151lap \u00e9s foglal\u00e1s<\/figcaption><\/figure><p class=\"rv\">Az elk\u00e9sz\u00fclt weboldal:<\/p><div class=\"rv\"><ul><li>m\u00e1r az els\u0151 l\u00e1togat\u00e1skor el\u0151sz\u0171ri a nem illeszked\u0151 vend\u00e9geket<\/li><li>cs\u00f6kkenti a foglal\u00e1s el\u0151tti bizonytalans\u00e1got<\/li><li>hitelesen k\u00f6zvet\u00edti a sz\u00e1ll\u00e1s val\u00f3di \u00e9lm\u00e9ny\u00e9t<\/li><li>hossz\u00fa t\u00e1von \u00f6n\u00e1ll\u00f3 m\u00e1rkak\u00e9nt m\u0171k\u00f6dik<\/li><\/ul><\/div><div class=\"pull rv\"><i aria-hidden=\"true\">\u201c<\/i><p>Az oldal nem \u00edg\u00e9r t\u00f6bbet, mint amit a vend\u00e9gh\u00e1z ny\u00fajt, \u00e9s \u00e9pp ett\u0151l hiteles.<\/p><\/div><\/div><\/div><\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7602a6d elementor-widget elementor-widget-html\" data-id=\"7602a6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>09<\/b><h2>Amit tanultam<\/h2><\/div><div class=\"ch-body\"><div class=\"rv\"><ul><li>B2C k\u00f6rnyezetben az \u00e9rzelmi biztons\u00e1g kulcsfontoss\u00e1g\u00fa UX-t\u00e9nyez\u0151<\/li><li>A j\u00f3 UX nem siettet, hanem megnyugtat<\/li><li>A vend\u00e9gv\u00e9lem\u00e9nyek nem d\u00edsz\u00edt\u0151 social proof elemek, hanem d\u00f6nt\u00e9st\u00e1mogat\u00f3 eszk\u00f6z\u00f6k<\/li><li>Hossz\u00fa t\u00e1von az \u0151szintes\u00e9g jobban konvert\u00e1l, mint a t\u00fal\u00edg\u00e9r\u00e9s<\/li><\/ul><\/div><\/div><\/div><\/section><section class=\"ch\"><div class=\"wrap\"><div class=\"ch-lbl rv\"><b>10<\/b><h2>Z\u00e1r\u00f3 gondolat<\/h2><\/div><div class=\"ch-body\"><p class=\"rv\">A Gabilak megmutatta, hogy a UX nem csak komplex rendszerekn\u00e9l sz\u00e1m\u00edt. Egy egyszer\u0171bb szolg\u00e1ltat\u00e1sn\u00e1l is d\u00f6nt\u0151, hogy a felhaszn\u00e1l\u00f3 biztons\u00e1gban \u00e9rezze mag\u00e1t a d\u00f6nt\u00e9s\u00e9ben.<\/p><div class=\"pull rv\"><i aria-hidden=\"true\">\u201c<\/i><p>Ebben a projektben a UX legfontosabb feladata a nyugalom megteremt\u00e9se volt.<\/p><\/div><\/div><\/div><\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e2863b elementor-widget elementor-widget-html\" data-id=\"3e2863b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"next\" id=\"kapcsolat\">\n <div class=\"n1\"><span>K\u00f6vetkez\u0151 projekt<\/span><a href=\"https:\/\/szmartindesign.hu\/chamsys-ux-ui-case-study\/\">ChamSys \u2192<\/a><\/div>\n <div class=\"n2 rv\"><a class=\"arrow-link\" href=\"https:\/\/szmartindesign.hu\/#munkak\">Vissza a munk\u00e1khoz <span aria-hidden=\"true\">\u2192<\/span><\/a><a class=\"arrow-link\" href=\"https:\/\/gabilak.hu\" target=\"_blank\" rel=\"noopener\">\u00c9l\u0151 oldal: gabilak.hu <span aria-hidden=\"true\">\u2197<\/span><\/a><\/div>\n <div class=\"n3 rv\"><p>Tetszik, ahogy a strukt\u00far\u00e1r\u00f3l gondolkodom? \u00cdrj p\u00e1r sort arr\u00f3l, min dolgozol.<\/p><a class=\"btn\" href=\"mailto:hello@szmartindesign.hu\">\u00cdrj nekem <span aria-hidden=\"true\">\u2192<\/span><\/a><\/div>\n<\/section>\n<footer class=\"foot\"><div class=\"wrap\"><span class=\"logo\">Szab\u00f3 Martin<\/span><small>\u00a9 2026 Szab\u00f3 Martin \u00b7 Figm\u00e1ban tervezve, WordPressben \u00e9p\u00edtve.<\/small><nav><a href=\"https:\/\/www.linkedin.com\/in\/martin-szab%C3%B3-ux-designer\/\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a><a href=\"mailto:hello@szmartindesign.hu\">E-mail<\/a><\/nav><a class=\"totop\" href=\"#top\" aria-label=\"Vissza a tetej\u00e9re\">\u2191<\/a><\/div><\/footer>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2841","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Gabilak esettanulm\u00e1ny \u2013 vend\u00e9gh\u00e1z weboldal UX | Szab\u00f3 Martin<\/title>\n<meta name=\"description\" content=\"Gabilak esettanulm\u00e1ny: vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett d\u00f6nt\u00e9si \u00fat egy gyulai vend\u00e9gh\u00e1z weboldal\u00e1n, egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1ssal.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gabilak esettanulm\u00e1ny \u2013 egy vend\u00e9gh\u00e1z, ahol nyugodtan lehet d\u00f6nteni\" \/>\n<meta property=\"og:description\" content=\"Val\u00f3s vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett weboldal: bizalom\u00e9p\u00edt\u00e9s, val\u00f3s elv\u00e1r\u00e1sok \u00e9s egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/szmartindesign.hu\/en\/gabilak-ux-ui-case-study\/\" \/>\n<meta property=\"og:site_name\" content=\"Szab\u00f3 Martin Portfolio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-27T14:21:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2026\/01\/gabilak-screens-mockup-e1769435869787.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"532\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Gabilak esettanulm\u00e1ny \u2013 egy vend\u00e9gh\u00e1z, ahol nyugodtan lehet d\u00f6nteni\" \/>\n<meta name=\"twitter:description\" content=\"Val\u00f3s vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett weboldal: bizalom\u00e9p\u00edt\u00e9s, val\u00f3s elv\u00e1r\u00e1sok \u00e9s egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1s.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2026\/01\/gabilak-screens-mockup-e1769435869787.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/gabilak-ux-ui-case-study\\\/\",\"url\":\"https:\\\/\\\/szmartindesign.hu\\\/gabilak-ux-ui-case-study\\\/\",\"name\":\"Gabilak esettanulm\u00e1ny \u2013 vend\u00e9gh\u00e1z weboldal UX | Szab\u00f3 Martin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/#website\"},\"datePublished\":\"2026-10-21T11:27:05+00:00\",\"dateModified\":\"2026-10-27T14:21:33+00:00\",\"description\":\"Gabilak esettanulm\u00e1ny: vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett d\u00f6nt\u00e9si \u00fat egy gyulai vend\u00e9gh\u00e1z weboldal\u00e1n, egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1ssal.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/gabilak-ux-ui-case-study\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/szmartindesign.hu\\\/gabilak-ux-ui-case-study\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/gabilak-ux-ui-case-study\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Kezd\u0151lap\",\"item\":\"https:\\\/\\\/szmartindesign.hu\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gabilak UX \\\/ UI Case Study\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/#website\",\"url\":\"https:\\\/\\\/szmartindesign.hu\\\/\",\"name\":\"Szab\u00f3 Martin Portfolio\",\"description\":\"Szab\u00f3 Martin Portfoli\u00f3ja\",\"publisher\":{\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/szmartindesign.hu\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/#organization\",\"name\":\"Szab\u00f3 Martin Portfolio\",\"url\":\"https:\\\/\\\/szmartindesign.hu\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/szmartindesign.hu\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/szabo_martin_UX_logo_v2_szabo_martin_UX_logo_v2-e1721157760289.png\",\"contentUrl\":\"https:\\\/\\\/szmartindesign.hu\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/szabo_martin_UX_logo_v2_szabo_martin_UX_logo_v2-e1721157760289.png\",\"width\":200,\"height\":37,\"caption\":\"Szab\u00f3 Martin Portfolio\"},\"image\":{\"@id\":\"https:\\\/\\\/szmartindesign.hu\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gabilak esettanulm\u00e1ny \u2013 vend\u00e9gh\u00e1z weboldal UX | Szab\u00f3 Martin","description":"Gabilak esettanulm\u00e1ny: vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett d\u00f6nt\u00e9si \u00fat egy gyulai vend\u00e9gh\u00e1z weboldal\u00e1n, egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1ssal.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Gabilak esettanulm\u00e1ny \u2013 egy vend\u00e9gh\u00e1z, ahol nyugodtan lehet d\u00f6nteni","og_description":"Val\u00f3s vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett weboldal: bizalom\u00e9p\u00edt\u00e9s, val\u00f3s elv\u00e1r\u00e1sok \u00e9s egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1s.","og_url":"https:\/\/szmartindesign.hu\/en\/gabilak-ux-ui-case-study\/","og_site_name":"Szab\u00f3 Martin Portfolio","article_modified_time":"2026-10-27T14:21:33+00:00","og_image":[{"width":1000,"height":532,"url":"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2026\/01\/gabilak-screens-mockup-e1769435869787.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"Gabilak esettanulm\u00e1ny \u2013 egy vend\u00e9gh\u00e1z, ahol nyugodtan lehet d\u00f6nteni","twitter_description":"Val\u00f3s vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett weboldal: bizalom\u00e9p\u00edt\u00e9s, val\u00f3s elv\u00e1r\u00e1sok \u00e9s egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1s.","twitter_image":"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2026\/01\/gabilak-screens-mockup-e1769435869787.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/szmartindesign.hu\/gabilak-ux-ui-case-study\/","url":"https:\/\/szmartindesign.hu\/gabilak-ux-ui-case-study\/","name":"Gabilak esettanulm\u00e1ny \u2013 vend\u00e9gh\u00e1z weboldal UX | Szab\u00f3 Martin","isPartOf":{"@id":"https:\/\/szmartindesign.hu\/#website"},"datePublished":"2026-10-21T11:27:05+00:00","dateModified":"2026-10-27T14:21:33+00:00","description":"Gabilak esettanulm\u00e1ny: vend\u00e9gv\u00e9lem\u00e9nyek alapj\u00e1n tervezett d\u00f6nt\u00e9si \u00fat egy gyulai vend\u00e9gh\u00e1z weboldal\u00e1n, egyszer\u0171, k\u00e9rd\u00e9smentes foglal\u00e1ssal.","breadcrumb":{"@id":"https:\/\/szmartindesign.hu\/gabilak-ux-ui-case-study\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/szmartindesign.hu\/gabilak-ux-ui-case-study\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/szmartindesign.hu\/gabilak-ux-ui-case-study\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Kezd\u0151lap","item":"https:\/\/szmartindesign.hu\/"},{"@type":"ListItem","position":2,"name":"Gabilak UX \/ UI Case Study"}]},{"@type":"WebSite","@id":"https:\/\/szmartindesign.hu\/#website","url":"https:\/\/szmartindesign.hu\/","name":"Szab\u00f3 Martin Portfolio","description":"Szab\u00f3 Martin Portfoli\u00f3ja","publisher":{"@id":"https:\/\/szmartindesign.hu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/szmartindesign.hu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/szmartindesign.hu\/#organization","name":"Szab\u00f3 Martin Portfolio","url":"https:\/\/szmartindesign.hu\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/szmartindesign.hu\/#\/schema\/logo\/image\/","url":"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2024\/07\/szabo_martin_UX_logo_v2_szabo_martin_UX_logo_v2-e1721157760289.png","contentUrl":"https:\/\/szmartindesign.hu\/wp-content\/uploads\/2024\/07\/szabo_martin_UX_logo_v2_szabo_martin_UX_logo_v2-e1721157760289.png","width":200,"height":37,"caption":"Szab\u00f3 Martin Portfolio"},"image":{"@id":"https:\/\/szmartindesign.hu\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/pages\/2841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/comments?post=2841"}],"version-history":[{"count":3,"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/pages\/2841\/revisions"}],"predecessor-version":[{"id":2851,"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/pages\/2841\/revisions\/2851"}],"wp:attachment":[{"href":"https:\/\/szmartindesign.hu\/en\/wp-json\/wp\/v2\/media?parent=2841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}