Demonstrative lecture about user interface design tools. Course: TJTA104 Human-technology interaction. In Finnish. If you want english version, please contact.

1. Käyttöliittymäsuunnittelun
työkalut
MsC Ari Tuhkala
Akateeminen sekatyöläinen
TJTA104 Ihminen ja teknologia
Luento 3 Maanantai 19.1.2015 12:15 - 13:45 Ag aud 1

2. LUENNON RAKENNE
01
02
03
04
Harjoitustyöohjeet
Mitä ja miksi tulee tehdä
Yhteiset ohjeet
Ohjeet, vinkit, ojat ja allikot
Demo: ohjelmointi 2
Rautalankaa ja ikkunoiden rakentelua
Demo: muut opiskelijat
Luovuutta ja kuvankäsittelyä

3. HARJOITUSTYÖ
KUMARRA AIKARAJOJA
4.2.2015
25.2.2015TAI 4.3.2015
9.3.2015
18.3.2015
Kevät
2015
2030 ?
Step 01: Käyttöliittymäkuvat
Koppaan
MUUT: Käyttöliittymäkuvapolut
OHJ2: Käyttöliittymäkuvat,
rautalankaluonnos ja visuaalinen luonnos
Step 02:
Demotilaisuudet
Toisen ryhmän käyttöliittymästä
arviointi. Voi suorittaa myös
itsenäisesti
Step 03. Vertaisarviointi
Lähettäkää sähköpostitse
vertaisarviointinne ryhmälle
Step 04: Harjoitustyöraportin
palautus
Palautetaan PDF-tiedostona Koppaan
Step 05: Opintopisteet
Jos kaikki menee kunnialla, niin
kurssisuoritus taskuun
Step 06: Maisteripaperi
Käärö kouraan, lakki
päähän ja maailmalle

4. KÄYTTÖLIITTYMÄ-
SUUNNITTELU

5. OSA-ALUEITA
Hahmottelu
Luonnostelu
Rautalankamalli
Elementtien sijoittelu
Sketsaus
Värimaailma
Logot, ikonit, napit
Koristeet
Visuaalinen
suunnittelu
Käyttöliittymän toteuttaminen
Sovelluslogiikan yhdistäminen
Testaaminen
Ohjelmistokehitys
Syntax
error

6. NEUVOJA JA SUDENKUOPPIA
MITÄ MINÄ OPIN TÄSTÄ TEHTÄVÄSTÄ
Harjoitustyön tarkoitus on oppia ja soveltaa luentojen sisältöä käytännössä.
Lue tarkkaan kurssin arviointiperusteet.
Sisältö ja argumentointi
Elämäsi mahdollisuus. ”Voi jestas tämä [vapaavalintainen ohjelmisto,
verkkosivu tai laite] on surkea”. No tee itse parempi.
Käytä luovuutta
Ensimmäinen ja tärkein sääntö: tallenna erikseen kaikki välivaiheet. Pahin
virhe on tehdä uudelleensuunnittelu kerralla, muuntaa se kuvaksi, jolloin
kerrokset (layers) häviävät ja katua, kun joutuu tekemään koko homman
uusiksi.
Tallenna välivaiheet
Esimerkiksi hyvässä kuvankäsittelyohjelmassa näet apuviivaimet, koordinaatit,
objektin koon ja suhteet muihin objekteihin. Sopivien työvälineiden
etsimiseen ja opetteluun menee aikaa, mutta ne nopeuttavat työskentelyä
moninkertaisesti.
Aja vain hyvillä hevosilla
Ole tarkkana kuvakokojen ja zoomin kanssa. Huolehdi, että elementit ovat
samassa linjassa. Tallenna käyttöliittymässä käytettävät värit.
Huomioi mittasuhteet ja värit
Kurssilla on tuntiopettajia sitä varten, että he auttavat sinua harjoitustyön
tekemisessä. Älä epäröi kysyä apua. Demotilaisuudet ovat sitä varten.
Tartu auttaviin kätösiin

7. APUVÄLINEITÄ
LINKKEJÄ ERILAISIIN PALVELUIHIN
A. Kuvankäsittely
Gimp
Pixelmator
Xara Designer
C. Ilmaisia kuvia
Pixabay
Google kuvahaku: hakutyökalut -
käyttöoikeudet - saa käyttää…
B. UI-design
Ilmaisia UI-elementtejä
Os X UI-elementit
WhatTheFont
D. Verkkosivut
Firefox developer tools
Chrome developer tools
F. Tutoriaalit ym.
Hongiat
Envato
Udemy
E. Rautalanka
Mockingbird
Lucidchart
Mockflow

8. KUVAPOLKU

9. TOIMINTO:
konferenssin
vaihtaminen

11. UUSI KÄYTTÖLIITTYMÄ
Käyttäjä näkee konferenssin
luentojen aikataulun, aiheen,
puhujan ja paikan
Nykyinen
konferenssi
Konferenssilista Uusi konferenssi
Konferenssilistaan siirrytään
painamalla keskellä olevaa
listanappia. Listaa voi selata
Käyttäjä valitsi konferenssin
Geeks Gathering Magic

12. KÄYTTÖLIITTYMÄN
UUDELLEENSUUNNITTELU
NELJÄ ERILAISTA LÄHESTYMISTAPAA
1
OHJELMOINTIYMPÄRISTÖT
3
UUDELLEENPIIRTO
2
VALMIIT UI-ELEMENTIT
4
NAARMUSTA ALKAEN
Visuaalinen suunnittelu
Toteutuksen miettiminen
Rajoitteet ja mahdollisuudet
Tarina joulukorteista ja alakoulusta
Layout hyvä, mutta ulkonäkö huono
Toimintalogiikan säilyttäminen
Tarina pyörästä ja keksijästä
Käyttöliittymästandardit
Vältät idioottimaisuudet
Tee itse - päätä itse
Kova vaiva - hyvä palkka

13. DEMONSTRAATIO
TOISIN SANOEN - LUENTO EI LOPU VIELÄ AIKOIHIN
Ohjelmointi 2 -kurssilaiset
Käydään läpi rautalankaversion tekeminen Mockingbirdillä ja alkeet
käyttöliittymän toteuttamisesta Eclipsen Java WindowBuilderilla.
Muut
Kannattaa ensin hahmotella toimintoa rautalankamallin avulla. Demonstroidaan
Gimpiä, koska se on ilmainen ja saatavilla useimmille käyttöjärjestelmille. Sallittua,
ellei jopa suotavaa, käyttää muuta ohjelmaa.

14. ONNEA
MATKAAN