Idź Pan w UI! #17 – lista notatek

Wiecie dobrze, że skoro mieliśmy ostatnio desktop, to przyszedł czas na mobilki. Tak! Do zaprojektowania będzie aplikacja mobilna!

Czas na wzięcie udziału w zadaniu macie do 14 sierpnia (do końca dnia), a kilka dni później odbędzie się live stream, na którym podsumujemy wyniki waszej pracy. Jeśli jesteście ciekawi ostatniego podsumowania, znajdziecie je na kanale byZebza na YouTube.

Co to jest wyzwanie UI?

Treść tego zadania (jak wszystkich poprzednich) możecie wykorzystać jako inspirację do nowego projektu do portfolio, formę ćwiczenia lub wziąć udział w wyzwaniu, zrealizować zadanie i wysłać je do mnie w określonym terminie. Ja niedługo później przygotowuję spotkanie online na kanale YouTube (by Zebza), gdzie omawiam wybrane projekty – czyli robimy sobie spotkanie w formie podsumowania.

Wybieram tylko kilka z nadesłanych projektów. Pozwoli to pokazać lepsze i słabsze projekty, omówić dobre strony i popularne błędy. A przede wszystkim – będę mogła opowiedzieć wam więcej o dobrych praktykach i wzorcach. Dzięki temu, spotkania będą krótsze i bogatsze w wiedzę.

Jak dołączyć do wyzwania UI?

Do tego zadania już nie można dołączyć – warto sprawdzić czy nie trwa właśnie nowe wyzwanie.

Treść zadania UI

Temat: Aplikacja do notatek

Deadline: 14 sierpnia 2021 (do końca dnia)

Format: Ekran aplikacji mobilnej (Android lub iOS) o szerokości 375 px

Cel zadania: Tym razem projektować będziemy coś, co może wydawać się wam dość proste. Ale dobrze wiecie już, że diabeł tkwi w szczegółach – i nawet prosty interfejs można zaprojektować dobrze lub – no cóż, źle 😬 Dlatego zanim siądziecie do projektu UI, dobrze zastanówcie się po co układacie wszystkie te elementy na ekranie? I co będzie się dalej z nimi robiło?

Celem zadania jest pokazanie listy wszystkich notatek w aplikacji. Aplikacja pozwala na tworzenie osobnych notatników (grup notatek) – ekran, który projektujecie, ma zbierać je wszystkie (również te, które zostały przypisane do grup). Notatki są ułożone chronologicznie – od tych, które stworzyłam ostatnio do starszych.

Obowiązkowe elementy takiego widoku to:

  • Nazwa ekranu: Notatki
  • Liczbę wszystkich notatek na tym ekranie
  • Tytuł notatki
  • Data utworzenia notatki
  • Skrót notatki – 200 znaków
  • Niektóre z notatek mogą mieć również miniaturę zdjęcia (jeśli w treści pojawiły się jakieś zdjęcia, ilustracje itd)

Zaplanujcie również miejsce na nawigację, która będzie pozwala szybko wyszukiwać konkretną notatkę, tworzyć nową oraz pokazywać więcej opcji nawigacji (np. przechodzenie między grupami notatek, ustawieniami czy opcjami udostępniania).

Każdą z notatek można usunąć, udostępnić, przenieść do grupy, przypiąć do głównego ekranu aplikacji i duplikować. Do waszej decyzji zostawiam czy pokażecie te opcje na ekranie listy czy nie.

Jeżeli uznacie, że trzeba dodać jeszcze jakieś informacje lub funkcje, po prostu je dodajcie!

Poza zadaniem

Bardzo zachęcam was do tego żeby rozbudować sobie to zadanie o kolejne ekrany aplikacji. Zastanówcie się jak wygląda przechodzenie do notatki i jak się wraca do poprzedniego widoku? Jak działa wyszukiwarka i jak pokazuje wyniki wyszukiwania? To świetnie rozbuduje projekt do portfolio, ale ja nie będę sprawdzać tych obszarów w tym zadaniu.

Chcesz być na bieżąco?

Żeby być na bieżąco z kolejnymi zadaniami i informacjami o spotkaniach na żywo, najwygodniej dopisać się do newslettera, bo dzięki temu, prosto na maila dostaniecie każdą informację. Można po prostu śledzić bloga albo moje kanały na portalach społecznościowych, ale algorytmy bywają okrutne i jest szansa, że nie zawsze wyświetlą się wam powiadomienia o nowym zadaniu. Newsletter ten problem eliminuje. Zapisz się do newslettera tutaj.

Zobacz też