Sprawdź się
Pokaż ćwiczenia:
Ćwiczenie 1
Przycisk, który zachęca użytkownika do określonej akcji, np. „czytaj dalej” nazywa się… Możliwe odpowiedzi: 1. CTA, 2. HTML, 3. CSS, 4. CLS
Źródło: Akademia Finansów i Biznesu Vistula, licencja: CC BY-SA 3.0.
Ćwiczenie 2
Źródło: Akademia Finansów i Biznesu Vistula, licencja: CC BY-SA 3.0.
Ćwiczenie 3
Ćwiczenie 4
W programie graficznym stwórz wireframe, zawierający: baner, CTA, menu i nagłówek z rozwinięciem tekstowym.
Przykład 1
![Ilustracja przedstawia przykładową stronę internetową. Na samej górze strony znajduje się menu nawigacji, która po prawej stronie posiada trzy przyciski. Poniżej znajduje się duży prostokątny szary blok, na środku którego umieszczono przycisk z tekstem: Sprawdź. Poniżej znajduje się długi akapit tekstu zapoczątkowany nagłówkiem.](https://static.zpe.gov.pl/portal/f/res-minimized/RrFheXUQVbDze/1646034383/2UY6PP4kPWRIno73nFjvU1sFOMinSvLK.jpg)
Źródło: tylko do użytku edukacyjnego.
Ćwiczenie 5
Nazwij elementy strony.
![Ilustracja](https://static.zpe.gov.pl/portal/f/res-minimized/R1BSQG78agBHL/1646034383/27IptO0h6FB2eSxBTuPkKZyv8dnoQTRI.jpg)
Źródło: tylko do użytku edukacyjnego.
Ćwiczenie 5
Ćwiczenie 6
Wireframe wykonany w Ćwiczeniu 4 przekształć w makietę.
Przykład 2
![Ilustracja przedstawia stronę internetową. Na samej górze znajduje się pasek nawigacji, który po prawej stronie posiada trzy przyciski: O mnie, Oferta, Kontakt. Poniżej znajduje się duży prostokątny blok, w którym umieszczono grafikę przedstawiającą drogę dążące do wysokiej góry. W bloku tym znajduje się dodatkowo przycisk z napisem ZOBACZ. Poniżej znajduje się nagłówek: Fotografia krajobrazu na zamówienie. Poniżej znajdują się trzy, krótkie akapity tekstu.](https://static.zpe.gov.pl/portal/f/res-minimized/R1ZW26boYJwu9/1646034384/1J2olnXtE9a8nBcCRQ2gmvGlksvBmYbC.jpg)
Źródło: tylko do użytku edukacyjnego.
Ćwiczenie 7
Makietę z Ćwiczenia 6 przekształć w prototyp gotowy do publikacji. Poszukaj błędów. Zobacz, czy wszystkie napisy są czytelne.
Przykład 3
![Ilustracja przedstawia stronę internetową. Na samej górze znajduje się pasek nawigacji, który po prawej stronie posiada trzy przyciski: O mnie, Oferta, Kontakt. Poniżej znajduje się duży prostokątny blok, w którym umieszczono grafikę przedstawiającą drogę dążące do wysokiej góry. Po prawej stornie bloku z grafiką, znajdują się ikony mediów takie jak instagram (ikona jako kontur aparatu) oraz facebooka (małą literka f na niebieskim tle). W bloku tym znajduje się dodatkowo przycisk z napisem ZOBACZ. Poniżej znajduje się nagłówek: Fotografia krajobrazu na zamówienie. Poniżej znajdują się trzy, krótkie akapity tekstu, w którym wytłuszczono najważniejsze elementy. W tekście znajduje się także e-mail, który jest oznaczony kolorem niebieskim.](https://static.zpe.gov.pl/portal/f/res-minimized/RHkXgpUcWaqZV/1646034384/MUkb8xAQdp8aFJs4mNJeUWoTRmvCtNeN.jpg)
Źródło: tylko do użytku edukacyjnego.
Ćwiczenie 8
Skorzystaj z generatora makiet i zobacz, czy stworzona przez ciebie makieta jest przejrzysta, prawidłowo wykonana.
Przykład 4
Przykład wyglądu interfejsu generatora.
![Ilustracja przedstawia stronę internetową Smartmockups. Na samej górze znajduje się pasek nawigacyjny, zawierający nazwę strony w kolorze niebieskim, osiem dostępnych zakładek, a po prawej stronie awatar z powiadomieniami. Poniżej znajduje się opis w jakiej części strony się znajdujemy: Home | Mockups | Desktop. Poniżej znajduje się duże zdjęcie przedstawiające człowieka pracującym na komputerze, na ekranie znajduje się przykładowa strona internetowa. Po prawej stornie znajduje się edytor wyboru grafiki o nagłówku: Afrivan‑American man using an iMac in the office. Poniżej znajdują się opcje Images, Costumize. Poniżej znajduje się nazwa grafiki: makieta_przykład.jpg, przycisk z ikoną ołówka oraz przycisk z ikoną domku. Niżej znajduje się przycisk: Customize the scene. Na samym dole znajduje się przycisk przycinania grafiki, oraz przycisk Download.](https://static.zpe.gov.pl/portal/f/res-minimized/RpVhNFRusQ7yQ/1646034385/10RaLgmOjpWBB9GXjezgdzmn8Er81SK7.jpg)
Źródło: tylko do użytku edukacyjnego.