OnlineMind - Nyt Firma, Ny Process, Ny Upload

Design 1 May, 2018

Jeg har startet et firma: onlinemind.dk

Ethvert firma skal også have en hjemmeside, det skal jeg selvfølgelig også.

Et problem der opstår hver gang jeg skal lave en side; Hvordan skal det se ud?

Det er det sværeste i processen, at vælge et design og finde en rød tråd i det hele.
I mit tilfælde er den røde tråd dog blå.

Det eneste stikord jeg skrev ned var "Enkelthed" -  Jeg ville ikke bruge unødvendig tid på at skrive koder, men en bare simpelt side, så jeg kunne uploade hurtigt og have et online visitkort.

Men starten på det nye projekt, startede med de samme fejl, som jeg så tit har gjort før:

  • Hente Bootstraps starter template
  • Skrive en forside i HTML/CSS.
  • Finde en grundfarve
  • En passende komplementærfarve
  • Gemme den som final_v01
  • Være utilfreds med designet.
  • Starte et nyt projekt.
  • Hente Bootstraps starter template igen
  • Skrive en ny forside
  • Gemme den som final_v02
  • Finde nye farver
  • Være utilfreds
  • Forfra..

Det ender som regelt med et virvar af mange elementer, koder og farver, der ser godt ud hver for sig, men samlet passer det ikke sammen (Hvilket nok også kommer til udtryk på denne side..) 

Ny Designprocess

Det tager for lang tid. Jeg tog mig en kop varm tålmodighed, greb papir og blyant og tegne en skitse over hvor og hvordan de forskellige elementer skulle placeres.
Nu skulle det så digitaliseres og farven så vælges - Farver og fonter er klart det mest tidskrævende for mig.

Jeg havde hørt at Sketch skulle være et godt værktøj til webdesign. Ind på deres side og hente en prøveversion.
Min skitse på papiret, satte jeg op i Sketch og brugte gråtoner som farver, derved blev jeg ikke forstyrret af andre beslutninger, men tog et skridt af gangen.

 

Nu skulle farve så vælges

Jeg skrev nogle flere stikord ned.
Den skulle også være være; lys, venlig, troværdig, seriøs, personlig, sjov, skille sig lidt ud fra mængden.
Seriøsiteten og troværdigheden ville jeg løse med en blå farve.
Det lyse og venlige ville jeg gøre med en lys farve. Så lyseblå var valget.
Jeg brugte Adobe Color og Paletton til at finde nogle farver, der passede til mig.
Derefter hoppede jeg ind på dribbbles farve inspirations side og kiggede igennem et hav af blå farver og sider.
Her fandt jeg nogle farve skemaer, jeg synes var fede. Tilbage til Adobe Color og Paletton, justere dem så det passede til mit projekt.
Fordi jeg nu brugte Sketch, var det lynhurtigt at lave sine elementer om og få et godt indtryk af hvordan det endelige produkt ville ende med at se ud.

 

Farver på plads - Nu udtryk

Mange sider der tilbyder det samme som jeg, har et meget fast og seriøst udtryk i sig.
Jeg ville gerne skille mig ud ved at have et lidt mere sjovt udtryk i sig.
Da jeg også er en enkeltmandsvirksomhed, ville jeg også være mere personlig ved at vise hvem jeg er igennem mit design og ikke prøve at vise noget, som jeg ikke er.

Så jeg fik ideen med at mit skrivebord skulle være udgangspunkt i de grafikken.

Jeg startede Illustrator op, og begyndte at tegne mit bord. Derefter tog jeg de forskellige ting og brugte som symboler for de forskellige emner, jeg tilbyder.

  1. En graf til SEO
  2. HTML snippet til webudvikling
  3. En bog til tekstforfatning
  4. En kaktus til grafisk design (Hvorfor ikke?)
  5. Et håndtryk til alt andet hjælp, der må være behov for
  6. En kom kaffe til møde.


Jeg havde min mockup i Sketch og prøvede mig lidt frem, hvor de grafiske elementer skulle placeres.

Bruger du et program som Sketch, Photoshop, XD eller andet, så er det meget hurtigere end at finde farven, sætte det ind i CSS, placere billedet forkert, gøre det korrekt, rette det til.
Det lyder måske selvsagt, men som så mange andre har jeg ideen i hovedet og tænker: “Det tager ikke mere end 2 minutter at skrive!”
Men det tager bare længere tid, når du laver det om hele tiden.

Jeg havde nu et udkast, jeg var tilfreds med. Nu til sidste skridt:

Upload

Nu havde jeg brugt en del tid på at designe min side. Den tid ville jeg gerne spare, ved at gøre min kodnings process endnu hurtigere.
Jeg bruger Sublime Text som editor og hentede pluginet Emmet og satte mig hurtigt ind i Sass - Den kombinationen gør at jeg nu skriver min frontend kode hurtigere end hvis Bill Gates havde 20 fingre.

Herefter kodede jeg siden i rent HTML og CSS. Installerede en ny version af Laravel, også var det bare at opsætte min blade templates og uploade til serveren.

Kodning tog ingen tid, da jeg præcist vidste hvordan det skulle se ud og ikke lave det om hele tiden.

Forberedelse var mere end halvdelen af arbejdet, men det betalte sig i sidste ende. For hvert skridt, kunne jeg se at jeg tættere på slutresultatet.

Se det endelige design på onlinemind.dk


Tags:
Mig Webdesign