Förstå de sammansatta delarna av din design

I den här artikeln ska vi titta på en enkel analogi som illustrerar effektiva sätt att kommunicera genom design. När vi har etablerat idén, tar vi en titt på några kända exempel för att köra punkten hemma.

Den analogi vi ska titta på är The Fourier Transform, ett inkräktande matematiskt verktyg som kallas fransmannen Joseph Fourier.

Till att börja med kan det misslyckas att imponera på dig med sina komplexa (och till synes tråkiga) ekvationer. Men, dolt djupt inom dessa ekvationer, är en enkel ide: att någon våg eller tidsbaserad signal kan brytas ner i många andra vågor, som utgör originalet. Med andra ord pekar den på de enskilda ingredienserna som går ut på att göra slutprodukten.

Fourier Transform har applikationer som sträcker sig från kärnmagnetisk resonans (NMR) till MP3-komprimering, men vi kommer att tillämpa det på något mer bekant: design.


Bildkälla: Wikipedia
Joseph Fourier, bild publicerad i det offentliga området av dess författare, Bunzil

Du har till exempel bestämt dig för att skapa en webbplats när du har ett koncept som måste överföras till användarna. Ditt jobb, som webbdesigner, är att skapa en webbsida som bryter denna idé till hanterbara bitar. bitar av bilder, bitar av text eller till och med videor som när de konsumeras av en besökare förmedlar idén i deras sinne.

Tänk på den röda kvadratvågen i bilden ovan som den idé eller det meddelande du vill förmedla via din webbplats. Varje blåvåg, även om de ser helt annorlunda ut när de tas individuellt, bidrar till att skapa den röda vågan på något sätt i kombination med de andra blåa vågorna. Ditt jobb är att räkna ut de "blåa vågorna" (de sammansatta elementen) i ditt huvudmeddelande. Tyvärr, om vi bara hade en formel för det!

I slutändan, om besökaren förstår syftet med din webbplats fullständigt och är övertygad om att använda den, har du lyckats med din roll som designer.


Design att omfamna innehåll, inte skräp

Apples senaste iOS 7, trots att det mottogs med blandat svar om de nya färgerna, estetiken, ikonografi och typografi, är ett positivt steg framåt. Som iPhone-användare hittar jag det senaste mjukvaruutbudet från Apple en mycket mer användbar och trevlig upplevelse än sin föregångare. Jag kan inte tänka mig att gå tillbaka till iOS 6 nu när jag har blivit van vid det nya gränssnittet. Detta hänför sig till mer än bara parallaxeffekter, animationer och annat ögonkock. En av de viktigaste orsakerna till att iOS 7 är så användbar är att det omfattar innehåll snarare än att förpacka det i en skeuomorf hud. Apple kallar detta tillvägagångssätt "Deference".

Betydelse - Användargränssnittet hjälper användarna att förstå och interagera med innehållet, men konkurrerar aldrig med det - IOS Human Interface Guidelines

På den första sidan av designguiden talar en sida vid sida skärmdump av den inbyggda Weather appen som körs i iOS 6 och iOS 7 för sig själv; designen omfattar innehåll. Du behöver inte läsa ett ord för att bli informerad om det aktuella vädret direkt. Varje detalj bör hjälpa till att uttrycka meddelandet.


När du utformar din perfekta webbplats, se till att du tänker två gånger om varje detalj. Varje komponent som gör den klar typografi, färg, bildspråk, varje detalj helt ner till favicon, bör bidra konstruktivt, arbeta tillsammans i perfekt harmoni för att effektivt leverera ditt budskap.

Kontraproduktiva detaljer

Jag har ofta undrat varför vissa webbplatser framträdande placerar en "feedback" -knapp direkt på forsidan. Medan du får feedback på ditt arbete är absolut nödvändigt, ge aldrig intrycket att du är osäker och inte säker. Tänk på det på så sätt: När du handlar, har du någonsin blivit frågan "Vad tycker du om vår butiksljus och färg?" Rätt när du går in i en butik? Sådana detaljer är väsentligen osynliga för oss. Bra butiksljus och butikens övergripande atmosfär behandlas inte medvetet av oss.

Säger att din hjärna kontinuerligt tar emot information från dina ögon och andra sensoriska organ om miljön omkring dig. En bra affärsmiljö skulle definitivt ändra dig om att inte köpa en produkt från dem. Komma tillbaka till ämnet, Feedback länkar ska vara tillgängliga, men undangömt. Gmail gör ett bra jobb i detta:


Fråga dig själv två frågor när du lägger till något på din webbplats:

  • Hjälper detta mina besökare att förstå syftet med min hemsida?
  • Finns det ett bättre sätt att göra det här?

Perfektion uppnås, inte när det inte finns något att lägga till, men när det inte finns något kvar att ta bort

Antoine de Saint - Exupe

Minimalism

Google har alltid varit en mästare av minimalism i design. En ny uppdatering tog bort den mörka toppraden från deras hemsida, eftersom folk kommer till Google.com för att söka, för att inte bli distraherad av andra produkter som Google har att erbjuda. Denna extra stapel har aldrig bidragit till huvudmeddelandet i sökmotorn: sök på webben. I stället är dessa länkar nu snyggt placerade i en rullgardinsmeny, så att intresserade användare kan titta och navigera när det behövs.


GoodUI.org är en utmärkt sammanställning av 32 idéer av Jakub Linowski som hjälper dig att bygga ett bra och användbart användargränssnitt. Det första tipset är att du borde försöka skapa en kolumnlayout snarare än en multikolumnlayout. Motiveringen för detta argument är att du med detta bör kunna vägleda dina läsare på ett mer förutsägbart sätt från början till botten, medan ett flerkolumnätverk innebär en viss risk för att vara distraherande till kärnändamålet med en sida.

Multikolonnlayouter har använts i tryck för åldrar, och de fungerar bra. Ta fallet med The New York Times eller Mashable. Innehållet är en samling artiklar (eller nyhetsartiklar), som alla har en framträdande rubrik. De har inte ett enda kärnmeddelande för sina besökare, snarare en samling information för dem, och deras gränssnitt levererar detta effektivt.

En One Column Layout kommer att vägleda dina läsare på ett förutsägbart sätt, utan att riskera att distrahera dem från den centrala syftet med en sida

GoodUI.org


Bildkälla: Goodui.org

Design att uttrycka bättre

Ta en titt på det här enkla diagrammet, som jag använder för att representera "uttryck":


Den inre cirkeln representerar det du uttrycker för andra och yttercirkeln är meddelandet som du avsikt att uttrycka. Detta gäller inte bara för webbdesign, i själva verket kommer det här konceptet att hjälpa dig att förbättra dina kommunikationsförmåga i allmänhet. När du försöker uttrycka, eller kommunicera en idé till andra, försök ditt bästa för att öka den inre cirkeln. Utvärdera dig själv och försök att sätta dig själv i dina målgruppers skor. Hur mycket av ditt avsedda budskap uttrycker du faktiskt?

Portföljen Calm Digital är ett bra exempel på hur det är möjligt att uttrycka en kärnidé effektivt. I det här fallet är det första du märker ordet "Lugn" skrivet i stora Sans-Serif-bokstäver mot en blå bakgrund. Kontrasten mellan den vita och blå som används är perfekt; inte för mycket och inte för lite, bara lugn nog. Färgen blå är känd för att främja känslor av lugn och ro.


Skaka inte bort från några tillfällen som kan hjälpa dig att uttrycka saker bättre. Internetanslutningar är snabbare än vad de brukade vara, webbläsare är mycket kraftfulla och skickliga och rika tekniker som HTML5, CSS3 etc. ger mer makt än någonsin till webbutvecklare. Borta är de dagar då du var begränsad till att skapa statiska sidor. Skaka inte bort från att använda den senaste uppsättningen verktyg och teknik om det kan hjälpa dig att få ditt meddelande bättre till dina besökare. Jag betonar den senare hälften av den meningen: om det kan hjälpa dig att få ditt meddelande bättre till dina besökare.

För bara några år sedan kunde vi inte tänka oss att placera en helt blåst video som bakgrunden på en webbplats. Men, se och se, det är inte ovanligt att träna idag. Det finns inget bättre sätt att förmedla erfarenheten av att använda en tablett än en video. Detta är precis vad Google gjorde för deras Nexus 7-webbplats. Genom att klicka på en knapp sätter du dig direkt i Nexus-upplevelsen.


Spotify går ett steg längre och spelar automatiskt en video i bakgrunden. Det är fängslande ...


Webbplatsen till formgivaren Fernando Maclen använder en suddig video i bakgrunden som visar honom på jobbet. Hela sidan förblir sant för texten "Superb simplicity".



Slutsats

Låt oss kort springa över vad vi har behandlat i den här artikeln:

  • Fourier-transformen är en enkel men ändå effektiv idé som informerar oss om de enskilda ingredienserna som går ut på att göra en slutprodukt. Den här enkla idén att dela ett huvudmeddelande till små komponenter är vad en webbdesigner ska sträva efter att göra.
  • Design för att omfamna innehåll, inte rodnad. Varje detalj, helt ner till favicon, bör hjälpa till att uttrycka innehållet.
  • Design att uttrycka. Vara inte bort från att gå den extra milen för att uttrycka din idé på ett bättre sätt. Använd det senaste och bästa som tekniken har att erbjuda, om du tror att det kommer att hjälpa dig att uttrycka mer effektivt.

Jag hoppas att du haft denna artikel, tack för att du läste!