Det har funnits denna oskrivna uppdelning mellan designers och utvecklare så länge vi har skapat webbplatser. Människor som gör saker ser bra ut mot människor som får det att fungera. Dessa dagar är över.
Varje designer behöver lära sig hur utvecklingen fungerar i det digitala landskapet. Och varje utvecklare borde förstå grundläggande designteorier. Här hjälper vi designers att bättre förstå utvecklingsspråk, en viktig färdighet på dagens marknadsplats. (Som en extra bonus skapas alla designexemplen med CSS-ramar.)
Användargränssnitt och design
Ryggraden bakom varje hemsida är en sträng av 1s och 0s. Det är inte väldigt spännande när det gäller design. Men det faktiska gränssnittet och anslutningen med en användare är.
Varje liten detalj innehåller element av design som någon ska involvera med från knappar till navigationselement till blanketter för att titta på en video eller köpa ett par skor. Målet är att skapa något som ser bra ut, engagerar och är lätt att använda. Det är där design och utveckling möts.
Ord du behöver veta:
- Ajax: Användning av asynkron JavaScript och XML skapar en interaktiv upplevelse där ny information kan fylla på användarens slut på en webbplats utan uppdatering. Ett vanligt exempel är den kontinuerliga laddningen av inlägg som en användare rullar genom en Twitter-sida.
- API: Genom att tillhandahålla specifikationer för rutiner, data, objektklasser och variabler, och Application Programming Interface tillåter olika webbplatser eller programvara att prata? till varandra och arbeta tillsammans. Tänk på det som en virtuell uppsättning byggstenar.
- CSS: Cascading Style Sheets är ryggraden i språket som används för att utforma webbplatser och visa HTML-element visuellt.
- Media fråga: Ett CSS-element som skapar specifika regler för vissa enheter när det gäller hur visuella bilder kommer att göra. (Det är den magi som gör samma bild med en ration och beskärning på en stationär plats och på ett annat sätt på en mobil enhet.)
- Responsiv webbdesign (RWD): En webbdesignteknik som använde ett flexibelt nät och bilder, media och text så att en enda webbplats anpassar sig till flera enhetsstorlekar. (Detta är förmodligen en av de enskilt viktigaste faktorerna i webbdesign just nu.)
- UI: Användargränssnittet är allt som användaren ser och interagerar med i en design. Det här kan vara allt från hur de använder webbplatsen och enheten till varje enskilt element på skärmen.
- UX: Användarupplevelsen är vad varje enskild användare tar bort från interaktioner med webbplatsen. Detta tenderar att uttryckas som en känslomässig anslutning och relaterar till uppfattat totalvärde.
Tänk på frågor
? Var och en av dessa interaktioner ska känna sig som en konversation mellan två personer som litar på varandra och förtjänar varandras förtroende.?Varje del av en webbplats frågar användarna att engagera sig eller fortsätta att engagera sig med en annan del av webbplatsen. Oavsett om du spelar ett spel, läser en artikel eller köper en present, leder varje åtgärd dig till något annat. Men hur ska man komma dit?
Det är där frågar frågor kommer in. Om du ställer frågor i designprocessen kan du skapa länkar mellan åtgärder, skapa en mer sömlös design med ett logiskt flöde.
?Bra sagt? av Nicole Fenton och Kate Kiefer Lee är en handbok för att skriva på webben. Det ger också en ram av frågor som arbetar för alla delar av webbdesignerfarandet.
Frågor att fråga längs vägen (plus många fler från bokens resursguide):
- Hur använder folk nu det här innehållet eller funktionen?
- Vem talar här?
- Vilka problem försöker vi lösa?
- Hur tjänar detta innehåll våra mål? Vad är dess syfte?
- Vilka är funktionerna på webbplatsen? Hur uppför sig det?
- Vad är det slutliga formatet?
- Finns det några tekniska begränsningar eller teckenbegränsningar?
Fenton skrev ännu mer om andra frågor som webbplatser? Fråga? hela tiden. Vi pratar om de personliga detaljer som hjälper användarna att relatera till de webbplatser som de interagerar med. ? Var och en av dessa interaktioner borde känna sig som en konversation mellan två personer som litar på varandra och förtjänar varandras förtroende? hon skriver.
Några av dessa frågor är:
- Hur kan vi hjälpa dig?
- Var är du just nu?
- Är du villig att betala för detta?
Svaret på dessa frågor fastställer arten av användargränssnittet och påverkar designen kraftigt. Tänk på det här sättet: Om en användare inte är villig att berätta för sin plats, kommer design och användargränssnitt inte att vara effektivt om det är baserat i geolocation; Designen bör närma sig användaren på ett annat sätt.
Tänk om enkelhet och riktning
När webbplatser kommer samman, tenderar allt att falla någonstans på en karta. Du kan rita kursen från en användarinteraktion till nästa. (Vilket är bra för visuella tänkare.) Tänk på design / utvecklingsprocessen när det gäller A vs B: Vad är nästa steg, A eller B?
Varje element ska ha ett enkelt syfte som är lätt att definiera och beskriva. (Klicka för att spela; klicka för att bläddra.) Om du inte kan förstå det i en mening kanske du vill ompröva designstrategin.
Lär dig koden
Nu när du tänker på saker i en utvecklings metodik måste du gå ut och utveckla vissa kodningsförmågor. Det här är inte att säga att du måste vara en masterkodare, men du borde förstå det tillräckligt för att göra enkla förändringar och samordna med andra designers och utvecklare. (Plus du kan verkligen skapa några coola effekter, som de ovan.)
Personligen började jag med lite HTML med syfte. Jag gjorde en lista över saker jag ville veta hur man gör och lärde dem från insidan ut (dvs.hur man ändrar en färg på ett sidelement med ett HEX-värde i CSS istället för att klicka på en ruta på en färgplockare.) Det finns många verktyg tillgängliga från online-klasser och handledning till personlig träning i ditt område. Allt du behöver göra är att registrera dig och börja.
Fyra bra kodutvecklande resurser:
- Tuts +
- CodeAcademy
- Kodskola
- Khan akademin
Slutsats
Lärande webbutveckling lär inte bara om ramar och kod. Det handlar om tankeprocessen. Designers kan tänka som utvecklare på väg att skapa en framgångsrik webbplats. Du måste bara vara öppen för idén.
Förstå att några av tankprocesserna är likartade - visuellt tänkande och vägning av lösningar och resultat - är en del av något design- eller utvecklingsprojekt. Vi är alla designers / utvecklare på dagens marknad.
Bildkälla: Marjan Krebelj.