Dokończ zdanie. 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
R1UkLam4kguac
Wskaż, co nie jest jednym z trzech etapów projektowania strony internetowej. Możliwe odpowiedzi: 1. schemat (wireframe), 2. makieta (mockup), 3. prototyp, 4. szkic
Źródło: Akademia Finansów i Biznesu Vistula, licencja: CC BY-SA 3.0.
Ćwiczenie 3
R11O6O8D4dRHY
Uzupełnij zdanie. 1. Dropdown, 2. Kontent, 3. CTA, 4. Dropbox to rozwijana lista, która pojawia się po kliknięciu w dany element menu.
Uzupełnij zdanie. 1. Dropdown, 2. Kontent, 3. CTA, 4. Dropbox to rozwijana lista, która pojawia się po kliknięciu w dany element menu.
Ćwiczenie 4
W programie graficznym stwórz wireframe, zawierający: baner, CTA, menu i nagłówek z rozwinięciem tekstowym.
Przykład 1
RrFheXUQVbDze
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.
Źródło: tylko do użytku edukacyjnego.
Ćwiczenie 5
Nazwij elementy strony.
R1BSQG78agBHL
Ilustracja
Źródło: tylko do użytku edukacyjnego.
RCgcr8EkQX1ce
Ilustracja
Źródło: tylko do użytku edukacyjnego.
Ćwiczenie 6
RbaWs4xjCiqmH
(Uzupełnij).
Ćwiczenie 6
Wireframe wykonany w Ćwiczeniu 4 przekształć w makietę.
Przykład 2
R1ZW26boYJwu9
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.
Ź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
RHkXgpUcWaqZV
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.
Ź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.
RpVhNFRusQ7yQ
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.