Projektowanie interfejsów

Prezentacja na temat: "Projektowanie interfejsów"— Zapis prezentacji:

1 Projektowanie interfejsów
Ćwiczenia KCK 2013 Agnieszka Mozol

2 Projektowanie alternatyw
Definiowanie wymagań Projektowanie alternatyw Ewaluacja A simple interaction design lifecyle model  PRODUKT Prototypowanie

3 Projektowanie alternatyw
Definiowanie wymagań Projektowanie alternatyw Ewaluacja A simple interaction design lifecyle model  PRODUKT Prototypowanie

4 Projektowanie alternatyw
Definiowanie wymagań Projektowanie alternatyw Ewaluacja A simple interaction design lifecyle model  PRODUKT Prototypowanie

5 Projektowanie alternatyw
Definiowanie wymagań Projektowanie alternatyw Ewaluacja A simple interaction design lifecyle model  PRODUKT Prototypowanie

6 Projektowanie Prototypowanie alternatyw Prototyp:
- pojedyncza manifest designu ktory pozwala na interakcje z systemem oraz jego ewaluacje - protypy pomagaja w : -- komunikowaniu idei, pomagaja w projektowaniu poprzez konkretyzowaniu pomyslow, pomagaja wybrac pomiedzy alternatywami,  low fidelity / high fidelity 

7 Jakie mamy rozwiązania do wyboru?
Jakie są wymagania?  poprawa błędów - przeprojektowanie nowy produkt Jakie mamy rozwiązania do wyboru? benchmark rynku  standardy  kreacja Jakie są alternatywne rozwiązania Które z rozwiązań jest najlepsze? Projektowanie rozpoczyna się po ustaleniu wymagań  Projektt powstaje w iteracjach: design - evaluation - redisign Sa dwa typy projektowania: - koncepycjne - fizyczne Koncepcyjne - rozwoj modelu koncepcyjnego ktory ujmuje co produt bedzie robil, jak sie bedzie zachowywał, it is a high level description of how a system is organized and operates, - fizyczne - detale struktura, ekranu, menu, kolory Aby móc ocenić design trzeba go przedstawić w postaci prototypu 

8 Jakie mamy rozwiązania do wyboru?
Jakie są wymagania?  poprawa błędów - przeprojektowanie nowy produkt Jakie mamy rozwiązania do wyboru? benchmark rynku  standardy  kreacja Jakie są alternatywne rozwiązania Które z rozwiązań jest najlepsze? Projektowanie rozpoczyna się po ustaleniu wymagań  Projektt powstaje w iteracjach: design - evaluation - redisign Sa dwa typy projektowania: - koncepycjne - fizyczne Koncepcyjne - rozwoj modelu koncepcyjnego ktory ujmuje co produt bedzie robil, jak sie bedzie zachowywał, it is a high level description of how a system is organized and operates, - fizyczne - detale struktura, ekranu, menu, kolory Aby móc ocenić design trzeba go przedstawić w postaci prototypu 

9 smaschingmagazine.com/
ui-patterns.com/ uxporn.com/ ?

10 Navigation Tabs The user needs to navigate among sections of a website and while having clear indication of what section the user is currently looking at. podaje kiedy uzywac racjonalizuje uzycie  czxesto tez kiedy nie uzywac  opis jak powinno działąc

11 Navigation Tabs

12 Jakie mamy rozwiązania do wyboru?
Jakie są wymagania?  poprawa błędów - przeprojektowanie nowy produkt Jakie mamy rozwiązania do wyboru? benchmark rynku  standardy  kreacja Jakie są alternatywne rozwiązania Które z rozwiązań jest najlepsze? Projektowanie rozpoczyna się po ustaleniu wymagań  Projektt powstaje w iteracjach: design - evaluation - redisign Sa dwa typy projektowania: - koncepycjne - fizyczne Koncepcyjne - rozwoj modelu koncepcyjnego ktory ujmuje co produt bedzie robil, jak sie bedzie zachowywał, it is a high level description of how a system is organized and operates, - fizyczne - detale struktura, ekranu, menu, kolory Aby móc ocenić design trzeba go przedstawić w postaci prototypu 

13 Jakie mamy rozwiązania do wyboru?
Jakie są wymagania?  poprawa błędów - przeprojektowanie nowy produkt Jakie mamy rozwiązania do wyboru? benchmark rynku  standardy  kreacja Jakie są alternatywne rozwiązania Które z rozwiązań jest najlepsze? Projektowanie rozpoczyna się po ustaleniu wymagań  Projektt powstaje w iteracjach: design - evaluation - redisign Sa dwa typy projektowania: - koncepycjne - fizyczne Koncepcyjne - rozwoj modelu koncepcyjnego ktory ujmuje co produt bedzie robil, jak sie bedzie zachowywał, it is a high level description of how a system is organized and operates, - fizyczne - detale struktura, ekranu, menu, kolory Aby móc ocenić design trzeba go przedstawić w postaci prototypu 

14 Cel: przeprojektowanie strony psychologia.amu.edu.pl
    Ćwiczenie 0 Cel: przeprojektowanie strony psychologia.amu.edu.pl Co zrobić: określić kto (jakie grupy) korzysta ze strony dla każdej z grup należy zdefiniować: treści jakich poszukują na tej stronie www praca jaka ma zostać wykonana dzięki wykorzystaniu tej strony www Czas: 10 min

15     Ćwiczenie 1 Cel: przeprojektowanie strony psychologia.amu.edu.pl Co zrobić: naszkicować własną propozycje dla strony głównej szkic powinien zawierać takie element jak: główną nawigacje strony  opis zawartości na stronie głównej kluczowe elementy Czas: 15\20 min

16   Ćwiczenie 2 Cel: przeprojektowanie strony psychologia.amu.edu.pl Co zrobić: w grupach przedyskutować indywidualne pomysły wspólnie wypracować jeden projektu dla strony głównej Czas: 15\20 min

17      Praca domowa Zaprojektowanie strony psychologia.amu.edu.pl Narzędzia: Axure PRO Zakres: Strona główna 1 wybrana podstrona odpowiadająca głównym potrzebom użytkowników serwisu 1 projekt na 2 osoby Efekt: Archiwum z wyeksportowanym prototypem Termin: Mail:

18 Dziękuję Kontakt: Agnieszka Mozol