Share
I det här inlägget kommer jag att visa dig en uppsättning tjugo skärmmockups för ett verkligt världsprojekt som jag har arbetat med - den kommande omformningen och återupplösningen av vårt design- och inspirationsgalleri FaveUp. Jag ska förklara några av varförens och hur det gick in i designen, hur jag använder designmocks för att speka ut en webbapp, liksom några allmänna anteckningar om designen. Den nya sajten som vi kallar Creattica Inspire utvecklas nu av vårt knäcka Melbourne utvecklingsteam och kommer att slå interwebrören som en av våra första utgåvor av 2009.
Detta inlägg är dag 6 i vår webbdesignsession. Creative Sessions "Session Day 5Session Day 7"Creattica Inspire är faktiskt en ombyggnad av en befintlig webbplats som vi kör heter FaveUp som är ett galleri med logotyper, visitkort och webbplatser. För att vara ärlig FaveUp är en webbplats som lyckas trots sig själv. Jag hade det byggt för ett år sedan av en utomstående entreprenör och det är faktiskt inte så bra att lägga ihop - alla som har skickat till webbplatsen vet att det är ganska buggy. Design-wise också, det har några riktiga problem - en konstig "logotyp", ett gränssnitt som går vittigt på några sidor, ett dumt betygssystem som du kan lura dig, och det är kanske värst av allt det är ganska fult. Sammantaget är det vad jag tycker om förtjusande termen "en jätte hög av bum".
Trots detta har webbplatsen några saker som verkar fungera bra på webbplatsen, den främsta är att det har ett riktigt starkt fokus på innehållet. När du rullar ner en sida får du design efter design, och inte mycket annat. Det är enkelt och tydligt, och det räknas mycket för att göra en webbplats användbar. Så här ser den nuvarande FaveUp-webbplatsen ut:
Så vi bygger ganska mycket om systemet från början och importerar allt gammalt innehåll. Den nya sajten kommer att sitta på inspire.creattica.com och kommer att ingå i sviten av kreativa platser och tjänster som vi bygger på Creattica.com. Så för några veckor sedan tänkte jag om att omforma FaveUp och samtidigt designa en utseende för Creattica. Slutresultatet är dessa mockups som jag ska diskutera:
Skärmarna är en uppsättning mockups inbyggda i HTML som är avsedda att representera alla nyckelskärmar på webbplatsen. Utvecklaren på detta projekt Erin samlar dem nu i kodbasen och sedan uppdaterar vi och ändrar den till slutprodukten.
Så vad jag har gjort nedan är att använda denna design som ett sätt att prata om mina egna personliga processer och tankar, knutna till ett verkligt världsprojekt. Jag hoppas att du hittar anteckningarna användbara!
Omformning av en webbplats kan vara en knepig process eftersom du måste ta itu med förväntans vikt, användarnas motstånd att förändra och det allvarliga spöet som du kan göra ett steg bakåt. Enligt min erfarenhet är tricket till en lyckad omdesign att bevara den övergripande känslan av en webbplats och fånga några av kännetecknen för den gamla designen till den nya
Genom att hålla det känner du att det finns en kontinuitet på webbplatsen och användarna känner fortfarande till den nya sajten. Att behålla känslan av en webbplats behöver inte innebära att den nya sajten behöver se likadant ut. Denna övergång från FaveUp till Creattica Inspire är ganska annorlunda! Men det finns ett antal saker som håller det relaterat:
Nu kan du naturligtvis redesigna och helt ändra layouten på sidelementen, eller översyna sidorna på webbplatsen eller flytta till en ny designstil. Men för en lyckad omdesign tror jag att du inte kan göra allt på en gång. Om du ska flytta elementen på sidan runt, borde du hålla designen och se verkligen ut. Om du kommer att helt ändra designen så ska positioneringen vara minst lika stor.
Om du inte håller några saker samma, kommer du att förlora all kontinuitet och det är nästan som att starta en webbplats från början. Det finns tillfällen då detta är nödvändigt (a.k.a. den gamla platsen suger) men i de flesta fall där en webbplats är populär är det bäst att behålla kontinuitet.
Ace UX designer Cennydd Bowles har en intressant artikel om hur användarna reagerar på redesigns, där han nämner de fem stegen i användarreaktionen - förnekelse, ilska, förhandlingar, depression, acceptans.
En webbplats som jag har omformat tre gånger är Psdtuts + själv. Om du tittar på bilden nedan där du kan se alla fyra mönster en efter en kommer du se att det gick så här:
Vid varje steg ändras något ganska väsentligt (förutom kanske det sista steget), men även vissa saker förblev alltid samma. När vi flyttade från den vanliga HTML-sidan till ett WordPress-blogg var färgschemat och designelementen desamma. När vi flyttade från det bruna WordPress-designet till det vita var förblir detsamma - allt detta var det mest kontroversiella steget :-)
När du utformar någon större webbplats måste du spendera lite tid på att tänka på byggnaden, men det är särskilt sant med en redesign. Eftersom vi har en ganska stor dataset för att bevara (alla dessa användarinslag) är det verkligen viktigt att ta reda på hur du ska migrera till den nya designen så enkelt som möjligt.
För FaveUp> Creattica Inspire är en av de stora övervägandena att vi flyttar från att ha en enda bild per design, att ha två en lista och en detaljerad. På den detaljerade sidan kan du se hur jag har hanterat att jag inte har någon stor bild (ett enkelt centrum med en mörk bakgrund gör tricket).
En bra webbdesign ska leda tittarens öga genom skärmen. Detta kan göras eftersom olika element på sidan kan ha en annan visuell prioritet baserat på storlek, form, färg och position. Nedan finns några skärmar där jag har försökt visa vägen jag är hoppas en tittarens öga tar ...
Andy Rutledge har en fantastisk artikel om att leda en tittares öga runt skärmen komplett med fantastiska exempel. Läs det här: Designa en guidad tur.
Att utforma en informationsrik webbplats är väldigt annorlunda än att arbeta på en lätt plats. När det inte finns mycket innehåll kan du gå vild med din design och till viss del låta designen dominera innehållet, och det är OK. Ett bra exempel på en lätt plats är en personlig portfölj där även ett starkt utformat utseende (kolla in den snygga designsjukdomen till exempel) fungerar fortfarande bra och platsen är lätt att komma runt och förstå.
En innehållsrik plats å andra sidan är en annan vattenkokare. Som regel gäller att mer innehåll och information på en sida, desto mer underskattad behöver din design vara. Anledningen till detta är att med en hel del innehåll på en sida kommer en full-design bara att komma i vägen och förvirra betraktaren. Det är svårt att smälta mycket information på en gång och lägga till en mycket tung design till mixen och du riskerar överväldigande människor.
En andra, lika viktig anledning att tona tillbaka den på designen är att hålla fokus på innehållet självt. På Inspire-platsen är tittarna menade att titta på ett galleri med design. Om galleriets utformning verkligen är stiliserad och aggressiv, kommer det att förringa innehållet och försvaga hela webbplatsen. Det är därför som du går till ett konstgalleri du någonsin ser är vanliga vita väggar, kan du tänka dig om de hade garrish tapeter och prydnadsljus överallt?
De ultimata innehållsrika platserna är givetvis nyheter och portaler. Om du tittar på Washington Post, MSN, Yahoo, NYTimes hittar du designen på dem alla hänger sig tillbaka och är ofta relativt enkla.
Även om en informationsrik webbplats inte kräver tunga bilder, är det fortfarande mycket arbete att göra. När du arbetar med denna typ av webbplats måste du lägga mycket mer arbete i att se till att ditt gränssnitt är supert rent och användbart. På Inspire-webbplatsen har jag försökt hålla navigeringen mycket tydlig, utnyttja mycket utrymme och använd lager av svart, rött, grått och vitt för att avgränsa olika delar av gränssnittet.
En sak vi gör mycket hos Envato är att skapa familjer på webbplatser. Vi har TUTS-familjen, marknadsplatserna, och nu arbetar vi på denna Creattica-familjens webbplatser. Detta har gett mig mycket erfarenhet av att skapa mönster som kan återanvändas på flera webbplatser för att skapa ett enhetligt utseende. Här är några saker jag har lärt mig:
När vi lanserade den första Creattica-underplatsen för några månader sedan - Creattica Daily - tänkte jag inte dumt framåt. Istället har jag bara utformat en snygg bloggdesign och lanserat webbplatsen utan att tänka på vad jag skulle göra för de andra sidorna. Tja, som du kan berätta från detta Creattica Inspire-utseende, måste jag börja från början igen. Det gamla utseendet är nu till försäljning på ThemeForest som ett WordPress-tema så det är inte ett totalt avfall, men det lönar sig verkligen att tänka framåt och designa en look som passar flera webbplatser.
För att göra ett enda designarbete på ett fåtal subsites kräver minst ett delbrännningselement. På Creattica och TUTS är det färg, på Marketplaces är det en kombination av färg och logotyp / djurtema. Vad du än väljer, måste det finnas något att skilja på webbplatser när du växlar mellan dem.
Att upprätthålla en familj av webbplatser är mycket arbete, så det är värt att göra det mesta av designen konsekvent. Det betyder inte bara att användarna blir mycket bekanta med webbplatsens känsla, men på en praktisk nivå betyder det också att du inte behöver göra så mycket arbete!
Innan jag påbörjar ett projekt som den här, tar jag alltid tid att surfa. Förutom att göra mitt jobb mycket roligare, har jag i allmänhet två mål i åtanke:
Så vad är inspirationen bakom Creattica Inspire? Det är en liten webbplats som heter CNN! Jag tittade på CNN och hur de hanterar så mycket information och så många underplatser och bestämde mig för att jag ganska gillade två saker om webbplatsen - den övergripande layouten och tanken på vita lådor på en ljusgrå bakgrund.
Ser de två mönsterna ut på samma sätt? Inte riktigt. Kan du se likheten nu när jag har pekat ut det? Förmodligen - speciellt eftersom de båda använder rött! Är det här en dålig sak att göra? Jag är inte säker. Jag tycker att det är ojämnt att låtsas att jag jobbar i vakuum och jag på något sätt uppfinnar nya idéer.
Jag antar att mitt eget tag är att det är okej att ta inspiration från andra designers - i själva verket tycker jag att det är omöjligt att inte. Det är inte okej att raka ut kopiera mönster. Så om du är inspirerad av en annan design är det därför viktigt att ge den en egen spinn och tolkning och låta den utvecklas till den punkt där den har liten likhet.
Vad är din åsikt? Är inspiration OK? När faller det över till immitation? Är mitt exempel för långt eller OK?
Ett projekt som Creattica Inspire är intressant eftersom det innebär mycket mer än att bara bygga en HTML-sida eller till och med skölja en CMS-produkt som WordPress. Den är tillräckligt stor för att involvera vissa utvecklingsproblem, flera åtkomstnivåer och en mängd olika funktioner. Här är några av mina tankar om att arbeta på en webbapp:
På stora projekt som Inspire eller FlashDen är det meningslöst att försöka tänka på varje enskild skärm som är eller någonsin kommer att finnas på webbplatsen. Lita på mig när jag säger att det finns sidor som du någonsin kommer att förbise, eller nya funktioner som ingen tänkt på ännu, det måste arbeta in i designen senare i sitt liv.
En mycket bättre plan är att utforma en flexibel och modulär typstruktur. Inspire-designen görs på ett sådant sätt att en ny sida enkelt kan byggas genom att lägga ihop några av de vita rutorna, lägga till ett nytt menyalternativ eller undermenyobjekt och använda standarddesignelement som mini gallerilistor eller användarkommentarrutor. Det kan behövas lite mer design i framtiden, men det är säkert att skapa en ny sida eller funktion som inte kommer att bryta layouten!
Nästan alla webbprogram kommer att innebära någon form av administration. När det gäller Inspire måste vi kunna godkänna nya mönster, redigera objekt och så vidare. I de gamla dagarna brukade jag alltid utforma ett speciellt administrativt område för funktionalitet som denna - typ av hur WordPress har den WP-Admin dashboard. Även om det i vissa fall är ett administrativt område är en bra idé, är det i många situationer bättre att gå med inlineadministration.
Inlineadministration innebär att man arbetar med extrafunktionalitet i den vanliga frontendesignen som bara visas när användaren är en administratör. Så till exempel på Inspire när en användare är en admin får de ett par extrafunktioner på vanliga sidor. Till exempel kan de söka på webbplatsen som en vanlig person och sedan redigera objekt som de hittar.
Anledningen till inline administration är att föredra här är vi redan bygga en uppsättning sätt att navigera på webbplatsen, som sökning och taggning, samt ett bra sätt att se webbplatsens innehåll, varför varför omforma och bygga om allt det igen i en admin område. Med inlineadministration kan en användare skicka en länk till ett objekt och istället för att återuppliva det i adminområdet du kan redigera direkt på en sida.
På vissa jobb kommer du att fungera som både webbdesigner och projektledare. I mitt fall är det på grund av mitt jobb hos Envato, men även i regelbundet klientarbete kan du vara igång och utveckla ett projekt på uppdrag av din klient. I situationer som dessa måste du sammanfatta ett utvecklare eller utvecklarteam för att faktiskt bygga projektet du arbetar med.
Det finns en mängd olika sätt att sammanfatta och arbeta med en utvecklare på ett projekt. Många av dem beror på projektets storlek och omfattning. För ett litet ish projekt så här är det här jag do:
Dessutom från en webbdesign synvinkel tar dessa 20 skärmar stort sett hänsyn till varje stor typ av layout för webbplatsen.
Jag tenderar att tro att riktiga mönster illustrerar funktionalitet bättre än wireframes - men det är ganska diskutabelt.
Teoretiskt kan du speka ut ett helt projekt med användarscenarier och det finns mycket litteratur inom programvara och webbutveckling om det. Jag rekommenderar att du läser JoelOnSoftwares användargränssnitt för programmerare - även om du är en designer och inte en programmerare!
Poängen med dessa steg är följande:
Så det är min grova process för att informera en utvecklare. Vad gör du? Och om du själv är en utvecklare, är det något jag borde göra bättre?
För en noggrannare behandling av inlärning av en utvecklare kanske du vill kolla Hur man skapar en webbapp på ReadWriteWeb. Du kan också prata med ditt eget utvecklingsteam för att se vad de behöver och vill ha.
Jag tror att webdesign är ett så bra jobb eftersom det finns så många olika aspekter på jobbet. I den här artikeln har jag försökt visa hur ett enskilt webbdesign-jobb kan involvera alla möjliga färdigheter och problem - från designinspiration till att arbeta med utvecklare, från att hålla användarna nöjda i en redesign för att planera hur en webbplats ska administreras. Visst det är utmanande, men det är det som gör det så bra!
När det gäller Creattica Inspire bör vi se det göra sin debut tidigt 2009 (jag kan inte tro att vi är precis runt hörnet!) Och du kommer att höra om lanseringen här på Psdtuts+!
Detta inlägg är dag 6 i vår webbdesignsession. Creative Sessions "Session Day 5Session Day 7"
Accentsconagua