Kod Tekrarını Azaltma ve Refactoring Planı
Kod Tekrarını Azaltma ve Refactoring Planı
Bu doküman, projedeki kod tekrarını azaltmak ve daha sürdürülebilir bir yapı kurmak için izlenecek adımları içerir.
Bölüm 1: HTML Yapısını İyileştirme (Layout & Includes)
_layouts/deafult.htmldosyasını sil: Bozuk olduğu için bu dosya kaldırılacak.- Yeni
_layouts/default.htmlana şablonunu oluştur:- Temel HTML iskeletini (
<html>,<head>) içermeli. <body>etiketi,<body id="" class="page ">yapısıyla hemidhem declassiçin dinamik olmalı.- `
Kod Tekrarını Azaltma ve Refactoring Planı function gtag() { dataLayer.push(arguments); } gtag(‘js’, new Date());
gtag(‘config’, ‘UA-122893453-1’); </script>
- Temel HTML iskeletini (
` çağrısını içermeli. - [ ] `<header> <div class="sign-logo-wrapper js-scene"> <p class="sign-logo layer" data-depth="0.4">
</p>
</div>
<!-- <div class="language-switch">
<a href="/blog/" class=" enl"></a>
<a href="/works/bugunneyesek/" class=" enl"></a>
<a href="/.htaccess" class=" enl"></a>
<a href="/works/hypadia-web/" class=" enl"></a>
<a href="/works/hypadiapp/" class=" enl"></a>
<a href="/" class=" enl"></a>
<a href="/works/mindturtle/" class=" enl"></a>
<a href="/process/" class=" enl"></a>
<a href="/sitemap.xml" class=" enl"></a>
<a href="/works/tdk/" class=" enl"></a>
<a href="/works/myuniqex/" class=" enl"></a>
<a href="/works/vampr/" class=" enl"></a>
<a href="/works/yooppi/" class=" enl"></a>
<a href="/assets/main.css" class=" enl"></a>
<a href="/docs/refactoring_plan/" class=" enl"></a>
<a href="/feed.xml" class=" enl"></a>
<a href="/about/" class="TR enl">TR</a>
<a href="/service/" class="TR enl">TR</a>
<a href="/works/" class="TR enl">TR</a>
</div> -->
<div id="nav-container">
<div class="toggle-icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<!-- /toggle-icon -->
</div>
<!-- /nav-container -->
<nav class="menu-wrapper">
<ul>
<li>
<a href="javascript:void(0);" id="headerToHome"><span class="menu-title">Anasayfa</span>
<span class="menu-subTitle">Anasayfaya dönmek isteyebilirsiniz.</span></a>
</li>
<li>
<a href="javascript:void(0);" id="headerToAbout"><span class="menu-title">Hakkımda</span>
<span class="menu-subTitle">Ben kimim? Ne yaparım?</span></a>
</li>
<li>
<a href="javascript:void(0);" id="headerToBlog"><span class="menu-title">Blog</span>
<span class="menu-subTitle">Yazdıklarımı okumak ister misiniz?</span></a>
</li>
<li>
<a href="mailto:[email protected]" id="headerToContact"><span class="menu-title">İletişim</span>
<span class="menu-subTitle">Mail göndermek için tıklayın!</span></a>
</li>
</ul>
</nav>
</header> ` çağrısını içermeli (Anasayfa hariç). - [ ] Sayfa içeriği için `BACK
Yooppi Web UI/UX Design Case Stuides
UI / UX DESIGN, UX RESEARCH, INFORMATION ARCHITECTURE, INTERACTION DESIGN, USABILITY TESTING, UI DEVELOPMENT
Yooppi, e-ticaret sektörüne farklı bir yaklaşım sergileyerek, kullanıcılarına her hafta farklı bir ürünü, kalite ve uygun fiyat ile sunmayı hedefliyor. Sektör büyüklerinin arasından sıyrılarak internet üzerinden alışveriş yapan kullanıcıların sürekli takip edebilecekleri ve her hafta güncellenecek ürünleri ile tedarikçiler için hem bir pazar yeri hem de kullanıcılar için yeni ürünleri uygun fiyatlara bulabilcekleri bir platform olarak konumlanmak istiyor.
Rakip Analizi
Yooppi kurucu ortakları ile yaptığımız ilk toplantının ardından projeleri ile ilgili gerekli olan tüm bilgiyi aldıktan sonra ilk olarak oturup kapsamlı bir rakip analizi yaptık. Amacımız, siteyi oluştururken nelere dikkat etmeliyiz ve neleri yapmamalıyızdı. Rakip analizi raporunu hazırlayıp üzerinden kapsamlı bir toplantı düzenledikten sonra kullanıcıları anlamak ve ihtiyaç ve sıkıntılarını daha iyi analiz edebilmek adına araştırmaya koyulduk.
DESIGN PROCESS
Kullanıcı araştırması & Personalar
Böyle bir e-ticaret sitesi için kullanıcı araştırmasının zorluklarını ve yapacağımız araştırmanın buna
değip değmeyeceğini tartıştıktan sonra, internet
ortamında yapılmış e-ticaret kullanıcı anketlerini incelemeye ve onlardan elde edeceğimiz bilgileri
kullanmaya karar verdik.
E-ticaret müşterilerinin sıkıntılarını, beklentilerini, problemlerini nasıl çözdüklerini anladığımızda
uygun personalarımızı oluşturmaya başladık.
Affinity Mapping
Bulduğumuz tüm bilgileri toplayarak mantıksal bir şekilde analiz edebilmek için bağıntı şeması yöntemini kullandık. Toplanan tüm verileri birbirleri ile ilişkilerine dayanan gruplara ve temalara ayırdık.
AFFINITY MAP
Kullanıcı Akışları & Site Haritası
Eksiklerimizin olmaması ve tüm potansiyel durumları gözden kaçırmamak için sayfaları çıkartırken tek bir şablonda kullanıcı akışlarını da çıkartmış olduk.
USER FLOW & SITEMAP
Wireframe
yooppi ortakları ile birlikte bir moodboard oluşturup nasıl bir tasarım trend’ine sahip olmak istediklerinden emin olmaya çalıştık. Kullanıcı akışları, site haritası ve tüm bulgular eşliğinde sitenin wireframe çalışmasına başladık.
WIREFRAME
Stil Şablonu
Tasarımda tutarlılık sağlamak adına, oluşturduğumuz wireframe çalışmalar üzerinden bir stil şablonu (Style Guide) yarattık.
STYLE GUIDE
Tasarım & Prototip
Tasarımı son haline getirdikten sonra sistemi test edebilmemiz için canlıdan ayırt edilmeyecek bir prototipe ihtiyacımız vardı. Bildiğimiz hiçbir prototip tool’u bunu karşılayamadığı için sistemi html’e dökmeye karar verdik. Sadece masaüstü görünümde çalışır hale getirdikten sonra testlerimize başlayabilirdik.
Yooppi tasarımını ve prototipini görmek için aşağıdaki butona tıklayın!