Hem Sociala medier Undviker Web Design Blunders - dummies

Undviker Web Design Blunders - dummies

Innehållsförteckning:

Video: 【5 Watercolor Mistakes】And How To Avoid Them 2025

Video: 【5 Watercolor Mistakes】And How To Avoid Them 2025
Anonim

Kryssa bara på webben - speciellt områden med massor av personliga sidor, som GeoCities-webbplatsen eller AOLs hembyområde - och du kan hitta många exempel på dåligt utformade sidor. Men vad är det som gör dessa sidor dåliga? Av de många konstruktionsfel du kan göra är tre vanliga bland nya webbsidor: långsamma sidor, fula färgkombinationer och liten text.

Långsamma sidor

Detta är nummer 1-banans webbdesign, vare sig det är amatör eller professionellt. Folk tror att de utformar en tidning och kasta stor, okomprimerad grafik runt, flera per sida. Sedan lägger de till söta lilla designelement, som alla måste skickas som en separat fil av webbservern. När var och en av de olika elementen kommer in skiftar siddesignen och shimmiesna på ett sätt som garanterar att det uppstår rörelsesjuka. När en sida av din laddas långsamt beror det vanligtvis på att du begår en av två stora fel.

  • Fel # 1 innebär brist på vård med en eller två individuella grafik. Genom att hålla dessa grafikfiler stora gör du hela sidan för långsam laddning.
  • Fel # 2 är att använda grafik på ett överskådligt sätt i allmänhet. Högdesignade sidor kan ha massor av små grafiska element som orsakar många separata filöverföringar som sidan laddas. Om sidan inte är noggrant utformad, ändras sidan faktiskt lite när varje grafik kommer in. Den övergripande effekten kan vara ganska störande.

Grafik kan inte bara orsaka att sidan laddas långsamt - de tar också lång tid att skapa, tenderar att få upphovsrättsproblem och presentera utmanande design och sidlayoutproblem. Håll användningen av grafik på din sida enkel tills du blir riktigt bra på att designa med grafik, eller tills du kan få hjälp från någon som har den talangen själv.

Gula färgkombinationer

Många webbutgivare bryter inte mycket om de färgkombinationer de använder är attraktiva eller inte. Andra bryr sig, men kan inte kritiskt värdera sitt eget arbete och se hur grymt och / eller svårt att använda resultatet är.

Du kanske förstår att vissa färgkombinationer kan vara fula, men det verkar kanske konstigt att vi säger att dåliga färger kan leda till svåra att använda sidor. Anledningen är att på webben identifierar färg hyperlänkar, oanvända länkar och nyligen använda länkar med olika färger. Standardfärgerna för länkar är blåa för ovisade länkar och lila för besökta länkar. Om du ändrar dessa färger har dina besökare problem med att identifiera vilka länkar de har besökt och vilka länkar de inte har.

Om du helt enkelt måste ändra länkfärgerna, försök använda färgkombinationer som är analoga med de vanliga - en lättare, iögonfallande färg för ovisade länkar och en matt färg för besökta.Detta är åtminstone liknande, konceptuellt, till standardfärgerna. Testa sedan designen på några få personer och se om de snabbt kan ta reda på vilka länkar som.

Nu tillbaka till ful. Bara för att webben gör det möjligt att använda olika färgkombinationer betyder inte att du borde göra det. Svart text på vit eller vitvit bakgrund är vad folk är vana vid och är alltid det säkraste valet. Och med den här kombinationen visas standardlänkfärgen riktigt bra. Du kan använda en grafisk streck på något konsekvent läge på sidan för att ge dina webbsidor ett färgstarkt, grafiskt utseende utan att förorsaka förutsägbarhet och läsbarhet i kroppen på varje sida.

Några andra färgkombinationer fungerar ganska bra, men många gör det inte. Kom ihåg också att vissa användare kör sina bildskärmar i 256-färgsläge och att endast 216 färger från 256 - den webbsäkra färgpalett - är desamma på datorer och Mac-datorer. Så en färgkombination som ser bra ut på ditt system kan se dåligt ut på ett system med färre färger. På samma sätt kan färger som ser bra ut på en dator kanske inte se så varmt ut på en Mac.

Små text (och stor text också)

Ett vanligt misstag folk gör är att använda liten text på sina webbsidor. Små text ser lite snygg ut, och det låter dig packa in mycket information. På grund av dessa frestelser har även stora webbplatser, såsom tidiga versioner av Microsoft-webbplatsen, gjort detta misstag. Problemet är att den lilla texten blir mycket liten text när den ses på en högupplöst skärm. Så liten, faktiskt, att många av de personer som besöker din webbplats kanske inte kan läsa texten på din sida enkelt.

Mindre vanligt, men lika skadligt, är text som är för stor. Du behöver inte designa webbsidor med text som är läsbar från 20 meter bort. Verkligen. (Människor med sanna synproblem byter Windows och / eller deras webbläsare för att visa text i extra stor storlek, så de har ett sätt att läsa text som börjar normal storlek.) Det ser hemskt ut, särskilt när det ses på ett relativt lågt system upplösning, till exempel 800 x 600 upplösning.

Båda dessa problem förvärras av den ökande tendensen att bädda in mycket av en webbplats text i grafiska bilder. Denna text har alltid en konsekvent utseende, eftersom den behandlas av webbläsaren som en grafisk bild, men det kan lätt vara för litet eller stort. När du sparar text som bildfiler kan texten inte ändras av webbläsaren för att rymma olika webbläsarinställningar. Så användaren kan inte fixa några problem som de har med grafiskt visad text.

Så vad är "normalstorlek" text? Glad att du frågade. Det finns inte en exakt normal storlek, men det finns ett normalt intervall. För att hitta den, matcha textstorleken på din webbsida till textstorleken på några webbsidor du vill ha. Fråga sedan flera personer - inte alla yngre och hökögda, eller alla äldre och mindre visuellt akuta - för att berätta om de lätt kan läsa texten medan de sitter bekvämt ett par meter från datorn. Om inte, åtgärda problemet innan det blir en börda för dina besökare på webbplatsen.

Undviker Web Design Blunders - dummies

Redaktörens val

Hur man lägger till bilder från Photoshop Elements 11 Innehållspanel - dummies

Hur man lägger till bilder från Photoshop Elements 11 Innehållspanel - dummies

Om du är " t den konstnärliga typen eller behöver en snabb grafik i en nypa, kolla in Innehållspanelen i Photoshop Elements 11, som delar ett mellanslag med Effektpanelen. Så här lägger du till en grafik från Innehållspanelen: I Photo Editor väljer du Fönster → Grafik i Expertläget. I grafikpanelen, från ...

Lära känna Photoshop Elements 10 Organizer Window - dummies

Lära känna Photoshop Elements 10 Organizer Window - dummies

För att börja använda Photoshop Elements 10, du behöver en övergripande vy av arrangören och de olika paneler som är associerade med den. Här är en glimt av Arrangörs arbetsytan. De olika objekten i arrangören inkluderar följande: Menyrad, A. Menyerna för organiseraren visas i det övre vänstra avsnittet i menyraden. På Windows, ...

Hur man lägger till filer från mappar och flyttbara media till Photoshop Elements 12 - dummies

Hur man lägger till filer från mappar och flyttbara media till Photoshop Elements 12 - dummies

Om du vill redigera foton i Photoshop Elements måste du importera dem till Photoshop Elements Organizer. De flesta har bilder på datorns hårddisk, liksom på flyttbara medier, som cd-skivor eller kanske till och med en USB-flash-enhet. Att lägga till bilder från hårddisken är lätt. Om du har en sådan källa ...

Redaktörens val

Hur man arbetar med egenskapspanelen i Photoshop CS6-dummies

Hur man arbetar med egenskapspanelen i Photoshop CS6-dummies

Adobe axed den kortlivade , fristående maskeringspanel i Photoshop CS6 till förmån för panelen Egenskaper, som nu innehåller funktionerna i maskerna och justeringar. Inga bekymmer, dock. Ingen av de funktioner som tidigare tillhandahållits av panelen Masks förlorades. I den nya panelen Egenskaper kan du lägga till, redigera och hantera ditt lager, ...

Hur man arbetar med försvinnande punkt i Photoshop CS6 - dummies

Hur man arbetar med försvinnande punkt i Photoshop CS6 - dummies

Gör kommandot Vanishing Point i Photoshop CS6 möjlig du ska göra realistiska ändringar i bilder som har perspektivplan. Med Vanishing Point anger du planen i dina bilder och sedan, med hjälp av en rad olika tekniker, lägger du till eller eliminerar objekt på dessa plan. Öppna en bild som behöver redigera. Om du behöver klistra in ...

Gör Freeform Selections i Photoshop CS5 - dummies

Gör Freeform Selections i Photoshop CS5 - dummies

I Photoshop Creative Suites 5, Lasso-verktyget används för att skapa freeform val (val av oregelbunden form). För att använda Lasso-verktyget drar du bara och skapar en sökväg som omger området som ska väljas. Om du inte återgår till startpunkten för att stänga valet innan du släpper musknappen, Photoshop ...

Redaktörens val

Nätverksadministration: Subnet Masks - dummies

Nätverksadministration: Subnet Masks - dummies

För subnetting till arbete måste routern få veta vilken del av värd-ID bör användas för subnätverks-ID. Den här lilla handen är uppnådd genom att använda ett annat 32-bitars nummer, känd som en subnätmask. De IP-adressbitar som representerar nätverks-ID representeras av en 1 i ...

Nätverksadministration: SQL Server Table Creation - dummies

Nätverksadministration: SQL Server Table Creation - dummies

Det viktigaste av de möjliga databasobjekten är tabellerna, vilka innehåller de faktiska data som utgör databasen. En databas är inte särskilt användbar utan minst en tabell. De flesta verkliga databaser har mer än ett bord - faktiskt har många databaser dussintals tabeller. För att skapa ett bord, följ dessa steg: ...

Nätverksadministration: Undernätöversikt - dummies

Nätverksadministration: Undernätöversikt - dummies

Subnetting är en teknik som låter nätverksadministratörer använda 32 bitar tillgängliga i en IP adressera mer effektivt genom att skapa nätverk som inte är begränsade till de vågar som tillhandahålls av klass A, B och C IP-adresser. Med subnetting kan du skapa nätverk med mer realistiska värdgränser. Subnetting ger ett mer flexibelt sätt att ...