Porteføljenettside laget med ChatGPT og Midjourney

Praktiske bruksområder for morgendagens KI, del én

Vi lager en porteføljenettside med ChatGPT og Midjourney

Tormod Haugland
Tormod Haugland
21. mars 2024

For ordens skyld: Denne artikkelen er skrevet av et menneske, ikke av ChatGPT. Vi forbeholder oss retten til både skrivefeil og tvilsom grammatikk.

I siste halvdel av 2022 kom det en rekke generative KI-modeller som alle kunne prøve. DALL-E 2, Midjourney og Stable Diffusion laget bilder, mens ChatGPT laget tekst. Datamaskiner viste plutselig ferdigheter vi tidligere først og fremst forbandt med kompetente mennesker.

Det manglet heller ikke saker med overskrifter som «Kommer DALL-E til å ta jobben min?» og «Er ChatGPT slutten for Google?». Også The Economist skrev om temaet, og brukte Midjourney til å lage en forside.

Jeg kunne selvsagt brukt enda mer tid på å gruble over hvor raskt jeg selv blir erstattet av neste generasjon KI. I stedet bestemte jeg meg for å gjøre noe litt mer nyttig: bruke teknologien til å lage noe.

Hos Ur Solutions jobber vi med digitale produkter, fra idé og design til utvikling, lansering og drift. Generativ KI kan allerede hjelpe med blant annet SEO-innhold, så lenge du er oppmerksom på hvordan Google vurderer det, overskrifter, tekstutkast og illustrasjoner. Men kan KI forenkle en hel kreativ prosess når vi lager nettsider, webapper og apper?

Sagt på en annen måte: Kan jeg lage noe bedre eller raskere med disse verktøyene enn jeg kunne før? Det er spørsmålet jeg utforsker her og i de neste artiklene i serien.

Oppgaven er enkel: Jeg skal lage en porteføljenettside for en oppdiktet arkitekt som heter Tormod Haugland. Verktøyene er:

  1. Idé og visuell retning: Midjourney
  2. Design: Figma og Photoshop
  3. Utvikling: Next.js med Tailwind CSS
  4. Tekst: ChatGPT
  5. Publisering: Vercel
  6. CMS: Sanity

Da setter vi i gang.

Steg 1: Idéarbeid

Midjourney var på dette tidspunktet en tjeneste som bare kunne brukes gjennom Discord. Du skrev hva slags bilde du ønsket, og fikk bilder basert på beskrivelsen. En forespørsel som «cyberpunk cityscape» kunne for eksempel gi dette:

Fire KI-genererte motiver av en cyberpunk-by

Og «open world RPG adventurer game» kunne gi dette:

Fire KI-genererte motiver til et eventyrspill

Alt du kan beskrive med tekst, kan Midjourney forsøke å gjøre om til bilder. DALL-E og Stable Diffusion fungerer på lignende måter, men bruker andre modeller og treningsdata.

Midjourney gir fire forslag som utgangspunkt. Derfra kan du velge et bilde og jobbe videre med det eller skalere det opp.

Hva skjer hvis vi ber verktøyet lage en nettside? Først prøvde jeg en nettbutikk for bærekraftige interiørprodukter:

KI-genererte nettsideforslag for en interiørbutikk

Deretter en nettside for et spill til barn:

KI-genererte nettsideforslag for et barnespill

Ved første øyekast ser resultatene gode ut. Midjourney har et tydelig blikk for komposisjon, og forslagene inneholder elementer, bilder og farger som kunne vært laget av et profesjonelt team. Teksten gir derimot ingen mening. Verken bokstaver, ord eller typografi tilsvarer noe vi kan bruke direkte. Det er ikke en ferdig nettside, men det er et utgangspunkt.

Så ba jeg Midjourney lage en porteføljenettside for en arkitekt. Forslag nummer to, tre og fire lå nær retningen jeg hadde sett for meg. Jeg valgte nummer to fordi det var enkelt og allerede hadde en tydelig handlingsknapp.

Fire KI-genererte forslag til en arkitektportefølje

Steg 2: Design: 10 minutter inn

Neste steg var å gjøre ideen om til et design som faktisk kunne bygges. I teorien kunne jeg hoppet rett til kode og improvisert underveis. Jeg kjenner mine egne kunstneriske evner godt nok til å vite at det var tryggere å gjenskape forslaget i Figma først.

Jeg la bildet inn i Figma, opprettet en ramme i størrelsen til en 16-tommers MacBook Pro, 1728 × 1117 piksler i Figma, og begynte å bygge opp siden på nytt.

Det vanskeligste var å finne riktig skrifttype, størrelse og farge. Etter litt prøving landet jeg på Raleway til overskriftene og Nunito til brødteksten. Jeg laget også en fargeskala med ni nyanser rundt den brungrå hovedfargen #706868.

Resultatet ble slik:

Porteføljenettsiden gjenskapt som et design i Figma

Bildene er stort sett hentet fra Pexels, mens prosjektnavnene er oppdiktet. Sammenlignet med originalen mistet min versjon litt særpreg: teksten ble flatere, og porteføljebildene hadde ikke de samme fine fargene. Den oppdiktede arkitekten får eventuelt hyre en bedre fotograf eller ta en runde i Lightroom senere.

Ingressen under navnet ble skrevet med ChatGPT. Jeg ba om 350 ord til en arkitektportefølje for «Tormod Haugland, født i 1991», plukket ut de beste delene og satte dem sammen. Helt ærlig hadde jeg tenkt å be om 350 tegn. Kanskje jeg burde delegere selve promptingen til ChatGPT også.

Bildet øverst til venstre manglet en tydelig funksjon. Jeg prøvde å legge en meny der, men droppet det siden jeg uansett ikke skulle bygge flere sider. I stedet gjorde jeg bildet litt lavere for å skille det fra prosjektene:

Justert design av arkitektens porteføljenettside

Godt nok. Videre til utvikling.

Steg 3: Utvikling: én time inn

Selve utviklingen var ganske ordinær: vanlig programmering i Next.js.

Kode fra utviklingen av porteføljenettsiden

Jeg var ikke spesielt kjent med Tailwind CSS og hadde glemt en del av oppsettet for Sanity i Next.js. Omtrent halvparten av tiden gikk derfor til dokumentasjon. Totalt brukte jeg rundt 90 minutter på utviklingen.

Den ferdige siden ligger ganske nær designet. Jeg gjorde noen justeringer for responsivitet og skalering, men de aller største skjermene var fortsatt ikke helt på plass.

Du finner kildekoden på GitHub.

Steg 4: Vercel og Sanity: tre timer inn

Det er enkelt å publisere en Next.js-side med Vercel. Når GitHub-repositoriet er koblet til Vercel, gjenstår i praksis bare et knappetrykk.

Med Sanitys Vercel-integrasjon kunne jeg opprette et nytt Sanity-prosjekt og få de nødvendige miljøvariablene lagt inn i byggeprosessen automatisk.

Siste finpuss

Standardikonet i nettleseren måtte bort. En oppdiktet arkitekt med eget firma trenger dessuten en god logo, så jeg ba Midjourney lage en:

KI-genererte logoforslag til arkitektporteføljen

Forslagene ser fine ut. Teksten gir ingen mening, men den kan enkelt fjernes i Photoshop eller GIMP.

Resultat og konklusjon: fire timer inn

Du kan se den ferdige nettsiden her.

Målet var å undersøke om de nye verktøyene kunne hjelpe meg å lage noe bedre eller raskere enn før. Svaret er ja.

Er dette verdens beste porteføljenettside for en selvstendig arkitekt? Nei. Trenger den mer innhold og flere detaljer? Ja. Ville den skaffet ekte kunder? Kanskje, men sannsynligvis ikke. Er den bedre enn mange WordPress-maler for samme type side? Det mener jeg. Og resultatet er bedre enn det jeg selv kunne laget på like kort tid uten Midjourney og ChatGPT.

Dette oppsummerer nytten av generativ KI ganske godt. Verktøyene lager brukbar tekst og brukbare bilder svært raskt. De passer derfor godt i verktøykassen til utviklere, designere, markedsførere, forfattere og kunstnere, særlig i tidlige idéfaser. Vi kunne allerede se flere steder der de kunne støtte arbeidsprosessene våre.

Samtidig er de ingen snarvei gjennom hele den kreative prosessen. Så snart oppgaven blir mer sammensatt enn å lage noen generiske tekst- eller bildeforslag, trengs mennesker til å vurdere, rette, forbedre og gjennomføre.

ChatGPT husker til en viss grad det du har spurt om tidligere i samtalen. Midjourney gjorde ikke det. Det finnes teknikker som kan gi mer sammenhengende resultater, men jeg klarte ikke å få verktøyet til å designe resten av porteføljen med en konsekvent stil.

Da får jeg gå tilbake til den gamle metoden: å mase på en ekte designer.

Bildetekst i Midjourney: «Annoying CEO pestering his designer colleague about fixing his design, in the style of a manga, colourful --ar 3:2».

Fra idé til et produkt klart for markedet

La oss utforske mulighetene sammen

Kom i gang

Relaterte artikler