Zaprojektuj układ strony głównej witryny dla fikcyjnej firmy zajmującej się produkcją ekologicznych kosmetyków. Strona powinna zawierać:

• nagłówek z logo i nawigacją,
• sekcja główna z dużym banerem,
• trzy sekcje z ofertą,
• opinie klientów,
• formularz kontaktowy,
• stopka z danymi firmy.

Wykonaj: Szkic oraz opis rozmieszczenia sekcji.

Rozwiązanie:

Szkic może wyglądać następująco:

• W nagłówku umieść logo po lewej stronie, a nawigację po prawej.
• Baner w centralnej części strony, zajmujący pełną szerokość ekranu.
• Trzy sekcje oferty ułożone w rzędzie z grafiką i krótkimi opisami.
• Opinie klientów w postaci karuzeli z cytatami oraz zdjęciami.
• Formularz kontaktowy w dolnej części strony, z polami na email i wiadomość.
• Stopka z danymi firmy (adres, telefon, linki do social media).

Zadanie 2: Tworzy brief witryny internetowej

Stwórz brief dla strony internetowej lokalnej kawiarni o nazwie „Kawa z Pasją”.

Brief powinien zawierać:

• cel strony,
• grupę docelową,
• kluczowe funkcje,
• styl graficzny,
• wymagania techniczne.

Rozwiązanie:

Cel strony: Prezentacja oferty kawiarni, umożliwienie zamawiania online, promocja lokalnych wydarzeń.

Grupa docelowa: Mieszkańcy miasta, osoby poszukujące przytulnego miejsca na kawę i ciastko.

Kluczowe funkcje: Menu z możliwością składania zamówień, sekcja z wydarzeniami, formularz kontaktowy.

Styl graficzny: Ciepłe, naturalne kolory (brązy, beże), minimalistyczny design, zdjęcia produktów.

Wymagania techniczne: Responsywność, integracja z systemem płatności online, możliwość łatwej edycji menu.

Zadanie 3: Stosuje zasady doboru barw na stronie internetowej

Zaprojektuj paletę kolorystyczną dla strony internetowej aplikacji do medytacji i relaksu. Wybierz kolor główny oraz 2 kolory uzupełniające. Uzasadnij swój wybór.

Rozwiązanie:

Kolor główny: #7ec8c8 – odcień zieleni, kojarzy się z naturą, spokojem i równowagą, co idealnie pasuje do tematyki medytacji.

Kolor uzupełniający: #c0dfd9 – jaśniejszy odcień zieleni, który działa uspokajająco i kojarzy się z relaksem.

Kolor kontrastowy: #f5f5f5 – bardzo jasny odcień, który zapewnia czytelność tekstów na tle głównych kolorów, nie przytłaczając strony.

Zadanie 4: Dobiera czcionki i jednostki ich wielkości na stronie internetowej

Stwórz fragment kodu HTML i CSS dla bloga podróżniczego. Dobierz czcionki i jednostki zgodnie z zasadami czytelności.

Rozwiązanie:

Wszystkie czcionki powinny być łatwe do odczytania. Dla nagłówków używamy większych rozmiarów (2.5rem dla h1) oraz odpowiednich czcionek typu sans-serif, takich jak 'Segoe UI', które są wygodne w odbiorze. Dla treści artykułów używamy czcionki 'Georgia', która jest bardziej klasyczna i lepiej czytelna w dłuższych tekstach.

Zadanie 5: Dostosowuje strony internetowe do potrzeb osób z niepełnosprawnościami

Zaprojektuj dostępny formularz kontaktowy zgodny ze standardami WCAG.

Rozwiązanie:

Formularz jest zgodny z WCAG dzięki zastosowaniu atrybutów takich jak aria-label (dla pola email), aria-describedby (dla textarea), oraz odpowiednich etykiet dla wszystkich pól, co pomaga osobom korzystającym z technologii wspomagających.

Zadanie 6: Tworzy witryny internetowe zgodnie z projektem

Na podstawie projektu graficznego przygotuj strukturę strony w HTML oraz zastosuj style w CSS.

Rozwiązanie:

Projekt powinien zawierać nagłówek z nazwą firmy, a poniżej sekcję opisującą firmę z użyciem odpowiednich nagłówków i paragrafów.