Responsiivinen web-sivusto ja yrityksen visuaalinen identiteetti

Abstract

Opinnäytetyö esittelee websivuston suunnittelun ja toteuttamisen nykyaikaiset kannettavat päätelaitteet huomioiden. Työn toiminnallisena osuutena rakennettiin WordPress-julkaisujärjestelmää käyttäen pienyrityksen valmis sivusto. Toimeksiantajana toimi Huefilm.

Työssä huomattiin verkkopalveluiden ajallisen käytön kannettavilla laitteilla kasvaneen viime vuosina huimasti. Websuunnittelussa on otettava yhä enemmän huomioon aiempaa monipuolisempi laitekanta. Responsiivinen suunnittelu, eli sisällön mukauttaminen eri näyttökokoihin on synnyttänyt myös erilaisia trendejä käyttökokemuksen ja ulkoasun suunnittelussa. Opinnäytetyö käsittelee käytettävyysoppaisiin ja alan ammattilaisten artikkeleihin perustuen myös sitä, miten tehdään oikeita suunnitteluratkaisuja ja mitkä ovat responsiivisuuden haasteet.

Avoimen lähdekoodin työkalut tarjoavat tällä hetkellä lähes kaiken, mitä toimivan julkaisujärjestelmän asentamiseen tarvitaan. Työssä esitellään WordPressin vaatimat perusasiat, jotka perustuvat avoimeen lähdekoodiin: käyttöjärjestelmä, palvelinohjelmisto, tietokanta ja komentosarjakieli. Työssä perustellaan valittu palvelinratkaisu, ja käydään läpi, mitä julkaisujärjestelmän suorittaminen palvelimelta vaatii. Tarjolla on kasvava valikoima välineitä myös responsiivisuuden toteuttamiseen mahdollisimman laadukkaasti ja ongelmitta.

Huefilm-sivuston toteutuksen aikana muodostettiin myös asiakkaan visuaalinen identiteetti verkossa, ja keskityttiin ammattimaiseen visuaaliseen designiin.

This thesis takes a look into the design and development of a website with regard to current mobile web-capable devices. As the operative part of the thesis, a finished site for a small business was built using the WordPress content management system. The project was commissioned by Huefilm.

It was discovered that the time spent using web services via mobile devices had soared in the past years. The larger variety of devices is increasingly important to take into account in web design. Responsive design, where the content conforms to different screen sizes has also produced various trends in the design of user experience and layout. Based on usability guides and articles by industry professionals, the thesis also covers how to make the right choices in design and what are the challenges in responsiveness.

Open source tools provide almost everything that's needed to install a functional publishing platform. The open source -founded basis for WordPress is described: the operating system, the server software, the database and the scripting language. The chosen hosting solution and server requirements are explained. There's a growing selection of tools for achieving responsiveness with professionalism and ease.

During the production of Huefilm's site, the client's online visual identity was also established, with a focus on well-thought-out graphic design.