Share
I dette innlegget skal jeg vise deg et sett med tjue skjermmockups for et ekte verdensprosjekt som jeg har jobbet med - det kommende redesignet og utgivelsen av vårt design- og inspirasjonsgalleri FaveUp. Jeg skal forklare noe av hvorfor og hvordan gikk det inn i designet, hvordan jeg bruker designmocks til å spesifisere en webapp, samt noen generelle notater på designen. Det nye nettstedet som vi ringer til Creattica Inspire, blir nå utviklet av vårt sprekkutviklingssteam i Melbourne og vil slå interweb-rørene som en av våre første utgivelser av 2009.
Dette innlegget er dag 6 i vår webdesignsession. Creative Sessions "Session Day 5Session Day 7"Creattica Inspire er faktisk en gjenoppbygging av et eksisterende nettsted vi kjører kalt FaveUp som er et galleri med logoer, visittkort og nettsteder. For å være ærlig FaveUp er et nettsted som lykkes på tross av seg selv. Jeg hadde det bygget for et år siden av en ekstern entreprenør, og det er egentlig ikke veldig bra satt sammen - alle som har sendt inn på nettstedet, vet at det er ganske buggy. Design-wise også, det har noen virkelige problemer - en merkelig "logo", et grensesnitt som går wonky på noen sider, et dumt vurderingssystem som du kan lure veldig enkelt, og kanskje verst av alt, det er ganske styggt. Alt i alt er det det jeg liker å kose med "en gigantisk bunke av bum".
Ikke desto mindre har nettstedet et par ting som synes å fungere godt på nettstedet, og det viktigste er at det har et veldig sterkt fokus på innholdet. Når du ruller ned en side, får du design etter design, og ikke mye annet. Det er enkelt og klart, og det teller mye for å gjøre et nettsted brukbart. Slik ser dagens FaveUp-side ut:
Så vi bygger ganske mye om systemet fra bunnen av og importerer alt gammelt innhold. Det nye nettstedet vil sitte på inspire.creattica.com og vil være en del av serien av kreative nettsteder og tjenester som vi bygger på Creattica.com. Så for noen uker siden begynte jeg å omforme FaveUp og samtidig designe en titt for Creattica. Sluttresultatet er disse mockups som jeg skal diskutere:
Skjermbildene er et sett med mockups bygget inn i HTML som er ment å representere alle nøkkelskjermer på nettstedet. Utvikleren på dette prosjektet Erin smelter nå inn i kodebase og da oppdaterer vi og endrer det til sluttproduktet.
Så det jeg har gjort nedenfor er å bruke dette designet som en måte å snakke om mine egne personlige prosesser og tanker, knyttet til et virkelige verdensprosjekt. Jeg håper du finner notatene nyttige!
Omforming av et nettsted kan være en vanskelig prosess fordi du må håndtere vekten av forventning, motstanden til brukerne forandrer seg, og det til enhver tid gjeldende spekteret som du kan gjøre et skritt bakover. I min erfaring er tricket til et vellykket redesign å bevare den generelle følelsen av et nettsted og fange noen av kjennetegnene til det gamle designet i den nye
Ved å holde det, føler du at det er kontinuitet på nettstedet, og brukerne er fortsatt kjent med det nye nettstedet. Bevare følelsen av et nettsted trenger ikke å bety at det nye nettstedet må se ut som det samme. Denne overgangen fra FaveUp til Creattica Inspire er ganske annerledes! Men det er en rekke ting som holder det relatert:
Nå kan du selvsagt redesigne og endre layoutet på sideelementer helt, eller overhale nettsidene på nettstedet, eller flytte til en ny stil med design. Men for et vellykket redesign tror jeg at du ikke kan gjøre alt på en gang. Hvis du skal flytte elementene på siden rundt, bør du holde designen og se veldig lik ut. Hvis du kommer til å endre designet helt, så bør plasseringen i det minste forblir mye det samme.
Hvis du ikke holder noen ting det samme, vil du miste all kontinuitet, og det er nesten som å lansere et nettsted fra bunnen av. Det er tider når dette er nødvendig (det vil si det gamle nettstedet sugd), men i de fleste tilfeller der et nettsted er populært, er det best å holde litt kontinuitet.
Ace UX designer Cennydd Bowles har en interessant artikkel om hvordan brukerne reagerer på redesigner, der han nevner de fem stadiene av brukerreaksjonen - fornektelse, sinne, forhandlinger, depresjon, aksept.
Et nettsted som jeg har omformet tre ganger, er Psdtuts + selv. Hvis du ser på bildet nedenfor, der du kan se alle fire designene en etter en, ser du at det gikk slik:
På hvert trinn var noe ganske betydelig (bortsett fra kanskje det siste trinnet), men også noen ting forblir alltid det samme. Da vi flyttet fra vanlig HTML-side til en WordPress-blogg, ble fargevalg og designelementene det samme. Da vi flyttet fra det brune WordPress-designet til den hvite, forblir plasseringen av alt det samme - forresten var dette det mest kontroversielle trinnet :-)
Når du designer et hvilket som helst stort nettsted, må du tilbringe litt tid på å tenke på bygningen, men dette gjelder spesielt med et redesign. Fordi vi har et ganske stort datasett for å bevare (alle disse brukerinnleveringene), er det veldig viktig å finne ut hvordan du skal overføre til det nye designet på så enkelt måte som mulig.
For FaveUp> Creattica Inspire er en av de store overvejelsene at vi beveger oss fra å ha et enkelt bilde per design, å ha to og en liste og en detaljert. På den detaljerte siden kan du se hvordan jeg har jobbet med ikke noe stort bilde (et enkelt senter med en mørk bakgrunn gjør kunsten).
Et godt webdesign burde lede et seers øye gjennom skjermen. Dette kan gjøres fordi ulike elementer på siden kan ha en annen visuell prioritet basert på deres størrelse, form, farge og posisjon. Nedenfor er et par skjermer hvor jeg har forsøkt å vise banen jeg er håper en betrakters øye vil ta ...
Andy Rutledge har en fantastisk artikkel om å veilede en seers øye rundt skjermen, komplett med flotte eksempler. Les det her: Design en guidet tur.
Å designe et informasjonsrikt nettsted er svært forskjellig fra å jobbe på et lettvint nettsted. Når det ikke er mye innhold kan du gå vilt med designen din og til en viss grad la designet dominere innholdet, og det er OK. Et godt eksempel på et lettvektssted er en personlig portefølje der det til og med et tungt designet utseende (se nøyaktig utseende Design Sykdom for eksempel) fortsatt fungerer bra, og siden er lett å komme seg rundt og forstå.
Et innholdsrikt sted derimot er en annen vannkoker. Som regel, jo mer innhold og informasjon på en side, desto mer undervurdert må designet være. Årsaken til dette er at med mye innhold på en side, vil en fullstendig design bare komme i veien og forvirre seeren. Det er vanskelig å fordøye mye informasjon samtidig, og legge til en veldig tung design til blandingen, og du risikerer overveldende mennesker.
En annen, like viktig grunn til å tone den tilbake på designen er å holde fokus på innholdet selv. På Inspire-siden er seere ment å se på et galleri med design. Hvis utformingen av galleriet selv er veldig stilisert og aggresiv, vil det forringe innholdet selv og svekke hele nettstedet. Det er derfor hvis du går til et kunstgalleri alt du noensinne ser er vanlige hvite vegger, kan du forestille deg om de hadde garrish tapet og dekorative lys overalt?
De ultimate innholdsrike nettstedene er selvsagt nyhetsforretninger og portaler. Hvis du ser på Washington Post, MSN, Yahoo, NYTimes finner du designen på dem alle, og det er ofte relativt enkelt..
Selv om et informasjonsrikt nettsted ikke krever tunge visualer, er det fortsatt mye arbeid å gjøre. Når du jobber med denne typen nettsted, må du legge mye mer arbeid i å sørge for at grensesnittet ditt er super rent og brukbart. På Inspire-siden har jeg forsøkt å holde navigasjonen veldig klar, bruk mye plass og bruk lag med svart, rødt, grått og hvitt for å avgrense ulike deler av grensesnittet.
En ting vi gjør mye på Envato, er å lage familier av nettsteder. Vi har TUTS-familien, markedsplassene, og nå jobber vi på denne Creattica-familien av nettsteder. Dette har gitt meg mye erfaring med å lage design som kan gjenbrukes på flere nettsteder for å skape et enhetlig utseende. Her er noen ting jeg har lært:
Da vi lanserte det første Creattica-underlaget for et par måneder siden - Creattica Daily - hadde jeg ikke tåpelig planlagt. I stedet har jeg nettopp designet et pent bloggdesign og lansert nettstedet uten å tenke på hva jeg ville gjøre for de andre nettstedene. Vel som du kan fortelle fra dette Creattica Inspire-utseendet, har jeg begynt å starte på nytt igjen. Det gamle utseendet er nå til salgs på ThemeForest som et WordPress-tema, så det er ikke totalt avfall, men det lønner seg likevel å tenke fremover og utforme et blikk som passer til flere nettsteder.
For å gjøre et enkelt designarbeid på noen få subsites krever minst ett undermerkeelement. På Creattica og TUTS er det farge, på markedsplassene er det en kombinasjon av farge og logo / dyr tema. Uansett hva du velger, må det være noe å skille mellom nettstedene når du bytter mellom dem.
Opprettholde en familie av nettsteder er mye arbeid, så det er verdt å gjøre det meste av designoppholdet konsistent. Dette betyr ikke bare at brukerne blir kjent med nettstedets følelser, men på et praktisk nivå betyr det også at du ikke trenger å gjøre så mye arbeid!
Før jeg starter et prosjekt som dette, tar jeg alltid tid til å surfe. Bortsett fra å gjøre jobben min mye morsommere, har jeg vanligvis to mål:
Så hva er inspirasjonen bak Creattica Inspire? Det er et lite nettsted kalt CNN! Jeg så på CNN og hvordan de klarte så mye informasjon og så mange underordnede steder, og bestemte meg for at jeg likte to ting om nettstedet - det generelle oppsettet og ideen om hvite bokser på en lys grå bakgrunn.
Ser de to designene like ut? Ikke egentlig. Kan du se likheten nå da jeg har pekt ut det? Sannsynligvis - spesielt siden de begge bruker rødt! Er dette en dårlig ting å gjøre? Jeg er ikke sikker. Jeg tror det er uheldig å late som om jeg jobber i vakuum og jeg på en eller annen måte oppfinner nye ideer.
Jeg antar at min egen takk er at det er OK å ta inspirasjon fra andre designere - faktisk tror jeg det er umulig å ikke. Det er ikke greit å kopiere design rett ut. Så følgelig hvis du er inspirert av et annet design, er det viktig å gi det din egen spinn og tolkning og la den utvikle seg til det punktet hvor det har lite likt likhet.
Hva er din mening? Er inspirasjon OK? Når faller det over til immitasjon? Er mitt eksempel for langt eller OK?
Et prosjekt som Creattica Inspire er interessant fordi det innebærer mye mer enn bare å bygge et HTML-nettsted eller til og med å skylle et CMS-produkt som WordPress. Den er stor nok til å involvere noen utviklingsproblemer, flere tilgangsnivåer og en rekke funksjoner. Her er noen av mine tanker om å jobbe med en web-app:
På store prosjekter som Inspire eller FlashDen er det meningsløst å prøve å tenke på hver eneste skjerm som er eller vil være på nettstedet. Stol på meg når jeg sier at det er sider du vil overse, eller nye funksjoner som ingen har tenkt på ennå, må bli innarbeidet senere i livet.
En mye bedre plan er å designe en fleksibel og modulær type struktur. Inspire-designen er gjort på en slik måte at en ny side enkelt kan bygges ved å kaste sammen noen av de hvite boksene, legge til et nytt menyelement eller undermenyelement og bruke standard designelementer som mini gallerioppføringer eller brukerkommentarbokser. Det kan være litt mer design som trengs i fremtiden, men absolutt oppretter en ny side eller funksjon ikke å bryte oppsettet!
Nesten noen web-app vil involvere noen form for administrasjon. Når det gjelder Inspire, må vi kunne godkjenne nye design, redigere elementer og så videre. I gamle dager pleide jeg alltid å designe et spesielt administrasjonsområde for funksjonalitet som dette - som om hvordan WordPress har det WP-Admin dashbordet. Selv om det i noen tilfeller har et administrasjonsområde, er det en god ide, i mange situasjoner er det bedre å gå med inlineadministrasjon.
Inlineadministrasjon betyr at du arbeider med ekstra funksjonalitet i den vanlige frontendesignen som bare vises når brukeren er en administrator. Så for eksempel på Inspire når en bruker er en administrator, får de et par ekstra funksjoner på vanlige sider. For eksempel kan de søke på nettstedet som en vanlig person og deretter redigere elementer de finner.
Grunnen til at inlineadministrasjon er å foretrekke her er at vi allerede bygger et sett med måter å navigere på nettstedet, for eksempel søk og tagging, samt en fin måte å se nettstedets innhold på, så hvorfor redesign og gjenoppbygg alt dette igjen i en admin område. Med inlineadministrasjon kan en bruker sende deg en link til et element, og i stedet for å gjenopprette det i administrasjonsområdet kan du redigere rett på en side.
På noen jobber vil du tjene som både webdesigner og prosjektleder. I mitt tilfelle er det på grunn av jobben min hos Envato, men selv i vanlig klientarbeid, kan du være i drift og utvikle et prosjekt på vegne av din klient. I slike situasjoner må du kortlegge et utvikler- eller utviklerteam for å faktisk bygge prosjektet du arbeider med.
Det finnes en rekke måter å kortlegge og jobbe med en utvikler på et prosjekt. Mange av dem er avhengige av størrelsen og omfanget av et prosjekt. For et lite-ish-prosjekt som dette, er dette hva Jeg gjøre:
I tillegg fra et webdesign-perspektiv, tar disse 20 skjermene hensyn til stort sett alle store typer oppsett for nettstedet.
Jeg har en tendens til å tro at ekte design illustrerer funksjonaliteten bedre enn wireframes - men det er ganske diskutabelt.
Teoretisk kan du spekulere på et helt prosjekt ved hjelp av brukerscenarier, og det er mye litteratur i programvare og webutvikling om det. Jeg anbefaler å lese JoelOnSoftwares brukergrensesnittdesign for programmerere - selv om du er designer og ikke programmerer!
Poenget med disse trinnene er dette:
Så det er min tøffe prosess for å informere en utvikler. Hva gjør du? Og hvis du selv er utvikler, er det noe jeg burde gjøre bedre?
For en grundigere behandling av briefing en utvikler du kanskje liker å sjekke ut Hvordan lage en webapp på ReadWriteWeb. Du kan også snakke med ditt eget utviklingslag for å se hva de trenger og ønsker.
Jeg tror grunnen til at webdesign er en så god jobb, fordi det er så mange forskjellige fasetter til jobben. I denne artikkelen har jeg forsøkt å vise hvordan en enkelt webdesign-jobb kan involvere alle slags ferdigheter og problemer - fra designinspirasjon til å jobbe med utviklere, fra å holde brukerne glade i et redesign for å planlegge hvordan et nettsted skal administreres. Sikker på at det er utfordrende, men det er det som gjør det så bra!
Når det gjelder Creattica Inspire, burde vi se det begynne debut tidlig i 2009 (jeg kan ikke tro at vi er rett rundt hjørnet!) Og du vil høre om lanseringen her på Psdtuts+!
Dette innlegget er dag 6 i vår webdesignsession. Creative Sessions "Session Day 5Session Day 7"
Accentsconagua