hicharge

<div data-tn...

<div data-tn...

<div data-tn style="display:none">Task Flow Analyse</div><style> *{margin:0;padding:0;box-sizing:border-box;}body{background:#150D0C;color:#F1EBC9;font-family:Trispace,sans-serif;}.hc-ux-container{padding:40px 32px;max-width:1200px;margin:0 auto;}.hc-ux-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;align-items:center;}.hc-ux-step{text-align:center;}.hc-ux-circle{width:80px;height:80px;background:#1C1C1C;border:2px solid #2A2020;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-weight:bold;font-size:32px;}.hc-ux-label{font-size:14px;line-height:1.4;}.hc-ux-arrow{display:flex;align-items:center;justify-content:center;color:rgba(241,235,201,0.55);font-size:24px;}.hc-ux-flow >:nth-child(even){margin-top:0;}h2{font-size:28px;margin-bottom:32px;font-weight:normal;}@media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style><div class="hc-ux-container"><h2>Task Flow Analyse</h2><div class="hc-ux-flow"><div class="hc-ux-step"><div class="hc-ux-circle">1</div><div class="hc-ux-label">Ladestation finden</div></div><div class="hc-ux-arrow">→</div><div class="hc-ux-step"><div class="hc-ux-circle">2</div><div class="hc-ux-label">Route planen</div></div><div class="hc-ux-arrow">→</div><div class="hc-ux-step"><div class="hc-ux-circle">3</div><div class="hc-ux-label">Laden starten</div></div><div class="hc-ux-arrow">→</div><div class="hc-ux-step"><div class="hc-ux-circle">4</div><div class="hc-ux-label">Ladevorgang überwachen</div></div><div class="hc-ux-arrow">→</div><div class="hc-ux-step"><div class="hc-ux-circle">5</div><div class="hc-ux-label">Bezahlung</div></div></div></div>

<style>...

<div data-tn style="display:none">Dark UI System</div><style> *{margin:0;padding:0;box-sizing:border-box;}body{background:#150D0C;color:#F1EBC9;font-family:Trispace,sans-serif;}.hc-vis-container{padding:40px 32px;max-width:1200px;margin:0 auto;}.hc-vis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:24px;}.hc-vis-card{background:#1C1C1C;border:1px solid #2A2020;padding:24px;}h2{font-size:28px;margin-bottom:32px;font-weight:normal;}h3{font-size:18px;margin-bottom:16px;font-weight:normal;}.hc-vis-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}.hc-vis-color{aspect-ratio:1;border-radius:4px;border:1px solid #2A2020;}.hc-vis-color-dark{background:#0A0A0A;}.hc-vis-color-blue{background:#00D4FF;}.hc-vis-color-accent{background:#FFB800;}.hc-vis-color-text{background:#F1EBC9;}.hc-vis-typo{margin-top:16px;}.hc-vis-sample{font-size:16px;line-height:1.6;margin:8px 0;}.hc-vis-components{margin-top:16px;}.hc-vis-component{display:inline-block;margin:8px 8px 8px 0;padding:8px 16px;border:1px solid #2A2020;background:#0A0A0A;font-size:12px;}.hc-vis-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;text-align:center;}.hc-vis-icon{width:48px;height:48px;background:#0A0A0A;border:1px solid #2A2020;border-radius:4px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:20px;}@media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style><div class="hc-vis-container"><h2>Dark UI System</h2><div class="hc-vis-grid"><div class="hc-vis-card"><h3>Color Palette</h3><div class="hc-vis-palette"><div class="hc-vis-color hc-vis-color-dark"></div><div class="hc-vis-color hc-vis-color-dark"></div><div class="hc-vis-color hc-vis-color-blue"></div><div class="hc-vis-color hc-vis-color-accent"></div></div><div style="font-size:12px;color:rgba(241,235,201,0.55);margin-top:12px;line-height:1.6;"> Dark Theme mit Electric Blue Akzenten. High Contrast für maximale Lesbarkeit. </div></div><div class="hc-vis-card"><h3>Typography</h3><div class="hc-vis-typo"><div class="hc-vis-sample" style="font-size:18px;">Heading 1</div><div class="hc-vis-sample" style="font-size:16px;">Heading 2</div><div class="hc-vis-sample" style="font-size:14px;">Body Text</div><div class="hc-vis-sample" style="font-size:12px;color:rgba(241,235,201,0.55);">Caption</div></div><div style="font-size:12px;color:rgba(241,235,201,0.55);margin-top:12px;"> Trispace für alle Text-Ebenen. Konsistente Linienhöhe. </div></div><div class="hc-vis-card"><h3>Component System</h3><div class="hc-vis-components"><div class="hc-vis-component">Primary Button</div><div class="hc-vis-component">Secondary Button</div><div class="hc-vis-component">Card</div><div class="hc-vis-component">Modal</div><div class="hc-vis-component">Input</div><div class="hc-vis-component">Select</div></div></div><div class="hc-vis-card"><h3>Iconografie</h3><div class="hc-vis-icons"><div><div class="hc-vis-icon">⚡</div><div style="font-size:10px;margin-top:4px;color:rgba(241,235,201,0.55);">Charging</div></div><div><div class="hc-vis-icon">📍</div><div style="font-size:10px;margin-top:4px;color:rgba(241,235,201,0.55);">Location</div></div><div><div class="hc-vis-icon">🔐</div><div style="font-size:10px;margin-top:4px;color:rgba(241,235,201,0.55);">Security</div></div><div><div class="hc-vis-icon">💳</div><div style="font-size:10px;margin-top:4px;color:rgba(241,235,201,0.55);">Payment</div></div></div></div></div></div>

<div data-tn style="display:none">Ergebnis</div><style> *{margin:0;padding:0;box-sizing:border-box;}body{background:#150D0C;color:#F1EBC9;font-family:Trispace,sans-serif;}.hc-faz-container{padding:40px 32px;max-width:1200px;margin:0 auto;}.hc-faz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:24px;}.hc-faz-metric{background:#1C1C1C;border:1px solid #2A2020;padding:24px;}.hc-faz-label{font-size:12px;color:rgba(241,235,201,0.55);text-transform:uppercase;letter-spacing:0px;margin-bottom:8px;}.hc-faz-value{font-size:24px;font-weight:normal;margin-bottom:16px;}.hc-faz-description{font-size:13px;color:rgba(241,235,201,0.55);line-height:1.5;}.hc-faz-insight{background:#1C1C1C;border:1px solid #2A2020;padding:24px;grid-column:1 / -1;}.hc-faz-insight h3{font-size:16px;margin-bottom:12px;font-weight:normal;}.hc-faz-insight p{font-size:14px;line-height:1.6;color:rgba(241,235,201,0.55);}h2{font-size:28px;margin-bottom:32px;font-weight:normal;}@media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style><div class="hc-faz-container"><h2>Ergebnis</h2><div class="hc-faz-grid"><div class="hc-faz-metric"><div class="hc-faz-label">E-Mobility App</div><div class="hc-faz-value">hicharge</div><div class="hc-faz-description">Umfassende UX/UI-Lösung für nachhaltiges Laden</div></div><div class="hc-faz-metric"><div class="hc-faz-label">Disziplinen</div><div class="hc-faz-value">3</div><div class="hc-faz-description">UX + Branding + Design</div></div><div class="hc-faz-metric"><div class="hc-faz-label">Zeitraum</div><div class="hc-faz-value">2022–23</div><div class="hc-faz-description">Bachelorarbeit Abschluss</div></div><div class="hc-faz-metric"><div class="hc-faz-label">Fokus</div><div class="hc-faz-value">A+</div><div class="hc-faz-description">Usability & Zuverlässigkeit</div></div><div class="hc-faz-insight"><h3>Fazit zur Bachelorarbeit</h3><p>Die hicharge-App demonstriert ein kohärentes Design-System mit durchdachten Task Flows,intuitiver Nutzerführung und dunkel-gehaltener Ästhetik. Durch die Integration von E-Mobility-Standards und modernem UX-Thinking entstand eine Lösung,die Ladestation-Nutzung vereinfacht. Die Arbeit schloss mit der Note 1,3 ab und bildet eine solide Grundlage für ein reales Produkt.</p></div></div></div>