You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
8.4 KiB
157 lines
8.4 KiB
# Stylizuj swoją aplikację bankową za pomocą nowoczesnego CSS
|
|
|
|
## Przegląd projektu
|
|
|
|
Przekształć swoją funkcjonalną aplikację bankową w atrakcyjną wizualnie, profesjonalnie wyglądającą aplikację internetową, korzystając z nowoczesnych technik CSS. Stworzysz spójny system projektowy, który poprawi doświadczenie użytkownika, zachowując jednocześnie zasady dostępności i projektowania responsywnego.
|
|
|
|
To zadanie zachęca do zastosowania współczesnych wzorców projektowania stron internetowych, wdrożenia spójnej tożsamości wizualnej oraz stworzenia interfejsu, który użytkownicy uznają za atrakcyjny i intuicyjny w nawigacji.
|
|
|
|
## Instrukcje
|
|
|
|
### Krok 1: Przygotuj swój arkusz stylów
|
|
|
|
**Stwórz podstawę CSS:**
|
|
|
|
1. **Utwórz** nowy plik o nazwie `styles.css` w katalogu głównym projektu
|
|
2. **Podłącz** arkusz stylów w pliku `index.html`:
|
|
```html
|
|
<link rel="stylesheet" href="styles.css">
|
|
```
|
|
3. **Zacznij** od resetu CSS i nowoczesnych ustawień domyślnych:
|
|
```css
|
|
/* Modern CSS reset and base styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
```
|
|
|
|
### Krok 2: Wymagania systemu projektowego
|
|
|
|
**Zaimplementuj te podstawowe elementy projektowe:**
|
|
|
|
#### Paleta kolorów
|
|
- **Kolor podstawowy**: Wybierz profesjonalny kolor dla przycisków i wyróżnień
|
|
- **Kolor dodatkowy**: Kolor uzupełniający dla akcentów i akcji drugorzędnych
|
|
- **Kolory neutralne**: Odcienie szarości dla tekstu, obramowań i tła
|
|
- **Kolory sukcesu/błędu**: Zieleń dla stanów sukcesu, czerwień dla błędów
|
|
|
|
#### Typografia
|
|
- **Hierarchia nagłówków**: Wyraźne rozróżnienie między elementami H1, H2 i H3
|
|
- **Tekst podstawowy**: Czytelny rozmiar czcionki (minimum 16px) i odpowiednia wysokość linii
|
|
- **Etykiety formularzy**: Jasny, dostępny styl tekstu
|
|
|
|
#### Układ i odstępy
|
|
- **Spójne odstępy**: Używaj skali odstępów (8px, 16px, 24px, 32px)
|
|
- **System siatki**: Zorganizowany układ formularzy i sekcji treści
|
|
- **Projekt responsywny**: Mobilne podejście z punktami przerwania
|
|
|
|
### Krok 3: Stylizacja komponentów
|
|
|
|
**Stylizuj te konkretne komponenty:**
|
|
|
|
#### Formularze
|
|
- **Pola formularzy**: Profesjonalne obramowania, stany fokus oraz stylizacja walidacji
|
|
- **Przyciski**: Efekty hover, stany nieaktywne oraz wskaźniki ładowania
|
|
- **Etykiety**: Jasne pozycjonowanie i wskaźniki pól obowiązkowych
|
|
- **Komunikaty o błędach**: Widoczna stylizacja błędów oraz pomocne treści
|
|
|
|
#### Nawigacja
|
|
- **Nagłówek**: Czysta, markowa przestrzeń nawigacyjna
|
|
- **Linki**: Wyraźne stany hover i wskaźniki aktywności
|
|
- **Logo/Tytuł**: Charakterystyczny element brandingowy
|
|
|
|
#### Obszary treści
|
|
- **Sekcje**: Wyraźne oddzielenie wizualne między różnymi obszarami
|
|
- **Karty**: Jeżeli używasz układów kartowych, dodaj cienie i obramowania
|
|
- **Tła**: Odpowiednie wykorzystanie przestrzeni białej i subtelnych teł
|
|
|
|
### Krok 4: Zaawansowane funkcje (opcjonalne)
|
|
|
|
**Rozważ implementację tych zaawansowanych funkcji:**
|
|
- **Tryb ciemny**: Przełącznik między jasnym a ciemnym motywem
|
|
- **Animacje**: Subtelne przejścia i mikrointerakcje
|
|
- **Stany ładowania**: Wizualne informacje zwrotne podczas wysyłania formularzy
|
|
- **Responsywne obrazy**: Optymalizowane obrazy dla różnych rozmiarów ekranów
|
|
|
|
## Inspiracje projektowe
|
|
|
|
**Charakterystyka nowoczesnej aplikacji bankowej:**
|
|
- **Czysty, minimalistyczny design** z dużą ilością przestrzeni białej
|
|
- **Profesjonalne schematy kolorystyczne** (odcienie niebieskiego, zielonego lub wyrafinowane neutralne)
|
|
- **Wyraźna hierarchia wizualna** z widocznymi przyciskami wezwania do działania
|
|
- **Dostępne kontrasty kolorów** spełniające wytyczne WCAG
|
|
- **Responsywne układy mobilne** działające na wszystkich urządzeniach
|
|
|
|
## Wymagania techniczne
|
|
|
|
### Organizacja CSS
|
|
```css
|
|
/* 1. CSS Custom Properties (Variables) */
|
|
:root {
|
|
--primary-color: #007bff;
|
|
--secondary-color: #6c757d;
|
|
/* Add more variables */
|
|
}
|
|
|
|
/* 2. Base Styles */
|
|
/* Reset, typography, general elements */
|
|
|
|
/* 3. Layout */
|
|
/* Grid, flexbox, positioning */
|
|
|
|
/* 4. Components */
|
|
/* Forms, buttons, cards */
|
|
|
|
/* 5. Utilities */
|
|
/* Helper classes, responsive utilities */
|
|
|
|
/* 6. Media Queries */
|
|
/* Responsive breakpoints */
|
|
```
|
|
|
|
### Wymagania dostępności
|
|
- **Kontrast kolorów**: Zapewnij co najmniej 4.5:1 dla zwykłego tekstu
|
|
- **Wskaźniki fokusu**: Widoczne stany fokusu dla nawigacji klawiaturą
|
|
- **Etykiety formularzy**: Poprawne powiązanie z polami formularza
|
|
- **Projekt responsywny**: Użyteczny na ekranach o szerokości od 320px do 1920px
|
|
|
|
## Kryteria oceny
|
|
|
|
| Kryterium | Wzorowy (A) | Kompetentny (B) | Rozwijający się (C) | Wymaga poprawy (F) |
|
|
|----------|-------------|-----------------|--------------------|-------------------|
|
|
| **System projektowy** | Implementuje kompleksowy system projektowy z konsekwentnymi kolorami, typografią i odstępami | Stosuje spójną stylizację z jasnymi wzorcami projektowymi i dobrą hierarchią wizualną | Podstawowa stylizacja z pewnymi problemami spójności lub brakującymi elementami | Minimalna stylizacja z niekonsekwentnymi lub sprzecznymi projektami |
|
|
| **Doświadczenie użytkownika** | Tworzy intuicyjny, profesjonalny interfejs o doskonałej użyteczności i atrakcyjności wizualnej | Zapewnia dobre doświadczenie użytkownika z jasną nawigacją i czytelną zawartością | Podstawowa użyteczność z potrzebą ulepszeń UX | Słaba użyteczność, trudności w nawigacji lub czytaniu |
|
|
| **Implementacja techniczna** | Stosuje nowoczesne techniki CSS, uporządkowaną strukturę kodu i najlepsze praktyki | Efektywne wykorzystanie CSS z dobrą organizacją i odpowiednimi technikami | CSS działa poprawnie, ale może brakować organizacji lub nowoczesnych podejść | Słaba implementacja CSS z problemami technicznymi lub kompatybilnością przeglądarek |
|
|
| **Projekt responsywny** | W pełni responsywny projekt działający doskonale na wszystkich rozmiarach urządzeń | Dobre zachowanie responsywności z drobnymi problemami na niektórych rozmiarach ekranów | Podstawowa responsywność z pewnymi problemami układu | Brak responsywności lub znaczące problemy na urządzeniach mobilnych |
|
|
| **Dostępność** | Spełnia wytyczne WCAG z doskonałą nawigacją klawiaturą i wsparciem czytników ekranu | Dobre praktyki dostępności z odpowiednim kontrastem i wskaźnikami fokusu | Podstawowe rozważania dostępności z niektórymi brakującymi elementami | Słaba dostępność, trudna w obsłudze dla osób z niepełnosprawnościami |
|
|
|
|
## Wytyczne dotyczące zgłoszenia
|
|
|
|
**Dołącz do swojego zgłoszenia:**
|
|
- **styles.css**: Twój kompletny arkusz stylów
|
|
- **Zaktualizowany HTML**: Wszelkie modyfikacje HTML, które wprowadziłeś
|
|
- **Zrzuty ekranu**: Obrazy pokazujące Twój projekt na desktopie i urządzeniach mobilnych
|
|
- **README**: Krótki opis Twoich decyzji projektowych i palety kolorów
|
|
|
|
**Dodatkowe punkty za:**
|
|
- **Własne właściwości CSS** dla łatwego zarządzania motywami
|
|
- **Zaawansowane funkcje CSS** takie jak Grid, Flexbox lub animacje CSS
|
|
- **Optymalizację wydajności** jak zoptymalizowany CSS i minimalny rozmiar pliku
|
|
- **Testy międzyprzeglądarkowe** zapewniające kompatybilność z różnymi przeglądarkami
|
|
|
|
> 💡 **Praktyczna wskazówka**: Zacznij od projektowania na urządzenia mobilne, a następnie ulepszaj dla większych ekranów. To podejście mobile-first pozwala na prawidłowe działanie aplikacji na wszystkich urządzeniach i jest zgodne z najlepszymi praktykami nowoczesnego tworzenia stron internetowych.
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Zastrzeżenie**:
|
|
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się o jak największą dokładność, prosimy o świadomość, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym należy uznać za źródło autorytatywne. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikłe w związku z użyciem tego tłumaczenia.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |