Yrityksen verkkosivuprojektin suunnittelu ja toteutus
Matilainen, Lenni (2025)
2025
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025121737527
https://urn.fi/URN:NBN:fi:amk-2025121737527
Tiivistelmä
Tehtävänä oli suunnitella ja toteuttaa modernit, sekä käyttäjäystävälliset verkkosivut vene- ja pienkoneyritys Pienkonekeskukselle. Toimeksiantajana toimi digitoimisto Trimedia Oy. Yrityksen aiemmat verkkosivut eivät enää vastanneet nykyajan käyttäjien odotuksia, joten tavoitteeksi asetettiin räätälöidyn verkkosivuston luominen, joka esittelee yrityksen palvelut ja tuotteet tehokkaasti, vahvistaa brändiä ja lisää näkyvyyttä verkossa.
Projekti toteutettiin hyödyntäen verkkosivujen tyypillisiä rakennusvaiheita. Alkusuunnittelussa määriteltiin käyttäjäryhmät ja tutkittiin kilpailijoiden sivustoja. UI/UX-suunnittelussa Figma-työkalulla luotiin prototyyppi soveltaen Gestaltin havaitsemisen teoriaa ja Krugin käytettävyysperiaatteita. Tekninen toteutus rakennettiin WordPress-sisällönhallintajärjestelmälle käyttäen Advanced Custom Fields (ACF) Pro -lisäosaa ja Tailwind CSS -kehystä. Luotiin uudelleenkäytettäviä lohkoja, jotka mahdollistivat helpon sisällönhallinnan ilman ohjelmointitaitoja. Sivusto julkaistiin kahdessa vaiheessa kesä-elokuussa 2025, ja toteutettiin SEO-optimointi, saavutettavuuden varmistaminen sekä evästeiden hallinta.
Tuloksena syntyi toimiva, moderni verkkosivusto, joka sisältää selkeän navigaation, yhteydenottolomakkeen, tuotekarusellit ja veneiden esittelysivut. Runsas määrä yhteydenottoja osoitti sivuston onnistuneen ohjaamaan käyttäjiä toivottuun toimintaan. Projekti toteutettiin onnistuneesti ja kaikki asiakkaan toivomat ominaisuudet saatiin valmiiksi. Projektissa opittiin laajasti UI/UX-suunnittelusta, WordPressin kehittämisestä ja asiakasprojektin hallinnasta. The task was to design and implement a modern and user-friendly website for Pienkonekeskus, a boat and small engine company. The client was the digital agency Trimedia Oy. The company's previous web-site no longer met modern users' expectations, so the objective was set to create a customized website that effectively showcases the company's services and products, strengthens the brand, and increases online visibility.
The project was implemented utilizing the typical stages of website development. In the initial planning phase, user groups were defined, and competitor websites were analyzed. In UI/UX design, a prototype was created using Figma, applying Gestalt perception theory and Krug's usability principles. The technical implementation was built on the WordPress content management system using Advanced Custom Fields (ACF) Pro plugin and Tailwind CSS framework. Reusable blocks were created that enabled easy content management without programming skills. The site was launched in two phases during June-August 2025, and SEO optimization, accessibility assurance, and cookie management were implemented.
The result was a functional, modern website that includes clear navigation, a contact form, product carou-sels, and boat presentation pages. A significant number of contacts demonstrated that the site success-fully guided users to the desired action. The project was completed successfully, and all client-requested features were finalized. The project provided extensive learning in UI/UX design, WordPress develop-ment, and client project management.
Projekti toteutettiin hyödyntäen verkkosivujen tyypillisiä rakennusvaiheita. Alkusuunnittelussa määriteltiin käyttäjäryhmät ja tutkittiin kilpailijoiden sivustoja. UI/UX-suunnittelussa Figma-työkalulla luotiin prototyyppi soveltaen Gestaltin havaitsemisen teoriaa ja Krugin käytettävyysperiaatteita. Tekninen toteutus rakennettiin WordPress-sisällönhallintajärjestelmälle käyttäen Advanced Custom Fields (ACF) Pro -lisäosaa ja Tailwind CSS -kehystä. Luotiin uudelleenkäytettäviä lohkoja, jotka mahdollistivat helpon sisällönhallinnan ilman ohjelmointitaitoja. Sivusto julkaistiin kahdessa vaiheessa kesä-elokuussa 2025, ja toteutettiin SEO-optimointi, saavutettavuuden varmistaminen sekä evästeiden hallinta.
Tuloksena syntyi toimiva, moderni verkkosivusto, joka sisältää selkeän navigaation, yhteydenottolomakkeen, tuotekarusellit ja veneiden esittelysivut. Runsas määrä yhteydenottoja osoitti sivuston onnistuneen ohjaamaan käyttäjiä toivottuun toimintaan. Projekti toteutettiin onnistuneesti ja kaikki asiakkaan toivomat ominaisuudet saatiin valmiiksi. Projektissa opittiin laajasti UI/UX-suunnittelusta, WordPressin kehittämisestä ja asiakasprojektin hallinnasta.
The project was implemented utilizing the typical stages of website development. In the initial planning phase, user groups were defined, and competitor websites were analyzed. In UI/UX design, a prototype was created using Figma, applying Gestalt perception theory and Krug's usability principles. The technical implementation was built on the WordPress content management system using Advanced Custom Fields (ACF) Pro plugin and Tailwind CSS framework. Reusable blocks were created that enabled easy content management without programming skills. The site was launched in two phases during June-August 2025, and SEO optimization, accessibility assurance, and cookie management were implemented.
The result was a functional, modern website that includes clear navigation, a contact form, product carou-sels, and boat presentation pages. A significant number of contacts demonstrated that the site success-fully guided users to the desired action. The project was completed successfully, and all client-requested features were finalized. The project provided extensive learning in UI/UX design, WordPress develop-ment, and client project management.