UX / UI – Konzept & Entscheidungen
Die zentrale UX-Entscheidung war, Video als primäres Medium zu behandeln und alle anderen Inhalte konsequent darauf auszurichten. Navigation, Seitenaufbau und Interaktionslogik wurden so gestaltet, dass Besucher:innen ohne Umwege zu den Arbeiten gelangen und sich intuitiv durch das Portfolio bewegen können. Die Informationsarchitektur trennt klar zwischen Arbeit, Person und Kontakt und vermeidet unnötige Zwischenseiten.
<div data-tn style="display:none">Markenanalyse</div><style>
.ks-aus-container {
max-width: 100%;
padding: 2rem 1.5rem;
background-color: #FFFFFF;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1F2937;
}
.ks-aus-title {
font-size: 1.375rem;
font-weight: 600;
margin-bottom: 2rem;
line-height: 1.4;
}
.ks-aus-problems {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.ks-aus-card {
padding: 1.5rem;
background-color: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
.ks-aus-card:hover {
border-color: #D1D5DB;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ks-aus-card-label {
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.5rem;
color: #374151;
}
.ks-aus-card-text {
font-size: 0.95rem;
color: #6B7280;
line-height: 1.6;
}
.ks-aus-arrow {
display: flex;
justify-content: center;
margin: 1.5rem 0;
font-size: 1.5rem;
color: #9CA3AF;
}
.ks-aus-result {
padding: 1.5rem;
background: linear-gradient(135deg, #F3F4F6 0%, #F9FAFB 100%);
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
text-align: center;
}
.ks-aus-result-label {
font-size: 0.875rem;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.ks-aus-result-text {
font-size: 1.1rem;
font-weight: 600;
color: #374151;
line-height: 1.5;
}
@media (max-width: 640px) {
.ks-aus-container {
padding: 1.5rem 1rem;
}
.ks-aus-title {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.ks-aus-card {
padding: 1.25rem;
}
.ks-aus-result-text {
font-size: 1rem;
}
}
</style>
<div class="ks-aus-container">
<div class="ks-aus-title">Kevin Schmitz — Ausgangslage: Fragmentierte Präsenz</div>
<div class="ks-aus-problems">
<div class="ks-aus-card">
<div class="ks-aus-card-label">Inhaltlich fragmentiert</div>
<div class="ks-aus-card-text">Inhalte zu Person, Arbeit und Haltung ohne klare Hierarchie</div>
</div>
<div class="ks-aus-card">
<div class="ks-aus-card-label">Fehlende Nutzerführung</div>
<div class="ks-aus-card-text">Nicht ersichtlich was relevant ist, keine Priorisierung</div>
</div>
<div class="ks-aus-card">
<div class="ks-aus-card-label">Sammlung statt Präsentation</div>
<div class="ks-aus-card-text">Informationsseite statt gezielte Personal Brand</div>
</div>
</div>
<div class="ks-aus-arrow">↓</div>
<div class="ks-aus-result">
<div class="ks-aus-result-label">Resultat</div>
<div class="ks-aus-result-text">Video-first Portfolio mit klarer IA: Arbeit → Person → Kontakt</div>
</div>
</div>
<div data-tn style="display:none">Markenkonzept</div><style>
.ks-ux-container {
max-width: 100%;
padding: 2rem 1.5rem;
background-color: #FFFFFF;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #1F2937;
}
.ks-ux-title {
font-size: 1.375rem;
font-weight: 600;
margin-bottom: 2rem;
line-height: 1.4;
}
.ks-ux-ia-wrapper {
margin-bottom: 2.5rem;
}
.ks-ux-ia-container {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.ks-ux-block {
flex-shrink: 0;
padding: 1.5rem;
background-color: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ks-ux-block:hover {
border-color: #D1D5DB;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.ks-ux-block-title {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.ks-ux-block-item {
font-size: 0.95rem;
color: #6B7280;
line-height: 1.5;
padding-left: 1rem;
position: relative;
}
.ks-ux-block-item::before {
content: '•';
position: absolute;
left: 0;
color: #D1D5DB;
}
.ks-ux-block.ks-ux-arbeit {
min-width: 280px;
border-top: 3px solid #3B82F6;
}
.ks-ux-block.ks-ux-arbeit .ks-ux-block-title {
color: #3B82F6;
}
.ks-ux-block.ks-ux-person {
min-width: 260px;
border-top: 3px solid #8B5CF6;
}
.ks-ux-block.ks-ux-person .ks-ux-block-title {
color: #8B5CF6;
}
.ks-ux-block.ks-ux-kontakt {
min-width: 200px;
border-top: 3px solid #10B981;
}
.ks-ux-block.ks-ux-kontakt .ks-ux-block-title {
color: #10B981;
}
.ks-ux-insight {
padding: 1.5rem;
background: linear-gradient(135deg, #F0F9FF 0%, #F0FDF4 100%);
border: 1px solid #E5E7EB;
border-radius: 0.5rem;
border-left: 4px solid #3B82F6;
}
.ks-ux-insight-label {
font-size: 0.875rem;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.ks-ux-insight-text {
font-size: 1rem;
color: #374151;
line-height: 1.6;
font-weight: 500;
}
@media (max-width: 768px) {
.ks-ux-container {
padding: 1.5rem 1rem;
}
.ks-ux-title {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.ks-ux-ia-container {
flex-direction: column;
gap: 1rem;
}
.ks-ux-block {
min-width: 100% !important;
width: 100%;
}
}
</style>
<div class="ks-ux-container">
<div class="ks-ux-title">Kevin Schmitz — UX: Video-First Informationsarchitektur</div>
<div class="ks-ux-ia-wrapper">
<div class="ks-ux-ia-container">
<div class="ks-ux-block ks-ux-arbeit">
<div class="ks-ux-block-title">Arbeit</div>
<div class="ks-ux-block-item">Video als primäres Medium</div>
<div class="ks-ux-block-item">Ohne Umwege zu den Arbeiten</div>
<div class="ks-ux-block-item">Intuitives Portfolio-Browsing</div>
</div>
<div class="ks-ux-block ks-ux-person">
<div class="ks-ux-block-title">Person</div>
<div class="ks-ux-block-item">Haltung & Hintergrund</div>
<div class="ks-ux-block-item">Untergeordnet, aber zugänglich</div>
</div>
<div class="ks-ux-block ks-ux-kontakt">
<div class="ks-ux-block-title">Kontakt</div>
<div class="ks-ux-block-item">Klare Handlungsaufforderung</div>
<div class="ks-ux-block-item">Direkte Erreichbarkeit</div>
</div>
</div>
</div>
<div class="ks-ux-insight">
<div class="ks-ux-insight-label">Insight</div>
<div class="ks-ux-insight-text">Navigation, Seitenaufbau und Interaktion konsequent auf Video ausgerichtet</div>
</div>
</div>
<div data-tn style="display:none">Brand Positioning</div><style>
.ks-mx{width:100%;background:#FFFFFF;padding:28px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.ks-mx-title{font-size:17px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center}
.ks-mx-sub{font-size:13px;color:#6B7280;margin:0 0 24px;text-align:center}
.ks-mx-chart{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1}
.ks-mx-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100%;border:1px solid #E5E7EB;border-radius:12px;overflow:hidden}
.ks-mx-q{padding:12px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:600;color:#6B7280;transition:background .2s}
.ks-mx-q:hover{background:rgba(0,0,0,0.03)}
.ks-mx-q:nth-child(1){background:#FEF2F2;color:#991B1B;border-right:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB}
.ks-mx-q:nth-child(2){background:#ECFDF5;color:#065F46;border-bottom:1px solid #E5E7EB}
.ks-mx-q:nth-child(3){background:#F9FAFB;color:#6B7280;border-right:1px solid #E5E7EB}
.ks-mx-q:nth-child(4){background:#FFFBEB;color:#92400E}
.ks-mx-axes{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:#9CA3AF;font-weight:600}
.ks-mx-yaxis{position:absolute;left:-8px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:#9CA3AF;font-weight:600;writing-mode:vertical-rl;transform:rotate(180deg);padding:12px 0}
</style>
<div class="ks-mx">
<p class="ks-mx-title">Markenpositionierung</p>
<p class="ks-mx-sub">Wettbewerbsanalyse im Fotografie-Markt</p>
<div style="position:relative;max-width:480px;margin:0 auto">
<div class="ks-mx-chart">
<div class="ks-mx-grid">
<div class="ks-mx-q">Premium Editorial<br><small>Hochpreisig, konzeptuell</small></div>
<div class="ks-mx-q">Luxury Commercial<br><small>Hochpreisig, kommerziell</small></div>
<div class="ks-mx-q">Independent Art<br><small>Budgetfreundlich, konzeptuell</small></div>
<div class="ks-mx-q">Volume Market<br><small>Budgetfreundlich, kommerziell</small></div>
</div>
</div>
<div class="ks-mx-axes"><span>← Konzeptuell</span><span>Kommerziell →</span></div>
</div>
</div>
