Podstawy Projektowania i User Experience (UX) 🎨
Zadanie 1: Architektura Informacji i Układ Sekcji 🏗️
Zaprojektuj układ strony głównej witryny dla fikcyjnej firmy zajmującej się produkcją **ekologicznych kosmetyków**. Strona powinna zawierać nagłówek, sekcję Hero, trzy sekcje z ofertą, opinie klientów, formularz kontaktowy i stopkę.
Wykonaj: Szkic typu **Wireframe** oraz krótki opis rozmieszczenia sekcji i ich hierarchii na stronie mobilnej i desktopowej.
Pokaż sugerowaną strukturę HTML
<body>
<header>...</header>
<main>
<section id="hero"></section>
<section id="oferta-1"></section>
<section id="opinie"></section>
<section id="kontakt"></section>
</main>
<footer>...</footer>
</body>
Zadanie 2: Tworzenie Briefu i Persony Użytkownika 🎯
Stwórz **brief** dla strony internetowej lokalnej kawiarni o nazwie **„Kawa z Pasją”**. Oprócz standardowych elementów, utwórz również **Personę Użytkownika**, aby lepiej określić grupę docelową.
Brief powinien zawierać: cel, Personę, kluczowe funkcje, styl graficzny i wymagania techniczne.
Pokaż Przykład struktury briefu (Markdown)
# Brief Witryny: Kawa z Pasją
## 1. Cel Strony
- Podstawowy: Zwiększenie rezerwacji stolików i zamówień na wynos.
- Poboczny: Budowanie wizerunku "przytulnej kawiarni".
## 2. Persona Użytkownika
- Imię: Anna
- Wiek: 32 lata
- Zawód: Freelancerka
- Cel: Znaleźć ciche, klimatyczne miejsce do pracy z szybkim Wi-Fi i dobrą kawą.
Zadanie 3: Paleta Kolorystyczna i Dostępność Kontrastu 🌈
Zaprojektuj paletę kolorystyczną dla strony internetowej aplikacji do medytacji i relaksu. Wybierz kolor główny oraz 2 kolory uzupełniające/akcentujące. **Sprawdź kontrast** między kolorem tła a kolorem tekstu zgodnie z wytycznymi WCAG.
Uzasadnij: Swój wybór kolorów oraz podaj wynik testu kontrastu dla tekstu na tle głównym.
Pokaż proponowane kolory i CSS
Proponowany CSS:
:root {
--main-color: #4a6c6e; /* Głęboki, uspokajający turkus */
--accent-color: #e0f2f1; /* Bardzo jasny miętowy - dla tekstu */
--contrast-color: #f7a355; /* Pomarańcz - dla przycisków (CTA) */
}
body {
background-color: var(--main-color);
color: var(--accent-color);
}
Kodowanie (HTML5/CSS3) i Dostępność (WCAG) 💻
Zadanie 4: Typografia - Czcionki i Jednostki Względne ✒️
Stwórz fragment kodu HTML i CSS dla **bloga podróżniczego**. Dobierz czcionki i jednostki zgodnie z zasadami czytelności i **responsywności**. Użyj jednostek **`rem`** dla wielkości fontów.
Pokaż HTML i CSS do uzupełnienia
HTML:
<h1>Moje podróże po Azji</h1>
<article>
<p>Podróżowanie to moja pasja. Oto kilka miejsc, które odwiedziłem...</p>
<p>Najpiękniejsze było...</p>
</article>
CSS (Uzupełnij jednostki REM!):
body {
font-size: 16px; /* Bazowa wielkość w px dla kontekstu REM */
}
h1 {
font-size: 2.5rem;
font-family: 'Montserrat', sans-serif;
margin-bottom: 0.5rem;
}
p {
font-size: 1.125rem;
font-family: 'Merriweather', serif;
line-height: 1.7;
}
Zadanie 5: Dostępny Formularz Kontaktowy (WCAG) ✅
Zaprojektuj **dostępny formularz kontaktowy** zgodnie ze standardami WCAG, uwzględniając powiązanie etykiet z polami, komunikaty o błędach, oraz odpowiednie użycie atrybutów **ARIA**.
Pokaż dostępny formularz HTML
<form aria-labelledby="form-title">
<h3 id="form-title">Napisz do nas!</h3>
<div>
<label for="name">Imię:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-describedby="email-desc">
<small id="email-desc">Wymagany do odpowiedzi.</small>
</div>
<div>
<label for="message">Wiadomość:</label>
<textarea id="message" name="message" required rows="5"></textarea>
</div>
<button type="submit">Wyślij wiadomość</button>
</form>
Zaawansowane Techniki i Nowoczesny CSS ✨
Zadanie 6: Responsywny Układ z Grid i Flexbox 📐
Wykonaj stronę HTML + CSS dla salonu fryzjerskiego, kładąc nacisk na **nowoczesny, responsywny układ**. Wykorzystaj **CSS Grid** do głównego layoutu strony oraz **Flexbox** wewnątrz sekcji.
- struktura HTML5 (semantic elements),
- układ z **CSS Grid**,
- komponenty z **Flexbox**,
- **Media Queries** dla 3 punktów przełamania.
Pokaż Przykład CSS Grid i Flexbox
Przykładowy CSS dla sekcji cennika (Flexbox):
.price-list {
display: flex;
flex-wrap: wrap; /* Zapewnia responsywność */
justify-content: space-between;
gap: 20px;
}
.price-item {
flex: 1 1 300px; /* Rozciąga się, ale ma bazową szerokość 300px */
padding: 15px;
border: 1px solid #3a3a3a;
border-radius: 5px;
}
Zadanie 7: Zastosowanie Zmiennych CSS i Light Mode ⚙️
Pokaż, jak można efektywnie zarządzać kolorami za pomocą **Zmiennych CSS (Custom Properties)**. Zmodyfikuj kod, aby umożliwić łatwą zmianę na **jasny motyw** (Light Mode) za pomocą atrybutu **`prefers-color-scheme`**.
Pokaż Zmienne CSS i Light Mode
Zmienne CSS w Light Mode:
/* Definicja domyślna (Dark Mode) */
:root {
--bg-dark: #121212;
--text-light: #e0e0e0;
/* ... inne zmienne dark mode ... */
}
/* Przełączanie na Light Mode dla użytkowników, którzy mają tak ustawione preferencje */
@media (prefers-color-scheme: light) {
:root {
--bg-dark: #ffffff;
--bg-medium: #f0f0f0;
--bg-light: #e0e0e0;
--primary-color: #00796b; /* Ciemniejszy kolor dla czytelności */
--secondary-color: #00bcd4;
--text-light: #333333; /* Ciemny tekst */
}
body {
color: var(--text-light); /* Dostosowanie koloru tekstu w light mode */
}
}