Content
- Una metodologia sensible
- Com puc mantenir el contingut primer?
- Per què?
- 01. Definiu els vostres objectius empresarials i d'usuari
- 02. Feu-ne referència cada vegada que tingueu
- 03. No tingueu por de retrocedir
- 04. Empenta també el teu propi equip
- 05. Definiu per endavant totes les vostres necessitats de contingut
- Com puc resumir contingut de la presentació?
- Hem de deixar de pensar en el contingut en termes de disseny
- Força els teus clients a planificar el seu contingut independentment del disseny
- Finalitzeu el vostre contingut abans de dissenyar-lo
- Utilitzeu contingut real: cada vegada
- Llavors, com funcionen els wireframes per a projectes de disseny sensibles?
- Esbós
- Marc al navegador
- Anotacions
- Utilitzeu contingut real en wireframes
- Com puc dissenyar primer per a pantalles petites?
- Dissenys abstractes de dispositius al començament
- Utilitzeu rajoles d'estil
- Crea harmonia de la interfície
- Veure-ho tot al navegador
- Assoleu un equilibri amb programes estàtics
- Conclusió
Siguem clars: el disseny és la solució només si se centra en els problemes més profunds que ens ocupen, el perquè de tot. Un procés sòlid sempre ha d’orientar la nostra feina, però hem d’acollir alguna cosa més flexible. El nostre mitjà finalment ha demostrat ser fluid, per tant, no hauria de ser el nostre procés? Penseu en el disseny del sistema: heu de veure tota la imatge i els petits detalls. Impossible? Lluny!
Frank Chimero ho diu molt bé al seu llibre The Shape of Design: “Hi ha una part en què l’artista recula del cavallet per obtenir una nova perspectiva de l’obra. La pintura és a parts iguals a prop i a lluny: quan és a prop, l'artista treballa molt per deixar la seva empremta; quan és lluny, valora l'obra per analitzar-ne les qualitats. Fa un pas enrere per deixar que l’obra li parli ”.
Hem de deixar que el nostre treball, el nostre mitjà, ens parli. Amb l’auge del disseny sensible, finalment estem adoptant el nostre mitjà tal i com es pretenia que fos: fluid. És un moment brillant per fer un pas enrere i avaluar el treball, analitzar i adoptar una nova manera de fer, un nou procés. S’han acabat els temps de les maquetes estàtiques i els dissenyadors web que no entenen el codi. És hora d’un procés de resposta.
Una metodologia sensible
Donarem el gran secret d’un procés sòlid al principi d’aquest article. Perquè estem bojos així. A punt? Un procés sensible és un procés responsable. Vaga? Pot ser. Ximple? Igual que el moviment d’estàndards web abans, el disseny sensible està impulsant el web amb mètodes compatibles amb el futur.
Com qualsevol procés de disseny, s'hauria de centrar en el "per què" que hi ha darrere de tot. Llavors, per què existeixen llocs web? Per lliurar contingut. Això podria ser basat en tasques, social, informatiu ... no importa. Tot es redueix a això: comenceu pel perquè, un contingut ben estructurat i les interaccions que importen.
Aquí teniu les preguntes que escoltem més sovint sobre el nostre procés de disseny sensible.
Com puc mantenir el contingut primer?
Tots som tan optimistes a l’inici d’un projecte. "El contingut primer!" diem. "Objectius de l'usuari! Recordeu el que és important! " És cert. Però, què vol dir? Com implementar un procés de primer contingut?
Fins i tot si ho sabeu (o creieu que ho sabeu), és fàcil oblidar-lo a mesura que avança un projecte. Els projectes a llarg termini tendeixen a arrossegar-se i continuar (i continuar ... i continuar ...). Deixem de pensar en el perquè i comencem a centrar-nos en el com. Ens enganyem pensant que els nostres projectes es poden dividir en fases separades de "descobriment" i "desenvolupament" que poden existir independentment.
La veritat és que hem de seguir preguntant per què sempre. Per molt que creguis saber, per molta planificació que hagis fet: cada vegada que prens una decisió, cada vegada que dissenyes un botó o escrius un titular, has de preguntar ...
Per què?
Per què faig això? Per a qui és? Quin objectiu comercial ajudarà al meu client a assolir? Quina necessitat ajudarà als meus usuaris a solucionar-se? No només mantingueu el contingut primer. Mantingueu primer el perquè.
Això fa que sembli fàcil. Però, per fer-ho bé, hauràs d’empènyer. Empenyiu els vostres clients i el vostre equip per definir primer els seus motius. No Lorem Ipsum, no ‘hi arribarem més endavant’. Fes els deures! Totes les vostres formes han de començar per una raó sòlida. A Yellow Pencil, això ha suposat grans canvis en la forma en què plantegem, estimem, pressupostem i planifiquem projectes. Hem hagut d’afanyar el pressupost i el temps per fer investigacions, estratègies i planificació sòlides. Vostè també podria. Però un cop els vostres clients i els vostres equips vegin per davant els enormes avantatges de definir les necessitats de contingut, mai no miraran enrere.
I és la nostra feina educar-los. (Llegiu l’excel·lent llibre Disseny és un treball de Mike Monteiro si voleu obtenir més informació sobre el tracte amb els clients.) Els clients poden tenir dificultats per entendre el valor de fer tota aquesta investigació i treballar per endavant. I per què ho haurien de fer? Al final no aconsegueixen res "acabat" i, amb massa freqüència, només reben una factura i un document Word enorme.
No és culpa seva, sinó culpa nostra. És la nostra responsabilitat fer una millor feina demostrant aquest valor. A cada pas del camí, hem de tornar-ho tot al per què tan important.
Això és especialment important per al disseny sensible. Un lloc web sensible no requereix molt més esforç de desenvolupament, però significa molta més planificació. Realment, però, està planejant que haguéssim estat fent tot el temps. Assistiu al cicle actual del projecte de redisseny cada tres anys. Voleu continuar fent això? Segur que no.
Per tant, aquí teniu tres passos per mantenir el contingut primer en el procés del vostre projecte.
01. Definiu els vostres objectius empresarials i d'usuari
Establir una llista prioritzada d’objectius empresarials i d’usuaris per al vostre projecte. Què volen o fan els usuaris més? Feu la vostra recerca. Feu inferències informades, no endevinalles salvatges. Accepteu tots els vostres grups d'interès.
02. Feu-ne referència cada vegada que tingueu
Cada vegada que preneu una decisió, cada vegada que algú proposa una característica o un element de disseny nou, o una pàgina de contingut, feu que assigni la sol·licitud a un objectiu empresarial i d'usuari. Quina necessitat real tindrà aquesta funció? Quin és el motiu real? (Consell: "Perquè vull" o "M'agrada molt el blau" o "tothom a Facebook" no compten.)
03. No tingueu por de retrocedir
Això pot ser dur. Les relacions amb els clients poden ser delicades i pot ser temptador renunciar a la batalla per guanyar la guerra. Però recordeu, hi som tots junts! No és empresa vs usuari; nosaltres contra ells.
Satisfer les necessitats dels usuaris és la millor manera de satisfer les necessitats empresarials. Perquè sense els nostres usuaris, no tenim negoci. Els clients (bons clients) no us contracten per dir que sí a tot. Per tant, si el vostre client demana alguna cosa que no compleixi els seus objectius o les necessitats dels seus usuaris, no tingueu por de desafiar-los. No es tracta d’ego. Es tracta de crear la millor solució possible.
04. Empenta també el teu propi equip
Això també pot suposar un repte quan es treballa en un equip creatiu. La separació de rols (disseny visual, experiència d’usuari, arquitectura d’informació, estratègia de contingut, producció de contingut) pot provocar una mala comunicació. Ens ocupem, ens aclaparen els correus electrònics. És difícil quedar-se amb un projecte des del principi fins al final, sobretot un cop acabat el vostre “treball”.
La relació del vostre equip és almenys tan important com la vostra relació amb el client. Hem de recordar-nos el perquè, tal com ho fem els nostres clients. La col·laboració és fonamental. No es pot simplement "lliurar" un pla de contingut, ni telèfons ni dissenys. En la mesura del possible, hem de treballar de la mà. És fàcil "acabar" un lliurable i passar a una altra cosa. És molt més difícil quedar-se amb un projecte quan la marxa es fa difícil.
Un enfocament en cascada del treball creatiu simplement no funciona. El treball àgil i col·laboratiu entre els membres de l’equip permet obtenir millors resultats.
05. Definiu per endavant totes les vostres necessitats de contingut
Això és el següent: els llocs web responsius triguen més a planificar-se. Ja no estem planejant només un context. Estem planejant tots els contextos que coneixem ara i alguns que encara no existeixen.
Però es necessita molt menys temps per planificar totes aquestes complexitats per davant que tornar enrere i adaptar funcions i funcions que no teníeu en compte. Per tant, dediqueu temps / esforç / pressupost. Obligueu els vostres clients i el vostre equip a definir (i comprometre's!) Amb tot el seu contingut abans d'entrar en el disseny. Utilitzeu taules de pàgines. Utilitzeu contingut estructurat. Proveu el vostre contingut ara! O plorar més tard.
Com puc resumir contingut de la presentació?
Ho sentiu molt al voltant de l’esfera d’Internet. Però espera, què? I espera, per què?
Perquè la presentació pot (i canviarà). La forma en què vam dissenyar llocs web fa 15 anys és gairebé irreconeixible per la forma en què els presentem ara. Però sabeu què no ha canviat? Paraules. Encara els fem servir. Internet existeix principalment per al contingut (basat en text). Encara l’utilitzem per resoldre problemes d’informació; per realitzar tasques. Però si el vostre contingut depèn d'un mitjà de presentació (pàgines d'introducció de Flash, algú?), És probable que no es pugui utilitzar d'aquí a uns anys. I això és una merda.
Hem de deixar de pensar en el contingut en termes de disseny
Nosaltres (com a indústria) hem entrenat els nostres clients per pensar el contingut en termes de disseny. "Poseu-lo a la barra lateral", diem. "Això hauria d'anar al peu de pàgina". Atura! Atura-ho. Atura. No es tracta d’ubicació. Es tracta de prioritat. Quin és el contingut més important per als vostres usuaris? Perquè endevineu què: el disseny canvia en diferents contextos. (Probablement) no hi haurà cap barra lateral al disseny de pantalla petita.
El súper menú gegant que vol el vostre client? No volaré en un iPhone.
Força els teus clients a planificar el seu contingut independentment del disseny
D'acord, no cal forçar-los. Animeu-los. Molts ànims. Les taules de pàgines són excel·lents per a això. Si encara no l’heu llegit, aneu immediatament a Estratègia de contingut per al web de Kristina Halvorson i Melissa Rach per obtenir més informació sobre com crear-los. Organitzeu-los per ordre de prioritat. No feu referència a la ubicació ni al disseny. Això ajudarà els vostres clients a pensar en el seu contingut d’una manera més productiva i, a més, farà que el procés de creació de contingut es mogui abans d’haver finalitzat els processos de filferro o el disseny.
Finalitzeu el vostre contingut abans de dissenyar-lo
D’acord, això no sempre és possible. Però com més incertesa pugueu eliminar abans de començar a dissenyar, menys haureu de tornar enrere i canviar les coses més endavant.
Utilitzeu contingut real: cada vegada
Si és possible, utilitzeu el contingut de les majúscules i minúscules: mostreu als vostres clients les pàgines, les imatges i els menús més complicats. Això evitarà sorpreses més endavant en el procés, quan vegin el seu contingut més desordenat al producte acabat.
Els wireframes funcionals del navegador marquen la diferència. Permeteu als vostres clients observar el seu contingut en moviment i canvis en diverses mides de pantalla. Assenyaleu-lo mentre presenteu els vostres marcs de filferro (esteu fent presentacions en persona, oi?) Demostreu-los com la prioritat de la seva informació segueix sent la mateixa a través de les mides de pantalla, mentre el disseny canvia.
Llavors, com funcionen els wireframes per a projectes de disseny sensibles?
Creiem fermament que el disseny d’interaccions per a RWD ha d’entrar al navegador amb rapidesa i freqüència. És pràcticament impossible crear un document estàtic que ho descrigui tot. És clar, podríem crear un document que demostri tres, quatre o cinc punts de ruptura, però això és només una fracció de la història. Què passa amb tots els moments entre els punts d'interrupció? Això passa al navegador.
Esbós
Tot i així, és bo poder esbossar ràpidament les vostres idees de manera col·laborativa. No cal que això passi en cap mitjà concret, però només hi ha alguna cosa sobre el llapis sobre el paper. L’objectiu aquí és treure idees de manera ràpida i iterativa. Ens encanta fer esbossos sempre que sigui possible i fins i tot hi ha una aplicació per a això: UI Sketcher.
Marc al navegador
Aquí teniu l’autèntic bitllet. Ens encanta reutilitzar patrons i sistemes quan demostrem RWD al navegador. Per descomptat, podríem crear el nostre propi sistema des de zero cada vegada, però això no ens ajuda ni a nosaltres ni als nostres clients.
També ens agrada utilitzar marcs de prototipatge sensibles i ràpids, com ara Bootstrap de Twitter o Zurb’s Foundation. Personalment, ens inclinem per la Fundació perquè s’adapta al nostre flux de treball. Seria fantàstic que qualsevol dels dos adoptés un enfocament de pantalla petita i amb un ample de banda baix, però és així com ho fem.
Anotacions
Les anotacions per a filferros RWD són essencials, però, trobem, sovint es passen per alt. Digueu-ho en veu alta: documentació, documentació, documentació! Hem vist alguns exemples d’amics i creiem que el jurat encara no és la “millor” manera d’anotar correctament els wirefrrams que responen al navegador. Com s'ha esmentat anteriorment, utilitzem regularment Foundation by Zurb i ens agrada utilitzar el seu complement Reveal per mostrar les nostres anotacions. Aquestes anotacions només apareixen en pantalles més grans i, idealment, es poden activar i desactivar.
Utilitzeu contingut real en wireframes
Hi ha hagut un gran debat al voltant de Lorem Ipsum sobre xarxes i maquetes de disseny, però si no en teniu contingut real, ho feu malament. El contingut informa de les decisions d'interacció i us indica quan es trencarà un disseny. Com pot fer això Lorem Ipsum?
Com puc dissenyar primer per a pantalles petites?
Durant anys hem dissenyat pensant en una resolució específica. Era una configuració predeterminada. Ja fos esbós a portàtils, emmagatzematge de cables a OmniGraffle, treballant a Photoshop o dissenyant al navegador, sabíem quina seria la mida del nostre llenç. Aquells dies han desaparegut. Creiem enormement en dissenyar per a la pantalla petita primer i millorar progressivament. Llavors, com pot un dissenyador canviar el seu flux de treball d’una mida de tela fixa a una de fluid?
Dissenys abstractes de dispositius al començament
Tret que estem dissenyant un dispositiu específic, és essencial que deixem de pensar en dispositius i comencem a pensar en experiències. Totes les tècniques següents ajuden els dissenyadors a elaborar les seves experiències mentre són capaços de romandre agnòstic del dispositiu (fins a un punt).
Utilitzeu rajoles d'estil
Utilitzeu les rajoles d'estil per establir la direcció i repetir-les ràpidament. Les rajoles d’estil permeten al dissenyador establir la direcció d’un sistema de disseny sense ser massa específic. La seva creadora, Samantha Warren, els descriu així:
“Els mosaics d’estil són per a quan un moodboard és massa imprecís i un comp és massa literal. Els mosaics d'estil estableixen una connexió directa amb elements d'interfície reals sense definir el disseny ".
Crea harmonia de la interfície
Imagineu-vos un llenç amb tots els elements visuals i interactius units. No per veure un disseny d’interfície d’usuari concret, sinó per veure com tots els elements funcionen junts. Es tracta d’un llenç d’harmonia d’interfície. Un llenç d’harmonia d’interfície permet al dissenyador mantenir idees juntes, però sense centrar-se en cap mida de pantalla. A més, és una manera fantàstica de comunicar i documentar els elements dissenyats de manera eficient en lloc de produir una guia d’estil completa.
Si us interessa llegir més, podeu trobar aquí i aquí dos articles excel·lents sobre el tema de l’harmonia de la interfície.
Veure-ho tot al navegador
Cal reunir-ho tot al navegador. Aquí és on realitza el disseny de la interfície d’usuari. És fonamental veure com el contingut real interactua amb els elements visuals. No hi ha manera de fer-ho correctament en un entorn estàtic. Cal veure com respondrà en el mitjà natiu.
Assoleu un equilibri amb programes estàtics
Hi ha un flux entre el navegador i els programes estàtics com Photoshop. Hi hauria d’haver un equilibri que permeti crear el sistema de disseny d’una manera fluida i natural. Per descomptat, això passarà a Photoshop, però un dissenyador que estigui dissenyant de forma responsiva també ha d’aprendre a pensar creativament al navegador.
Conclusió
Una vegada més, amb sentiment: comenceu pel perquè, amb un contingut i interaccions ben estructurats que importen. Centreu-vos en la pantalla petita i en el baix ample de banda i, millorant progressivament, els vostres conceptes de resposta. El nostre mitjà arriba a la majoria d’edat. Tenim l’oportunitat de fer les coses bé i canviar el món, un projecte web a la vegada.
Descobriu les millors 20 eines d’emmarcat per a dissenyadors
Steve Fisher coordina la investigació, anàlisi, disseny i estratègia a Yellow Pencil a Canadà i parla sobre temes com RWD, UX i codi obert. Alaine Mackenzie és estratega de continguts de Yellow Pencil.
