Share
In deze post laat ik je een set van twintig schermmodellen zien voor een echt wereldproject waar ik aan heb gewerkt - het aanstaande herontwerp en opnieuw uitbrengen van onze ontwerp- en inspiratiegalerij FaveUp. Ik zal enkele van de waarom's uitleggen en hoe is dat in het ontwerp terechtgekomen, hoe ik ontwerp-spotjes gebruik om een webapp te specificeren, evenals enkele algemene opmerkingen over het ontwerp. De nieuwe site die we Creattica Inspire noemen, wordt nu ontwikkeld door ons developmentteam voor crack in Melbourne en zal de interweb-buizen raken als een van onze eerste releases van 2009.
Dit bericht is dag 6 van onze webdesignsessie. Sessiedag 5 van Creative Sessions op dag 7 "Creattica Inspire is eigenlijk een herbouw van een bestaande site die we FaveUp noemen, een galerij van logo's, visitekaartjes en websites. Om eerlijk te zijn is FaveUp een site die ondanks zichzelf slaagt. Ik heb het een jaar geleden laten bouwen door een externe aannemer en het is niet echt goed in elkaar gezet - iedereen die zich heeft aangemeld bij de site zal weten dat het nogal in de war is. Ook qua design gaat het om een paar echte problemen - een raar "logo", een interface die op sommige pagina's onoverzichtelijk is, een dom beoordelingssysteem dat je heel gemakkelijk voor de gek kunt houden, en misschien nog wel het ergste van allemaal is het behoorlijk lelijk. Al met al is het wat ik graag graag 'een gigantische stapel bedelaar' noem.
Desalniettemin heeft de site een paar dingen die goed op de site lijken te werken, met als belangrijkste dat het een heel sterke focus op de inhoud heeft. Wanneer u naar een pagina bladert, krijgt u ontwerp na ontwerp en niet veel anders. Het is eenvoudig en duidelijk, en dat is van groot belang bij het bruikbaar maken van een site. Zo ziet de huidige FaveUp-site eruit:
Dus we bouwen het systeem vrijwel helemaal opnieuw en importeren alle oude inhoud. De nieuwe site staat op inspire.creattica.com en maakt deel uit van de reeks creatieve sites en services die we op Creattica.com bouwen. Dus enkele weken geleden begon ik met het opnieuw ontwerpen van FaveUp en tegelijkertijd met het ontwerpen van een look voor Creattica. Het eindresultaat zijn deze mockups die ik ga bespreken:
De schermen zijn een set mockups ingebouwd in HTML die alle belangrijke schermen op de site moeten weergeven. De ontwikkelaar van dit project Erin voegt ze nu samen in de codebase en daarna zullen we het updaten en wijzigen in het uiteindelijke product.
Dus wat ik hieronder heb gedaan is om dit ontwerp te gebruiken als een manier om te praten over mijn eigen persoonlijke processen en gedachten, verbonden aan een echt wereldproject. Ik hoop dat je de aantekeningen nuttig vindt!
Het opnieuw ontwerpen van een site kan een lastig proces zijn omdat je te maken hebt met het gewicht van de verwachting, de weerstand van gebruikers om te veranderen en het immer aanwezige spook dat je misschien een stap terug doet. In mijn ervaring is de truc voor een succesvol herontwerp om het algemene gevoel van een site te behouden en enkele van de kenmerken van het oude ontwerp in de nieuwe te vangen
Door dat gevoel te behouden, zorgt u ervoor dat er een continuïteit in de site is en gebruikers zich nog steeds vertrouwd voelen met de nieuwe site. Het behouden van het gevoel van een site hoeft niet te betekenen dat de nieuwe site er echter hetzelfde uit moet zien. Deze overgang van FaveUp naar Creattica Inspire is behoorlijk anders! Er zijn echter een aantal dingen die het gerelateerd houden:
Nu kunt u natuurlijk de lay-out van pagina-elementen opnieuw ontwerpen en volledig wijzigen, of de belangrijkste pagina's van de site reviseren, of naar een nieuwe ontwerpstijl gaan. Maar voor een succesvol herontwerp geloof ik dat je niet alles tegelijk kunt doen. Als u de elementen van de pagina gaat verplaatsen, moet u het ontwerp behouden en er hetzelfde uitzien. Als je het ontwerp volledig gaat veranderen, moet de positionering minstens hetzelfde blijven.
Als je sommige dingen niet hetzelfde houdt, verlies je alle continuïteit en lijkt het bijna alsof je een site helemaal opnieuw opstart. Er zijn momenten dat dit nodig is (maar de oude site is slecht), maar in de meeste gevallen waar een site populair is, kun je het beste wat continuïteit bewaren.
Ace UX ontwerper Cennydd Bowles heeft een interessant artikel over hoe gebruikers reageren op herontwerpen, waarbij hij de vijf stadia van gebruikersreactie noemt - ontkenning, woede, onderhandelen, depressie, acceptatie.
Eén site die ik driemaal opnieuw heb ontworpen is Psdtuts + zelf. Als je de onderstaande afbeelding bekijkt, waar je alle vier de ontwerpen een voor een kunt zien, zie je dat het zo is gegaan:
Bij elke stap veranderde er iets aanzienlijk (behalve misschien de laatste stap), maar evengoed bleven sommige dingen altijd hetzelfde. Toen we van de gewone HTML-site naar een WordPress-blog gingen, bleven het kleurenschema en de ontwerpelementen hetzelfde. Toen we van het bruine WordPress-ontwerp naar het witte ontwerp gingen, bleef de plaatsing van alles hetzelfde - overigens was dit de meest controversiële stap :-)
Wanneer u een belangrijke site ontwerpt, moet u wat tijd besteden aan het nadenken over de build, maar dit geldt met name voor een herontwerp. Omdat we een vrij grote dataset hebben om te bewaren (al die gebruikersinzendingen) is het echt belangrijk om erachter te komen hoe je naar het nieuwe ontwerp gaat migreren op een zo eenvoudig mogelijke manier.
Voor de FaveUp> Creattica Inspire is een van de grote overwegingen dat we van een enkele afbeelding per ontwerp overgaan naar een twee-op-een vermelding en een gedetailleerde. Op de gedetailleerde pagina kun je zien hoe ik heb gewerkt zonder een grote afbeelding te hebben (een eenvoudig centrum met een donkere achtergrond doet het).
Een goed webontwerp moet het oog van een kijker door het scherm leiden. Dit kan worden gedaan omdat verschillende elementen op de pagina een andere visuele prioriteit kunnen hebben op basis van hun grootte, vorm, kleur en positie. Hieronder staan een aantal schermen waarin ik heb geprobeerd het pad dat ik ben te laten zien hoop het oog van een kijker zal duren ...
Andy Rutledge heeft een fantastisch artikel over het begeleiden van een kijker rond het scherm, compleet met geweldige voorbeelden. Lees het hier: Het ontwerpen van een rondleiding.
Het ontwerpen van een site met veel informatie is heel anders dan het werken op een site met een laag gewicht. Wanneer er niet veel inhoud is, kun je helemaal los gaan met je ontwerp en tot op zekere hoogte het ontwerp de inhoud laten domineren, en dat is OK. Een goed voorbeeld van een lichtgewicht site is een persoonlijk portfolio waar zelfs een zwaar ontworpen look (kijk eens naar de nette Design Disease bijvoorbeeld) nog steeds goed werkt en de site gemakkelijk te omzeilen en te begrijpen is..
Een inhoudzware site daarentegen is een andere ketel van vissen. Als algemene regel geldt dat hoe meer inhoud en informatie op een pagina, hoe ingetogener uw ontwerp moet zijn. De reden hiervoor is dat met veel inhoud op een pagina een volledig ontwerp de kijker in de weg zal lopen. Het is moeilijk om veel informatie tegelijk te verwerken en een zeer zwaar ontwerp aan de mix toe te voegen en je riskeert overweldigende mensen.
Een tweede, even belangrijke reden om het terug te schroeven naar het ontwerp, is om de focus op de inhoud zelf te houden. Op de Inspire-site moeten kijkers naar een ontwerpgalerij kijken. Als het ontwerp van de galerij zelf echt gestileerd en agressief is, zal het de inhoud zelf schaden en de hele site verzwakken. Dat is waarom als je naar een kunstgalerie gaat die je alleen maar ziet als witte muren, kun je je voorstellen dat ze overal vies behang en sierverlichting hadden?
De ultieme content-zware sites zijn natuurlijk nieuwtjes en portals. Als je naar Washington Post, MSN, Yahoo, NYTimes kijkt, zie je dat het ontwerp aan elk van hen hangt en is het vaak relatief eenvoudig.
Hoewel een site met veel informatie geen zwaar beeld vereist, moet er nog veel werk worden verzet. Wanneer u aan dit type website werkt, moet u veel meer werk verrichten om ervoor te zorgen dat uw interface superschoon en bruikbaar is. Op de Inspire-site heb ik geprobeerd de navigatie heel duidelijk te houden, veel ruimte in te zetten en lagen zwart, rood, grijs en wit te gebruiken om verschillende delen van de interface af te bakenen.
Een ding dat we veel bij Envato doen, is families van websites maken. We hebben de TUTS-familie, de Marketplaces, en nu werken we aan deze Creattica-familie van sites. Dit heeft me veel ervaring opgeleverd bij het maken van ontwerpen die op meerdere sites kunnen worden hergebruikt om een uniform uiterlijk te creëren. Hier zijn enkele dingen die ik heb geleerd:
Toen we een paar maanden geleden de eerste creattica-subsite lanceerden - Creattica Daily - was ik dom genoeg niet van plan. In plaats daarvan heb ik net een netjes blogontwerp ontworpen en de site gelanceerd zonder na te denken over wat ik zou doen voor de andere sites. Zoals je uit deze Creattica Inspire-look kunt opmaken, moest ik opnieuw beginnen. De oude look is nu te koop op ThemeForest als een WordPress-thema, dus het is geen totale verspilling, maar het loont toch echt om vooruit te denken en een look te ontwerpen die bij meerdere sites past..
Voor het maken van een ontwerp op een paar subsites is minimaal één submerk vereist. Op Creattica en TUTS is het kleur, op de Marketplaces is het een combinatie van kleur en logo / dierenthema. Wat je ook kiest, er moet iets zijn om de sites te onderscheiden als je ertussen schakelt.
Het onderhouden van een familie van sites is een hoop werk, dus het loont de moeite om het grootste deel van het ontwerp consistent te houden. Dit betekent niet alleen dat gebruikers heel goed vertrouwd raken met het gevoel van de sites, maar op praktisch niveau betekent dit ook dat u niet zoveel werk hoeft te doen!
Voordat ik aan een project als dit begin, neem ik altijd wat tijd om te gaan surfen. Afgezien van het veel leuker maken van mijn werk, heb ik in het algemeen twee doelen voor ogen:
Dus wat is de inspiratie achter Creattica Inspire? Het is een kleine site genaamd CNN! Ik keek naar CNN en hoe ze zo'n grote hoeveelheid informatie en zoveel subsites beheren, en besloot dat ik heel graag twee dingen leuk vond aan de site: de algemene lay-out en het idee van witte vakken op een lichtgrijze achtergrond.
Zien de twee ontwerpen er hetzelfde uit? Niet echt. Zie je nu de overeenkomst dat ik het heb aangegeven? Waarschijnlijk - vooral omdat ze beide rood gebruiken! Is dit een slechte zaak om te doen? Ik weet het niet zeker. Ik vind het oneerlijk om te doen alsof ik in een vacuüm werk en op de een of andere manier nieuwe ideeën verzin.
Ik neem aan dat het mijn eigen mening is dat het goed is om inspiratie op te doen van andere ontwerpers - ik denk zelfs dat het onmogelijk is om dat niet te doen. Het is niet OK om kopieën van kopieën te maken. Dus als je dus geïnspireerd bent door een ander ontwerp, is het essentieel om het je eigen draai en interpretatie te geven en het te laten ontwikkelen tot het punt waar het weinig overeenkomst vertoont.
Wat is jouw mening? Is inspiratie OK? Wanneer valt het over in immitatie? Is mijn voorbeeld te ver of OK??
Een project als Creattica Inspire is interessant omdat het veel meer inhoudt dan alleen het bouwen van een HTML-site of zelfs het villen van een CMS-product zoals WordPress. Het is groot genoeg om een aantal ontwikkelingsproblemen, meerdere toegangsniveaus en een verscheidenheid aan functies met zich mee te brengen. Hier zijn enkele van mijn gedachten over het werken aan een web-app:
Bij grote projecten zoals Inspire of FlashDen is het zinloos om te denken aan elk afzonderlijk scherm dat op de site staat of zal staan. Vertrouw me als ik zeg dat er pagina's zijn die je op de een of andere manier over het hoofd ziet, of nieuwe functies waarvan nog niemand heeft gedacht dat die later in zijn leven in het ontwerp moet worden verwerkt.
Een veel beter plan is om een flexibele en modulaire structuur te ontwerpen. Het Inspire-ontwerp is zo gemaakt dat een nieuwe pagina eenvoudig kan worden samengesteld door een paar van die witte vakken bij elkaar te gooien, een nieuw menu-item of submenu-item toe te voegen en standaardontwerpelementen zoals minigalerieoverzichten of commentaarboxen te gebruiken. In de toekomst kan er nog meer ontwerp nodig zijn, maar het maken van een nieuwe pagina of functie zal de lay-out niet breken!
Bijna elke web-app heeft een soort administratie. In het geval van Inspire moeten we nieuwe ontwerpen kunnen goedkeuren, items kunnen bewerken enzovoort. Vroeger was ik altijd bezig met het ontwerpen van een speciaal admin-gebied voor functionaliteit zoals dit - een beetje zoals hoe WordPress dat WP-Admin-dashboard heeft. Hoewel in sommige gevallen het hebben van een admin-gebied een goed idee is, is het in veel situaties beter om inline-administratie te volgen.
Inline-administratie betekent werken met extra functionaliteit in het reguliere front-end ontwerp dat alleen verschijnt als de gebruiker een beheerder is. Dus bijvoorbeeld op Inspire wanneer een gebruiker een admin is, krijgen ze een paar extra functies op gewone pagina's. Ze kunnen bijvoorbeeld de site doorzoeken als een gewoon persoon en vervolgens de items bewerken die ze vinden.
De reden dat inline-administratie de voorkeur heeft, is dat we al een aantal manieren hebben ontwikkeld om door de site te navigeren, zoals zoeken en taggen, en een geweldige manier om de inhoud van de site te bekijken, dus waarom opnieuw ontwerpen en opnieuw opbouwen in een admin Gebied. Met inline-beheer kan een gebruiker u een link naar een item sturen en hoeft deze niet opnieuw op te laden in het beheerdersgedeelte dat u direct op een pagina kunt bewerken.
In sommige functies fungeert u als webontwerper en projectmanager. In mijn geval is het vanwege mijn baan bij Envato, maar zelfs bij regulier werk van klanten kun je een opdracht geven en een project ontwikkelen namens je klant. In dergelijke situaties moet je een ontwikkelaar of ontwikkelaarsteam informeren om het project waaraan je werkt daadwerkelijk te bouwen.
Er zijn verschillende manieren om een ontwikkelaar te informeren en met een project te werken. Veel van hen zijn afhankelijk van de grootte en de reikwijdte van een project. Voor een klein project als dit is dit wat ik do:
Bovendien houden deze 20 schermen vanuit het oogpunt van webontwerp vrijwel elk hoofdtype layout voor de site in aanmerking.
Ik heb de neiging om te denken dat echte ontwerpen de functionaliteit beter illustreren dan wireframes - maar dat is vrij discutabel.
Theoretisch kun je een volledig project specificeren met behulp van gebruikersscenario's en er is veel literatuur over software en webontwikkeling over. Ik raad aan om JoelOnSoftware's User Interface Design voor programmeurs te lezen - zelfs als je een ontwerper bent en geen programmeur!
Het doel van deze stappen is dit:
Dus dat is mijn ruwe proces om een ontwikkelaar te informeren. Wat doe jij? En als je zelf een ontwikkelaar bent, is er dan iets dat ik beter zou moeten doen?
Voor een meer grondige behandeling van briefing kan een ontwikkelaar graag een kijkje nemen bij het maken van een web-app op ReadWriteWeb. Je kunt ook met je eigen ontwikkelingsteam praten om te zien wat ze nodig hebben en willen.
Ik denk dat de reden dat webontwerp zo'n geweldige baan is, is omdat er zoveel verschillende facetten aan het werk zijn. In dit artikel heb ik geprobeerd aan te tonen hoe een enkele websiteontwerpopdracht allerlei vaardigheden en problemen kan omvatten - van ontwerpinspiratie tot het werken met ontwikkelaars, van het tevreden houden van gebruikers in een herontwerp tot het plannen van hoe een site wordt beheerd. Natuurlijk, het is een uitdaging, maar dat maakt het zo goed!
Wat Creattica Inspire betreft, we zouden het begin 2009 moeten zien debuteren (ik kan niet geloven dat we net om de hoek zijn!) En je zult horen over de lancering hier op Psdtuts+!
Dit bericht is dag 6 van onze webdesignsessie. Sessiedag 5 van Creative Sessions op dag 7 "
Accentsconagua