HUIMA-prosessin yksi tärkeimmistä vaiheista on sivujen pääkomponenttien tunnistaminen. Tätä vaihetta seuraa vähintäänkin yhtä tärkeä käyttöliittymäkomponenttien tunnistusvaihe. Ennen kuin ryhdytään näin yksityiskohtaiseen työhön, aloitetaan suuremmista kokonaisuuksista ja edetään niistä kerta kerralla kohti tarkempaa suunnittelua. Pääkomponentit auttavat hahmottamaan sivujen rakennetta ja niillä on lisäksi helppo suunnitella uudet tai puuttuvat sivut yksinkertaisella palapelimenetelmällä. Jokainen pääkomponentti rakentuu käyttöliittymäkomponenteista, joten pääkomponenteissa ei välttämättä tarvitse olla mitään suurempaa älykkyyttä, sillä se periytyy koostavista toiminnallisista komponenteista. Prosessin tässä vaiheessa tyylioppaaseen (Design Guide) syntyy uusi Sivun komponentit -luku.

Esimerkkinä käyttämäni blogisovellus sisältää useita erilaisia sivuja, jotka edellisessä työvaiheessa ryhmiteltiin toiminnallisuutensa mukaan julkisesti näkyviksi sivuiksi ja sisäiseen käyttöön tarkoitettuihin hallinnointisivuihin. Tulevat käyttöliittymäsivut luokiteltiin sivutyypeillä ulkoasunsa mukaan omiin luokkiinsa. HUIMA-suunnitteluprosessin kolmannessa vaiheessa syntyy ensimmäiset käyttöliittymäluonnostelmat. Sivukartan eri sivut jaetaan ensi vaiheessa suurempiin osakokonaisuuksiin (kuva 4). Tällaisia osakokonaisuuksia ovat esimerkiksi sivun ylä- ja alatunnisteet, navigointiosio sekä varsinainen sisältöosuus.

Olen luonnostellut esimerkkisovellukselle kahdet sivujen rungot, kuten kuvassa 4 on esitetty. Toinen runko on tarkoitettu julkisesti esitettäville sivuille kun taas toinen tulee vain sisäiseen hallinnointikäyttöön. Hallinnointisivuilla en katsonut tarpeelliseksi sivun ylä- ja alatunnistetta, sillä näissä on usein staattista sisältöä, kuten tässä tapauksessa blogin nimi otsikossa ja tekijänoikeustietoja alatunnisteessa. Molemmissa sivutyypeissä työskentelyalue on jaettu kahteen palstaan sekä navigointiosioon. Sisäänkirjautumissivu saattaa hieman poiketa esitetyistä sivutyypeistä, sillä siinä ei tarvita reunapalstaa eikä ehkä navigointiakaan. Sisältöpalsta on varsinainen työskentelyalue. Reunapalstaa käytetään apupalstana, jossa esitetään sivukohtaisia tietoja, kuten esimerkiksi kalenteri artikkelien kirjoittamisen aikana tai linkit eri kuukausien kirjoituksiin arkistosivulla. Navigointiosiossa on linkit sovelluksen eri toimintoihin. Linkit vastaavat paljolti sivusiirtymiä aiemmassa vaiheessa laaditussa sivukartassa.

Tyylioppaan Sivun komponentit -lukuun lisätään aluksi pelkät otsikot sivun eri osista. Kappaleiden sisältö syntyy vähitellen suunnitteluprosessin edetessä. Otsikkoehdokkaat löytyvät käytännöllisesti katsoen suoraan luonnostelluista sivuista, ja tyylioppaan sisällysluettelo näyttäisi jotakuinkin seuraavanlaiselta:

1. Julkiset sivut
  1.1 Etusivu
  1.2 Kommentointisivu
  1.3 Hakusivu
  1.4 Arkistosivu
  1.5 Tietoja kirjoittajasta -sivu
2. Hallinnointisivut
  2.1 Sisäänkirjautumissivu
  2.2 Hallinnoinnin etusivu
  2.3 Artikkelin kirjoitussivu
  2.4 Kommenttien hallinnointisivu
3. Sivun komponentit
  3.1 Sisältöpalsta
  3.2 Reunapalsta
  3.3 Ylätunniste
  3.4 Alatunniste
  3.5 Navigointiosio

Sisällysluetteloesimerkki ei ole tässä täydellinen, mutta antaa osviittaa tyylioppaan sisällöstä. Lukujen järjestys voi vaihdella, ja tyylioppaaseen voidaan sisällyttää tarkempia kuvauksia sivutyypeistä ja -ryhmistä. Sivujen pääkomponentteja tunnistettaessa ei oteta vielä kantaa siihen, mitä komponentit sisältävät. Reunapalsta voi sisältää lukuisia erilaisia alikomponentteja riippuen kulloisestakin sivusta. Käyttöliittymän suunnitteluprosessin seuraavassa vaiheessa tunnistetaan pääkomponenttien toiminnallisuus ja johdetaan näistä varsinaiset käyttöliittymäkomponentit.