Så skapade vi nya trafficlight.se

Webbyrån Trafficlight har lanserat en ny hemsida och här beskriver vi ett axplock av de tekniker och lösningar vi använde för att skapa den.

Så skapade vi nya trafficlight.se

Ny hemsida

Vi på Trafficlight är en webbyrå i Stockholm som arbetar med att skapa nya hemsidor åt våra kunder, men ibland måste vi även förnya vår egen webbplats. Vi kan därför idag stolt presentera vår nya hemsida som bland annat bygger på flera av de tekniker och lösningar vi lärt oss under de senaste två åren sedan vi lanserade vår förra hemsida. Vi passar även på att utöka vår portfolio med några av de projekt vi arbetat med den senaste tiden.

Liksom de andra webbplatser vi skapar bygger trafficlight.se på publiceringsverktyget WordPress och följer moderna tekniker och trender inom webbutveckling som till exempel Responsive Design.

Nedan kommer vi presentera hur vi tänkte och gjorde samt vilka tekniker och verktyg vi använt för att skapa hemsidan.

Syfte

Syftet med vår nya hemsida var främst att professionellt och stilrent visa upp våra webbprojekt för att locka nya kunder till vår webbyrå.

Taktik

För att öka fokus på projekten valde vi att inte ha några färger på vår hemsida förutom i webbprojekten och dessutom göra just dem särskilt stora. Vi valde även att skala bort så mycket vi kunde och använda mycket white space.

Av erfarenhet vet vi att potentiella kunder kontaktar oss även om vi inte slänger upp kontaktformulär överallt på hemsidan – så länge vi kan visa upp tilltalande kundprojekt. Vi nöjde oss därför med att använda en subtil kontaktknapp nere i högra hörnet i sidfoten, som i sin tur leder till ett kontaktformulär.

Inspiration

För inspiration till vår hemsida har vi gått igenom ett antal webbgallerier på internet, som till exempel Awwwards.com. Viss inspiration hämtades även från diverse webbtidningar och magazine inom mode och grafisk formgivning.

Skisser

Att skapa en genomtänkt hemsida kräver oftast en hel del tankearbete och skisser. Endast det bästa brukar vara gott nog för oss och därför använde vi skissblock från Dotgrid.co. I kombination med pennan Staedtler Triplus Fineliner brukar det generera fina skisser.

Efter skisser på papper gjorde vi digitala skisser i PhotoShop.

Typsnitt

Vi har genomgående använt olika varianter av typsnittet Gotham som vi kan visa på hemsidan med hjälp av Font Face.

I vår Trafficlight-logo används sedan tidigare typsnittet Geogrotesque.

Färgskala

Följande färgkoder har använts:

  • ”Svart” – vi använder inte helt svart #000000 då vi anser att det ofta upplevs som för skarpt på datorskärmar. Istället har vi valt en nästan svart i form av #222222 som används i text och som bakgrund i till exempel sidfoten.
  • Mörkgrå – #333333 – används som bakgrund i vissa fält
  • Grå – #787878 – används som brödtext
  • Ljusgrå – #f5f5f5 – används som bakgrund i vissa fält
  • Vit – #ffffff – används som bakgrund i vissa fält samt i text mot mörkare bakgrund

Kodeditor

Vi var länge stora fans av Panics kodeditor Coda. Sedan ett par projekt har vi dock istället valt att använda Sublime Text efter att ha sett och hört hur alla coola kids talat sig varma om kodeditorn.

Vi kodar CSS med Less som vi sedan kompilerar med CodeKit.

För att snabba upp kodningen använder vi oss av Emmet.

CMS

Valet föll inte helt otippat på WordPress – världens största och mest populära publiceringsverktyg.

Tekniker och frameworks

Förutom standard-tekniker som html, css, jquery och php har vi till vår hjälp använt tekniker och lösningar från lite olika håll:

  • Grid från front end-ramverket Foundation samt viss funktionalitet från Bootstrap
  • Slidern bxSlider för portfolio och tweets på startsidan
  • Viss funktionalitet från WordPress-starttemat Roots samt Bones
  • Vektorbaserade ikoner läses in med Font Awesome

WordPress-tillägg

Vi försöker alltid hålla ner antalet plugins men även vi tar hjälp av WordPress-tillägg när det känns motiverat. I projektet med nya trafficlight.se har vi bland annat använt följande plugins:

  • Advance Custom Fields – världens bästa WordPress-plugin enligt oss – gör det möjligt att skräddarsy WordPress admin-del genom att smidigt lägga till egna fält
  • Gravity Forms – bästa formulär-pluginet enligt oss – gör det möjligt att enkelt skapa mer eller mindre avancerade formulär (vi använder formulär på vår kontakt respektive jobb-sida)
  • WordPress SEO – bästa SEO-pluginet enligt oss – hjälper oss att ranka på webbrelaterade söktermer som till exempel ”webbyrå stockholm

Sammanfattning

Det krävs en hel del tid och resurser för att skapa en modern hemsida. Därför är det bra att använda tekniker och lösningar som underlättar.

I detta blogginlägg har vi ytligt beskrivit hur vi skapade vår nya hemsida samt vilka tekniker och lösningar vi använt. Vår förhoppning är att andra WordPress-utvecklare fått tips och inspiration.