En udviklervejledning til webdesign til ikke-designere

Jeg oprettede mit første websted som et skoleprojekt, da jeg var 14 år. Opgaven var enkel: oprette et meget grundlæggende sted med tekst, billeder og en tabel. Min sædvanlige holdning til skoleprojekter var at glemme dem helt og senere komme med en løsning i sidste øjeblik. Men denne gang gik jeg nød.

Siden mit første websted har jeg altid prioriteret at få ting til at se godt ud. Indrøm det eller ej, folk bedømmer ting baseret på udseende. Hvis det, du laver, ser godt ud, som om du ved, hvad du laver, vil folk stole mere på det. Sådan er tingene.

I årevis med at lave sideprojekter, flyttede jeg mit fokus mere og mere på at udvikle mine designfærdigheder snarere end bare at perfektionere min programmering. Ser du, at være en algoritme, der skriver monstrum, får dig lige så langt. Mens du forfølger drømmen om at starte et rentabelt sideprojekt, bliver du nødt til at udføre mange forskellige job. At være designer er en af ​​dem. Ligesom Cross-fit atleter skal solo-grundlæggere være afrundede for at kunne fungere godt.

Et fremragende design er ikke nødvendigvis det med de mest Dribbble-upvotes. Det er den, du ikke bemærker i første omgang. Det er en perfekt balance mellem "din bedstemor kunne gøre det" og "wow, det er jævligt rart". Design kan være din konkurrencefordel eller neglen i kisten.

Det handler ikke om talent

Da jeg var yngre, spillede jeg en masse Minecraft. Jeg så alle disse fantastiske bygninger folk lavede. Men da jeg lavede noget, så det ud som en kasse. Grimt og uden stil. Hvordan laver du endda noget godt i Minecraft, ikke?

Så jeg fandt en fyr på YouTube og byggede en nøjagtig kopi af det, han byggede. Et par uger senere havde jeg udviklet min egen stil og kunne bygge videre på min egen. Pludselig lignede mine kreationer ikke noget lort. Heck, jeg vandt endda en bygningskonkurrence.

Design er en færdighed, og som enhver anden færdighed kan det læres.

Valg af det rigtige værktøj til jobbet

Ved programmering kan du bruge Notepad og skrive en app, der er så god, som om den var skrevet i en fuldstændig IDE ... selvom dit liv måske er temmelig elendigt at gøre det, og det vil sandsynligvis tage mærkbart længere tid. I verdenen af ​​webdesign ville MS Paint tage rollen som Notepad, og ligesom Notepad er det få, der faktisk vælger at designe med det… håber jeg.

De mest populære designværktøjer til internettet er:

  • Sketch, et kun MacOS-værktøj, der ligner React, ser ud til at være hårdkodet i hver jobfortegnelse. $ 99 / år.
  • Adobe XD, et gratis at bruge, tværplatformatværktøj, der tager rollen som Vue. Det har et mindre samfund, men det er meget let at komme i gang.
  • Adobe Photoshop, den schweiziske kniv til enhver designopgave kendt af alle. Det er taget stedet af ... du gættede det, jQuery. $ 9,99 / mo.

Der er næsten ingen forskel, om du bruger Sublime eller VS-kode til at skrive apps. Eller om du bruger React eller Vue til frontend. Det er bare et spørgsmål om præference. Det samme gælder designværktøjer, da hver enkelt har sine fordele og ulemper.

Jeg bruger Adobe XD. Hovedårsagen til mig er, at det er tværplatform, så jeg holdes ikke som gidsler af Apple-økosystemet. Det er også støttet af Adobe, så det kommer her i et stykke tid. Den bedste ting for nytilkomne er, at Adobe XD siden maj 2018 er gratis at bruge med kun nogle få begrænsninger (som du ikke vil sandsynligvis stubbe over i).

Justering af dit tankesæt

Den største udfordring, der kom til webdesignverdenen for mig, var at tilpasse min tankegang. Jeg var vant til at komme med designet, da jeg kodede webstedet. Alt havde en ordre. Strømmen var fra venstre til højre og fra top til bund. Faktum er, at denne tilgang gør dig til en værre designer.

Designværktøjer er kaotiske, fordi de tvinger dig til at designe, ligesom ethvert element er placeret absolut. Omfavne denne ændring. Det giver dig friheden til at ændre ting hurtigt og gør eksperimenter let. Og det er vigtigt, fordi design er en løbende proces. Det forventes, at du ændrer ting meget, før du får et fantastisk resultat.

Læring af værktøjer

Ved kodning bruger du HTML-elementer som divs, spans og input og lader browseren gengive dem til noget visuelt. Med designværktøjer har du magten til at springe mellemmanden over og bruge visuelle elementer som former og tekst direkte.

Jeg valgte de 4 mest brugte designværktøjer, så du kan bruge mindre tid på at lære og mere tid på at designe. På den måde kan du begynde at øve så hurtigt som muligt. Nedenfor viser jeg dig, hvordan de fungerer, og hvordan du bruger dem.

Rektangelværktøj

Rektangler er den mest universelle form. Du finder dig selv ved at bruge dem hele tiden. Tænk på det som en div. Det er nyttigt til alle slags ting, fra at oprette tekstindgange til containere.

Tekstværktøj (etiket)

Tekstværktøj giver, som titlen antyder, dig at oprette tekst. Det er dog ikke så enkelt, fordi tekstværktøjet har to tilstande: den ene for en enkelt linjetekst og den anden til flere afsnit. Heldigvis er de ekstremt nemme at lære at bruge korrekt.

Den første tilstand er en enkelt linje tekstbeholder, der justerer dens størrelse baseret på tekststørrelse. Det ligner en med undtagelse af, at den ikke går sammen, medmindre du foretager en linjeskift. Fordelen ved denne tilstand er, at den automatisk justerer tekstfeltstørrelsen baseret på linjehøjde og skriftstørrelse.

For at oprette det skal du blot klikke med det valgte tekstværktøj og skrive. Som tommelfingerregel skal du bruge denne tilstand til alt, der ikke har brug for en bestemt bredde, og som er en enkelt linje. F.eks. Overskrift og etiketter på en linje.

Tekstværktøj (afsnit)

Den anden tilstand er en tekstbeholder med en bestemt størrelse, der opfører sig som en

med en bestemt bredde eller

inde i en gitterkolonne. Fordelen ved denne tilstand er, at du kan kontrollere tekstboksens størrelse. For at oprette et afsnit skal du klikke med det valgte tekstværktøj og holde det nede for at oprette et valg. Som tommelfingerregel skal du bruge denne tilstand til afsnit og overskrifter på mere end en linje.

Vælg værktøj

Flyt, ændre størrelse, dupliker. Dette er værktøjet til det. Disse lyserøde linjer viser dig afstanden fra omgivende elementer. De blå linjer hjælper dig med at få elementer til at justere korrekt.

Linieværktøj

Nogle gange er en linje praktisk til at adskille dele af design. Derfor er linieværktøjet her. Man kunne teknisk bruge rektangelværktøjer i stedet, men hej, så div kan bruges til noget.

Designtips og teknikker

Layout

I webudvikling er et layout oftest beskrevet som en header, menu, indhold og sidefod. Det er en del af det, men et layout er mere end det. Det er bogstaveligt talt den måde, alle elementerne er lagt på.

For eksempel, da jeg designede projektinformationen til Sidemail, distribuerede jeg elementer inde i et kort jævnt, så det føles mere komplet og ser renere ud.

farver

For at hjælpe dig med at finde den perfekte farve til dit næste projekt skal du overveje at huske på farvernes psykologi (colorpsychology.org). Et nyttigt værktøj til at finde den perfekte farvekombination baseret på din primære farve er Paletton.

Brug nuancer af primærfarver og tekstfarver til at oprette et visuelt hierarki. Prøv mørkere eller lysere nuancer til din tekst, når du bruger en farvet baggrund.

Typografi

Skrifttype påvirker stort set branding af dit projekt, så vælg med omhu. Premium-skrifttyper ser ofte bedre ud end på Google-skrifttyper, men når du lige er startet, skal du ikke købe en. Selv på Google-skrifttyper er der nogle skjulte perler.

Et trick, som jeg ofte bruger til visuelt at opdele tekst, er at fremstille etiketter med store bogstaver. Tekst med store bogstaver er symmetrisk og ser godt ud fra et visuelt synspunkt, men brug det ikke for meget, fordi det er meget sværere at læse.

Design af en startside (eller en destinationsside)

Jeg prøver altid at undgå fristelsen til at designe trendy elementer og derefter klæbe min besked ind i det. Snarere kommer jeg på fordele (ikke funktioner), sætter dem ind i en historie og fortæller historien ved en visuelt tiltalende side.

Når jeg har konstateret, hvad jeg vil sige, leder jeg normalt efter lidt inspiration. En stor ressource til det er land-book.com, et stort bibliotek med flotte søgesider, som folk kan stemme på. En anden god side med designinspiration er interfaces.pro, hvor du kan filtrere efter kategorier som prissætning, 404 eller om os. Jeg gennemser bare, indtil jeg finder nok websteder, som jeg kan lide, og matcher min ønskede stil.

Den hårde del er at sammensætte det hele. Desværre er der ingen genvej. Du skal bare gentage meget, indtil du får et resultat, du er tilfreds med.

Du kan måske finde dig selv i at undre dig over, om det er normalt, at et design, du var helt tilfreds med for en uge siden, pludselig føles ikke godt nok eller endda grimt i dag. Svaret er, at det er helt normalt og faktisk en god ting. Det er hovedsageligt fordi du vokser, lærer og bliver bedre. Gårsdagens udfordring er ikke så udfordrende i dag. Husk dette, så du ikke sidder fast i en rotte race.

Takeaways:

  • Unikt skrifttype gør en enorm forskel
  • Grafik er meget vigtig, prøv at bruge mindst nogle illustrationer eller billeder
  • Få ret visuel betydning ved at bruge flere farver. Tekst og primærfarver er ikke nok.
  • Brug ikke containere, der er for brede - omkring 1100 px er bredt nok
  • Omfavne det negative rum
  • Tal om fordele, ikke funktioner
  • Se dig omkring for inspiration, hvis du sidder fast

Design af en webapp (eller et dashboard)

Som med at designe en destinationsside, skal du ikke springe lige ind i design. Denne gang forsøger du ikke at fortælle en historie. I stedet er målet brugervenlighed. Grib en pen og papir, og lav en plan for, hvordan din app skal fungere, hvad der skal afhænge af hvad, og hvordan du nemt kan navigere.

Lav eventuelle skitser eller trådrammer om nødvendigt. Foretag en ordentlig inspektion af konkurrentdesign for at se selv, hvad der mangler og kan gøres bedre, eller måske endda forvandlet til en konkurrencefordel. Nogle gange er det bedre at tage en pause, inden man laver planer på papir og designer.

Det bedste råd, jeg kan give, der ikke bruger sagsspecifikke, er at vælge et korrekt sidelayout. Generelt bruger alle webapps to forskellige sidelayouts baseret på appens formål: beholder med fast bredde eller væskebeholder, der udfylder hele skærmen.

Fast container

Jeg foretrækker den faste beholder, fordi det er meget nemmere at fokusere på et tæt område, da det forhindrer unødvendig øjenbevægelse. Apps med faste containere har også en tendens til at være renere og mindre overvældende for nye brugere. På grund af den mindre bredde er faste container-apps imidlertid sværere at designe.

Eksempler: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Flydende beholder

Apps med flydende containere passer godt til chat-apps, regnearks-apps og andre apps, hvor flere ting på en skærm er vigtigt. Men vær opmærksom på, at belastninger af data på en skærm kan blive overvældende.

Eksempler: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

Det er vigtigt at vælge den rigtige beholder, fordi hele din sidelayout afhænger af den, og at ændre den senere er en masse arbejde. Hvert projekt er unikt og kræver unikke løsninger, så vær ikke bange for at eksperimentere!

Takeaways:

  • Hold det simpelt
  • Brug læsbart skrifttype
  • Brug det visuelle hierarki, når du viser masser af data
  • Udnyt konkurrentens dårlige designvalg

Afslutter

Husk, design kan være din konkurrencefordel - så brug det og lav noget fantastisk.

Kick start din designrejse ved at få en Adobe XD-skabelon, jeg lavede til mit nyeste projekts destinationsside. Abonner bare på min splinternye e-mail-liste, og den lander i din postkasse.

Du vil også være den første, der får besked om mit næste indlæg, hvor jeg vil dele 69 dage med fremskridt, jeg har gjort på Sidemail - et SaaS-projekt, jeg arbejder med. Det vil omfatte ting som abonnenttællinger, webstedsbesøg, udgifter og designudkast. Det skal en selvfølge, men jeg garanterer absolut ingen spam. Jeg har ikke engang tid til den crap.

Mine Twitter DM'er er åbne, så hvis du sidder fast ved at lave dine designs eller har nogle yderligere spørgsmål, er du velkommen til at slå mig op.