Design jargong är överallt. Och du måste kunna prata språket. Arbetet med digitala projekt har sin egen uppsättning terminologi. Från dither till färgvärden till flytande eller fasta layouter, finns det några villkor som varje designer behöver förstå.
Så vi har gjort det enkelt för dig och sammanställer en lista över digitala designvillkor som du behöver veta. Listan började som topp 10, men vi lade till lite bonusjargong för jämförande ändamål. Hur många av dessa villkor är du redan bekant med?
1. RGB och HEX
Både RGB och HEX avser numeriska färgvärden. Varje färg i ljusspektrum, ja skärmfärg är skapad med ljus, kan göras genom att kombinera tre primära nyanser.
- R = Röd
- G = Grön
- B = Blå
RGB-värden uttrycks med en uppsättning av tre siffror, där varje tal sträcker sig från 0 (ingen användning av en färg) till 255 (fullfärgsvärde). På skärmen görs även svartvitt genom att kombinera dessa värden. Svart använder inget färgvärde för rött, grönt och blått medan vit använder 100 procentvärden för varje.
HEX-värdena använder en något mer komplex formel med bokstäver och siffror. Varje HEX-värde har ett motsvarande RGB-värde. HEX-koder används i HTML för att koda färg till webbplatser. Dessa värden representeras av tre uppsättningar av teckenpar som innehåller både bokstäver och siffror.
HEX-värden börjar alltid med ett # tecken. Det lägsta värdet är 00, medan högsta värdet är FF.
2. Mouseover
En mouseover är ett JavaScript-element som resulterar i en ändring av ett element på skärmen när muspekaren når den.
Dessa förändringar hänför sig ofta till grafiska element som foton. Ofta ser du något enkelt som en hyperlänk, men mouseover-stater kan vara komplexa också. Några mer komplexa mouseover-effekter inkluderar dolda navigeringsmenyer eller ändringar i fotostatus eller rullningslistor.
3. Dither
En process som används i digital ljud- och bildredigering, dither hjälper till att förhindra färgband eller slumpmässigt brus. Processen innehåller faktiskt en komplex matematisk formel som lägger till avsiktligt ljud (visuellt eller ljud).
Denna tillägg av brus kan särskilt påverka hur bilderna ser ut i förhållande till bilder i en begränsad färgpalett. Genom att dithering kan konstruktören skapa en illusion av färg som kanske inte finns där eftersom det med extra ljud kommer pixlar att börja ta på några av färgegenskaperna hos närliggande pixlar.
4. CSS
Cascading Style Sheets är en uppsättning regler som definierar hur sakerna ser på en webbplats, med hjälp av en uppsättning avmodade stilar för HTML-element.
Vanligtvis kallas CSS, dessa definitioner kan spara designers mycket tid, hjälpa sökmotorer att läsa din webbplats och göra det enkelt att sätta ihop en webbplats med konsekventa visuella bilder. Med en enda ändring till CSS kan alla text- eller färgattributen ändras i ett steg.
Det fungerar vara att definiera specifikationer för element som kopia eller rubriker, där en typsnitt, storlek, färg, justering och andra värden tillämpas varje gång motsvarande HTML-tagg används.
5. Metadata och Metataggar
Metadata och metakoder är interrelaterade termer. Metatagreläets metadata. Metadata är information om data - så förvirrande som det låter - specifikt tillhandahåller information om innehållet i ett objekt i en digital fil. De vanligast erkända metadata inkluderar kamerainformationen som du ser på digitala fotofiler.
Metadata används också för att beskriva innehållet på en webbplats för sökmotorer, och denna information läggs till i baksidan av en webbplats med metataggar. Vanliga taggar inkluderar beskrivning av innehållet på en sida, nyckelord, författarinformation, fotoinformation och dag-, tids- och platsfrimärken.
Vill du se metataggar i åtgärd? Google nästan vad som helst. Den korta beskrivningen som kommer upp efter sidnamnet och länken är vanligtvis från beskrivningen? metakod, vilket gör det till ett mycket synligt och viktigt objekt i din digitala designverktygslåda. (Obs! Om du lämnar den taggen tom, kommer sökmotorerna att fylla? Det för dig med den första biten av innehåll på din sida.)
6. Favicon
Den här lilla ikonen - vanligtvis 16 till 16 pixlar - är bilden som ligger längst upp på varje flik i webbläsaren eller i fönstret. Varje webbplats kan ha sitt eget favicon, vilket är kort för favoritikon. Den lilla ikonen kommer också att visas i sökhistorik, bredvid bokmärken och på flikar i webbläsaren och på skrivbordsikonen.
Favicons måste sparas och lagras korrekt för att arbeta på en webbplats. Medan många webbläsare stöder GIF- och PNG-format, föredrar Internet Explorer en ICO-fil.
Du kan skapa ditt eget favikon med hjälp av programvara som Adobe Photoshop eller använda ett onlineverktyg som Favicon Generator.
7. Fixed-Width vs Fluid vs Responsive Layout
Det finns så många villkor som flyter runt dessa dagar som beskriver hur din webbplats fungerar inom en webbläsare eller ett mobilt gränssnitt. Innan du väljer en typ av designkoncept eller galler, överväga fasta, flytande och lyhörd layoutalternativ.
Fast breddlayout: En layout med fast bredd fungerar exakt som namnet antyder. En webbplats är byggd baserat på en uppsättning storleksspecifikationer och den behåller dessa specifikationer, oberoende av enhetens eller webbläsarens storlek. Medan dessa webbplatser kan utformas snabbt kan de vara besvärliga att visa på mindre enheter.
Fluidlayout: Fluidlayouter är byggda med ett system av proportioner i förhållande till design och skärmstorlek för att göra en webbplats. Varje element i designen är tilldelad en procentuell bredd som den avser skärmstorleken. Till exempel kan textens huvudkolumn omfatta 60 procent av skärmen medan sidofältet fyller de återstående 40 procenten. Medan du använde en vätskelayout löst några av problemen i samband med design med fast bredd kan slutresultatet ibland vara svårt att bestämma på baksidan. Fluidlayouter kan fungera bra med olika skrivbordsmiljöer, men tenderar att bli lite klumpiga på små enheter i mobilstorlek.
Responsiv layout: Responsive är den stora trenden i 2013 och tar över hur vi tänker på webbdesign. Eftersom responsiv design anpassar sig till enheten ses den på, lyhörd design fungerar nästan universellt. Varje element är baserat på procentandelar, inklusive bilder och text, och mediefrågor tillåter att lyhörda webbplatser byggs med olika CSS-stilar. Responsiv design är inte bara en mindre bild av en webbplats, den kan faktiskt inkludera en egen anpassad version av hela skrivbordssidan, eftersom element kan vara staplade annorlunda eller inkludera funktioner bara för mobil, t.ex. att knacka på ett telefonnummer på skärmen för att ringa Det. På baksidan kan det ta längre tid att utveckla och designa.
8. Upplösning
När det gäller bilder är upplösning en term som du ofta hör. Och skärmupplösning är särskilt viktigt för att optimera bilder för snabb visning på webben. Upplösningen på en skärm är visningsstorleken på skärmen, till exempel en webbläsare som visar en? Skärm? eller bläddra av en webbplats med 1 366 pixlar breda med 768 pixlar höga.
Upplösningen av en bild mäts på samma sätt. Men du måste också överväga pixlar per tum när du sparar bilder. För bästa möjliga resultat på nätet, spara 72 ppi om inte annat rekommenderas. Bredden och höjden på bilderna ska skalas till den största storleken de kommer att användas online, även om många designers väljer en minsta bredd på 600 pixlar - den optimala storleken för att klämma på Pinterest.
9. UI vs.UX
UI och UX hänvisar till den bakre och främre änden av digital design. Du kan inte ha en utan den andra.
- Användargränssnitt (användargränssnitt) - Är alla komponenter och arbeten som går till att skapa en webbplats. UI gör allt från alla komponenter som används för att bygga en webbdesign till hur varje del fungerar.
- UX (användarupplevelse) - är hur designen fungerar för faktiska användare. Vilken erfarenhet eller känsla eller reaktion skapar slutprodukten? Vad som kan vara svårt är att ett bra användargränssnitt är det som vanligtvis skapar en utmärkt användarupplevelse.
Få en fördjupad lektion om dessa villkor i en tidigare Design Shack-artikel.
10. Skeuomorphism vs Flat
Nästan alla har haft någon typ av erfarenhet med skeuomorphism eller platt design de senaste månaderna tack vare ett stort antal webbplatsdesigners som går? Platt ?.
Skeuomorf design inkluderar element och designtrådar för att få ett användargränssnitt att se eller fungera på ett realistiskt sätt. Från drop skuggor till bevels eller knoppar som? Sväng? med ett musklick eller bläddrar skeuomorphism en känsla av "falsk realism". Det mest kända exemplet på skeuomorf design är Apples iOS-gränssnitt, som innehåller gradienter, texturer och skuggor.
Plattform, å andra sidan, är utan utsmyckning eller? Realism ?. Stilen är super enkel och innehåller inga element som skulle ge den en tredimensionell känsla. Det mest kända exemplet på platt design är Windows-gränssnittet, inklusive Windows Phone, med blockstyling.
Slutsats
Nu när du känner till lingo, gå ut och börja skapa. Glöm inte att kolla in designshackguiden till 10 Print Design Terms du behöver veta så, så att du har en bra förståelse i båda områdena!
Bildkälla: Robert Scoble.