{"id":2503,"date":"2026-08-19T13:23:52","date_gmt":"2026-08-19T13:23:52","guid":{"rendered":"https:\/\/testet.biz\/reactio\/?page_id=2503"},"modified":"2026-08-19T14:22:28","modified_gmt":"2026-08-19T14:22:28","slug":"ui-ux","status":"publish","type":"page","link":"https:\/\/testet.biz\/reactio\/ui-ux\/","title":{"rendered":"UI \/ UX"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2503\" class=\"elementor elementor-2503\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ff9fc20 elementor-section-height-min-height cs-section-content-fullwidth cs_scroll_y_120 cs-parallax-on-scroll elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"ff9fc20\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" data-cs-parallax-y=\"120\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7f77c1c dark-color\" data-id=\"7f77c1c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-78d2f96 elementor-widget elementor-widget-html\" data-id=\"78d2f96\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"reactio-uiux-hero\">\n\n  <div class=\"reactio-uiux-hero__container\">\n\n    <!-- TOP -->\n    <div class=\"reactio-uiux-hero__top\">\n\n      <span class=\"reactio-uiux-hero__eyebrow\">\n        UI \/ UX DESIGN\n      <\/span>\n\n      <span class=\"reactio-uiux-hero__status\">\n        <i><\/i>\n        HUMAN-CENTERED DIGITAL EXPERIENCE\n      <\/span>\n\n    <\/div>\n\n\n    <!-- MAIN -->\n    <div class=\"reactio-uiux-hero__content\">\n\n      <h1>\n        DESIGN THE INTERFACE.<br>\n        SHAPE THE EXPERIENCE.<br>\n        <span>MAKE IT INTUITIVE.<\/span>\n      <\/h1>\n\n\n      <div class=\"reactio-uiux-hero__bottom\">\n\n        <div class=\"reactio-uiux-hero__copy\">\n\n          <p>\n            UI \/ UX tasar\u0131m\u0131n\u0131 yaln\u0131zca g\u00fczel g\u00f6r\u00fcnen ekranlar\n            olu\u015fturmak olarak g\u00f6rm\u00fcyoruz. Kullan\u0131c\u0131 davran\u0131\u015f\u0131,\n            bilgi mimarisi, etkile\u015fimler, mobil deneyim ve\n            d\u00f6n\u00fc\u015f\u00fcm hedeflerini birlikte de\u011ferlendirerek\n            anla\u015f\u0131l\u0131r, tutarl\u0131 ve sezgisel dijital deneyimler\n            tasarl\u0131yoruz.\n          <\/p>\n\n          <div class=\"reactio-uiux-hero__tags\">\n\n            <span>USER FLOW<\/span>\n            <span>WIREFRAME<\/span>\n            <span>UI DESIGN<\/span>\n            <span>MOBILE UX<\/span>\n            <span>PROTOTYPE<\/span>\n            <span>DESIGN SYSTEM<\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <a href=\"https:\/\/reactio.com.tr\/iletisim\/\" class=\"reactio-uiux-hero__button\">\n\n          <span>\n            PROJEN\u0130 KONU\u015eALIM\n          <\/span>\n\n          <b>\u2197<\/b>\n\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- METRICS -->\n    <div class=\"reactio-uiux-hero__metrics\">\n\n      <div class=\"reactio-uiux-hero__metric\">\n\n        <span>01<\/span>\n\n        <div>\n          <small>UNDERSTAND<\/small>\n          <strong>KULLANICIYI ANLA<\/strong>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"reactio-uiux-hero__metric\">\n\n        <span>02<\/span>\n\n        <div>\n          <small>STRUCTURE<\/small>\n          <strong>AKI\u015eI KUR<\/strong>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"reactio-uiux-hero__metric\">\n\n        <span>03<\/span>\n\n        <div>\n          <small>DESIGN<\/small>\n          <strong>ARAY\u00dcZ\u00dc TASARLA<\/strong>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"reactio-uiux-hero__metric\">\n\n        <span>04<\/span>\n\n        <div>\n          <small>IMPROVE<\/small>\n          <strong>DENEY\u0130M\u0130 GEL\u0130\u015eT\u0130R<\/strong>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- FOOTER -->\n    <div class=\"reactio-uiux-hero__footer\">\n\n      <span>\n        RESEARCH \u00b7 FLOW \u00b7 WIREFRAME \u00b7 UI \u00b7 PROTOTYPE \u00b7 USABILITY\n      <\/span>\n\n      <strong>\n        DESIGN FOR PEOPLE. NOT JUST SCREENS.\n      <\/strong>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =====================================================\n   SECTION\n===================================================== *\/\n\n.reactio-uiux-hero{\n  width:100%;\n  min-height:88vh;\n\n  display:flex;\n  overflow:hidden;\n\n  background:#080808;\n  color:#fff;\n\n  font-family:Arial, Helvetica, sans-serif;\n}\n\n.reactio-uiux-hero *{\n  box-sizing:border-box;\n}\n\n\n\/* =====================================================\n   CONTAINER\n===================================================== *\/\n\n.reactio-uiux-hero__container{\n  width:100%;\n  max-width:1600px;\n  min-height:88vh;\n\n  margin:0 auto;\n\n  padding:48px 50px 35px;\n\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n}\n\n\n\/* =====================================================\n   TOP\n===================================================== *\/\n\n.reactio-uiux-hero__top{\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:30px;\n}\n\n.reactio-uiux-hero__eyebrow{\n  font-size:10px;\n\n  font-weight:900;\n\n  letter-spacing:2.4px;\n\n  color:rgba(255,255,255,.4);\n}\n\n.reactio-uiux-hero__status{\n  display:flex;\n\n  align-items:center;\n\n  gap:10px;\n\n  font-size:9px;\n\n  font-weight:850;\n\n  letter-spacing:1.4px;\n\n  color:rgba(255,255,255,.45);\n}\n\n.reactio-uiux-hero__status i{\n  width:7px;\n  height:7px;\n\n  border-radius:50%;\n\n  background:#8fff8f;\n\n  box-shadow:0 0 15px rgba(143,255,143,.75);\n}\n\n\n\/* =====================================================\n   CONTENT\n===================================================== *\/\n\n.reactio-uiux-hero__content{\n  padding:65px 0 45px;\n}\n\n\n\/* =====================================================\n   H1\n===================================================== *\/\n\n.reactio-uiux-hero h1{\n  margin:0;\n\n  max-width:1500px;\n\n  font-size:clamp(68px,8.2vw,145px);\n\n  line-height:.81;\n\n  letter-spacing:-.068em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n}\n\n.reactio-uiux-hero h1 span{\n  color:transparent !important;\n\n  -webkit-text-stroke:2px #fff;\n}\n\n\n\/* =====================================================\n   BOTTOM\n===================================================== *\/\n\n.reactio-uiux-hero__bottom{\n  margin-top:55px;\n\n  display:flex;\n\n  align-items:flex-end;\n  justify-content:space-between;\n\n  gap:70px;\n}\n\n.reactio-uiux-hero__copy{\n  max-width:800px;\n}\n\n.reactio-uiux-hero__copy p{\n  max-width:770px;\n\n  margin:0;\n\n  font-size:19px;\n\n  line-height:1.65;\n\n  color:rgba(255,255,255,.58);\n}\n\n\n\/* =====================================================\n   TAGS\n===================================================== *\/\n\n.reactio-uiux-hero__tags{\n  display:flex;\n\n  flex-wrap:wrap;\n\n  gap:7px;\n\n  margin-top:25px;\n}\n\n.reactio-uiux-hero__tags span{\n  padding:7px 11px;\n\n  border:1px solid rgba(255,255,255,.17);\n\n  border-radius:100px;\n\n  font-size:7px;\n\n  font-weight:850;\n\n  letter-spacing:.7px;\n\n  color:rgba(255,255,255,.5);\n}\n\n\n\/* =====================================================\n   BUTTON\n===================================================== *\/\n\n.reactio-uiux-hero__button{\n  min-width:245px;\n  height:62px;\n\n  padding:0 24px;\n\n  flex-shrink:0;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:30px;\n\n  border-radius:100px;\n\n  background:#fff;\n\n  color:#080808 !important;\n\n  text-decoration:none !important;\n\n  font-size:9px;\n\n  font-weight:900;\n\n  letter-spacing:1.1px;\n\n  transition:transform .35s ease;\n}\n\n.reactio-uiux-hero__button b{\n  font-size:19px;\n\n  font-weight:400;\n\n  transition:transform .35s ease;\n}\n\n.reactio-uiux-hero__button:hover{\n  transform:translateY(-3px);\n}\n\n.reactio-uiux-hero__button:hover b{\n  transform:translate(3px,-3px);\n}\n\n\n\/* =====================================================\n   METRICS\n===================================================== *\/\n\n.reactio-uiux-hero__metrics{\n  display:grid;\n\n  grid-template-columns:repeat(4,1fr);\n\n  margin-bottom:35px;\n\n  border-top:1px solid rgba(255,255,255,.14);\n  border-bottom:1px solid rgba(255,255,255,.14);\n}\n\n.reactio-uiux-hero__metric{\n  min-height:105px;\n\n  padding:20px 22px;\n\n  display:flex;\n\n  align-items:flex-start;\n\n  gap:25px;\n\n  border-right:1px solid rgba(255,255,255,.14);\n}\n\n.reactio-uiux-hero__metric:last-child{\n  border-right:0;\n}\n\n.reactio-uiux-hero__metric > span{\n  font-size:8px;\n\n  font-weight:900;\n\n  color:rgba(255,255,255,.28);\n}\n\n.reactio-uiux-hero__metric div{\n  margin-top:auto;\n}\n\n.reactio-uiux-hero__metric small{\n  display:block;\n\n  margin-bottom:5px;\n\n  font-size:7px;\n\n  font-weight:900;\n\n  letter-spacing:1.2px;\n\n  color:rgba(255,255,255,.3);\n}\n\n.reactio-uiux-hero__metric strong{\n  display:block;\n\n  font-size:14px;\n\n  font-weight:900;\n\n  letter-spacing:-.02em;\n\n  color:#fff;\n}\n\n\n\/* =====================================================\n   FOOTER\n===================================================== *\/\n\n.reactio-uiux-hero__footer{\n  padding-top:25px;\n\n  border-top:1px solid rgba(255,255,255,.14);\n\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:30px;\n}\n\n.reactio-uiux-hero__footer span{\n  font-size:8px;\n\n  font-weight:800;\n\n  letter-spacing:1.4px;\n\n  color:rgba(255,255,255,.35);\n}\n\n.reactio-uiux-hero__footer strong{\n  font-size:9px;\n\n  font-weight:900;\n\n  letter-spacing:1.2px;\n\n  color:rgba(255,255,255,.55);\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1100px){\n\n  .reactio-uiux-hero__container{\n    padding:42px 30px 32px;\n  }\n\n  .reactio-uiux-hero__metrics{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .reactio-uiux-hero__metric:nth-child(2){\n    border-right:0;\n  }\n\n  .reactio-uiux-hero__metric:nth-child(1),\n  .reactio-uiux-hero__metric:nth-child(2){\n    border-bottom:1px solid rgba(255,255,255,.14);\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:767px){\n\n  .reactio-uiux-hero{\n    min-height:auto;\n  }\n\n  .reactio-uiux-hero__container{\n    min-height:auto;\n\n    padding:28px 20px 25px;\n  }\n\n  .reactio-uiux-hero__eyebrow{\n    font-size:8px;\n  }\n\n  .reactio-uiux-hero__status{\n    display:none;\n  }\n\n  .reactio-uiux-hero__content{\n    padding:65px 0 45px;\n  }\n\n  .reactio-uiux-hero h1{\n    font-size:clamp(39px,10.8vw,57px);\n\n    line-height:.85;\n  }\n\n  .reactio-uiux-hero h1 span{\n    -webkit-text-stroke:1px #fff;\n  }\n\n  .reactio-uiux-hero__bottom{\n    margin-top:35px;\n\n    flex-direction:column;\n\n    align-items:flex-start;\n\n    gap:30px;\n  }\n\n  .reactio-uiux-hero__copy p{\n    font-size:15px;\n\n    line-height:1.6;\n  }\n\n  .reactio-uiux-hero__button{\n    width:100%;\n  }\n\n\n  \/* METRICS *\/\n\n  .reactio-uiux-hero__metrics{\n    grid-template-columns:1fr;\n\n    margin-top:15px;\n    margin-bottom:30px;\n  }\n\n  .reactio-uiux-hero__metric{\n    min-height:85px;\n\n    padding:18px 5px;\n\n    border-right:0 !important;\n    border-bottom:1px solid rgba(255,255,255,.14);\n  }\n\n  .reactio-uiux-hero__metric:last-child{\n    border-bottom:0;\n  }\n\n\n  \/* FOOTER *\/\n\n  .reactio-uiux-hero__footer{\n    flex-direction:column;\n\n    align-items:flex-start;\n\n    gap:8px;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a77833 elementor-section-height-min-height cs-section-content-fullwidth cs_scroll_y_120 cs-parallax-on-scroll elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"6a77833\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" data-cs-parallax-y=\"120\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-504ea11 dark-color\" data-id=\"504ea11\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4644409 elementor-widget elementor-widget-html\" data-id=\"4644409\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"reactio-uiux-approach\">\n\n  <div class=\"reactio-uiux-approach__container\">\n\n    <!-- HEADER -->\n    <div class=\"reactio-uiux-approach__header\">\n\n      <div class=\"reactio-uiux-approach__title\">\n\n        <span class=\"reactio-uiux-approach__eyebrow\">\n          DESIGN SHOULD FEEL OBVIOUS\n        <\/span>\n\n        <h2>\n          G\u00dcZEL G\u00d6R\u00dcNMEK<br>\n          YETMEZ.<br>\n          <span>ANLA\u015eILIR OLMALI.<\/span>\n        <\/h2>\n\n      <\/div>\n\n\n      <div class=\"reactio-uiux-approach__intro\">\n\n        <span>\n          CLARITY + USABILITY + EXPERIENCE\n        <\/span>\n\n        <h3>\n          Kullan\u0131c\u0131 d\u00fc\u015f\u00fcnmek zorunda kalmamal\u0131.\n        <\/h3>\n\n        <p>\n          \u0130yi bir dijital \u00fcr\u00fcn, kullan\u0131c\u0131ya her ad\u0131mda ne yapaca\u011f\u0131n\u0131\n          a\u00e7\u0131k \u015fekilde g\u00f6stermelidir. Navigasyon, bilgi mimarisi,\n          i\u00e7erik hiyerar\u015fisi ve etkile\u015fimler sezgisel bir yap\u0131\n          i\u00e7erisinde birlikte \u00e7al\u0131\u015fmal\u0131d\u0131r.\n        <\/p>\n\n        <p>\n          Reactio'da UI \/ UX tasar\u0131m\u0131n\u0131 yaln\u0131zca g\u00f6rsel estetik\n          \u00fczerinden de\u011fil; kullan\u0131c\u0131 davran\u0131\u015f\u0131, i\u015f hedefleri,\n          kullan\u0131labilirlik ve d\u00f6n\u00fc\u015f\u00fcm potansiyeli \u00fczerinden\n          de\u011ferlendiriyoruz.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- GRID -->\n    <div class=\"reactio-uiux-approach__grid\">\n\n\n      <!-- 01 -->\n      <div class=\"reactio-uiux-approach__item\">\n\n        <div class=\"reactio-uiux-approach__top\">\n          <span>01<\/span>\n          <small>USER RESEARCH<\/small>\n        <\/div>\n\n        <div class=\"reactio-uiux-approach__content\">\n\n          <h3>\n            KULLANICIYI<br>\n            ANLA\n          <\/h3>\n\n          <p>\n            Hedef kitlenin ihtiya\u00e7lar\u0131n\u0131, beklentilerini ve\n            kullan\u0131m senaryolar\u0131n\u0131 de\u011ferlendirerek tasar\u0131m\n            kararlar\u0131n\u0131 ger\u00e7ek kullan\u0131c\u0131 davran\u0131\u015flar\u0131na\n            dayand\u0131r\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 02 -->\n      <div class=\"reactio-uiux-approach__item\">\n\n        <div class=\"reactio-uiux-approach__top\">\n          <span>02<\/span>\n          <small>INFORMATION ARCHITECTURE<\/small>\n        <\/div>\n\n        <div class=\"reactio-uiux-approach__content\">\n\n          <h3>\n            B\u0130LG\u0130<br>\n            M\u0130MAR\u0130S\u0130\n          <\/h3>\n\n          <p>\n            \u0130\u00e7erikleri ve sayfalar\u0131 mant\u0131kl\u0131 bir hiyerar\u015fi\n            i\u00e7erisinde d\u00fczenleyerek kullan\u0131c\u0131n\u0131n arad\u0131\u011f\u0131\n            bilgiye daha h\u0131zl\u0131 ula\u015fmas\u0131n\u0131 sa\u011fl\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 03 -->\n      <div class=\"reactio-uiux-approach__item\">\n\n        <div class=\"reactio-uiux-approach__top\">\n          <span>03<\/span>\n          <small>USER FLOW<\/small>\n        <\/div>\n\n        <div class=\"reactio-uiux-approach__content\">\n\n          <h3>\n            KULLANICI<br>\n            AKI\u015eI\n          <\/h3>\n\n          <p>\n            Kullan\u0131c\u0131n\u0131n giri\u015f noktas\u0131ndan hedeflenen aksiyona\n            kadar izleyece\u011fi yolu planl\u0131yor; gereksiz ad\u0131mlar\u0131\n            ve kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 04 -->\n      <div class=\"reactio-uiux-approach__item\">\n\n        <div class=\"reactio-uiux-approach__top\">\n          <span>04<\/span>\n          <small>USABILITY<\/small>\n        <\/div>\n\n        <div class=\"reactio-uiux-approach__content\">\n\n          <h3>\n            KULLANILAB\u0130L\u0130RL\u0130K\n          <\/h3>\n\n          <p>\n            Men\u00fc, buton, form, filtre ve di\u011fer etkile\u015fim\n            alanlar\u0131n\u0131 kullan\u0131c\u0131 a\u00e7\u0131s\u0131ndan daha anla\u015f\u0131l\u0131r,\n            eri\u015filebilir ve kolay kullan\u0131labilir hale getiriyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 05 -->\n      <div class=\"reactio-uiux-approach__item\">\n\n        <div class=\"reactio-uiux-approach__top\">\n          <span>05<\/span>\n          <small>INTERACTION<\/small>\n        <\/div>\n\n        <div class=\"reactio-uiux-approach__content\">\n\n          <h3>\n            ETK\u0130LE\u015e\u0130M<br>\n            TASARIMI\n          <\/h3>\n\n          <p>\n            Hover, ge\u00e7i\u015f, geri bildirim ve mikro etkile\u015fimleri\n            kullan\u0131c\u0131ya sistemin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 hissettirecek\n            \u015fekilde planl\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 06 -->\n      <div class=\"reactio-uiux-approach__item\">\n\n        <div class=\"reactio-uiux-approach__top\">\n          <span>06<\/span>\n          <small>CONVERSION UX<\/small>\n        <\/div>\n\n        <div class=\"reactio-uiux-approach__content\">\n\n          <h3>\n            D\u00d6N\u00dc\u015e\u00dcM<br>\n            ODAKLI UX\n          <\/h3>\n\n          <p>\n            Kullan\u0131c\u0131 deneyimini yaln\u0131zca kolay kullan\u0131m\n            a\u00e7\u0131s\u0131ndan de\u011fil; form, sat\u0131\u015f, teklif, rezervasyon\n            ve di\u011fer i\u015f hedeflerine katk\u0131s\u0131 a\u00e7\u0131s\u0131ndan da\n            de\u011ferlendiriyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <!-- STATEMENT -->\n    <div class=\"reactio-uiux-approach__statement\">\n\n      <span>\n        GOOD DESIGN REDUCES FRICTION\n      <\/span>\n\n      <h3>\n        KULLANICIYA<br>\n        D\u00dc\u015e\u00dcND\u00dcRME.<br>\n        <strong>YOLU G\u00d6STER.<\/strong>\n      <\/h3>\n\n      <p>\n        \u0130yi kullan\u0131c\u0131 deneyimi, aray\u00fcz\u00fcn nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcnden\n        fazlas\u0131d\u0131r. Kullan\u0131c\u0131n\u0131n do\u011fru bilgiyi bulabilmesi,\n        ne yapaca\u011f\u0131n\u0131 anlayabilmesi ve hedefledi\u011fi aksiyona\n        m\u00fcmk\u00fcn olan en az s\u00fcrt\u00fcnmeyle ula\u015fabilmesidir.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- FLOW -->\n    <div class=\"reactio-uiux-approach__flow\">\n\n      <div>\n        <span>01<\/span>\n        <small>UNDERSTAND<\/small>\n        <strong>KULLANICI<\/strong>\n      <\/div>\n\n      <i>\u2192<\/i>\n\n      <div>\n        <span>02<\/span>\n        <small>STRUCTURE<\/small>\n        <strong>AKI\u015e<\/strong>\n      <\/div>\n\n      <i>\u2192<\/i>\n\n      <div>\n        <span>03<\/span>\n        <small>INTERFACE<\/small>\n        <strong>ARAY\u00dcZ<\/strong>\n      <\/div>\n\n      <i>\u2192<\/i>\n\n      <div>\n        <span>04<\/span>\n        <small>EXPERIENCE<\/small>\n        <strong>DENEY\u0130M<\/strong>\n      <\/div>\n\n    <\/div>\n\n\n    <!-- BOTTOM -->\n    <div class=\"reactio-uiux-approach__bottom\">\n\n      <span>\n        DESIGN WITH PURPOSE\n      <\/span>\n\n      <strong>\n        UNDERSTAND \u2192 STRUCTURE \u2192 DESIGN \u2192 TEST \u2192 IMPROVE\n      <\/strong>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =====================================================\n   SECTION\n===================================================== *\/\n\n.reactio-uiux-approach{\n  width:100%;\n  overflow:hidden;\n\n  background:#f3f0e9;\n  color:#080808;\n\n  font-family:Arial, Helvetica, sans-serif;\n}\n\n.reactio-uiux-approach *{\n  box-sizing:border-box;\n}\n\n\n\/* =====================================================\n   CONTAINER\n===================================================== *\/\n\n.reactio-uiux-approach__container{\n  width:100%;\n  max-width:1600px;\n\n  margin:0 auto;\n\n  padding:120px 50px;\n}\n\n\n\/* =====================================================\n   HEADER\n===================================================== *\/\n\n.reactio-uiux-approach__header{\n  display:grid;\n\n  grid-template-columns:1.15fr .85fr;\n\n  gap:100px;\n\n  align-items:end;\n\n  margin-bottom:90px;\n}\n\n\n\/* =====================================================\n   TITLE\n===================================================== *\/\n\n.reactio-uiux-approach__eyebrow{\n  display:block;\n\n  margin-bottom:25px;\n\n  font-size:9px;\n  font-weight:900;\n\n  letter-spacing:2.2px;\n\n  color:rgba(8,8,8,.38);\n}\n\n.reactio-uiux-approach__title h2{\n  margin:0;\n\n  font-size:clamp(50px,5.8vw,100px);\n\n  line-height:.85;\n\n  letter-spacing:-.065em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n}\n\n.reactio-uiux-approach__title h2 span{\n  color:transparent !important;\n\n  -webkit-text-stroke:1.5px #080808;\n}\n\n\n\/* =====================================================\n   INTRO\n===================================================== *\/\n\n.reactio-uiux-approach__intro > span{\n  display:block;\n\n  margin-bottom:20px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.7px;\n\n  color:rgba(8,8,8,.38);\n}\n\n.reactio-uiux-approach__intro h3{\n  max-width:600px;\n\n  margin:0 0 28px;\n\n  font-size:clamp(28px,2.5vw,42px);\n\n  line-height:1.04;\n\n  letter-spacing:-.045em;\n\n  font-weight:900;\n\n  color:#080808 !important;\n}\n\n.reactio-uiux-approach__intro p{\n  max-width:600px;\n\n  margin:0 0 15px;\n\n  font-size:14px;\n\n  line-height:1.75;\n\n  color:rgba(8,8,8,.57);\n}\n\n\n\/* =====================================================\n   GRID\n===================================================== *\/\n\n.reactio-uiux-approach__grid{\n  display:grid;\n\n  grid-template-columns:repeat(3,1fr);\n\n  border-top:1px solid rgba(8,8,8,.16);\n  border-bottom:1px solid rgba(8,8,8,.16);\n}\n\n\n\/* =====================================================\n   ITEMS\n===================================================== *\/\n\n.reactio-uiux-approach__item{\n  min-height:350px;\n\n  padding:28px;\n\n  display:flex;\n\n  flex-direction:column;\n  justify-content:space-between;\n\n  border-right:1px solid rgba(8,8,8,.16);\n  border-bottom:1px solid rgba(8,8,8,.16);\n\n  transition:\n    background .4s ease,\n    color .4s ease;\n}\n\n.reactio-uiux-approach__item:nth-child(3n){\n  border-right:0;\n}\n\n.reactio-uiux-approach__item:nth-child(n+4){\n  border-bottom:0;\n}\n\n\n\/* =====================================================\n   TOP\n===================================================== *\/\n\n.reactio-uiux-approach__top{\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:20px;\n}\n\n.reactio-uiux-approach__top span,\n.reactio-uiux-approach__top small{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1px;\n\n  color:rgba(8,8,8,.33);\n\n  transition:color .4s ease;\n}\n\n\n\/* =====================================================\n   CONTENT\n===================================================== *\/\n\n.reactio-uiux-approach__content{\n  margin-top:75px;\n}\n\n.reactio-uiux-approach__item h3{\n  margin:0 0 18px;\n\n  font-size:clamp(31px,3vw,48px);\n\n  line-height:.91;\n\n  letter-spacing:-.055em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n\n  transition:color .4s ease;\n}\n\n.reactio-uiux-approach__item p{\n  max-width:350px;\n\n  margin:0;\n\n  font-size:13px;\n\n  line-height:1.7;\n\n  color:rgba(8,8,8,.55);\n\n  transition:color .4s ease;\n}\n\n\n\/* =====================================================\n   HOVER\n===================================================== *\/\n\n.reactio-uiux-approach__item:hover{\n  background:#080808;\n\n  color:#fff;\n}\n\n.reactio-uiux-approach__item:hover\n.reactio-uiux-approach__top span,\n\n.reactio-uiux-approach__item:hover\n.reactio-uiux-approach__top small{\n  color:rgba(255,255,255,.4);\n}\n\n.reactio-uiux-approach__item:hover h3{\n  color:#fff !important;\n}\n\n.reactio-uiux-approach__item:hover p{\n  color:rgba(255,255,255,.55);\n}\n\n\n\/* =====================================================\n   STATEMENT\n===================================================== *\/\n\n.reactio-uiux-approach__statement{\n  margin-top:110px;\n\n  padding:70px 0;\n\n  border-top:1px solid rgba(8,8,8,.15);\n  border-bottom:1px solid rgba(8,8,8,.15);\n}\n\n.reactio-uiux-approach__statement > span{\n  display:block;\n\n  margin-bottom:25px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.8px;\n\n  color:rgba(8,8,8,.35);\n}\n\n.reactio-uiux-approach__statement h3{\n  max-width:1300px;\n\n  margin:0;\n\n  font-size:clamp(42px,5.5vw,90px);\n\n  line-height:.92;\n\n  letter-spacing:-.06em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n}\n\n.reactio-uiux-approach__statement h3 strong{\n  color:transparent;\n\n  -webkit-text-stroke:1.5px #080808;\n\n  font-weight:950;\n}\n\n.reactio-uiux-approach__statement p{\n  max-width:720px;\n\n  margin:35px 0 0;\n\n  font-size:15px;\n\n  line-height:1.75;\n\n  color:rgba(8,8,8,.55);\n}\n\n\n\/* =====================================================\n   FLOW\n===================================================== *\/\n\n.reactio-uiux-approach__flow{\n  margin-top:70px;\n\n  padding:35px 0;\n\n  display:grid;\n\n  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;\n\n  align-items:center;\n\n  gap:30px;\n\n  border-top:1px solid rgba(8,8,8,.15);\n  border-bottom:1px solid rgba(8,8,8,.15);\n}\n\n.reactio-uiux-approach__flow div{\n  min-height:100px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  justify-content:flex-end;\n}\n\n.reactio-uiux-approach__flow div span{\n  margin-bottom:auto;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  color:rgba(8,8,8,.3);\n}\n\n.reactio-uiux-approach__flow div small{\n  margin-bottom:5px;\n\n  font-size:7px;\n\n  font-weight:900;\n\n  letter-spacing:1.2px;\n\n  color:rgba(8,8,8,.35);\n}\n\n.reactio-uiux-approach__flow div strong{\n  font-size:clamp(20px,2vw,31px);\n\n  letter-spacing:-.04em;\n\n  font-weight:950;\n\n  color:#080808;\n}\n\n.reactio-uiux-approach__flow i{\n  font-size:22px;\n\n  font-style:normal;\n\n  color:rgba(8,8,8,.3);\n}\n\n\n\/* =====================================================\n   BOTTOM\n===================================================== *\/\n\n.reactio-uiux-approach__bottom{\n  margin-top:70px;\n\n  display:grid;\n\n  grid-template-columns:.35fr 1.65fr;\n\n  gap:60px;\n}\n\n.reactio-uiux-approach__bottom span{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.7px;\n\n  color:rgba(8,8,8,.35);\n}\n\n.reactio-uiux-approach__bottom strong{\n  font-size:clamp(21px,2.5vw,40px);\n\n  line-height:1.1;\n\n  letter-spacing:-.04em;\n\n  font-weight:950;\n\n  color:#080808;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1100px){\n\n  .reactio-uiux-approach__container{\n    padding:100px 30px;\n  }\n\n  .reactio-uiux-approach__header{\n    grid-template-columns:1fr;\n\n    gap:50px;\n  }\n\n  .reactio-uiux-approach__grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .reactio-uiux-approach__item{\n    border-right:1px solid rgba(8,8,8,.16) !important;\n    border-bottom:1px solid rgba(8,8,8,.16) !important;\n  }\n\n  .reactio-uiux-approach__item:nth-child(2n){\n    border-right:0 !important;\n  }\n\n  .reactio-uiux-approach__item:nth-child(5),\n  .reactio-uiux-approach__item:nth-child(6){\n    border-bottom:0 !important;\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:767px){\n\n  .reactio-uiux-approach__container{\n    padding:80px 20px 85px;\n  }\n\n  .reactio-uiux-approach__header{\n    margin-bottom:60px;\n\n    gap:40px;\n  }\n\n  .reactio-uiux-approach__title h2{\n    font-size:clamp(38px,10.5vw,55px);\n\n    line-height:.88;\n  }\n\n  .reactio-uiux-approach__title h2 span{\n    -webkit-text-stroke:1px #080808;\n  }\n\n  .reactio-uiux-approach__intro h3{\n    font-size:29px;\n  }\n\n  .reactio-uiux-approach__intro p{\n    font-size:14px;\n  }\n\n  .reactio-uiux-approach__grid{\n    grid-template-columns:1fr;\n  }\n\n  .reactio-uiux-approach__item{\n    min-height:285px;\n\n    padding:25px 5px;\n\n    border-right:0 !important;\n\n    border-bottom:1px solid rgba(8,8,8,.16) !important;\n  }\n\n  .reactio-uiux-approach__item:last-child{\n    border-bottom:0 !important;\n  }\n\n  .reactio-uiux-approach__content{\n    margin-top:55px;\n  }\n\n  .reactio-uiux-approach__item h3{\n    font-size:40px;\n  }\n\n  .reactio-uiux-approach__item p{\n    font-size:14px;\n  }\n\n  .reactio-uiux-approach__statement{\n    margin-top:70px;\n\n    padding:50px 0;\n  }\n\n  .reactio-uiux-approach__statement h3{\n    font-size:clamp(36px,10vw,50px);\n\n    line-height:.95;\n  }\n\n  .reactio-uiux-approach__statement h3 strong{\n    -webkit-text-stroke:1px #080808;\n  }\n\n  .reactio-uiux-approach__statement p{\n    margin-top:28px;\n\n    font-size:14px;\n  }\n\n  .reactio-uiux-approach__flow{\n    grid-template-columns:1fr;\n\n    gap:0;\n\n    padding:0;\n\n    border-bottom:0;\n  }\n\n  .reactio-uiux-approach__flow div{\n    min-height:110px;\n\n    padding:20px 5px;\n\n    border-bottom:1px solid rgba(8,8,8,.15);\n  }\n\n  .reactio-uiux-approach__flow i{\n    display:none;\n  }\n\n  .reactio-uiux-approach__flow div strong{\n    font-size:26px;\n  }\n\n  .reactio-uiux-approach__bottom{\n    margin-top:55px;\n\n    grid-template-columns:1fr;\n\n    gap:22px;\n  }\n\n  .reactio-uiux-approach__bottom strong{\n    font-size:23px;\n\n    line-height:1.2;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0cce268 elementor-section-height-min-height cs-section-content-fullwidth cs_scroll_y_120 cs-parallax-on-scroll elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"0cce268\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" data-cs-parallax-y=\"120\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ae571df dark-color\" data-id=\"ae571df\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5d1f8fe elementor-widget elementor-widget-html\" data-id=\"5d1f8fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"reactio-uiux-services\">\n\n  <div class=\"reactio-uiux-services__container\">\n\n    <!-- HEADER -->\n    <div class=\"reactio-uiux-services__header\">\n\n      <span class=\"reactio-uiux-services__eyebrow\">\n        UI \/ UX DESIGN SERVICES\n      <\/span>\n\n      <h2>\n        STRUCTURE THE FLOW.<br>\n        DESIGN THE INTERFACE.<br>\n        <span>REFINE THE EXPERIENCE.<\/span>\n      <\/h2>\n\n      <p>\n        Kullan\u0131c\u0131 ak\u0131\u015f\u0131ndan wireframe'e, aray\u00fcz tasar\u0131m\u0131ndan\n        prototipe ve design system yap\u0131s\u0131na kadar dijital \u00fcr\u00fcn\u00fcn\n        deneyim ve aray\u00fcz taraf\u0131n\u0131 b\u00fct\u00fcnsel olarak tasarl\u0131yoruz.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- GRID -->\n    <div class=\"reactio-uiux-services__grid\">\n\n\n      <!-- 01 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>01<\/span>\n          <b>USER FLOW<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            USER<br>\n            FLOW\n          <\/h3>\n\n          <p>\n            Kullan\u0131c\u0131n\u0131n giri\u015f noktas\u0131ndan hedeflenen aksiyona\n            kadar izleyece\u011fi yolu planlayarak gereksiz ad\u0131mlar\u0131\n            ve karma\u015fay\u0131 azalt\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 02 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>02<\/span>\n          <b>INFORMATION ARCHITECTURE<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            B\u0130LG\u0130<br>\n            M\u0130MAR\u0130S\u0130\n          <\/h3>\n\n          <p>\n            Sayfalar\u0131, i\u00e7erikleri ve fonksiyonlar\u0131 kullan\u0131c\u0131lar\u0131n\n            daha kolay anlayabilece\u011fi ve eri\u015febilece\u011fi mant\u0131kl\u0131\n            bir hiyerar\u015fi i\u00e7erisinde d\u00fczenliyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 03 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>03<\/span>\n          <b>WIREFRAME<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            WIREFRAME\n          <\/h3>\n\n          <p>\n            G\u00f6rsel tasar\u0131ma ge\u00e7meden \u00f6nce ekranlar\u0131n temel\n            yap\u0131s\u0131n\u0131, i\u00e7erik s\u0131ralamas\u0131n\u0131, aksiyon alanlar\u0131n\u0131\n            ve kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131 d\u00fc\u015f\u00fck detayl\u0131 taslaklarla\n            planl\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 04 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>04<\/span>\n          <b>UI DESIGN<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            ARAY\u00dcZ<br>\n            TASARIMI\n          <\/h3>\n\n          <p>\n            Renk, tipografi, grid, buton, kart ve di\u011fer\n            g\u00f6rsel bile\u015fenleri marka kimli\u011fiyle uyumlu,\n            modern ve tutarl\u0131 bir aray\u00fcz sistemi i\u00e7erisinde\n            tasarl\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 05 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>05<\/span>\n          <b>RESPONSIVE UX<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            RESPONSIVE &<br>\n            MOB\u0130L UX\n          <\/h3>\n\n          <p>\n            Aray\u00fcz\u00fc yaln\u0131zca masa\u00fcst\u00fcne g\u00f6re de\u011fil; tablet\n            ve mobil kullan\u0131m senaryolar\u0131n\u0131 da dikkate alarak\n            farkl\u0131 ekran boyutlar\u0131nda tutarl\u0131 bir deneyim\n            olu\u015fturacak \u015fekilde tasarl\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 06 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>06<\/span>\n          <b>DESIGN SYSTEM<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            DESIGN<br>\n            SYSTEM\n          <\/h3>\n\n          <p>\n            Tekrarlanan bile\u015fenleri, tipografi kurallar\u0131n\u0131,\n            renkleri, spacing yap\u0131s\u0131n\u0131 ve aray\u00fcz standartlar\u0131n\u0131\n            tan\u0131mlayarak \u00f6l\u00e7eklenebilir bir tasar\u0131m sistemi\n            olu\u015fturuyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 07 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>07<\/span>\n          <b>PROTOTYPE<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            INTERACTIVE<br>\n            PROTOTYPE\n          <\/h3>\n\n          <p>\n            Tasarlanan ekranlar aras\u0131ndaki ge\u00e7i\u015fleri ve temel\n            kullan\u0131c\u0131 etkile\u015fimlerini sim\u00fcle ederek \u00fcr\u00fcn\u00fcn\n            geli\u015ftirme \u00f6ncesindeki kullan\u0131m deneyimini\n            g\u00f6r\u00fcn\u00fcr hale getiriyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 08 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>08<\/span>\n          <b>USABILITY<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            KULLANILAB\u0130L\u0130RL\u0130K<br>\n            ANAL\u0130Z\u0130\n          <\/h3>\n\n          <p>\n            Mevcut aray\u00fczlerde kullan\u0131c\u0131n\u0131n karar vermesini\n            veya hedefe ula\u015fmas\u0131n\u0131 zorla\u015ft\u0131ran tasar\u0131m ve\n            etkile\u015fim problemlerini belirliyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 09 -->\n      <div class=\"reactio-uiux-services__item\">\n\n        <div class=\"reactio-uiux-services__top\">\n          <span>09<\/span>\n          <b>CONVERSION UX<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-services__content\">\n\n          <h3>\n            CONVERSION<br>\n            UX\n          <\/h3>\n\n          <p>\n            Form, teklif, sat\u0131\u015f, rezervasyon ve di\u011fer hedef\n            aksiyonlarda kullan\u0131c\u0131 deneyimini de\u011ferlendirerek\n            tasar\u0131m\u0131n i\u015f hedeflerini daha g\u00fc\u00e7l\u00fc desteklemesini\n            sa\u011fl\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <!-- STATEMENT -->\n    <div class=\"reactio-uiux-services__statement\">\n\n      <span>\n        EVERY SCREEN HAS A PURPOSE\n      <\/span>\n\n      <h3>\n        HER EKRANIN<br>\n        B\u0130R G\u00d6REV\u0130 VAR.<br>\n        <strong>HER AKI\u015eIN B\u0130R HEDEF\u0130.<\/strong>\n      <\/h3>\n\n      <p>\n        UI \/ UX tasar\u0131m\u0131nda ekranlar\u0131 birbirinden ba\u011f\u0131ms\u0131z\n        g\u00f6rm\u00fcyoruz. Kullan\u0131c\u0131n\u0131n ilk temas\u0131ndan hedeflenen\n        aksiyona kadar b\u00fct\u00fcn deneyimi tek bir sistem olarak\n        planl\u0131yoruz.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- BOTTOM -->\n    <div class=\"reactio-uiux-services__bottom\">\n\n      <span>\n        END-TO-END UI \/ UX DESIGN\n      <\/span>\n\n      <strong>\n        FLOW \u2192 WIREFRAME \u2192 UI \u2192 PROTOTYPE \u2192 TEST \u2192 IMPROVE\n      <\/strong>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =====================================================\n   SECTION\n===================================================== *\/\n\n.reactio-uiux-services{\n  width:100%;\n  overflow:hidden;\n\n  color:#fff;\n\n  font-family:Arial, Helvetica, sans-serif;\n}\n\n.reactio-uiux-services *{\n  box-sizing:border-box;\n}\n\n\n\/* =====================================================\n   CONTAINER\n===================================================== *\/\n\n.reactio-uiux-services__container{\n  width:100%;\n  max-width:1600px;\n\n  margin:0 auto;\n\n  padding:120px 50px 125px;\n}\n\n\n\/* =====================================================\n   HEADER\n===================================================== *\/\n\n.reactio-uiux-services__header{\n  margin-bottom:85px;\n}\n\n.reactio-uiux-services__eyebrow{\n  display:block;\n\n  margin-bottom:24px;\n\n  font-size:9px;\n  font-weight:900;\n\n  letter-spacing:2.2px;\n\n  color:rgba(255,255,255,.38);\n}\n\n.reactio-uiux-services__header h2{\n  margin:0;\n\n  max-width:1400px;\n\n  font-size:clamp(58px,7vw,125px);\n\n  line-height:.84;\n\n  letter-spacing:-.065em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n}\n\n.reactio-uiux-services__header h2 span{\n  color:transparent !important;\n\n  -webkit-text-stroke:2px #fff;\n}\n\n.reactio-uiux-services__header > p{\n  max-width:720px;\n\n  margin:40px 0 0;\n\n  font-size:17px;\n\n  line-height:1.7;\n\n  color:rgba(255,255,255,.52);\n}\n\n\n\/* =====================================================\n   GRID\n===================================================== *\/\n\n.reactio-uiux-services__grid{\n  display:grid;\n\n  grid-template-columns:repeat(3,1fr);\n\n  border-top:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n}\n\n\n\/* =====================================================\n   ITEM\n===================================================== *\/\n\n.reactio-uiux-services__item{\n  min-height:350px;\n\n  padding:28px;\n\n  display:flex;\n\n  flex-direction:column;\n  justify-content:space-between;\n\n  border-right:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n\n  transition:\n    background .4s ease,\n    color .4s ease;\n}\n\n.reactio-uiux-services__item:nth-child(3n){\n  border-right:0;\n}\n\n.reactio-uiux-services__item:nth-child(n+7){\n  border-bottom:0;\n}\n\n\n\/* =====================================================\n   TOP\n===================================================== *\/\n\n.reactio-uiux-services__top{\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:20px;\n}\n\n.reactio-uiux-services__top span,\n.reactio-uiux-services__top b{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.2px;\n\n  color:rgba(255,255,255,.35);\n\n  transition:color .4s ease;\n}\n\n\n\/* =====================================================\n   CONTENT\n===================================================== *\/\n\n.reactio-uiux-services__content{\n  margin-top:75px;\n}\n\n.reactio-uiux-services__item h3{\n  margin:0 0 18px;\n\n  font-size:clamp(31px,3vw,48px);\n\n  line-height:.91;\n\n  letter-spacing:-.055em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n\n  transition:color .4s ease;\n}\n\n.reactio-uiux-services__item p{\n  max-width:360px;\n\n  margin:0;\n\n  font-size:13px;\n\n  line-height:1.7;\n\n  color:rgba(255,255,255,.5);\n\n  transition:color .4s ease;\n}\n\n\n\/* =====================================================\n   HOVER\n===================================================== *\/\n\n.reactio-uiux-services__item:hover{\n  background:#f3f0e9;\n\n  color:#080808;\n}\n\n.reactio-uiux-services__item:hover\n.reactio-uiux-services__top span,\n\n.reactio-uiux-services__item:hover\n.reactio-uiux-services__top b{\n  color:rgba(8,8,8,.38);\n}\n\n.reactio-uiux-services__item:hover h3{\n  color:#080808 !important;\n}\n\n.reactio-uiux-services__item:hover p{\n  color:rgba(8,8,8,.56);\n}\n\n\n\/* =====================================================\n   STATEMENT\n===================================================== *\/\n\n.reactio-uiux-services__statement{\n  margin-top:110px;\n\n  padding:70px 0;\n\n  border-top:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n}\n\n.reactio-uiux-services__statement > span{\n  display:block;\n\n  margin-bottom:25px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.8px;\n\n  color:rgba(255,255,255,.35);\n}\n\n.reactio-uiux-services__statement h3{\n  max-width:1350px;\n\n  margin:0;\n\n  font-size:clamp(42px,5.5vw,90px);\n\n  line-height:.92;\n\n  letter-spacing:-.06em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n}\n\n.reactio-uiux-services__statement h3 strong{\n  color:transparent;\n\n  -webkit-text-stroke:1.5px #fff;\n\n  font-weight:950;\n}\n\n.reactio-uiux-services__statement p{\n  max-width:720px;\n\n  margin:35px 0 0;\n\n  font-size:15px;\n\n  line-height:1.75;\n\n  color:rgba(255,255,255,.5);\n}\n\n\n\/* =====================================================\n   BOTTOM\n===================================================== *\/\n\n.reactio-uiux-services__bottom{\n  margin-top:70px;\n\n  display:grid;\n\n  grid-template-columns:.35fr 1.65fr;\n\n  gap:60px;\n}\n\n.reactio-uiux-services__bottom span{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.7px;\n\n  color:rgba(255,255,255,.35);\n}\n\n.reactio-uiux-services__bottom strong{\n  font-size:clamp(21px,2.5vw,40px);\n\n  line-height:1.1;\n\n  letter-spacing:-.04em;\n\n  font-weight:950;\n\n  color:#fff;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1100px){\n\n  .reactio-uiux-services__container{\n    padding:100px 30px 105px;\n  }\n\n  .reactio-uiux-services__grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .reactio-uiux-services__item{\n    border-right:1px solid rgba(255,255,255,.15) !important;\n    border-bottom:1px solid rgba(255,255,255,.15) !important;\n  }\n\n  .reactio-uiux-services__item:nth-child(2n){\n    border-right:0 !important;\n  }\n\n  .reactio-uiux-services__item:last-child{\n    border-bottom:0 !important;\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:767px){\n\n  .reactio-uiux-services__container{\n    padding:80px 20px 85px;\n  }\n\n  .reactio-uiux-services__header{\n    margin-bottom:55px;\n  }\n\n  .reactio-uiux-services__header h2{\n    font-size:clamp(43px,12vw,62px);\n\n    line-height:.87;\n  }\n\n  .reactio-uiux-services__header h2 span{\n    -webkit-text-stroke:1px #fff;\n  }\n\n  .reactio-uiux-services__header > p{\n    margin-top:28px;\n\n    font-size:15px;\n\n    line-height:1.6;\n  }\n\n  .reactio-uiux-services__grid{\n    grid-template-columns:1fr;\n  }\n\n  .reactio-uiux-services__item{\n    min-height:280px;\n\n    padding:25px 5px;\n\n    border-right:0 !important;\n\n    border-bottom:1px solid rgba(255,255,255,.15) !important;\n  }\n\n  .reactio-uiux-services__item:last-child{\n    border-bottom:0 !important;\n  }\n\n  .reactio-uiux-services__content{\n    margin-top:55px;\n  }\n\n  .reactio-uiux-services__item h3{\n    font-size:39px;\n  }\n\n  .reactio-uiux-services__item p{\n    font-size:14px;\n  }\n\n  .reactio-uiux-services__statement{\n    margin-top:70px;\n\n    padding:50px 0;\n  }\n\n  .reactio-uiux-services__statement h3{\n    font-size:clamp(36px,10vw,50px);\n\n    line-height:.95;\n  }\n\n  .reactio-uiux-services__statement h3 strong{\n    -webkit-text-stroke:1px #fff;\n  }\n\n  .reactio-uiux-services__statement p{\n    margin-top:28px;\n\n    font-size:14px;\n  }\n\n  .reactio-uiux-services__bottom{\n    margin-top:55px;\n\n    grid-template-columns:1fr;\n\n    gap:22px;\n  }\n\n  .reactio-uiux-services__bottom strong{\n    font-size:23px;\n\n    line-height:1.2;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ae51019 elementor-section-height-min-height cs-section-content-fullwidth cs_scroll_y_120 cs-parallax-on-scroll elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"ae51019\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" data-cs-parallax-y=\"120\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6b47b0b dark-color\" data-id=\"6b47b0b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-020a9df elementor-widget elementor-widget-html\" data-id=\"020a9df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"reactio-uiux-process\">\n\n  <div class=\"reactio-uiux-process__container\">\n\n    <!-- HEADER -->\n    <div class=\"reactio-uiux-process__header\">\n\n      <span class=\"reactio-uiux-process__eyebrow\">\n        UI \/ UX DESIGN PROCESS\n      <\/span>\n\n      <h2>\n        DISCOVER.<br>\n        DESIGN.<br>\n        <span>REFINE.<\/span>\n      <\/h2>\n\n      <p>\n        UI \/ UX tasar\u0131m s\u00fcrecini yaln\u0131zca ekran \u00e7izmek olarak\n        g\u00f6rm\u00fcyoruz. \u00d6nce \u00fcr\u00fcn\u00fc ve kullan\u0131c\u0131y\u0131 anlamaya \u00e7al\u0131\u015f\u0131yor,\n        ard\u0131ndan ak\u0131\u015f\u0131, wireframe yap\u0131s\u0131n\u0131, aray\u00fcz\u00fc ve prototipi\n        ad\u0131m ad\u0131m geli\u015ftiriyoruz.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- PROCESS GRID -->\n    <div class=\"reactio-uiux-process__grid\">\n\n\n      <!-- 01 -->\n      <div class=\"reactio-uiux-process__item\">\n\n        <div class=\"reactio-uiux-process__top\">\n          <span>01<\/span>\n          <b>DISCOVER<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-process__content\">\n\n          <small>\n            UNDERSTAND THE PRODUCT\n          <\/small>\n\n          <h3>\n            PROJEY\u0130<br>\n            ANLA\n          <\/h3>\n\n          <p>\n            \u00dcr\u00fcn\u00fcn, hizmetin, i\u015f modelinin ve temel hedeflerin\n            ne oldu\u011funu netle\u015ftirerek tasar\u0131m s\u00fcrecinin\n            ba\u015flang\u0131\u00e7 \u00e7er\u00e7evesini olu\u015fturuyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 02 -->\n      <div class=\"reactio-uiux-process__item\">\n\n        <div class=\"reactio-uiux-process__top\">\n          <span>02<\/span>\n          <b>RESEARCH<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-process__content\">\n\n          <small>\n            UNDERSTAND THE USER\n          <\/small>\n\n          <h3>\n            KULLANICIYI<br>\n            ARA\u015eTIR\n          <\/h3>\n\n          <p>\n            Hedef kitlenin ihtiya\u00e7lar\u0131n\u0131, kullan\u0131m senaryolar\u0131n\u0131,\n            beklentilerini ve kar\u015f\u0131la\u015fabilece\u011fi problemleri\n            de\u011ferlendirerek kullan\u0131c\u0131 odakl\u0131 kararlar al\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 03 -->\n      <div class=\"reactio-uiux-process__item\">\n\n        <div class=\"reactio-uiux-process__top\">\n          <span>03<\/span>\n          <b>USER FLOW<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-process__content\">\n\n          <small>\n            MAP THE JOURNEY\n          <\/small>\n\n          <h3>\n            AKI\u015eI<br>\n            PLANLA\n          <\/h3>\n\n          <p>\n            Kullan\u0131c\u0131n\u0131n sistem i\u00e7erisinde hangi ad\u0131mlar\u0131\n            izleyece\u011fini, hangi ekranlara ge\u00e7ece\u011fini ve\n            hedeflenen aksiyona nas\u0131l ula\u015faca\u011f\u0131n\u0131 planl\u0131yoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 04 -->\n      <div class=\"reactio-uiux-process__item\">\n\n        <div class=\"reactio-uiux-process__top\">\n          <span>04<\/span>\n          <b>WIREFRAME<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-process__content\">\n\n          <small>\n            BUILD THE STRUCTURE\n          <\/small>\n\n          <h3>\n            WIREFRAME<br>\n            OLU\u015eTUR\n          <\/h3>\n\n          <p>\n            G\u00f6rsel stile ge\u00e7meden \u00f6nce ekran yap\u0131s\u0131n\u0131,\n            i\u00e7erik s\u0131ralamas\u0131n\u0131, fonksiyonlar\u0131 ve temel\n            etkile\u015fim alanlar\u0131n\u0131 wireframe \u00fczerinden\n            netle\u015ftiriyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 05 -->\n      <div class=\"reactio-uiux-process__item\">\n\n        <div class=\"reactio-uiux-process__top\">\n          <span>05<\/span>\n          <b>UI DESIGN<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-process__content\">\n\n          <small>\n            DESIGN THE INTERFACE\n          <\/small>\n\n          <h3>\n            ARAY\u00dcZ\u00dc<br>\n            TASARLA\n          <\/h3>\n\n          <p>\n            Renk, tipografi, grid, buton, kart ve di\u011fer\n            bile\u015fenleri marka kimli\u011fiyle uyumlu \u015fekilde\n            tasarlayarak tutarl\u0131 bir aray\u00fcz dili olu\u015fturuyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 06 -->\n      <div class=\"reactio-uiux-process__item\">\n\n        <div class=\"reactio-uiux-process__top\">\n          <span>06<\/span>\n          <b>PROTOTYPE & IMPROVE<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-process__content\">\n\n          <small>\n            TEST THE EXPERIENCE\n          <\/small>\n\n          <h3>\n            PROTOT\u0130PLE.<br>\n            GEL\u0130\u015eT\u0130R.\n          <\/h3>\n\n          <p>\n            Ekranlar aras\u0131ndaki ge\u00e7i\u015fleri ve temel\n            etkile\u015fimleri prototip \u00fczerinden kontrol ediyor,\n            gerekli geli\u015ftirmeleri uygulayarak deneyimi\n            refine ediyoruz.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <!-- STATEMENT -->\n    <div class=\"reactio-uiux-process__statement\">\n\n      <span>\n        DESIGN BEFORE DEVELOPMENT\n      <\/span>\n\n      <h3>\n        \u00d6NCE DENEY\u0130M\u0130<br>\n        PLANLA.<br>\n        <strong>SONRA GEL\u0130\u015eT\u0130R.<\/strong>\n      <\/h3>\n\n      <p>\n        Tasar\u0131m s\u00fcrecinin geli\u015ftirme \u00f6ncesinde netle\u015fmesi,\n        kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131n, ekran yap\u0131s\u0131n\u0131n ve aray\u00fcz kararlar\u0131n\u0131n\n        daha kontroll\u00fc ilerlemesini sa\u011flar. B\u00f6ylece geli\u015ftirme\n        a\u015famas\u0131nda gereksiz revizyonlar\u0131n ve belirsizli\u011fin\n        azalt\u0131lmas\u0131n\u0131 hedefliyoruz.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- BOTTOM -->\n    <div class=\"reactio-uiux-process__bottom\">\n\n      <span>\n        FROM IDEA TO INTERFACE\n      <\/span>\n\n      <strong>\n        DISCOVER \u2192 RESEARCH \u2192 FLOW \u2192 WIREFRAME \u2192 UI \u2192 PROTOTYPE\n      <\/strong>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =====================================================\n   SECTION\n===================================================== *\/\n\n.reactio-uiux-process{\n  width:100%;\n  overflow:hidden;\n\n  background:#f3f0e9;\n  color:#080808;\n\n  font-family:Arial, Helvetica, sans-serif;\n}\n\n.reactio-uiux-process *{\n  box-sizing:border-box;\n}\n\n\n\/* =====================================================\n   CONTAINER\n===================================================== *\/\n\n.reactio-uiux-process__container{\n  width:100%;\n  max-width:1600px;\n\n  margin:0 auto;\n\n  padding:120px 50px;\n}\n\n\n\/* =====================================================\n   HEADER\n===================================================== *\/\n\n.reactio-uiux-process__header{\n  margin-bottom:85px;\n}\n\n.reactio-uiux-process__eyebrow{\n  display:block;\n\n  margin-bottom:24px;\n\n  font-size:9px;\n  font-weight:900;\n\n  letter-spacing:2.2px;\n\n  color:rgba(8,8,8,.38);\n}\n\n.reactio-uiux-process__header h2{\n  margin:0;\n\n  max-width:1350px;\n\n  font-size:clamp(60px,7vw,125px);\n\n  line-height:.84;\n\n  letter-spacing:-.065em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n}\n\n.reactio-uiux-process__header h2 span{\n  color:transparent !important;\n\n  -webkit-text-stroke:1.5px #080808;\n}\n\n.reactio-uiux-process__header > p{\n  max-width:720px;\n\n  margin:40px 0 0;\n\n  font-size:17px;\n\n  line-height:1.7;\n\n  color:rgba(8,8,8,.58);\n}\n\n\n\/* =====================================================\n   GRID\n===================================================== *\/\n\n.reactio-uiux-process__grid{\n  display:grid;\n\n  grid-template-columns:repeat(3,1fr);\n\n  border-top:1px solid rgba(8,8,8,.16);\n  border-bottom:1px solid rgba(8,8,8,.16);\n}\n\n\n\/* =====================================================\n   ITEM\n===================================================== *\/\n\n.reactio-uiux-process__item{\n  min-height:365px;\n\n  padding:30px;\n\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n\n  border-right:1px solid rgba(8,8,8,.16);\n  border-bottom:1px solid rgba(8,8,8,.16);\n\n  transition:\n    background .4s ease,\n    color .4s ease;\n}\n\n.reactio-uiux-process__item:nth-child(3n){\n  border-right:0;\n}\n\n.reactio-uiux-process__item:nth-child(n+4){\n  border-bottom:0;\n}\n\n\n\/* =====================================================\n   TOP\n===================================================== *\/\n\n.reactio-uiux-process__top{\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:20px;\n}\n\n.reactio-uiux-process__top span,\n.reactio-uiux-process__top b{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.2px;\n\n  color:rgba(8,8,8,.35);\n\n  transition:.4s ease;\n}\n\n\n\/* =====================================================\n   CONTENT\n===================================================== *\/\n\n.reactio-uiux-process__content{\n  margin-top:80px;\n}\n\n.reactio-uiux-process__content small{\n  display:block;\n\n  margin-bottom:12px;\n\n  font-size:8px;\n  font-weight:900;\n\n  letter-spacing:1.4px;\n\n  color:rgba(8,8,8,.35);\n\n  transition:.4s ease;\n}\n\n.reactio-uiux-process__item h3{\n  margin:0 0 18px;\n\n  font-size:clamp(34px,3.2vw,52px);\n\n  line-height:.91;\n\n  letter-spacing:-.055em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n\n  transition:.4s ease;\n}\n\n.reactio-uiux-process__item p{\n  max-width:360px;\n\n  margin:0;\n\n  font-size:13px;\n\n  line-height:1.7;\n\n  color:rgba(8,8,8,.55);\n\n  transition:.4s ease;\n}\n\n\n\/* =====================================================\n   HOVER\n===================================================== *\/\n\n.reactio-uiux-process__item:hover{\n  background:#080808;\n\n  color:#fff;\n}\n\n.reactio-uiux-process__item:hover\n.reactio-uiux-process__top span,\n\n.reactio-uiux-process__item:hover\n.reactio-uiux-process__top b,\n\n.reactio-uiux-process__item:hover\n.reactio-uiux-process__content small{\n  color:rgba(255,255,255,.4);\n}\n\n.reactio-uiux-process__item:hover h3{\n  color:#fff !important;\n}\n\n.reactio-uiux-process__item:hover p{\n  color:rgba(255,255,255,.55);\n}\n\n\n\/* =====================================================\n   STATEMENT\n===================================================== *\/\n\n.reactio-uiux-process__statement{\n  margin-top:110px;\n\n  padding:70px 0;\n\n  border-top:1px solid rgba(8,8,8,.15);\n  border-bottom:1px solid rgba(8,8,8,.15);\n}\n\n.reactio-uiux-process__statement > span{\n  display:block;\n\n  margin-bottom:25px;\n\n  font-size:8px;\n  font-weight:900;\n\n  letter-spacing:1.8px;\n\n  color:rgba(8,8,8,.35);\n}\n\n.reactio-uiux-process__statement h3{\n  max-width:1350px;\n\n  margin:0;\n\n  font-size:clamp(42px,5.5vw,90px);\n\n  line-height:.92;\n\n  letter-spacing:-.06em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n}\n\n.reactio-uiux-process__statement h3 strong{\n  color:transparent;\n\n  -webkit-text-stroke:1.5px #080808;\n\n  font-weight:950;\n}\n\n.reactio-uiux-process__statement p{\n  max-width:720px;\n\n  margin:35px 0 0;\n\n  font-size:15px;\n\n  line-height:1.75;\n\n  color:rgba(8,8,8,.55);\n}\n\n\n\/* =====================================================\n   BOTTOM\n===================================================== *\/\n\n.reactio-uiux-process__bottom{\n  margin-top:70px;\n\n  display:grid;\n\n  grid-template-columns:.35fr 1.65fr;\n\n  gap:60px;\n}\n\n.reactio-uiux-process__bottom span{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.7px;\n\n  color:rgba(8,8,8,.35);\n}\n\n.reactio-uiux-process__bottom strong{\n  font-size:clamp(21px,2.6vw,40px);\n\n  line-height:1.1;\n\n  letter-spacing:-.04em;\n\n  font-weight:950;\n\n  color:#080808;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1100px){\n\n  .reactio-uiux-process__container{\n    padding:100px 30px 105px;\n  }\n\n  .reactio-uiux-process__grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .reactio-uiux-process__item{\n    border-right:1px solid rgba(8,8,8,.16) !important;\n    border-bottom:1px solid rgba(8,8,8,.16) !important;\n  }\n\n  .reactio-uiux-process__item:nth-child(2n){\n    border-right:0 !important;\n  }\n\n  .reactio-uiux-process__item:nth-child(5),\n  .reactio-uiux-process__item:nth-child(6){\n    border-bottom:0 !important;\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:767px){\n\n  .reactio-uiux-process__container{\n    padding:80px 20px 85px;\n  }\n\n  .reactio-uiux-process__header{\n    margin-bottom:55px;\n  }\n\n  .reactio-uiux-process__header h2{\n    font-size:clamp(43px,12vw,62px);\n\n    line-height:.87;\n  }\n\n  .reactio-uiux-process__header h2 span{\n    -webkit-text-stroke:1px #080808;\n  }\n\n  .reactio-uiux-process__header > p{\n    margin-top:28px;\n\n    font-size:15px;\n\n    line-height:1.6;\n  }\n\n  .reactio-uiux-process__grid{\n    grid-template-columns:1fr;\n  }\n\n  .reactio-uiux-process__item{\n    min-height:285px;\n\n    padding:25px 5px;\n\n    border-right:0 !important;\n\n    border-bottom:1px solid rgba(8,8,8,.16) !important;\n  }\n\n  .reactio-uiux-process__item:last-child{\n    border-bottom:0 !important;\n  }\n\n  .reactio-uiux-process__content{\n    margin-top:55px;\n  }\n\n  .reactio-uiux-process__item h3{\n    font-size:40px;\n  }\n\n  .reactio-uiux-process__item p{\n    font-size:14px;\n  }\n\n  .reactio-uiux-process__statement{\n    margin-top:70px;\n\n    padding:50px 0;\n  }\n\n  .reactio-uiux-process__statement h3{\n    font-size:clamp(36px,10vw,50px);\n\n    line-height:.95;\n  }\n\n  .reactio-uiux-process__statement h3 strong{\n    -webkit-text-stroke:1px #080808;\n  }\n\n  .reactio-uiux-process__statement p{\n    margin-top:28px;\n\n    font-size:14px;\n  }\n\n  .reactio-uiux-process__bottom{\n    margin-top:55px;\n\n    grid-template-columns:1fr;\n\n    gap:22px;\n  }\n\n  .reactio-uiux-process__bottom strong{\n    font-size:24px;\n\n    line-height:1.2;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c4802d2 elementor-section-height-min-height cs-section-content-fullwidth cs_scroll_y_120 cs-parallax-on-scroll elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"c4802d2\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" data-cs-parallax-y=\"120\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b2c63c8 dark-color\" data-id=\"b2c63c8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e4be0d elementor-widget elementor-widget-html\" data-id=\"5e4be0d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"reactio-uiux-problems\">\n\n  <div class=\"reactio-uiux-problems__container\">\n\n    <!-- HEADER -->\n    <div class=\"reactio-uiux-problems__header\">\n\n      <span class=\"reactio-uiux-problems__eyebrow\">\n        UX WARNING SIGNS\n      <\/span>\n\n      <h2>\n        LOOKS GOOD.<br>\n        FEELS CONFUSING.<br>\n        <span>THAT'S A PROBLEM.<\/span>\n      <\/h2>\n\n      <p>\n        Bir aray\u00fcz g\u00f6rsel olarak g\u00fc\u00e7l\u00fc olabilir ancak kullan\u0131c\u0131\n        ne yapaca\u011f\u0131n\u0131 anlam\u0131yor, arad\u0131\u011f\u0131 bilgiye ula\u015fam\u0131yor\n        veya temel aksiyonlarda zorlan\u0131yorsa deneyim taraf\u0131nda\n        geli\u015ftirilmesi gereken noktalar vard\u0131r.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- GRID -->\n    <div class=\"reactio-uiux-problems__grid\">\n\n\n      <!-- 01 -->\n      <div class=\"reactio-uiux-problems__item\">\n\n        <div class=\"reactio-uiux-problems__top\">\n          <span>01<\/span>\n          <b>NAVIGATION<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-problems__content\">\n\n          <small>TOO MANY PATHS<\/small>\n\n          <h3>\n            KARMA\u015eIK<br>\n            NAV\u0130GASYON\n          <\/h3>\n\n          <p>\n            Men\u00fc yap\u0131s\u0131 fazla karma\u015f\u0131ksa veya kullan\u0131c\u0131\n            arad\u0131\u011f\u0131 b\u00f6l\u00fcme nas\u0131l ula\u015faca\u011f\u0131n\u0131 anlayam\u0131yorsa\n            deneyim daha ilk ad\u0131mda zorla\u015fabilir.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 02 -->\n      <div class=\"reactio-uiux-problems__item\">\n\n        <div class=\"reactio-uiux-problems__top\">\n          <span>02<\/span>\n          <b>CTA<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-problems__content\">\n\n          <small>UNCLEAR ACTION<\/small>\n\n          <h3>\n            BEL\u0130RS\u0130Z<br>\n            CTA\n          <\/h3>\n\n          <p>\n            Butonlar ve aksiyon alanlar\u0131 yeterince g\u00f6r\u00fcn\u00fcr\n            de\u011filse veya kullan\u0131c\u0131dan ne beklendi\u011fi anla\u015f\u0131lm\u0131yorsa\n            hedeflenen i\u015flem ger\u00e7ekle\u015fmeyebilir.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 03 -->\n      <div class=\"reactio-uiux-problems__item\">\n\n        <div class=\"reactio-uiux-problems__top\">\n          <span>03<\/span>\n          <b>MOBILE UX<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-problems__content\">\n\n          <small>DESKTOP-FIRST EXPERIENCE<\/small>\n\n          <h3>\n            MOB\u0130LDE<br>\n            KULLANIM ZAYIF\n          <\/h3>\n\n          <p>\n            Masa\u00fcst\u00fcnde \u00e7al\u0131\u015fan bir aray\u00fcz mobilde ayn\u0131\n            deneyimi sunmayabilir. K\u00fc\u00e7\u00fck butonlar, ta\u015fan\n            i\u00e7erikler ve zor kullan\u0131lan formlar kullan\u0131c\u0131y\u0131\n            h\u0131zl\u0131ca kaybettirebilir.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 04 -->\n      <div class=\"reactio-uiux-problems__item\">\n\n        <div class=\"reactio-uiux-problems__top\">\n          <span>04<\/span>\n          <b>INFORMATION OVERLOAD<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-problems__content\">\n\n          <small>TOO MUCH AT ONCE<\/small>\n\n          <h3>\n            B\u0130LG\u0130<br>\n            KALABALI\u011eI\n          <\/h3>\n\n          <p>\n            Kullan\u0131c\u0131 ayn\u0131 anda \u00e7ok fazla i\u00e7erik, se\u00e7enek\n            veya mesajla kar\u015f\u0131la\u015f\u0131yorsa \u00f6ncelikleri anlamakta\n            zorlanabilir ve karar verme s\u00fcreci yava\u015flayabilir.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 05 -->\n      <div class=\"reactio-uiux-problems__item\">\n\n        <div class=\"reactio-uiux-problems__top\">\n          <span>05<\/span>\n          <b>CONSISTENCY<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-problems__content\">\n\n          <small>INCONSISTENT INTERFACE<\/small>\n\n          <h3>\n            TUTARSIZ<br>\n            ARAY\u00dcZ\n          <\/h3>\n\n          <p>\n            Ayn\u0131 i\u015flevi g\u00f6ren buton, kart, form ve bile\u015fenler\n            farkl\u0131 \u015fekillerde davran\u0131yorsa kullan\u0131c\u0131 sistemin\n            nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 \u00f6\u011frenmekte zorlanabilir.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 06 -->\n      <div class=\"reactio-uiux-problems__item\">\n\n        <div class=\"reactio-uiux-problems__top\">\n          <span>06<\/span>\n          <b>USER GOAL<\/b>\n        <\/div>\n\n        <div class=\"reactio-uiux-problems__content\">\n\n          <small>THE USER GETS LOST<\/small>\n\n          <h3>\n            KULLANICI<br>\n            HEDEFE ULA\u015eAMIYOR\n          <\/h3>\n\n          <p>\n            Kullan\u0131c\u0131 \u00fcr\u00fcn bulam\u0131yor, formu tamamlayam\u0131yor\n            veya istedi\u011fi aksiyona ula\u015fmak i\u00e7in gere\u011finden\n            fazla ad\u0131m at\u0131yorsa kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131n\n            yeniden tasarlanmas\u0131 gerekir.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <!-- DIAGNOSIS -->\n    <div class=\"reactio-uiux-problems__diagnosis\">\n\n      <div class=\"reactio-uiux-problems__diagnosis-left\">\n\n        <span>\n          THE REAL UX QUESTION\n        <\/span>\n\n        <h3>\n          KULLANICI<br>\n          NE YAPACA\u011eINI<br>\n          <strong>B\u0130L\u0130YOR MU?<\/strong>\n        <\/h3>\n\n      <\/div>\n\n\n      <div class=\"reactio-uiux-problems__diagnosis-right\">\n\n        <p>\n          Kullan\u0131c\u0131 deneyimindeki en temel problemlerden biri,\n          aray\u00fcz\u00fcn kullan\u0131c\u0131dan ne bekledi\u011fini yeterince a\u00e7\u0131k\n          \u015fekilde anlatamamas\u0131d\u0131r.\n        <\/p>\n\n        <p>\n          \u0130yi UX; kullan\u0131c\u0131n\u0131n se\u00e7enekler aras\u0131nda kaybolmadan,\n          gereksiz karar y\u00fck\u00fc ya\u015famadan ve sistemle m\u00fccadele\n          etmeden hedefledi\u011fi sonuca ula\u015fmas\u0131n\u0131 sa\u011flar.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- METRICS -->\n    <div class=\"reactio-uiux-problems__metrics\">\n\n      <div class=\"reactio-uiux-problems__metric\">\n        <span>01<\/span>\n        <strong>CLARITY<\/strong>\n        <p>Kullan\u0131c\u0131 ne yapaca\u011f\u0131n\u0131 anl\u0131yor mu?<\/p>\n      <\/div>\n\n      <div class=\"reactio-uiux-problems__metric\">\n        <span>02<\/span>\n        <strong>USABILITY<\/strong>\n        <p>Aray\u00fcz kolay kullan\u0131labiliyor mu?<\/p>\n      <\/div>\n\n      <div class=\"reactio-uiux-problems__metric\">\n        <span>03<\/span>\n        <strong>CONSISTENCY<\/strong>\n        <p>Bile\u015fenler tutarl\u0131 davran\u0131yor mu?<\/p>\n      <\/div>\n\n      <div class=\"reactio-uiux-problems__metric\">\n        <span>04<\/span>\n        <strong>OUTCOME<\/strong>\n        <p>Kullan\u0131c\u0131 hedefe ula\u015fabiliyor mu?<\/p>\n      <\/div>\n\n    <\/div>\n\n\n    <!-- STATEMENT -->\n    <div class=\"reactio-uiux-problems__statement\">\n\n      <span>\n        GREAT UI SHOULD SUPPORT GREAT UX\n      <\/span>\n\n      <h3>\n        SADECE G\u00dcZEL<br>\n        EKRANLAR DE\u011e\u0130L.<br>\n        <strong>\u0130Y\u0130 B\u0130R DENEY\u0130M.<\/strong>\n      <\/h3>\n\n      <p>\n        Tasar\u0131m\u0131n amac\u0131 yaln\u0131zca estetik bir aray\u00fcz olu\u015fturmak\n        de\u011fildir. Kullan\u0131c\u0131n\u0131n bilgiye ula\u015fmas\u0131n\u0131, sistemi\n        anlamas\u0131n\u0131 ve hedeflenen aksiyonu kolay \u015fekilde\n        ger\u00e7ekle\u015ftirmesini sa\u011flamakt\u0131r.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- BOTTOM -->\n    <div class=\"reactio-uiux-problems__bottom\">\n\n      <span>\n        REMOVE CONFUSION. IMPROVE EXPERIENCE.\n      <\/span>\n\n      <strong>\n        CLARITY \u2192 USABILITY \u2192 FLOW \u2192 ACTION \u2192 EXPERIENCE\n      <\/strong>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =====================================================\n   SECTION\n===================================================== *\/\n\n.reactio-uiux-problems{\n  width:100%;\n  overflow:hidden;\n\n  background:#080808;\n  color:#fff;\n\n  font-family:Arial, Helvetica, sans-serif;\n}\n\n.reactio-uiux-problems *{\n  box-sizing:border-box;\n}\n\n\n\/* =====================================================\n   CONTAINER\n===================================================== *\/\n\n.reactio-uiux-problems__container{\n  width:100%;\n  max-width:1600px;\n\n  margin:0 auto;\n\n  padding:120px 50px 125px;\n}\n\n\n\/* =====================================================\n   HEADER\n===================================================== *\/\n\n.reactio-uiux-problems__header{\n  margin-bottom:85px;\n}\n\n.reactio-uiux-problems__eyebrow{\n  display:block;\n\n  margin-bottom:24px;\n\n  font-size:9px;\n  font-weight:900;\n\n  letter-spacing:2.2px;\n\n  color:rgba(255,255,255,.38);\n}\n\n.reactio-uiux-problems__header h2{\n  margin:0;\n\n  max-width:1400px;\n\n  font-size:clamp(58px,7vw,125px);\n\n  line-height:.84;\n\n  letter-spacing:-.065em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n}\n\n.reactio-uiux-problems__header h2 span{\n  color:transparent !important;\n\n  -webkit-text-stroke:2px #fff;\n}\n\n.reactio-uiux-problems__header > p{\n  max-width:720px;\n\n  margin:40px 0 0;\n\n  font-size:17px;\n\n  line-height:1.7;\n\n  color:rgba(255,255,255,.52);\n}\n\n\n\/* =====================================================\n   GRID\n===================================================== *\/\n\n.reactio-uiux-problems__grid{\n  display:grid;\n\n  grid-template-columns:repeat(3,1fr);\n\n  border-top:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n}\n\n\n\/* =====================================================\n   ITEM\n===================================================== *\/\n\n.reactio-uiux-problems__item{\n  min-height:365px;\n\n  padding:30px;\n\n  display:flex;\n  flex-direction:column;\n  justify-content:space-between;\n\n  border-right:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n\n  transition:\n    background .4s ease,\n    color .4s ease;\n}\n\n.reactio-uiux-problems__item:nth-child(3n){\n  border-right:0;\n}\n\n.reactio-uiux-problems__item:nth-child(n+4){\n  border-bottom:0;\n}\n\n\n\/* =====================================================\n   TOP\n===================================================== *\/\n\n.reactio-uiux-problems__top{\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:20px;\n}\n\n.reactio-uiux-problems__top span,\n.reactio-uiux-problems__top b{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.2px;\n\n  color:rgba(255,255,255,.35);\n\n  transition:.4s ease;\n}\n\n\n\/* =====================================================\n   CONTENT\n===================================================== *\/\n\n.reactio-uiux-problems__content{\n  margin-top:75px;\n}\n\n.reactio-uiux-problems__content small{\n  display:block;\n\n  margin-bottom:12px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.3px;\n\n  color:rgba(255,255,255,.35);\n\n  transition:.4s ease;\n}\n\n.reactio-uiux-problems__item h3{\n  margin:0 0 18px;\n\n  font-size:clamp(32px,3vw,49px);\n\n  line-height:.91;\n\n  letter-spacing:-.055em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n\n  transition:.4s ease;\n}\n\n.reactio-uiux-problems__item p{\n  max-width:360px;\n\n  margin:0;\n\n  font-size:13px;\n\n  line-height:1.7;\n\n  color:rgba(255,255,255,.5);\n\n  transition:.4s ease;\n}\n\n\n\/* =====================================================\n   HOVER\n===================================================== *\/\n\n.reactio-uiux-problems__item:hover{\n  background:#f3f0e9;\n\n  color:#080808;\n}\n\n.reactio-uiux-problems__item:hover\n.reactio-uiux-problems__top span,\n\n.reactio-uiux-problems__item:hover\n.reactio-uiux-problems__top b,\n\n.reactio-uiux-problems__item:hover\n.reactio-uiux-problems__content small{\n  color:rgba(8,8,8,.38);\n}\n\n.reactio-uiux-problems__item:hover h3{\n  color:#080808 !important;\n}\n\n.reactio-uiux-problems__item:hover p{\n  color:rgba(8,8,8,.56);\n}\n\n\n\/* =====================================================\n   DIAGNOSIS\n===================================================== *\/\n\n.reactio-uiux-problems__diagnosis{\n  margin-top:110px;\n\n  padding:70px 0;\n\n  display:grid;\n\n  grid-template-columns:1fr .75fr;\n\n  gap:100px;\n\n  align-items:end;\n\n  border-top:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n}\n\n.reactio-uiux-problems__diagnosis-left > span{\n  display:block;\n\n  margin-bottom:25px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.8px;\n\n  color:rgba(255,255,255,.35);\n}\n\n.reactio-uiux-problems__diagnosis h3{\n  margin:0;\n\n  font-size:clamp(45px,5.5vw,90px);\n\n  line-height:.9;\n\n  letter-spacing:-.06em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n}\n\n.reactio-uiux-problems__diagnosis h3 strong{\n  color:transparent;\n\n  -webkit-text-stroke:1.5px #fff;\n}\n\n.reactio-uiux-problems__diagnosis-right p{\n  max-width:620px;\n\n  margin:0 0 17px;\n\n  font-size:15px;\n\n  line-height:1.75;\n\n  color:rgba(255,255,255,.5);\n}\n\n.reactio-uiux-problems__diagnosis-right p:last-child{\n  margin-bottom:0;\n}\n\n\n\/* =====================================================\n   METRICS\n===================================================== *\/\n\n.reactio-uiux-problems__metrics{\n  display:grid;\n\n  grid-template-columns:repeat(4,1fr);\n\n  margin-top:70px;\n\n  border-top:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n}\n\n.reactio-uiux-problems__metric{\n  min-height:180px;\n\n  padding:25px;\n\n  border-right:1px solid rgba(255,255,255,.15);\n}\n\n.reactio-uiux-problems__metric:last-child{\n  border-right:0;\n}\n\n.reactio-uiux-problems__metric span{\n  display:block;\n\n  margin-bottom:42px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  color:rgba(255,255,255,.3);\n}\n\n.reactio-uiux-problems__metric strong{\n  display:block;\n\n  margin-bottom:9px;\n\n  font-size:18px;\n\n  letter-spacing:-.02em;\n\n  font-weight:950;\n\n  color:#fff;\n}\n\n.reactio-uiux-problems__metric p{\n  margin:0;\n\n  font-size:12px;\n\n  line-height:1.6;\n\n  color:rgba(255,255,255,.45);\n}\n\n\n\/* =====================================================\n   STATEMENT\n===================================================== *\/\n\n.reactio-uiux-problems__statement{\n  margin-top:100px;\n\n  padding:70px 0;\n\n  border-top:1px solid rgba(255,255,255,.15);\n  border-bottom:1px solid rgba(255,255,255,.15);\n}\n\n.reactio-uiux-problems__statement > span{\n  display:block;\n\n  margin-bottom:25px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.8px;\n\n  color:rgba(255,255,255,.35);\n}\n\n.reactio-uiux-problems__statement h3{\n  max-width:1350px;\n\n  margin:0;\n\n  font-size:clamp(42px,5.5vw,90px);\n\n  line-height:.92;\n\n  letter-spacing:-.06em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#fff !important;\n}\n\n.reactio-uiux-problems__statement h3 strong{\n  color:transparent;\n\n  -webkit-text-stroke:1.5px #fff;\n}\n\n.reactio-uiux-problems__statement p{\n  max-width:720px;\n\n  margin:35px 0 0;\n\n  font-size:15px;\n\n  line-height:1.75;\n\n  color:rgba(255,255,255,.5);\n}\n\n\n\/* =====================================================\n   BOTTOM\n===================================================== *\/\n\n.reactio-uiux-problems__bottom{\n  margin-top:70px;\n\n  display:grid;\n\n  grid-template-columns:.35fr 1.65fr;\n\n  gap:60px;\n}\n\n.reactio-uiux-problems__bottom span{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.7px;\n\n  color:rgba(255,255,255,.35);\n}\n\n.reactio-uiux-problems__bottom strong{\n  font-size:clamp(21px,2.5vw,40px);\n\n  line-height:1.1;\n\n  letter-spacing:-.04em;\n\n  font-weight:950;\n\n  color:#fff;\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1100px){\n\n  .reactio-uiux-problems__container{\n    padding:100px 30px 105px;\n  }\n\n  .reactio-uiux-problems__grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .reactio-uiux-problems__item{\n    border-right:1px solid rgba(255,255,255,.15) !important;\n    border-bottom:1px solid rgba(255,255,255,.15) !important;\n  }\n\n  .reactio-uiux-problems__item:nth-child(2n){\n    border-right:0 !important;\n  }\n\n  .reactio-uiux-problems__item:nth-child(5),\n  .reactio-uiux-problems__item:nth-child(6){\n    border-bottom:0 !important;\n  }\n\n  .reactio-uiux-problems__diagnosis{\n    grid-template-columns:1fr;\n\n    gap:45px;\n  }\n\n  .reactio-uiux-problems__metrics{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .reactio-uiux-problems__metric:nth-child(2n){\n    border-right:0;\n  }\n\n  .reactio-uiux-problems__metric:nth-child(1),\n  .reactio-uiux-problems__metric:nth-child(2){\n    border-bottom:1px solid rgba(255,255,255,.15);\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:767px){\n\n  .reactio-uiux-problems__container{\n    padding:80px 20px 85px;\n  }\n\n  .reactio-uiux-problems__header{\n    margin-bottom:55px;\n  }\n\n  .reactio-uiux-problems__header h2{\n    font-size:clamp(43px,12vw,62px);\n\n    line-height:.87;\n  }\n\n  .reactio-uiux-problems__header h2 span{\n    -webkit-text-stroke:1px #fff;\n  }\n\n  .reactio-uiux-problems__header > p{\n    margin-top:28px;\n\n    font-size:15px;\n\n    line-height:1.6;\n  }\n\n  .reactio-uiux-problems__grid{\n    grid-template-columns:1fr;\n  }\n\n  .reactio-uiux-problems__item{\n    min-height:285px;\n\n    padding:25px 5px;\n\n    border-right:0 !important;\n\n    border-bottom:1px solid rgba(255,255,255,.15) !important;\n  }\n\n  .reactio-uiux-problems__item:last-child{\n    border-bottom:0 !important;\n  }\n\n  .reactio-uiux-problems__content{\n    margin-top:55px;\n  }\n\n  .reactio-uiux-problems__item h3{\n    font-size:39px;\n  }\n\n  .reactio-uiux-problems__item p{\n    font-size:14px;\n  }\n\n  .reactio-uiux-problems__diagnosis{\n    margin-top:70px;\n\n    padding:50px 0;\n\n    grid-template-columns:1fr;\n\n    gap:40px;\n  }\n\n  .reactio-uiux-problems__diagnosis h3{\n    font-size:clamp(38px,11vw,53px);\n  }\n\n  .reactio-uiux-problems__diagnosis h3 strong{\n    -webkit-text-stroke:1px #fff;\n  }\n\n  .reactio-uiux-problems__diagnosis-right p{\n    font-size:14px;\n  }\n\n  .reactio-uiux-problems__metrics{\n    grid-template-columns:1fr;\n\n    margin-top:55px;\n  }\n\n  .reactio-uiux-problems__metric{\n    min-height:auto;\n\n    padding:25px 5px;\n\n    border-right:0 !important;\n\n    border-bottom:1px solid rgba(255,255,255,.15) !important;\n  }\n\n  .reactio-uiux-problems__metric:last-child{\n    border-bottom:0 !important;\n  }\n\n  .reactio-uiux-problems__metric span{\n    margin-bottom:25px;\n  }\n\n  .reactio-uiux-problems__statement{\n    margin-top:70px;\n\n    padding:50px 0;\n  }\n\n  .reactio-uiux-problems__statement h3{\n    font-size:clamp(36px,10vw,50px);\n\n    line-height:.95;\n  }\n\n  .reactio-uiux-problems__statement h3 strong{\n    -webkit-text-stroke:1px #fff;\n  }\n\n  .reactio-uiux-problems__statement p{\n    margin-top:28px;\n\n    font-size:14px;\n  }\n\n  .reactio-uiux-problems__bottom{\n    margin-top:55px;\n\n    grid-template-columns:1fr;\n\n    gap:22px;\n  }\n\n  .reactio-uiux-problems__bottom strong{\n    font-size:23px;\n\n    line-height:1.2;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e257394 elementor-section-height-min-height cs-section-content-fullwidth cs_scroll_y_120 cs-parallax-on-scroll elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"e257394\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" data-cs-parallax-y=\"120\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-414d8ce dark-color\" data-id=\"414d8ce\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3e18b9c elementor-widget elementor-widget-html\" data-id=\"3e18b9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"reactio-uiux-faq\">\n\n  <div class=\"reactio-uiux-faq__container\">\n\n    <!-- HEADER -->\n    <div class=\"reactio-uiux-faq__header\">\n\n      <span class=\"reactio-uiux-faq__eyebrow\">\n        UI \/ UX FAQ\n      <\/span>\n\n      <h2>\n        FLOW.<br>\n        INTERFACE.<br>\n        <span>ANSWERS.<\/span>\n      <\/h2>\n\n      <p>\n        UI \/ UX tasar\u0131m\u0131, wireframe, Figma, prototip,\n        mevcut web sitesi redesign s\u00fcre\u00e7leri, mobil deneyim\n        ve tasar\u0131m teslimleri hakk\u0131nda s\u0131k sorulan sorular\u0131 yan\u0131tl\u0131yoruz.\n      <\/p>\n\n    <\/div>\n\n\n    <!-- FAQ LIST -->\n    <div class=\"reactio-uiux-faq__list\">\n\n\n      <!-- 01 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">01<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            UI ve UX aras\u0131ndaki fark nedir?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              UX, yani User Experience, kullan\u0131c\u0131n\u0131n bir web sitesi,\n              uygulama veya dijital \u00fcr\u00fcn i\u00e7erisindeki genel deneyimini\n              ve kullan\u0131m yolculu\u011funu ifade eder.\n            <\/p>\n\n            <p>\n              UI ise User Interface yani kullan\u0131c\u0131 aray\u00fcz\u00fcd\u00fcr.\n              Renkler, tipografi, butonlar, kartlar, formlar ve\n              ekranlar\u0131n g\u00f6rsel yap\u0131s\u0131 UI tasar\u0131m\u0131n\u0131n par\u00e7as\u0131d\u0131r.\n            <\/p>\n\n            <p>\n              \u0130yi bir dijital \u00fcr\u00fcnde UI ve UX birbirini destekleyen\n              iki ayr\u0131 ancak ba\u011flant\u0131l\u0131 tasar\u0131m alan\u0131d\u0131r.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 02 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">02<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            UI \/ UX tasar\u0131mlar\u0131n\u0131 hangi programda haz\u0131rl\u0131yorsunuz?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              UI \/ UX \u00e7al\u0131\u015fmalar\u0131nda proje ihtiyac\u0131na g\u00f6re Figma\n              gibi modern aray\u00fcz tasar\u0131m ve prototipleme ara\u00e7lar\u0131\n              kullan\u0131labilir.\n            <\/p>\n\n            <p>\n              Tasar\u0131m dosyalar\u0131n\u0131n geli\u015ftirici ekiple payla\u015f\u0131labilir,\n              bile\u015fen yap\u0131s\u0131 ve ekran ak\u0131\u015f\u0131 a\u00e7\u0131s\u0131ndan d\u00fczenli bir\n              \u015fekilde haz\u0131rlanmas\u0131na \u00f6nem veriyoruz.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 03 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">03<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            Wireframe nedir?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Wireframe, bir ekran\u0131n g\u00f6rsel tasar\u0131ma ge\u00e7ilmeden\n              \u00f6nce olu\u015fturulan yap\u0131sal tasla\u011f\u0131d\u0131r.\n            <\/p>\n\n            <p>\n              \u0130\u00e7erik s\u0131ralamas\u0131, butonlar, formlar, b\u00f6l\u00fcmler\n              ve temel kullan\u0131c\u0131 ak\u0131\u015f\u0131 bu a\u015famada planlan\u0131r.\n              B\u00f6ylece g\u00f6rsel tasar\u0131mdan \u00f6nce ekran\u0131n i\u015flevsel\n              yap\u0131s\u0131 netle\u015ftirilir.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 04 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">04<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            Prototype nedir?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Prototype, tasarlanan ekranlar aras\u0131ndaki ge\u00e7i\u015fleri\n              ve temel kullan\u0131c\u0131 etkile\u015fimlerini sim\u00fcle eden\n              etkile\u015fimli bir tasar\u0131m modelidir.\n            <\/p>\n\n            <p>\n              \u00dcr\u00fcn geli\u015ftirilmeden \u00f6nce kullan\u0131c\u0131 yolculu\u011funu,\n              ekran ge\u00e7i\u015flerini ve temel deneyimi de\u011ferlendirmek\n              i\u00e7in kullan\u0131labilir.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 05 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">05<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            Mevcut web sitem i\u00e7in UI \/ UX redesign yapabilir misiniz?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Evet. Mevcut web sitesinin navigasyonu, i\u00e7erik\n              hiyerar\u015fisi, kullan\u0131c\u0131 ak\u0131\u015f\u0131, mobil deneyimi,\n              aray\u00fcz yap\u0131s\u0131 ve d\u00f6n\u00fc\u015f\u00fcm alanlar\u0131 incelenebilir.\n            <\/p>\n\n            <p>\n              Ard\u0131ndan mevcut marka kimli\u011fi korunarak veya yeni\n              bir g\u00f6rsel y\u00f6n olu\u015fturularak aray\u00fcz ve kullan\u0131c\u0131\n              deneyimi yeniden tasarlanabilir.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 06 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">06<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            Mobil uygulama UI \/ UX tasar\u0131m\u0131 yap\u0131yor musunuz?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Evet. Mobil uygulamalarda ekran ak\u0131\u015flar\u0131,\n              navigasyon, onboarding, kullan\u0131c\u0131 aksiyonlar\u0131\n              ve aray\u00fcz tasar\u0131m\u0131 proje ihtiya\u00e7lar\u0131na g\u00f6re\n              planlanabilir.\n            <\/p>\n\n            <p>\n              Mobil kullan\u0131m al\u0131\u015fkanl\u0131klar\u0131n\u0131 dikkate alarak\n              k\u00fc\u00e7\u00fck ekranlarda h\u0131zl\u0131 ve anla\u015f\u0131l\u0131r bir deneyim\n              olu\u015fturmaya odaklan\u0131yoruz.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 07 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">07<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            E-ticaret siteleri i\u00e7in UI \/ UX tasar\u0131m\u0131 yap\u0131yor musunuz?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Evet. E-ticaret projelerinde kategori yap\u0131s\u0131,\n              \u00fcr\u00fcn listeleme, filtreleme, \u00fcr\u00fcn detay sayfas\u0131,\n              sepete ekleme, sepet ve checkout deneyimi\n              birlikte de\u011ferlendirilebilir.\n            <\/p>\n\n            <p>\n              Shopify ve WooCommerce projelerinde kullan\u0131c\u0131\n              deneyimini sat\u0131\u015f ve d\u00f6n\u00fc\u015f\u00fcm hedefleriyle birlikte\n              ele al\u0131yoruz.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 08 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">08<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            UI \/ UX tasar\u0131m\u0131ndan sonra geli\u015ftirme hizmeti de veriyor musunuz?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Evet. Projenin kapsam\u0131na g\u00f6re UI \/ UX tasar\u0131m\u0131n\u0131n\n              ard\u0131ndan web geli\u015ftirme veya \u00f6zel yaz\u0131l\u0131m s\u00fcreci\n              de birlikte planlanabilir.\n            <\/p>\n\n            <p>\n              Tasar\u0131m ve geli\u015ftirme s\u00fcre\u00e7lerinin ayn\u0131 yap\u0131 i\u00e7erisinde\n              ilerlemesi, tasar\u0131m kararlar\u0131n\u0131n uygulama a\u015famas\u0131na daha\n              kontroll\u00fc aktar\u0131lmas\u0131n\u0131 sa\u011flar.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 09 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">09<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            UI \/ UX tasar\u0131m projesi ne kadar s\u00fcrer?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Proje s\u00fcresi ekran say\u0131s\u0131, \u00fcr\u00fcn karma\u015f\u0131kl\u0131\u011f\u0131,\n              kullan\u0131c\u0131 ak\u0131\u015flar\u0131, ara\u015ft\u0131rma ihtiyac\u0131 ve\n              revizyon kapsam\u0131na g\u00f6re de\u011fi\u015fir.\n            <\/p>\n\n            <p>\n              Basit bir landing page ile kapsaml\u0131 bir web\n              uygulamas\u0131n\u0131n UI \/ UX s\u00fcreci ayn\u0131 olmayaca\u011f\u0131 i\u00e7in\n              takvimi proje ba\u015flang\u0131c\u0131nda kapsam \u00fczerinden belirliyoruz.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- 10 -->\n      <div class=\"reactio-uiux-faq__item\">\n\n        <button class=\"reactio-uiux-faq__question\"\n                type=\"button\"\n                aria-expanded=\"false\">\n\n          <span class=\"reactio-uiux-faq__number\">10<\/span>\n\n          <span class=\"reactio-uiux-faq__title\">\n            UI \/ UX projesi sonunda hangi dosyalar teslim edilir?\n          <\/span>\n\n          <span class=\"reactio-uiux-faq__icon\">+<\/span>\n\n        <\/button>\n\n        <div class=\"reactio-uiux-faq__answer\">\n\n          <div class=\"reactio-uiux-faq__answer-inner\">\n\n            <p>\n              Proje kapsam\u0131na g\u00f6re kullan\u0131c\u0131 ak\u0131\u015flar\u0131, wireframe'ler,\n              final aray\u00fcz ekranlar\u0131, responsive varyasyonlar,\n              tasar\u0131m bile\u015fenleri ve prototip teslim edilebilir.\n            <\/p>\n\n            <p>\n              Tasar\u0131m sistemi olu\u015fturulan projelerde renk, tipografi,\n              spacing ve tekrar kullan\u0131labilir UI bile\u015fenleri de\n              dosya yap\u0131s\u0131na dahil edilir.\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <!-- FINAL CTA -->\n    <div class=\"reactio-uiux-faq__final\">\n\n      <span>\n        DESIGN THE EXPERIENCE BEFORE THE SCREEN\n      <\/span>\n\n      <h3>\n        G\u00dcZEL G\u00d6R\u00dcNS\u00dcN.<br>\n        KOLAY KULLANILSIN.<br>\n        <strong>DO\u011eRU \u00c7ALI\u015eSIN.<\/strong>\n      <\/h3>\n\n      <p>\n        Web sitesi, e-ticaret veya dijital \u00fcr\u00fcn\u00fcn\u00fcz i\u00e7in\n        kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131, aray\u00fcz\u00fc ve deneyimi birlikte\n        planlayal\u0131m; kullan\u0131c\u0131lar\u0131n ne yapaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fc\n        de\u011fil, bildi\u011fi bir sistem tasarlayal\u0131m.\n      <\/p>\n\n      <a href=\"https:\/\/reactio.com.tr\/iletisim\/\"\n         class=\"reactio-uiux-faq__button\">\n\n        <span>PROJEN\u0130 KONU\u015eALIM<\/span>\n        <b>\u2197<\/b>\n\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =====================================================\n   SECTION\n===================================================== *\/\n\n.reactio-uiux-faq{\n  width:100%;\n  overflow:hidden;\n\n  background:#f3f0e9;\n  color:#080808;\n\n  font-family:Arial, Helvetica, sans-serif;\n}\n\n.reactio-uiux-faq *{\n  box-sizing:border-box;\n}\n\n\n\/* =====================================================\n   CONTAINER\n===================================================== *\/\n\n.reactio-uiux-faq__container{\n  width:100%;\n  max-width:1600px;\n\n  margin:0 auto;\n\n  padding:120px 50px;\n}\n\n\n\/* =====================================================\n   HEADER\n===================================================== *\/\n\n.reactio-uiux-faq__header{\n  margin-bottom:80px;\n}\n\n.reactio-uiux-faq__eyebrow{\n  display:block;\n\n  margin-bottom:24px;\n\n  font-size:9px;\n  font-weight:900;\n\n  letter-spacing:2.2px;\n\n  color:rgba(8,8,8,.38);\n}\n\n.reactio-uiux-faq__header h2{\n  margin:0;\n\n  max-width:1200px;\n\n  font-size:clamp(60px,7vw,125px);\n\n  line-height:.84;\n\n  letter-spacing:-.065em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n}\n\n.reactio-uiux-faq__header h2 span{\n  color:transparent !important;\n\n  -webkit-text-stroke:1.5px #080808;\n}\n\n.reactio-uiux-faq__header > p{\n  max-width:700px;\n\n  margin:40px 0 0;\n\n  font-size:17px;\n\n  line-height:1.7;\n\n  color:rgba(8,8,8,.58);\n}\n\n\n\/* =====================================================\n   LIST\n===================================================== *\/\n\n.reactio-uiux-faq__list{\n  border-top:1px solid rgba(8,8,8,.16);\n}\n\n.reactio-uiux-faq__item{\n  border-bottom:1px solid rgba(8,8,8,.16);\n}\n\n\n\/* =====================================================\n   QUESTION\n===================================================== *\/\n\n.reactio-uiux-faq__question{\n  width:100%;\n\n  padding:27px 0;\n\n  display:grid;\n\n  grid-template-columns:70px 1fr 50px;\n\n  align-items:center;\n\n  gap:20px;\n\n  border:0;\n  outline:0;\n\n  background:transparent;\n\n  cursor:pointer;\n\n  text-align:left;\n\n  font-family:inherit;\n\n  color:#080808;\n}\n\n.reactio-uiux-faq__number{\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1px;\n\n  color:rgba(8,8,8,.35);\n}\n\n.reactio-uiux-faq__title{\n  font-size:clamp(19px,2vw,30px);\n\n  line-height:1.15;\n\n  letter-spacing:-.03em;\n\n  font-weight:850;\n\n  color:#080808;\n}\n\n.reactio-uiux-faq__icon{\n  width:40px;\n  height:40px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  justify-self:end;\n\n  border:1px solid rgba(8,8,8,.18);\n\n  border-radius:50%;\n\n  font-size:21px;\n\n  font-weight:300;\n\n  color:#080808;\n\n  transition:\n    transform .35s ease,\n    background .35s ease,\n    color .35s ease;\n}\n\n\n\/* =====================================================\n   ANSWER\n===================================================== *\/\n\n.reactio-uiux-faq__answer{\n  max-height:0;\n\n  overflow:hidden;\n\n  transition:max-height .45s ease;\n}\n\n.reactio-uiux-faq__answer-inner{\n  max-width:850px;\n\n  margin-left:70px;\n\n  padding:0 0 32px;\n}\n\n.reactio-uiux-faq__answer p{\n  margin:0 0 13px;\n\n  font-size:15px;\n\n  line-height:1.75;\n\n  color:rgba(8,8,8,.58);\n}\n\n.reactio-uiux-faq__answer p:last-child{\n  margin-bottom:0;\n}\n\n\n\/* =====================================================\n   ACTIVE\n===================================================== *\/\n\n.reactio-uiux-faq__item.active\n.reactio-uiux-faq__icon{\n  transform:rotate(45deg);\n\n  background:#080808;\n\n  color:#fff;\n}\n\n.reactio-uiux-faq__item.active\n.reactio-uiux-faq__title{\n  font-weight:950;\n}\n\n.reactio-uiux-faq__question:hover\n.reactio-uiux-faq__icon{\n  background:#080808;\n\n  color:#fff;\n}\n\n\n\/* =====================================================\n   FINAL CTA\n===================================================== *\/\n\n.reactio-uiux-faq__final{\n  margin-top:110px;\n\n  padding:75px 0 10px;\n\n  border-top:1px solid rgba(8,8,8,.16);\n}\n\n.reactio-uiux-faq__final > span{\n  display:block;\n\n  margin-bottom:25px;\n\n  font-size:8px;\n\n  font-weight:900;\n\n  letter-spacing:1.8px;\n\n  color:rgba(8,8,8,.35);\n}\n\n.reactio-uiux-faq__final h3{\n  max-width:1300px;\n\n  margin:0;\n\n  font-size:clamp(44px,6vw,95px);\n\n  line-height:.9;\n\n  letter-spacing:-.06em;\n\n  font-weight:950;\n\n  text-transform:uppercase;\n\n  color:#080808 !important;\n}\n\n.reactio-uiux-faq__final h3 strong{\n  color:transparent;\n\n  -webkit-text-stroke:1.5px #080808;\n}\n\n.reactio-uiux-faq__final p{\n  max-width:650px;\n\n  margin:35px 0 30px;\n\n  font-size:15px;\n\n  line-height:1.7;\n\n  color:rgba(8,8,8,.56);\n}\n\n\n\/* =====================================================\n   BUTTON\n===================================================== *\/\n\n.reactio-uiux-faq__button{\n  width:245px;\n  height:60px;\n\n  padding:0 23px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:space-between;\n\n  gap:25px;\n\n  border-radius:100px;\n\n  background:#080808;\n\n  color:#fff !important;\n\n  text-decoration:none !important;\n\n  font-size:9px;\n\n  font-weight:900;\n\n  letter-spacing:1px;\n\n  transition:transform .35s ease;\n}\n\n.reactio-uiux-faq__button b{\n  font-size:19px;\n\n  font-weight:400;\n\n  transition:transform .35s ease;\n}\n\n.reactio-uiux-faq__button:hover{\n  transform:translateY(-3px);\n}\n\n.reactio-uiux-faq__button:hover b{\n  transform:translate(3px,-3px);\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1100px){\n\n  .reactio-uiux-faq__container{\n    padding:100px 30px;\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:767px){\n\n  .reactio-uiux-faq__container{\n    padding:80px 20px 85px;\n  }\n\n  .reactio-uiux-faq__header{\n    margin-bottom:55px;\n  }\n\n  .reactio-uiux-faq__header h2{\n    font-size:clamp(43px,12vw,62px);\n\n    line-height:.87;\n  }\n\n  .reactio-uiux-faq__header h2 span{\n    -webkit-text-stroke:1px #080808;\n  }\n\n  .reactio-uiux-faq__header > p{\n    margin-top:28px;\n\n    font-size:15px;\n\n    line-height:1.6;\n  }\n\n  .reactio-uiux-faq__question{\n    grid-template-columns:35px 1fr 38px;\n\n    gap:12px;\n\n    padding:22px 0;\n  }\n\n  .reactio-uiux-faq__title{\n    font-size:18px;\n\n    line-height:1.25;\n  }\n\n  .reactio-uiux-faq__icon{\n    width:34px;\n    height:34px;\n\n    font-size:18px;\n  }\n\n  .reactio-uiux-faq__answer-inner{\n    margin-left:47px;\n\n    padding-bottom:25px;\n  }\n\n  .reactio-uiux-faq__answer p{\n    font-size:14px;\n\n    line-height:1.7;\n  }\n\n  .reactio-uiux-faq__final{\n    margin-top:75px;\n\n    padding-top:55px;\n  }\n\n  .reactio-uiux-faq__final h3{\n    font-size:clamp(38px,10.5vw,52px);\n\n    line-height:.94;\n  }\n\n  .reactio-uiux-faq__final h3 strong{\n    -webkit-text-stroke:1px #080808;\n  }\n\n  .reactio-uiux-faq__final p{\n    font-size:14px;\n  }\n\n  .reactio-uiux-faq__button{\n    width:100%;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n\n  const uiuxFaqItems =\n    document.querySelectorAll(\".reactio-uiux-faq__item\");\n\n  uiuxFaqItems.forEach(function(item){\n\n    const question =\n      item.querySelector(\".reactio-uiux-faq__question\");\n\n    const answer =\n      item.querySelector(\".reactio-uiux-faq__answer\");\n\n    question.addEventListener(\"click\", function(){\n\n      const isOpen =\n        item.classList.contains(\"active\");\n\n\n      uiuxFaqItems.forEach(function(otherItem){\n\n        const otherQuestion =\n          otherItem.querySelector(\".reactio-uiux-faq__question\");\n\n        const otherAnswer =\n          otherItem.querySelector(\".reactio-uiux-faq__answer\");\n\n        otherItem.classList.remove(\"active\");\n\n        otherQuestion.setAttribute(\n          \"aria-expanded\",\n          \"false\"\n        );\n\n        otherAnswer.style.maxHeight = null;\n\n      });\n\n\n      if(!isOpen){\n\n        item.classList.add(\"active\");\n\n        question.setAttribute(\n          \"aria-expanded\",\n          \"true\"\n        );\n\n        answer.style.maxHeight =\n          answer.scrollHeight + \"px\";\n\n      }\n\n    });\n\n  });\n\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UI \/ UX DESIGN HUMAN-CENTERED DIGITAL EXPERIENCE DESIGN THE INTERFACE. SHAPE THE EXPERIENCE. MAKE IT INTUITIVE. UI \/ UX tasar\u0131m\u0131n\u0131 yaln\u0131zca g\u00fczel g\u00f6r\u00fcnen ekranlar olu\u015fturmak olarak g\u00f6rm\u00fcyoruz. Kullan\u0131c\u0131 davran\u0131\u015f\u0131, bilgi mimarisi, etkile\u015fimler, mobil deneyim ve d\u00f6n\u00fc\u015f\u00fcm hedeflerini birlikte de\u011ferlendirerek anla\u015f\u0131l\u0131r, tutarl\u0131 ve sezgisel dijital deneyimler tasarl\u0131yoruz. USER FLOW WIREFRAME UI DESIGN MOBILE UX PROTOTYPE DESIGN &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"cozystay_single_page_hide_site_header":"","cozystay_single_page_site_header_source":"","cozystay_single_page_custom_site_header":"","cozystay_single_page_custom_sticky_site_header":"","cozystay_single_page_hide_page_title":"on","cozystay_single_page_header_section_size":"","cozystay_single_page_header_background_color":"","cozystay_single_page_header_background_position_x":"center","cozystay_single_page_header_background_position_y":"center","cozystay_single_page_header_background_size":"cover","cozystay_single_page_header_background_repeat":"off","cozystay_single_page_header_background_scroll":"on","cozystay_single_page_header_text_color":"","cozystay_single_page_header_show_breadcrumb":"","cozystay_single_page_site_footer_hide_main":"","cozystay_single_custom_site_footer_main_source":"","cozystay_single_custom_site_footer_main":"","cozystay_single_page_site_footer_hide_above":"","cozystay_single_custom_site_footer_above_source":"","cozystay_single_custom_site_footer_above":"","cozystay_single_page_site_footer_hide_instagram":"","cozystay_single_page_site_footer_hide_bottom":"","cozystay_single_custom_mobile_menu_source":"","cozystay_single_custom_mobile_menu":"","cozystay_single_custom_mobile_menu_animation":"","cozystay_single_custom_mobile_menu_width":"","cozystay_single_custom_mobile_menu_custom_width":375,"footnotes":""},"class_list":["post-2503","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>UI UX Tasar\u0131m | Kullan\u0131c\u0131 Deneyimi Tasar\u0131m\u0131 | Reactio<\/title>\n<meta name=\"description\" content=\"Web sitesi ve dijital \u00fcr\u00fcnler i\u00e7in kullan\u0131c\u0131 ara\u015ft\u0131rmas\u0131, aray\u00fcz tasar\u0131m\u0131 ve kullan\u0131labilirlik odakl\u0131 profesyonel UI UX tasar\u0131m hizmetleri sunuyoruz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/testet.biz\/reactio\/ui-ux\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI UX Tasar\u0131m | Kullan\u0131c\u0131 Deneyimi Tasar\u0131m\u0131 | Reactio\" \/>\n<meta property=\"og:description\" content=\"Web sitesi ve dijital \u00fcr\u00fcnler i\u00e7in kullan\u0131c\u0131 ara\u015ft\u0131rmas\u0131, aray\u00fcz tasar\u0131m\u0131 ve kullan\u0131labilirlik odakl\u0131 profesyonel UI UX tasar\u0131m hizmetleri sunuyoruz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/testet.biz\/reactio\/ui-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"REACTIO\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-19T14:22:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/ui-ux\\\/\",\"url\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/ui-ux\\\/\",\"name\":\"UI UX Tasar\u0131m | Kullan\u0131c\u0131 Deneyimi Tasar\u0131m\u0131 | Reactio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/#website\"},\"datePublished\":\"2026-08-19T13:23:52+00:00\",\"dateModified\":\"2026-08-19T14:22:28+00:00\",\"description\":\"Web sitesi ve dijital \u00fcr\u00fcnler i\u00e7in kullan\u0131c\u0131 ara\u015ft\u0131rmas\u0131, aray\u00fcz tasar\u0131m\u0131 ve kullan\u0131labilirlik odakl\u0131 profesyonel UI UX tasar\u0131m hizmetleri sunuyoruz.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/ui-ux\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/testet.biz\\\/reactio\\\/ui-ux\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/ui-ux\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI \\\/ UX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/#website\",\"url\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/\",\"name\":\"REACTIO\",\"description\":\"Digital Products. Real Growth.\",\"publisher\":{\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/#organization\",\"name\":\"REACTIO\",\"url\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/logo.png\",\"width\":230,\"height\":53,\"caption\":\"REACTIO\"},\"image\":{\"@id\":\"https:\\\/\\\/testet.biz\\\/reactio\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI UX Tasar\u0131m | Kullan\u0131c\u0131 Deneyimi Tasar\u0131m\u0131 | Reactio","description":"Web sitesi ve dijital \u00fcr\u00fcnler i\u00e7in kullan\u0131c\u0131 ara\u015ft\u0131rmas\u0131, aray\u00fcz tasar\u0131m\u0131 ve kullan\u0131labilirlik odakl\u0131 profesyonel UI UX tasar\u0131m hizmetleri sunuyoruz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/testet.biz\/reactio\/ui-ux\/","og_locale":"tr_TR","og_type":"article","og_title":"UI UX Tasar\u0131m | Kullan\u0131c\u0131 Deneyimi Tasar\u0131m\u0131 | Reactio","og_description":"Web sitesi ve dijital \u00fcr\u00fcnler i\u00e7in kullan\u0131c\u0131 ara\u015ft\u0131rmas\u0131, aray\u00fcz tasar\u0131m\u0131 ve kullan\u0131labilirlik odakl\u0131 profesyonel UI UX tasar\u0131m hizmetleri sunuyoruz.","og_url":"https:\/\/testet.biz\/reactio\/ui-ux\/","og_site_name":"REACTIO","article_modified_time":"2026-08-19T14:22:28+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tahmini okuma s\u00fcresi":"10 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/testet.biz\/reactio\/ui-ux\/","url":"https:\/\/testet.biz\/reactio\/ui-ux\/","name":"UI UX Tasar\u0131m | Kullan\u0131c\u0131 Deneyimi Tasar\u0131m\u0131 | Reactio","isPartOf":{"@id":"https:\/\/testet.biz\/reactio\/#website"},"datePublished":"2026-08-19T13:23:52+00:00","dateModified":"2026-08-19T14:22:28+00:00","description":"Web sitesi ve dijital \u00fcr\u00fcnler i\u00e7in kullan\u0131c\u0131 ara\u015ft\u0131rmas\u0131, aray\u00fcz tasar\u0131m\u0131 ve kullan\u0131labilirlik odakl\u0131 profesyonel UI UX tasar\u0131m hizmetleri sunuyoruz.","breadcrumb":{"@id":"https:\/\/testet.biz\/reactio\/ui-ux\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/testet.biz\/reactio\/ui-ux\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/testet.biz\/reactio\/ui-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/testet.biz\/reactio\/"},{"@type":"ListItem","position":2,"name":"UI \/ UX"}]},{"@type":"WebSite","@id":"https:\/\/testet.biz\/reactio\/#website","url":"https:\/\/testet.biz\/reactio\/","name":"REACTIO","description":"Digital Products. Real Growth.","publisher":{"@id":"https:\/\/testet.biz\/reactio\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/testet.biz\/reactio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/testet.biz\/reactio\/#organization","name":"REACTIO","url":"https:\/\/testet.biz\/reactio\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/testet.biz\/reactio\/#\/schema\/logo\/image\/","url":"https:\/\/testet.biz\/reactio\/wp-content\/uploads\/2026\/08\/logo.png","contentUrl":"https:\/\/testet.biz\/reactio\/wp-content\/uploads\/2026\/08\/logo.png","width":230,"height":53,"caption":"REACTIO"},"image":{"@id":"https:\/\/testet.biz\/reactio\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/pages\/2503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/comments?post=2503"}],"version-history":[{"count":5,"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/pages\/2503\/revisions"}],"predecessor-version":[{"id":2578,"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/pages\/2503\/revisions\/2578"}],"wp:attachment":[{"href":"https:\/\/testet.biz\/reactio\/wp-json\/wp\/v2\/media?parent=2503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}