Internet-sivujen väriteeman kehittäminen yrityksen liiketilaa ja -merkkiä hyödyntäen
Jokela, Simo (2019)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2019121727189
https://urn.fi/URN:NBN:fi:amk-2019121727189
Tiivistelmä
Toimeksiantajana toimii Hiushuone Heidi, joka on Harjavallassa sijaitseva parturi-kampaamo. Yrityksellä ei ole aikaisemmin ollut internet-sivuja. Toimeksiantaja toivoi kehitettävän internet-sivuston perustuvan yhtenäisiin väreihin uuden liiketilan värien kanssa. Liiketilan värit koostuvat pääosin punaisista ja sinisistä tapeteista, sekä mustasta ja valkoisesta. Opinnäytetyön aihe rajattiin näin väriteeman kehitykseen internet-sivustolle.
Tavoitteena oli kehittää nykyaikainen internet-sivusto, josta olisi yksinkertaista löytää tarvittavat tiedot. Yrityksen tietoina ovat esimerkiksi heidän yhteystietonsa, sijaintinsa, sekä aukioloajat ja hinnasto. Nämä toteutettiin minimalistisella suunnittelumallilla, hyödyntäen myös tiettyjä saavutettavuussuunnittelun käytänteitä, kuten ikonien käyttöä. Värien käyttäminen internet-sivustolla pitäisi tukea yksinkertaista tiedonhakua.
Värien soveltaminen internet-sivustolle perustuu värioppiin, sekä web-suunnittelumalleihin. Värioppi luo pohjan värien käyttämiselle, sekä värien erilaisille attribuuteille. Näitä attribuutteja ovat esimerkiksi värien lämpötilat, väriarvot, värisävyt ja kylläisyys. Web-suunnittelumallit puolestaan soveltavat värioppia internet-sivujen toteuttamiseen, esimerkiksi pää- ja korostusvärin valinnassa.
Hiushuone Heidin internet-sivusto toteutettiin WordPress-sisällönhallintajärjestelmällä. Värien puolesta internet-sivusto toteutettiin väripaletilla, joka luotiin Adobe Color -ohjelmistolla. Color loi paletin käyttäjän lähettämästä kuvasta. Pääväriksi valittiin sininen, ja korostusväriksi Material Design -työkalun kirkas punainen. Päävärillä toteutettiin esimerkiksi pääotsikot, ja korostusvärillä ikonit. Taustavärit pidettiin yleisesti vaaleana, jolloin elementtien välillä on suuri kontrasti. Kontrasti onkin yksi tärkeämpiä tekijöitä internet-sivustolla, sillä se auttaa elementtejä erottumaan toisistaan.
Internet-sivuston toteuttamisessa ei ilmaantunut häiriöitä, mutta muutaman osion täyttämistä ei ehditty tähän aikatauluun tehdä. Tämä johtui siitä, että toimeksiantajalla ei kyseisellä hetkellä ollut vielä tarvittavia tietoja. Näiden lisääminen internet-sivustolle on yhtenä jatkotoimenpiteenä. Toisaalta myös aikaisemmin mainitun sähköisen ajanvarauksen lisääminen on mahdollista jatkossa, sekä myös esimerkiksi Instagram-sovelluksen liitäntä. The topic for this paper was received from Hiushuone Heidi, which is a hairdressing salon located in Harjavalta. The original task was to create a website with a time booker feature, but the latter was later dropped due to their customer segment. A closer inspection revealed that a time booker could cause more problems than good. Thus, this paper focused on creating a website with a coherent color scheme with Hiushuone Heidi’s business premises. The premises’ main colors were darker blue and darker red.
The goal was to design and create a modern website, which offers its information in a simple, yet efficient way. In order to achieve this, a minimalistic approach in terms of design was chosen. The color aspect is aimed to assist this efficiency. As mentioned, the colors used will be based on the colors Hiushuone Heidi uses on their premises, so the goal is to also utilize these appropriately.
Color theory and web-design models form the basis for this task. The color theory defines how color should be used, as well as its attributes. These color attributes are hue, brightness, and saturation, although color temperature could also be counted. Web-design models in turn define how and where color should be used in the context of websites.
The content management system WordPress was used to create the website. The colors for this website were made by Adobe Color software, which generated a color palette from an uploaded image. This image contained the blue and red wallpapers from the company’s business premises. The blue was used as a primary color, which was utilized in the headings. The red in turn was used as a highlight color, used in icons to generate visibility. The red used was modified somewhat to be brighter, so it had more contrast, and thus more visibility. A standard white background with a black text was used for the content, but occasionally these were also used in an opposite manner.
Overall the process of creating the website in terms of its layout and color went smoothly. The website was finished and published, although a few content pieces were left out. This was due to scheduling, as Hiushuone Heidi did not yet have all the necessary information needed for the website. In the future it would be beneficial to add these to the website, as they contain relevant information. The missing elements are the price list and pictures of the staff. With the website being finished, Hiushuone Heidi could also implement the time booker feature somewhere in the future.
Tavoitteena oli kehittää nykyaikainen internet-sivusto, josta olisi yksinkertaista löytää tarvittavat tiedot. Yrityksen tietoina ovat esimerkiksi heidän yhteystietonsa, sijaintinsa, sekä aukioloajat ja hinnasto. Nämä toteutettiin minimalistisella suunnittelumallilla, hyödyntäen myös tiettyjä saavutettavuussuunnittelun käytänteitä, kuten ikonien käyttöä. Värien käyttäminen internet-sivustolla pitäisi tukea yksinkertaista tiedonhakua.
Värien soveltaminen internet-sivustolle perustuu värioppiin, sekä web-suunnittelumalleihin. Värioppi luo pohjan värien käyttämiselle, sekä värien erilaisille attribuuteille. Näitä attribuutteja ovat esimerkiksi värien lämpötilat, väriarvot, värisävyt ja kylläisyys. Web-suunnittelumallit puolestaan soveltavat värioppia internet-sivujen toteuttamiseen, esimerkiksi pää- ja korostusvärin valinnassa.
Hiushuone Heidin internet-sivusto toteutettiin WordPress-sisällönhallintajärjestelmällä. Värien puolesta internet-sivusto toteutettiin väripaletilla, joka luotiin Adobe Color -ohjelmistolla. Color loi paletin käyttäjän lähettämästä kuvasta. Pääväriksi valittiin sininen, ja korostusväriksi Material Design -työkalun kirkas punainen. Päävärillä toteutettiin esimerkiksi pääotsikot, ja korostusvärillä ikonit. Taustavärit pidettiin yleisesti vaaleana, jolloin elementtien välillä on suuri kontrasti. Kontrasti onkin yksi tärkeämpiä tekijöitä internet-sivustolla, sillä se auttaa elementtejä erottumaan toisistaan.
Internet-sivuston toteuttamisessa ei ilmaantunut häiriöitä, mutta muutaman osion täyttämistä ei ehditty tähän aikatauluun tehdä. Tämä johtui siitä, että toimeksiantajalla ei kyseisellä hetkellä ollut vielä tarvittavia tietoja. Näiden lisääminen internet-sivustolle on yhtenä jatkotoimenpiteenä. Toisaalta myös aikaisemmin mainitun sähköisen ajanvarauksen lisääminen on mahdollista jatkossa, sekä myös esimerkiksi Instagram-sovelluksen liitäntä.
The goal was to design and create a modern website, which offers its information in a simple, yet efficient way. In order to achieve this, a minimalistic approach in terms of design was chosen. The color aspect is aimed to assist this efficiency. As mentioned, the colors used will be based on the colors Hiushuone Heidi uses on their premises, so the goal is to also utilize these appropriately.
Color theory and web-design models form the basis for this task. The color theory defines how color should be used, as well as its attributes. These color attributes are hue, brightness, and saturation, although color temperature could also be counted. Web-design models in turn define how and where color should be used in the context of websites.
The content management system WordPress was used to create the website. The colors for this website were made by Adobe Color software, which generated a color palette from an uploaded image. This image contained the blue and red wallpapers from the company’s business premises. The blue was used as a primary color, which was utilized in the headings. The red in turn was used as a highlight color, used in icons to generate visibility. The red used was modified somewhat to be brighter, so it had more contrast, and thus more visibility. A standard white background with a black text was used for the content, but occasionally these were also used in an opposite manner.
Overall the process of creating the website in terms of its layout and color went smoothly. The website was finished and published, although a few content pieces were left out. This was due to scheduling, as Hiushuone Heidi did not yet have all the necessary information needed for the website. In the future it would be beneficial to add these to the website, as they contain relevant information. The missing elements are the price list and pictures of the staff. With the website being finished, Hiushuone Heidi could also implement the time booker feature somewhere in the future.