før vi starter, har jeg dette ene spørgsmål; Hvad er din prioritet, når du designer et websiteebsted? Er det et attraktivt udseende? Eller de seje effekter?

hvad angår mig, vil jeg gerne prioritere siteebstedets funktionalitet og brugeroplevelse. Interfacet er vigtigt, men funktionaliteten af dit websiteebsted bør bære mere vægt. Du skal levere dine ideer eller dit produkt til brugeren på en ren og logisk måde. Især når du bygger et brand, skal du gøre dit .ebsted ser troværdig.,

men hvordan bygger du et pålideligt websiteebsted?

nøglepunktet falder på designet. Selvom du er en lille, bootstrapped opstart, der bedre være en .ebdesigner til at hjælpe dig med dit websiteebsite design. Selvfølgelig vil det være bedst, hvis webebdesignerne kan samarbejde med udviklere helt fra begyndelsen med et godt online designsamarbejdsværktøj.

det er ikke let at designe en god hjemmeside, der er både smuk og funktionel., Erfarne u. – konsulenter kan hjælpe dig med at analysere din målbrugeradfærd, oprette og implementere effektiv brugergrænseflade-med det ultimative mål at tage dit produkts brugeroplevelse til det næste niveau. Det er det, der får dig til at opnå solide forretningsresultater.

og det er også vigtigt at kende almindelige fejl i webebdesign, og hvordan du kan undgå dem effektivt. Hvis du føler dig forvirret, vil jeg vise dig, hvordan et godt websiteebsted skal se ud ved at præsentere de 10 bedste dårlige badebdesigneksempler.,

forskelle mellem godt og dårligt Webebdesign

trendsebdesigntendenser ændrer sig hele tiden, så designprincipper på nettet er virkelig svære at definere, men der er stadig gyldne regler, der står tidstesten. Jeg har tjekket hundredvis af sitesebsteder og opdaget flere designprincipper., Disse omfatter:

  • En nem at forstå, navigation
  • Korrekt anvendelse af animation
  • Gode farver
  • Ren layout
  • Et visuelt tiltalende interface
  • at Vælge et design, der er relevant for det emne eller tema
  • at Holde design elementer og indhold organiseret

Ovenstående principper er lige et par regler for web design, men de viser tydeligt, at godt webdesign skal være æstetisk tiltalende, let at forstå og let at bruge. Det vil sige, et godt websiteebsted skal give en fremragende brugeroplevelse.,

Top 10 dårlige Examplesebdesigneksempler

Arngren – Design i kaos og rod for manglende gitter

Jeg vil ikke være middel, men det gør virkelig ondt i Mine øjne hver gang jeg ser det. Theebstedet placerer bogstaveligt grafik, indhold og links overalt. Alle elementerne sammen gør siteebstedet til et uforståeligt rod.hvorfor er Arngren et dårligt designet websiteebsted?

1) det største problem er, at siteebstedet ikke bruger et gitter.

2) utroligt navigationsstruktur.3) Dårlig typografi gør det ulæseligt.

4) tilfældig brug af farver.,

et gitter kan gøre alt rent og organiseret på dit websiteebsted. Det holder alle dine elementer på deres rette steder og hjælper dig med at bestemme deres størrelse, størrelse og plads i teksten osv. Med et gitter kan du oprette en konsistent, veldesignet grænseflade.

et godt exampleebdesigneksempel på at bruge nettet i webebdesign – alt er organiseret.

Typesetdesign – designet mangler kontrast

klar og kraftig kontrast mellem elementerne kan hjælpe brugerne med at vide, hvad der er kerneinfo på siden., Det hjælper brugeren til bedre at læse og forstå info. På dette .ebsted er baggrundsfarven og tekstfarven stort set ens, hvilket efterlader en meget svag kontrast. Den dårlige kontrast får teksten til at blive sløret for øjet. Desuden gør den lille skriftstørrelse tekstens læsbarhed ekstremt dårlig.

et godt webebdesign skal sikre, at teksten og billederne er meget læsbare. Faktisk er det ikke svært at forbedre læsbarheden, bare brug alt – farven, rummet og størrelsen for at få dem til at have høj kontrast., For eksempel gør god brug af typografi fremhæver de vigtige oplysninger ved forskellige skriftstørrelser, og kontrasten mellem farverne styrker de visuelle effekter.

godt webebdesign med korrekt kontrast skal se sådan ud:

Theededdinglens – ikke-responsivt design

Du bør altid bruge en responsiv designramme eller vedtage andre bedre løsninger. Din webebside skal køre på mobil glat som det gør på hjemmesiden., På dette .ebsted, når det indlæses på mobiltelefonen, viser det stadig en hel side med en så dårlig grænseflade af plainte .ts. Den har ikke en mobilversion at se, så den kan ikke bruges på telefonen. Jeg vil bare give op på en hjemmeside som denne.

det gode responsiveebdesign – responsivt design.

Pacific Northwest X-Ray Inc – de ubehagelige farveskema

Denne web design er som en blandet farve palet, som indeholder masser af modstridende farver, og tekst, farver, og også blandet med baggrundsfarven., Alle dem gør det vanskeligt for brugerne at læse overhovedet. Navigationen er også ret kompliceret.

et godt webebdesign skal bruge farve korrekt for at skabe en smuk og kortfattet grænseflade og atmosfære. Det skal lette brugerens øje og få brugeren til at fungere uden anstrengelse, som denne:

Mere info om farveskemaet: Sådan bruges farve i UI-Design med omhu for at skabe en perfekt brugergrænseflade?,

Gatesnfences – dårlig navigation og operationer

den største funktion af navigation til en hjemmeside er indlysende. Når en bruger logger på dit websiteebsted, skal han/hun forstå, hvad de kan gøre næste, og hvilke handlinger de skal tage for at nå deres destination. Navigationen skal være iøjnefaldende og bør ofte være øverst på siden. Forsøg ikke at designe navigation som dette .ebsted. Det gør kun brugeren mere forvirret.,

derudover skal navigationsindholdet og interaktionerne også være klare, så brug ikke den vandrette rullepanel eller andet usædvanligt animationsdesign. Hvis du gør det, skal du i det mindste give brugeren nogle tip til at fortælle dem, hvordan dit .ebsted fungerer.

God navigation, web-design skal se ud som dette:

Uat – Dårlig Link og forkert CTA indstillinger

En rod af links og døde links er både store fejl på hjemmesiden. Du bør tjekke dine links manuelt eller bruge værktøjer som Websiteebsite Link Checker ofte.,

Du skal også sørge for funktionaliteten af linkene. Især links i teksten, skal du gøre dem indlysende nok og let at klikke på. For eksempel skal du ikke tilføje en masse tekstlinks i din tekst. Når du gennemser teksten på en lille mobilskærm, vil det være vanskeligt for brugerne at trykke på det rigtige link.

på dette .ebsted er hvert bevægende lille billede faktisk et link. Lad alene det bevæger sig hele tiden, selve teksten er meget vag, så brugeren ikke ved, hvilke oplysninger der vises.

CTA-indstillingerne skal også være klare., Giv ikke brugerne for mange CTA-valg på samme niveau, fordi det vil koste brugeren mere tid til at finde ud af, hvilken de foretrækker at vælge. Se på eksemplet:

for mange CTA ‘ er på samme niveau vil gøre brugeren mere forvirret. Du bør også beholde kun en CTA for at fremhæve nøglepunktet. Følgende er en veldesignet CTA.

Nmg-group – uklart interface billedbaggrund

det billede, du bruger på webebsiden, kan være hoveddøren på dit websiteebsted., Et flot billede Gør dit .ebsted mere smukt og behageligt. Nogle designer bruger endda hele billedet som baggrundsbillede.

på dette .ebsted er designet faktisk meget godt, men når du ser nøje, finder du ud af, at teksten og baggrundsbillederne er for overvældede. Websiteebstedets baggrundsbillede er dækket af andre elementer, så hele grænsefladen er faktisk brudt.

brug af gennemsigtige knapper ville være et bedre valg her. Det vil sige, når du designer knapper på webebsiden, skal du opgive komplekse farver, stilarter og teksturer., I stedet skal du blot skitsere wiireframe og bruge tekst, der kun angiver funktionen. Her er en bedre en.

Waterateronwhheels – inkonsekvent stil

Hvis du vil holde siden glat og kortfattet, skal du ikke bruge for mange elementer af forskellige stilarter. På dette .ebsted bruger tekstområdet kontrastfarver og forskellige skriftstørrelser til at fremhæve Informationen. Men teksten på det andet niveau bruger også et højdepunkt blå farve, som faktisk bryder enhed og afbalanceret hierarkisk grænseflade.,

Enhed er afgørende for den samlede skønhed og flydende i web-interface, se det nedenfor:

Greatdreams – Ikke har nogen white space

hele hjemmesiden ser farverige, kontrast og fremtrædende, og også at det er hensigtsmæssigt at emnet børns juice drink. Men mange for lyse farver er for blandede, og der er slet ingen plads. Det ligner mere et farverigt maleri end et online forretnings websiteebsted. Desuden kombinationen af overdrevne farver gør læsbarheden af teksterne blev meget dårlig., Desuden havde siteebstedet ingen navigation, så du kunne rulle til bunden for at finde relevante oplysninger.

God web-design med hvide rum er enkle og rene:

Ovenstående er nogle lister over dårlige hjemmesider. Men andre mistakesebdesignfejl findes også:

1. Automatisk afspilning af musik (uden at underrette brugeren).

2. Lang side belastning gange. Jo mere tid det tager at indlæse, desto mere sandsynligt vil brugeren forlade dit .ebsted.

3. Webebsiden er for lang., Hvor mange brugere tror du er interesseret i at gå helt ned til bunden af din side? Forsøg ikke at teste brugerens tålmodighed.

3. Udløbne oplysninger. Oplysninger, der ikke opdateres, vil vildlede brugeren og få dit .ebsted til at se uprofessionelt ud.

5. Isoleret side. Brugeren ved ikke, hvordan man vender tilbage til hjemmesiden. Dette giver en dårlig oplevelse.

6. Manglende interaktivt indhold. Hvis du ikke er i stand til at give brugerne mulighed for at udtrykke følelser og ideer, kan dit websiteebsted blive en langsomt dø.,

Prototype Design – første skridt til at starte Webebdesign

det er okay, hvis du er skyldig i nogle af de ovennævnte fejl. Øvelse gør mester, du har bare brug for mere øvelse. Mit forslag er at starte med prototypedesignet.

Du kan bruge det hurtigere og lettere prototypeeb prototype værktøj – Mockplus, til at starte dit Mockebdesign. Mockplus understøtter webeb-projekter. Nu vil jeg vise dig, hvordan du designer Mockebsider i Mockplus.

Trin 1: Åbn Mockplus og opret et Mockebprojekt

På startsiden kan du vælge individuelle projekter eller teamprojekter., Når du har valgt, skal du vælge webebprojektet i pop op-vinduet. Her er du også fri til at indstille websiteebstedets sidestørrelse.

Trin 2: Design frit i Mockplus

Mockplus har mere end 200 højt-udviklede komponenter og mere end 3.000 vektor ikoner, der kan hjælpe dig med at designe hurtigt. Her er et par tip til dig:

1) Teksthierarki: teksten i navigationslinjen, hovedtitel, undertekster og krop skal være anderledes. Du kan bruge Tekstområdekomponenter og indstille tekststørrelsen i Mockplus for at fremhæve teksthierarkiet.,2) Hurtigt design: du kan bruge formatmaler og automatisk Datafyldning til hurtigt at afslutte dit design. Formatet maler kan gøre hele tekster præsenteres i samme format, og Auto data Fill kan automatisk udfylde tekstdata og billeddata.3) egenskabsindstillinger: du kan indstille farve, gennemsigtighed af komponenterne.4) Billedimport: en dedikeret billedkomponent kan importere billeder, du vil have som baggrundsbillede på webebsiden, og du kan også frit designe det.

prøv det selv.,

Online Design – Undgå Dårlig Web-Design & Fejl fra Begyndelsen

for At undgå dårlig web-design og almindelige fejl, der er nævnt ovenfor, er det nødvendigt for designere til at lade udviklere, produktchefer, og andre team-medlemmer, der deltager i website design fra begyndelsen af, og indsamle forslag og feedback fra dem rettidigt.

om dette kan et praktisk online designsamarbejdsværktøj, såsom Mockplus Cloud, være en god start for dig.,

Som website designere, kan du blot importere website design med aktiv detaljer og fra Photoshop/Adobe XD/Skitse(ved hjælp Mockplus Cloud plugins) med et enkelt klik, indsamle feedback og forslag fra andre medlemmer af teamet i tide, og skabe interaktive prototyper til at dele med andre.

Da hjemmesiden front-end udviklere, du kan bare se alle webdesigns og efterlade kommentarer frit, søg duplikerede elementer og farver nemt, og find og download design aktiver hurtigt.,

som produktledere kan du blot kontrollere designprocessen lettere, uploade og forhåndsvise dokumenter frit for at administrere designebstedsdesignprojekter mere glat.samlet set kan Mockplus Cloud effektivt forbinde hele dit produktdesign workorkflo.helt fra begyndelsen og hjælpe dig med at undgå mange websiteebstedsdesignfejl.

for at opsummere

et siteebsteds design skal tjene funktionaliteten på selve websiteebstedet. Det skal også tage højde for skønhed og andre krav., Jeg håber, at ovenstående 9 dårlige examplesebdesigneksempler ville være nyttige for dig og hjælpe dig med at forstå, hvad der er et dårligt webebdesign, og hvordan du undgår dem i fremtiden.