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.
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.
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.
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å.
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.
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.
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.
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öljande färgkoder har använts:
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.
Valet föll inte helt otippat på WordPress – världens största och mest populära publiceringsverktyg.
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:
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:
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.