Share
Als je op mij lijkt, ben je het ermee eens dat de initiële ontwerpfase van een project tijdrovend, frustrerend en zelden aan de verwachtingen van de klant kan voldoen tijdens de eerste goedkeuringsvergadering. Wat als er een betere manier was om dingen te benaderen? Met Style Tiles, het nieuwste kind in het ontwerpmethodologieblok, is er.
Sommigen zeggen dat de dagen van het maken van volledige mockups voor webdesignprojecten in Photoshop stervende, zo niet helemaal dood zijn. Anderen zeggen dat ontwerpen in de browser niet zo is dat het ook zo is. Maar lopen we allemaal voorop? Misschien is het niet de tool waar we naar moeten kijken, maar de hele manier waarop we een nieuwe site ontwerpen en het goedkeuringsproces van de klant beheren..
In deze tutorial gaan we Style Tiles onder de loep nemen - een nieuwe manier van denken over de eerste ontwerpstadia, een ontwerpaanpak die is bedacht en bedacht door de onnavolgbare Samantha Warren. We gaan een kijkje nemen naar wat ze zijn, waarom je ze zou moeten gebruiken en je door het proces leiden van het maken en implementeren van een stijltegel voor je volgende project.
[Style Tiles staan u toe] ... Presenteer klanten met interface-keuzes zonder de investering in meerdere photoshop-mockups te doen. - Samantha Warren
Klaar om meer te leren? Laten we beginnen.
In de eenvoudigste vorm is een stijltegel een verzameling van één pagina met veelvoorkomende elementen, waaronder kleuren, typografie, texturen, patronen en ontwerpkenmerken. Waar een interieurontwerper zijn klant kan presenteren met een moodboard met verfchips, stoffen en knipsels uit tijdschriften, kan de vooruitstrevende webontwerper hun stakeholders een set met stijltegels presenteren..
Het belangrijkste om te onthouden over Style Tiles is dat ze geen letterlijke weergave zijn van hoe de site eruit zal zien; in plaats daarvan helpen ze bij het bepalen van de stemming, de toon en het 'gevoel' van een site op basis van wat u van de klant hebt geleerd tijdens uw eerste aftrapvergaderingen.
Een ander ding om in gedachten te houden is dat de Style Tile-benadering geen kader, gedefinieerd proces of zelfs maar een hulpmiddel is. In plaats daarvan zijn stijltegels gebouwd rond een reeks richtlijnen, technieken en benaderingen waarmee je je kunt concentreren op wat echt belangrijk is in het ontwerp (tenminste in de beginfase van een nieuw project). Begin met het downloaden van een psd-sjabloon om aan de slag te gaan, maar voel je vrij om je stijltegels te vormen naar je eigen workflow en creatieve esthetiek.
Laten we een paar voorbeelden bekijken om u te laten zien hoe stijltegels kunnen worden gepresenteerd. Ik heb twee sites reverse-engineered om je te laten zien wat hun stijltegels zijn kon heb er in de eerste ontwerpfasen uit gezien:
Deze stijltegel is gebaseerd op de onlangs vernieuwde Tuts + Premium-site.
Zoals je kunt zien, is de essentie van de Tuts + Premium-site mooi vastgelegd in deze stijltegel. We hebben aandachtig enkele van de ontwerpelementen van de belangrijkste oranje presentatiesectie van de site gedefinieerd, evenals het gevoel en uiterlijk van de blogberichten (dat wil zeggen de tutorialvermeldingen) overgebracht.
Belangrijk, omdat de stijltegel niet wordt gepresenteerd voor een bepaalde schermgrootte, oriëntatie of zelfs iets anders dan "digitaal", kun je je gemakkelijk voorstellen hoe de site eruit zou zien op elk apparaat van een desktop naar een tablet of een smartphone.
Voor een beetje plezier, hier is mijn interpretatie van wat de http://styletil.es site zelf er misschien in de eerste ontwerpfase uitzag:
Besteed bijzondere aandacht aan het adjectiefgedeelte van deze stijltegel. Alle kleuren, typografische selecties en ontwerpstructuren spreken op de een of andere manier met deze bijvoeglijke naamwoorden, en zorgen ervoor dat de stijltegel consistent is, zowel in termen van design als van Toon en Merk..
Laten we een paar van de gedeelde overeenkomsten van deze twee stijltegels bekijken:
Zoals ik al eerder zei, volgen Style Tiles geen vast formaat. In feite zou u vrijwel alles kunnen opnemen - zolang het maar op de een of andere manier fundamenteel is voor het ontwerpconcept. U kunt er bijvoorbeeld voor kiezen om de sectie 'Knoppen' te verwijderen en deze te vervangen door een aangepaste videospeler, een widget met een bepaalde beschrijving of bepaalde vormelementen.
Samenvattend, leg de algemene richting van de site vast in je stijltegel, maar voel je vrij om je creatieve spieren te buigen.
Style Tiles zijn niet zomaar een nieuwe manier om stof te verzamelen aan de onderkant van je webdesigntoolkit. Ze hebben een aantal ontzagwekkende voordelen voor zowel u als de klant wanneer ze correct worden geïmplementeerd:
Meer dan wat dan ook, Style Tiles behoudt de initiële ontwerpfase en het goedkeuringsproces van klanten eenvoudig.
Het presenteren van klanten met een volledig functionele ontwerpcomponent na de eerste vergadering loopt het risico om het bos voor de bomen te missen. In plaats van dat de klant wordt opgehangen aan kleine ontwerpfuncties ("hmmm ... ik denk dat de sociale knoppen een beetje 'poppier' moeten zijn), kunnen klanten vol vertrouwen praten over hoe de algemene richting van het ontwerp overeenkomt met hun doelstellingen (" Ik vind het leuk hoe deze kleuren geven een gevoel van vertrouwen, wat perfect is voor mijn Acme-widget ").
Vergeet niet dat onze klanten over het algemeen geen ontwerpers zijn, maar vaak weten wat ze willen, zelfs als het alleen in algemene termen is. Style Tiles zijn een perfect hulpmiddel om de leek in staat te stellen over het ontwerp als geheel te praten zonder tientallen individuele ontwerpelementen op te rapen die snel verwarrend en overweldigend kunnen worden..
Pixel-perfecte mockups kosten tijd. Echte tijd. Uren en uren van tijd.
Niet alleen moet u al deze kosten meenemen in uw eindfactuur, als u drie afzonderlijke comps maakt, is dat tweederde van uw tijd die rechtstreeks naar de map "Ongebruikte resources" op uw harde schijf gaat - om nog maar te zwijgen van twee derde van het geld van de klant voor dat deel van de eindafrekening dat ook in rook stijgt.
Met Style Tiles daarentegen is het een zeer snel proces om verschillende versies te herhalen, en om snel even wijzigingen aan te brengen. Het gebruik van Style Tiles betekent dat u het ontwerpproces kunt stroomlijnen, het momentum in de vroege stadia van het project kunt bijhouden en kunt reageren op wijzigingsverzoeken in minuten in plaats van uren.
Om dit in perspectief te plaatsen, namen de twee voorbeeldstijltegels hierboven me ongeveer 20 minuten in beslag (en ik zou er elk 15 minuten over gedaan hebben als ik mijn lagen beter kon benoemen als ik ga).
Ik spreek hier alleen vanuit ervaring - elke ontwerper is anders - maar als je drie afzonderlijke Photoshop-spotjes maakt, is het niet ongebruikelijk om er een te maken die perfect, een dat is redelijk goed en dat is redelijk gemiddeld, en ver van je beste werk. Je presenteert de drie aan de klant en probeert ze te verkopen aan je vlaggenschip, en steevast kiezen ze het ontwerp dat je het minst leuk vindt ... en nu sta je vast aan het coderen van een site waar je niet trots op bent en ook niet ' t in het belang van de klant, ook niet.
Zelfs als je drie perfecte composities maakt waar je trots op bent om te coderen, is het gemakkelijk om creatief te knipperen. Met Style Tiles kunt u snel experimenteren met verschillende ontwerpconcepten en echte ontwerpalternatieven bieden voor de klant op basis van hun gedefinieerde behoeften.
Oké, laten we zeggen dat je geen stijltegels gebruikt, en je hebt ervoor gekozen om de klant een reeks volledige ontwerpsamenstellingen te bieden.
Waar presenteer je ze? Een 960px brede desktopversie? Hoe zit het met een iPad-versie? Vergeet ook geen iPhone-versie. Oh, maar zorg ervoor dat u ook Kindles, Blackberrys en de meer dan 500 mobiele Android-apparaten aanpakt die in de afgelopen jaren zijn geproduceerd. En hoe zit het als ze vragen: "Hoe zal dit eruitzien op mijn favoriete Palm Pilot die ik heb gehad sinds Bush president was?"
Stijltegels impliceren geen afmetingen noch apparaat; alleen dat het ontwerp digitaal zal zijn. - Samantha Warren
Het web is vandaag letterlijk op honderden manieren toegankelijk, elk apparaat heeft zijn eigen set breekpunten, eigenaardigheden en functies.
Een betere manier om de eerste ontwerpfase van het project te benaderen, is om het apparaat volledig uit de vergelijking te halen. Het mooie van Style Tiles is dat ze volledig agnostisch zijn voor apparaten.
Natuurlijk moet u later in het project ingaan op hoe de website zal reageren en / of zich aanpassen aan verschillende apparaten, maar in de beginfase vertroebelt het gewoon de wateren om te mixen en een algehele ontwerprichting vast te stellen met de uiteindelijke functionaliteit van de website..
Nu je hebt geleerd wat Style Tiles zijn en je de voordelen hebt om ze te gebruiken als alternatief voor volledige ontwerp-comps, ben ik er zeker van dat je klaar bent om Photoshop te openen en je eerste Style Tile te gaan maken.
Whoa daar, cowboy. Rustig aan! Voordat we beginnen met het pushen van pixels, moeten we de behoeften en doelstellingen van de klant identificeren en deze vertalen naar concepten die ons in staat stellen om weloverwogen ontwerpbeslissingen te nemen.
Het vierstapsproces bij het maken van een stijltegel is als volgt:
Verward? Wees niet. Laten we elke stap in detail bekijken.
Of u nu persoonlijk met uw klant praat, met hen praat op Skype of vertrouwt op e-mail, u zult altijd wat tijd en moeite moeten besteden aan het leren kennen van hun bedrijf en de doelen van hun website. Als je dat niet doet, word je overvallen door een donkere, enge weg van veronderstellingen en giswerk die bijna altijd zal zorgen voor een onsuccesvol eindresultaat en een ongelukkige klant.
Dit ontdekkingsproces gaat over veel meer dan alleen maar hun favoriete kleuren vragen en welke andere websites ze op het 'net' leuk vinden. Hoewel we gemakkelijk een hele tutorial kunnen hebben over effectieve vragen van klanten, volgen hier enkele ontdekkingsstrategieën om u op weg te helpen:
Iedereen houdt ervan te praten over wat belangrijk voor hen is ...
Zodra u een klant over zijn bedrijf laat praten, zult u het vaak moeilijk vinden om ze te laten stoppen. Sterker nog, in deze fase, hoe meer ze over hun bedrijf praten, hoe beter het zal zijn voor het eindresultaat.
Hier zijn enkele eerste vragen om uw klant op te warmen om over zijn bedrijf te praten:
Zodra je een paar van de basisvragen uit de weg hebt geruimd en je hebt een beter begrip van hun bedrijf, is het tijd om een beetje dieper te graven en echt de behoeften van je klant te identificeren en enkele kernbegrippen uit te kiezen die je helpen bij het creëren een ontwerprichting in de volgende stap.
Hoewel mensen het vaak moeilijk vinden om abstracte concepten en gevoelens in uitspraken te vertalen, houden mensen ervan om in metaforen te praten - op voorwaarde dat je de juiste vragen stelt.
Hier zijn enkele vragen die u kunt stellen om aan de slag te gaan:
Als u eenmaal bij de kern van het project van de klant bent, wordt het tijd om een basistoon voor het algemene ontwerp vast te stellen.
Er zijn verschillende manieren om dit te doen, maar een effectieve aanpak is om de klant een interactieve enquête te laten invullen. Met een beetje creatieve HTML, CSS en Javascript, kunt u een reeks schuifregelaars maken waarmee de klant zijn merk kan positioneren tussen een reeks dichotomieën:
Kijkend naar dit voorbeeld, ben ik al aan het nadenken over een leuk, kleurrijk retro-geïnspireerd ontwerp voor onze fictieve klant. Welke ontwerpconcepten schieten meteen in het geheugen op wanneer je dit ziet?
Zodra we onze klant hebben ondervraagd, is het tijd om de essentie van het project, het product en de behoeften van de klant voor zijn website te distilleren. Het doel van dit deel van het proces is om een selectie van beschrijvende woorden te definiëren die het gedeelte 'Bijvoeglijke naamwoorden' van onze stijltegel zullen vullen.
Laten we een voorbeeld bekijken. Hier zijn een paar verklaringen die onze fictieve cliënt u tijdens de ontdekkingsfase zegt:
Uit deze verklaringen is het uw taak om één adjectief te identificeren dat de kernboodschap beschrijft van wat zij u hebben gezegd.
Hier zijn vier bijvoeglijke naamwoorden die we zouden kunnen gebruiken om de bovenstaande uitspraken samen te vatten, om tot de kern te komen van wat de cliënt is werkelijk ons zeggen:
Nu we deze reeks bijvoeglijke naamwoorden hebben gedefinieerd, zijn we verhuisd naar een punt waar we daadwerkelijk kunnen beginnen met het vertalen van woorden naar ontwerp. Hoewel je misschien een iets andere interpretatie van de bovenstaande bijvoeglijke naamwoorden hebt dan ik, is het vrij waarschijnlijk dat onze ontwerpen gemeenschappelijke elementen zouden delen - althans zouden we aan elkaar kunnen beschrijven waarom we de keuzes hebben gemaakt die we hebben gemaakt.
Phew! Alles uitgewerkt? Goed nieuws: we hebben het gruntwerk gedaan, nu kunnen we plezier maken. Zodra we de hele ontdekkingsfase hebben opgebouwd tot vier tot zes dynamiet-adjectieven, is het tijd om je eerste stijltegel te maken.
Ga naar http://styletil.es en download de Photoshop-sjabloon (of maak je eigen sjabloon).
De volgende stappen zijn volledig aan jou. Wees creatief! Ik neem aan dat je Photoshop al redelijk beheerst, dus ik zal je niet elke stap doorlopen (de Photoshop-sjabloon is heel gemakkelijk aan te passen), maar het belangrijkste idee is om een reeks ontwerpelementen te maken (kleuren, texturen, knoppen, typografie, enz.) die met de bijvoeglijke naamwoorden spreken die u in de vorige stap hebt bereikt.
Wilt u dieper ingaan op het maken van een kleurenschema en typografische koppelingen kiezen voor uw stijltegel (en nog veel meer)? Hier zijn een paar Webdesigntuts + artikelen die u kunt bekijken:
Nadat u uw eerste stijltegel hebt gemaakt, wordt het tijd om de lei en de iteratie op te schonen. Er is geen reeks in steen aantal versies dat je zou moeten maken, maar drie tot vier stijltegels voor elk project is waarschijnlijk een goede balans tussen het verkennen van voldoende onafhankelijke ontwerpconcepten en het niet overweldigen van je klanten met te veel opties.
Houd er rekening mee dat uw bijvoeglijke naamwoorden voor elke stijltegel hetzelfde kunnen zijn, maar ze kunnen ook anders zijn - vooral als u het moeilijk vindt om de behoeften van uw klant op te splitsen of als ze u een aantal verschillende alternatieven hebben aangeboden om te verkennen als onderdeel van de vragende fase.
Uit onze ontdekkingsvragen uit stap twee kunnen we bijvoorbeeld drie afzonderlijke sets van bijvoeglijke naamwoorden verzinnen die allemaal vergelijkbaar zijn, maar verschillend genoeg om verschillende benaderingen van het ontwerp voor onze fictieve klant te nemen:
Zoals u kunt zien, kunnen deze drie sets adjectieven allemaal resulteren in een heel andere richting van het ontwerp. Dit is waar Style Tiles echt tot hun recht komen. Met een paar snelle wijzigingen in kleur en typografie, kunt u eenvoudig drie totaal verschillende iteraties maken in een zeer korte tijdspanne.
Zorg ervoor dat uw klant weet wat hij kan verwachten
Nu u uw set stijltegels hebt gemaakt, is het tijd om ze aan uw klant te presenteren. Zoals bij elke stap van dit proces, zijn er een aantal strategieën om te implementeren om ervoor te zorgen dat u de beste resultaten behaalt en dat uw klant ervan overtuigd is om door te gaan met de volgende stappen van het project.
Uw klant zou niet moeten verwachten dat u een volledig ontwerp zou presenteren, alleen voor u om uw stijltegels tevoorschijn te halen. Aan het einde van de ondervragingsfase, toon je klantvoorbeelden van andere stijltegels die je hebt gemaakt en leg je uit wat hun waarde is voor het instellen van de ontwerprichting van de site.
Zorg ervoor dat uw klant weet wat u wilt laten zien vóór de presentatievergadering!
De presentatie voorbereiden op PhotoDune Laat uw klant vrijuit praten over uw ontwerpconcepten, maar zorg ervoor dat u ze niet te gemakkelijk van de haak slaat. Moedig uw klanten aan hun uitspraken uit te werken. Met een beetje effectieve vragen kunnen we lege uitspraken omzetten in uitzonderlijke uitspraken:
Vergeet niet dat terwijl u websites ontwerpt de hele dag, elke dag, het zeer waarschijnlijk is dat dit iets is waar uw klant nog niet veel eerdere ervaring mee heeft gehad. Wees geduldig, help uw cliënt om hun uitspraken te verduidelijken, leid ze naar het maken van waardevolle uitspraken, maar maak nooit aannames op basis van de algemene, niet-manlijke reacties van uw cliënt op uw werk.
Stijltegels vormen een beter alternatief voor volledige ontwerpcomponenten in de vroege stadia van het project (bijv. Tijdens het goedkeuringsproces van de klant), maar afhankelijk van hoe u wilt werken, kan een volledige mockup de volgende stap zijn voor het project, als dat is onderdeel van uw bestaande workflow.
Nu u de richting van het ontwerp hebt bepaald en de klant zich heeft afgemeld bij een van uw Style Tile-versies, kunt u er zeker van zijn dat uw comp dichter bij de verwachtingen van uw klant komt dan wanneer u meteen Photoshop opent na de eerste vergadering. Niet alleen zal de mockup veel dichter bij de doorgang komen, er is ook geen noodzaak om meerdere iteraties van het ontwerp te maken - dat werk al is gedaan met onze stijltegels.
Afhankelijk van hoe je het werk van je klant wilt benaderen, zijn dit allemaal perfect bruikbare voorbeelden van werkstromen voor de rest van het project:
Bedankt dat je bij me bleef en alles leest over het wat, hoe en waarom van Style Tiles - ik hoop dat je het leuk vond om erover te leren, net zoals ik het leuk vond om te schrijven over de introductie ervan!
Style Tiles zijn een revolutionaire manier om het ontwerpproces te benaderen en helpen u en uw klant om een duidelijke richting voor de website te vormen, zelfs van het meest betrokken en ingewikkelde project.
hoe denk jij erover? Gebruik je Style Tiles in je volgende project? We horen graag uw mening in de opmerkingen!
Accentsconagua