VisuaLynkin verkkosivusto uudistettiin kokonaan. Aiemmin WordPressillä toteutettu sivusto sai uuden visuaalisen ilmeen ja React-pohjaisen teknisen toteutuksen. Tavoitteena oli esitellä rakennustiedon, IoT-antureiden ja data-analytiikan parissa toimivan yrityksen osaamista aiempaa selkeämmin sekä säilyttää jo julkaistut asiantuntija-artikkelit.

Projektin lähtökohdat

VisuaLynk yhdistää rakennusten BIM-malleja, IoT-antureiden tietoa ja analytiikkaa. Sen ratkaisuja esitellään muun muassa kiinteistöjen ylläpidon, digitaalisten kampusten ja älykkään rakennusympäristön näkökulmista. Sivuston tehtävä on tehdä monimutkaisesta aiheesta ymmärrettävä myös vierailijalle, joka ei tunne teknologioita ennestään.

Uudistuksessa halusin siirtyä pois vanhasta WordPress-rakenteesta, selkeyttää sisältöjen esitystapaa ja rakentaa yhtenäisen käyttökokemuksen eri päätelaitteille. Samalla oli tärkeää, etteivät olemassa olevat julkaisut ja niiden verkko-osoitteet katoa teknologian vaihtuessa.

Visuaalinen suunnittelu ja käyttökokemus

Uusi ilme rakentuu suurista typografisista pinnoista, ilmavasta sommittelusta ja vahvasta kontrastista. Vaalea tausta, lähes musta teksti ja kirkas limenvihreä korostusväri tekevät kokonaisuudesta tunnistettavan. Selkeä navigaatio ohjaa ratkaisuihin, projekteihin, yritysesittelyyn ja blogiin.

Etusivun anturidataa muistuttavat graafiset elementit tuovat yrityksen toimialan esiin ilman raskasta teknistä esitystä. Sisältöjen rytmityksessä kiinnitin huomiota siihen, että tärkeimmät viestit erottuvat nopeasti.

WordPressistä Reactiin

Toteutin sivuston uudelleen Reactilla ja JavaScriptillä. Kehitysympäristössä ja tuotantokoontien rakentamisessa käytettiin Viteä, ja sivujen navigointi toteutettiin React Routerilla. Ulkoasun tyylit rakennettiin CSS:llä.

Uusi ratkaisu ei tarvitse WordPressiä, PHP:tä tai tietokantaa julkisten sivujen näyttämiseen. Julkaisuja varten toteutettiin yhtenäinen artikkelipohja, jossa otsikot, tekstiosiot, luettelot ja usein kysytyt kysymykset säilyvät luettavina. Tämän projektin yhteydessä en kehittänyt VisuaLynkin varsinaista BIM–IoT-tuotealustaa, vaan sen julkista verkkosivustoa.

Seitsemän artikkelin sisältömigraatio

Vanhalta WordPress-sivustolta siirrettiin seitsemän julkaistua artikkelia. Siirrossa käytettiin alkuperäistä sisältöä, eikä tekstejä korvattu pelkillä tiivistelmillä. Artikkeleiden rakenteet, kuten väliotsikot, listat ja FAQ-osiot, sovitettiin uuden sivuston yhtenäiseen ulkoasuun.

Huomioin myös aiemmat julkaisuosoitteet, jotta vanhoista linkeistä voidaan jatkaa samoihin sisältöihin. Lisäksi sivustolle valmisteltiin yksilöllisiä SEO-otsikoita, metakuvauksia, canonical-osoitteita, sivustokartta ja hakukoneille valmiiksi muodostettuja HTML-sivuja.

Responsiivinen suunnittelu

Suunnittelin näkymät tietokoneille, tableteille ja puhelimille. Suuret otsikot, sisältökortit ja navigaatio mukautuvat käytettävissä olevaan tilaan, ja mobiilissa käyttöliittymä muuttuu pienelle näytölle sopivaksi. Tavoitteena oli säilyttää sama tunnistettava ilme laitteesta riippumatta.

Yhteydenotto toteutettiin selkeänä sähköpostilinkkinä. Vierailija voi avata oman sähköpostisovelluksensa suoraan painikkeesta ilman erillisen lomakkeen täyttämistä.

Hakukoneystävällinen rakenne

Tekniseen toteutukseen sisältyivät sivukohtaiset title- ja description-metatiedot, canonical-osoitteet, sivustokartta sekä React-sivujen HTML-esigenerointi. Näin sisältö ei ole riippuvainen pelkästään selaimessa suoritettavasta JavaScriptistä. Vanhojen WordPress-osoitteiden säilyttäminen oli tärkeä osa muutosta. Nämä ovat toteutettuja teknisiä ratkaisuja, eivät lupauksia tietystä hakukonesijoituksesta.

Lopputulos

Tuloksena syntyi selkeä, moderni ja eri näyttöko’oille suunniteltu yrityssivusto, joka esittelee VisuaLynkin ratkaisut ja projektit sekä kokoaa asiantuntija-artikkelit yhteen. WordPressistä luovuttiin julkisen sivuston toteutuksessa, ja sisältö tuotiin uuteen React-pohjaiseen rakenteeseen. Uudistus yhdisti visuaalisen suunnittelun, frontend-kehityksen ja huolellisen sisältömigraation.