Få det perfekte webstedslayout i 27 trin
Side 1 af 2: Website layout: Kom godt i gang og design workflow- Website layout: Kom godt i gang og design workflow
- Website layout: Design tilgang og indpakning
At designe et webstedslayout behøver ikke være svært, især hvis du kender de almindelige fejl at undgå. I dette indlæg løber vi gennem de trin, du skal tage for at nå det perfekte webstedslayout. Vi dækker, hvad hver ny websidebygger skal vide og gøre, inden de starter et nyt projekt, og hvad de skal være opmærksomme på for at undgå at glide op.
Disse trin dækker ikke kun designaspekter, men også generelle tip til workflow. På denne side undersøger vi, hvordan du kommer i gang, og de vigtigste trin i designworkflowet og videre side 2 du finder generelle råd til at nærme dig layout af webstedslayout og tip til at afslutte et projekt. Følg dette råd, så er du snart på vej til at oprette professionelle websidelayouter. Det kan også være en god idé at læse videre Atomic Design , som en måde at strukturere dit websted på.
Leder du stadig efter en vært? Se vores guide til bedste webstedshostingtjenester og bedste hjemmesidebygere lige nu. Og det er ikke dækket her, men glem ikke dine fejlsider! Se på vores valg af bedste 404 sider til inspiration.
Kom godt i gang
01. Definer hvad succes betyder
Før du starter arbejdet, skal du vide, hvad det er, du designer til. Udover beskrivelsen af webstedet skal du vide, hvad forventningerne er til det. Tag et nyhedswebsted for eksempel. Hvad er målet? Er det for at gøre så mange annonceindtryk som muligt, eller er det for at give den bedste læseoplevelse? Hvordan skal disse mål måles?
Gode redesign er ikke nødvendigvis de mest prangende, men dem, der forbedrer ydeevnen over tid. At tale med dine kunder, inden du starter dit design, er nøglen til at definere alt dette. Du er nødt til at lære, hvad deres bekymringer og mål ud over den skriftlige SOW (erklæring om arbejde) er.
02. Forstå det aktuelle sted
Oftere end ikke er en designs deltagelse i et projekt ikke noget, der sker isoleret. Klienter vil ikke altid kontakte dig for at starte noget fra bunden. I de fleste tilfælde bliver du nødt til at forstå det nuværende system, og hvis dit projekt er beregnet til at udfordre det, skal du finde muligheder for at udvikle det eller følge det, som det er.
Indstillingerne er ubegrænsede. At forstå, hvad der er på plads fra et designperspektiv, er nøglen, hvis du skal bevæge dig hurtigt og erkende, hvor mulighederne for innovation er, i modsætning til at skulle udfordre det, der er blevet etableret og komme ud som en, der ikke er i stand til at forstå kravene.
03. Del design med klienter tidligt
Når du foreslår et interaktivt koncept eller et design 'look and feel', skal du sikre dig, at du og klienten begge kommer på samme side hurtigst muligt. Undgå at bruge for meget tid på et koncept, før du deler det med klienten.
Når det oprindelige koncept er godkendt, kan du slappe af lidt og starte produktionen. Men efter at have præsenteret det første koncept, hvis klienten ikke forelsker sig i det, skal du samle nok feedback til at bringe et andet, mere passende koncept til bordet.
Design workflow
04. Tackle layout først
Dette virker meget indlysende, men jeg har fundet for ofte, at designere hopper lige ind i deres arbejde, før de tænker på det problem, de prøver at løse. Design handler om at løse problemer, og disse problemer kan ikke løses gennem gradienter eller skygger, men snarere gennem et godt layout og et klart hierarki.
Tænk over indholdet, layoutet og funktionaliteten. Sørg for, at disse tanker er i tråd med din klients mål, og del dem gerne.
05. Begynd at tegne en ramme på øverste niveau
Når jeg bliver bedt om at skabe et look og føle på et webstedslayout, er det første, jeg gør, at komme med en ramme på øverste niveau, der løser alle designproblemerne. Rammen er brugergrænsefladen, der omgiver indholdet og hjælper brugeren med at udføre handlinger og navigere gennem det. Det inkluderer navigation og komponenter som sidebjælker og nederste bjælker.
Hvis du nærmer dig dit design fra dette perspektiv, vil du have en klar forståelse af, hvad dit layoutbehov vil være, når du designer sektioner ud over hjemmesiden.
06. Tilføj et gitter
Det er så simpelt som det lyder. Før du begynder at designe noget, har du brug for et ordentligt gitter. Der er ingen gyldige undskyldninger for at starte uden et gitter - og hvis du ikke gør det, kan jeg forsikre dig om, at designet ikke ser så godt ud. Et gitter hjælper dig med at strukturere layoutet for de forskellige sektioner; det vil guide dig gennem de specifikke krav til skærmstørrelse og hjælpe dig med at oprette responsive skabeloner, så du er konsistent med hensyn til afstand samt mange andre designproblemer.
For at finde ud af, hvordan du gør dette, skal du kigge på denne vejledning til skabe et gitter, der tilpasser sig alle skærmstørrelser .
07. Vælg din typografi
At udforske forskellige skrifttyper og farver er en del af opdagelsesfasen af et projekt. Generelt vil jeg anbefale ikke at bruge mere end to forskellige skrifttyper på et websted, selvom det virkelig afhænger af dets natur. Vælg en skrifttype, der er let at læse for store klumper af tekst, og vær mere legende med titler og opfordringer til handling. Leder du efter inspiration? Se på vores sammenfatning af perfekt parring af skrifttyper eller liste over gratis skrifttyper . Vær ikke bange for at bruge store skrifttyper, og vær kreativ og konsekvent, når du bruger typografi.
08. Vælg dit farvetema
Under processen med at vælge et sæt skrifttyper, skal du begynde at udforske, hvilke farver du vil bruge i grænsefladen, baggrunde og tekst. Jeg anbefaler et begrænset sæt farver og toner til den generelle brugergrænseflade.
Det er vigtigt at anvende dem konsekvent på tværs af webstedets layout afhængigt af hvert elements funktionalitet. Tænk på layoutet af sider som Facebook, Twitter, Quora og Vimeo. Udover brugergrænsefladen skal der ikke være nogen farvebegrænsning for illustrationer eller grafiske detaljer, så længe de ikke forstyrrer komponenternes funktionalitet.
Hvis du sidder fast, skal du se på vores liste over de bedste farveværktøjer til webdesignere .
09. Forenkle layoutet
Jo enklere strukturen på siden er, jo lettere er det for brugerne at navigere. Hver sektion skal fortælle en historie; det har brug for en grund og et endeligt resultat for brugeren. Layoutet skal hjælpe indholdet med at fremhæve, hvad der er de vigtigste brikker i historien.
I virkeligheden burde der ikke være for mange opfordringer til handling på en side - alt skal køre til den endelige 'Hvad kan jeg gøre her?'
Tænk over det mest enkle layout, du kan forestille dig til et simpelt formål, og begynd at tilføje nødvendige komponenter. I sidste ende vil du blive overrasket over, hvor svært det er at holde det enkelt.
10. Forbedre hver komponent
Behandl hver komponent, som om den kunne blive præsenteret for en designkonkurrence. Hvis du er opmærksom på hver komponent, vil hele være mere end summen af dens dele. Jeg må indrømme, at dette råd ikke er mit. Jeg hørte det hos et tidligere agentur, og jeg blev chokeret over, hvor klar og sand denne erklæring var.
Hver komponent skal designes som om den kunne stå alene som den bedste komponent nogensinde. Nogle gange forlader designere visse dele af et websted indtil sidst på deres to-do-liste og ender med ikke at vise dem megen respekt.
11. Gå klienter gennem dine løsninger
Undgå at gøre store afsløringer af dit arbejde. Et af målene med at kommunikere ofte med klienten er at undgå overraskelser, når du afslører dit arbejde. De gange, hvor jeg har præsenteret mine fremskridt, har jeg fundet det mere nyttigt at tage dem med på en rejse og vise, hvor jeg startede fra, de overvejelser, jeg havde, mens jeg navigerede i den ene eller den anden udfordring, og hvor jeg endelig landede i stedet for bare at vise slutningen af rejsen uden sammenhæng.
Ved at gøre dette vil du opdage, at de enten er enige med dine konklusioner, eller på et eller andet tidspunkt under din gennemgang vil påpege en fejl eller en yderligere variant, som du måske ikke har overvejet. I begge tilfælde vil du have en samtale, og klienten vil føle sig mere investeret, da de er en del af processen.
12. Tænk i bevægelse
Bevægelse er afgørende, når du designer interaktive oplevelser. Intet design kan bedømmes alene eller som en statisk komp. hver komponent er defineret af dets forhold til systemet, og det forhold har brug for bevægelse for at blive formidlet korrekt. Motion kan illustrere dynamiske effekter på indhold eller interaktive tilstande i dit layout. Til det andet formål anbefaler jeg at tage dine designs lidt længere ind i prototyping.
13. Prototype, prototype, prototype
Prototyping er den bedste måde at teste interaktioner og teknologi på. Der er mange prototypeværktøjer der gør det let i dag, og du behøver ikke være en kodende guru for at skabe effektive prototyper. Dette er endnu en måde, du kan få din klient begejstret og ombord med koncepter og ideer, der ellers ville have brug for en masse forklaring.
Næste side: Design tilgang og indpakning
- 1
- to
Nuværende side: Website layout: Kom godt i gang og design workflow
Næste side Website layout: Design tilgang og indpakning
