Share
Faremmo una scommessa sicura che hai visto il lavoro di Haraldur "Halli" Thorleifsson in natura. Con importanti progetti alla sua portata, come la pagina delle informazioni di Google+, la pagina delle informazioni di Google Drive, oltre a lavorare per Square, Pinterest, Microsoft e altri clienti di alto profilo, il lavoro di Halli è ovunque. Tuttavia, oggi ci stiamo concentrando sul suo bellissimo portfolio, che puoi vedere su haraldurthorleifsson.com.
Abbiamo avuto l'opportunità di parlare con Halli di come si avvicina al design, e abbiamo parlato in modo specifico di come si è avvicinato al progetto di mettere il proprio lavoro là fuori. Ecco cosa aveva da dire.
Tuts +: Quando ti stavi avvicinando al problema di costruire il tuo portfolio, quali erano i tuoi imperativi e obiettivi di progettazione?
Halli: Prima di tutto, era per me stesso. Come sai, di solito non hai il pieno controllo sui progetti a cui stai lavorando [nel mondo dei contratti] - possono avere ragioni commerciali o commerciali per fare qualcosa che preferiresti fare in un modo diverso. Penso che molti designer siano orgogliosi del loro lavoro e vogliono mostrarlo nella migliore luce possibile, quindi è quello che pensavo all'inizio - principalmente per me stesso, e ovviamente una volta che ho avuto qualcosa che mi piaceva mostrare, potrei mettere questo per attirare più clienti.
Lo sto facendo da molto tempo, quindi ho avuto più portafogli in passato, erano sempre praticamente infinite file di schermate, perché è la cosa più facile da fare. È un po 'noioso, quindi ho voluto smembrarlo, inserire quegli screenshot in un contesto, inserire elementi di design intorno a loro e rendere questi case study la loro cosa.
Ma anche se è iniziato come progetto per me, è diventato presto anche altre cose. Se hai un bel portfolio, puoi spingerlo verso siti premio e, presumendo che vinci alcuni, questo ti porterà molto traffico e spero che da qualche parte in quel traffico ci siano alcuni nuovi clienti interessanti.
Uso spesso anche Dribbble e ho visto il portfolio e il mio account Dribbble come connessi. Volevo indirizzare il traffico dal mio Dribbble al mio portafoglio e dal mio portafoglio al mio Dribbble, quindi c'è una specie di "tenia" che si alimenta da sola. Se lo facessimo nel modo giusto, otterremmo molto traffico sul sito e sfrutteremo questo per ottenere più follower di Dribbble. Non è solo una questione di vanità o una ricerca di un seguito, Dribbble sta diventando una piattaforma così importante per ottenere un nuovo lavoro da parte dei clienti. Più seguaci hai, più in alto sei nei risultati di ricerca su Dribbble stesso.
Tuts +: Quindi è quasi come SEO per Dribbble?
Halli: Sì, quello era uno dei motivi principali per cui ho deciso di avere l'indice di Dribbble in fondo. Volevo che quante persone arrivassero al sito (ne abbiamo ricevute circa 100.000 nel primo mese) il più possibile per seguirmi su Dribbble.
Tuts +: Quindi, hai visto un aumento di tale followership?
Halli: Sì, ho visto circa 3000 seguaci da questo lancio.
Tuts +: È fantastico! Quindi, hai accennato che hai avuto screenshot in passato sul tuo sito, che è ancora un elemento primario di questa iterazione del design. Come hai trovato il posto dove sedersi? Ognuno di questi pezzi del portfolio è costituito da elementi specifici della bestia per ogni voce del portfolio con le proprie caratteristiche interattive. Sono una specie di "meta-progetti" o progetti su progetti. Come hai fatto il sito a supportare questi diversi screenshot in un unico posto, mantenendo la coesione in tutto il design?
Halli: Il problema con l'utilizzo di un sito Web come metodo per mostrare il lavoro del sito Web è: "Beh, hai una persona che visita il sito e hai una cornice per il sito che stai cercando di mostrare, e come la mostri nel browser? ? Mostrando loro un altro browser? Diventa così noioso. Alcuni progetti sono più difficili di altri. Ad esempio, il progetto Google+ era tutto lavoro sul layout, e non c'era davvero molto che potessi fare lì, quindi ho dovuto provare a impilarli in qualche modo interessante, ma in realtà non si presta bene a qualcosa del genere. Dall'altro lato, qualcosa come Santa Tracker o More Than a Map è molto diverso perché ci sono così tanti elementi visivi al di fuori di quello che potresti trovare in un sito web standard e dal momento che erano entrambe esperienze a schermo intero, tutte le schermate hanno lo stesso aspetto razione. Google+ dall'altra parte è un sacco di pagine veramente lunghe, non è facile dimostrarlo.
All'inizio, non volevo avere un modello, perché sapevo che i progetti sarebbero stati diversi: non avrei avuto modo di progettare un modello adatto a tutti loro. Volevo anche che lo stile di ogni progetto prendesse il sopravvento sulla pagina. La maggior parte di questi sono veramente piatti, o mirati a cose piatte, ma volevo essere in grado di lasciare un progetto che non si adattasse bene al sito. Ecco perché il sito non ha controlli diversi dalla barra superiore e posso cambiarne il colore. Il sito è praticamente una tela bianca quando inizio a mostrare un progetto. E penso che si debba sottolineare che il mio sviluppatore è così straordinario che accetta solo che non sarà in grado di riutilizzare alcun elemento. *(ride)*
Tuts +: Questo è un altro aspetto interessante di questo progetto. Prima dell'intervista ci hai detto che non codifichi, il che può essere un buon vincolo. Questo è un argomento caldo nel mondo del design. Persone come Chris Coyier hanno detto cose positive su come lasciare ai designer la piena creatività sul loro lavoro, progettare senza doverli tradurre al browser in tandem con il loro processo di progettazione, e poi portarlo allo sviluppatore come una sfida. Ti sei tenuto intenzionalmente lontano dal codice, o è stata più una scelta personale non apprenderlo?
Halli: Penso che quasi tutti possano imparare qualcosa, quindi non penso che sia così tanto. Per me o per chiunque diventi veramente bravo in qualcosa, devono davvero concentrarsi su di esso per molto tempo. E non è dove voglio concentrare il mio tempo. Potrei codificare un sito super-semplice di base, ma mi ci vorrà molto tempo e sarebbe davvero scarsamente fatto - ci sono persone là fuori che sono molto più brave di me, e per me Dovrei farlo a tempo pieno. La gente parla di questi "unicorni" (ibridi designer-sviluppatori che sono bravi ad entrambi) ... e francamente non molti di loro. Quando chiedi una lista ottieni sempre gli stessi nomi. Quando hai un designer che è anche uno sviluppatore, di solito pensano "come posso progettare questo in modo che sia facile per me codificarlo", dove non devo pensarci, quindi posso decidere cosa voglio design. Praticamente qualsiasi cosa in questo momento è traducibile in codice. Non è stato il caso quando ho iniziato quindici anni fa. Ora, tutto ciò che posso immaginare, qualcuno può codificare.
Il problema che ho con l'argomento "i progettisti dovrebbero codificare" è che ci sono anche tante altre cose che dovrebbero davvero fare. Dovrebbero sapere del marketing, dovrebbero capire business, copywriting, storytelling: ci sono così tante cose da tenere a mente. Non metterei il codice al secondo posto prioritario nell'elenco di cose da imparare per un designer. Ma avendo detto tutto ciò, non penso che ci sia davvero una regola per "questo è ciò che dovrebbe essere un designer" - se le persone vogliono progettare e codificare quindi più potere per loro, non è solo per me.
Tuts +: Uno degli argomenti principali per i progettisti che hanno bisogno di imparare il codice è che aiuta i progettisti a capire il design reattivo e l'agnosticismo del dispositivo. In che modo il problema della compatibilità tra dispositivi influisce sul modo in cui pensi a un approccio progettuale? Ad esempio, con il tuo sito, lo abbiamo ridimensionato a una larghezza di 220 px, ed è stato fantastico, ma è anche fantastico a 2000px di larghezza. Come fai a farlo con un sito come la pagina di destinazione delle informazioni di Google+ quando stai progettando staticamente?
Halli: Penso che la sua esperienza, per lo più. Guardo i siti tutto il giorno e ho un tempo molto lungo. Ora, dopo che il responsive design è arrivato sulla scena, ogni volta che arrivo a un sito, lo ridimensiono per vedere se risponde. Cerco di vedere come si muovono gli elementi - non necessariamente come lo stanno facendo tecnicamente in codice, perché qualcun altro può capirlo per me.
Mi sembra che i problemi con la progettazione totalmente nel browser sia che i disegni tendono ad apparire uguali ma forse sono troppo vecchio, lo sto facendo da troppo tempo. Forse i nuovi designer lo capiranno meglio di me.
Se sto lavorando con uno sviluppatore davvero bravo come James Dickie, che ha codificato il mio sito, se ho un'idea di come appariranno le cose ai dispositivi mobili, e ho un'idea di dove sono i punti di interruzione e di come dovrebbero funzionare, di solito quello che faccio è consegnargli la parte del desktop. Lo mette nella griglia e vediamo cosa succede. Semplicemente iteriamo da lì. Non disegno più tutti i punti di interruzione. So che se il design è un certo modo, quindi non abbiamo molti elementi impilati, probabilmente ridimensionerà con grazia. Ci sono sempre aree problematiche, ma solitamente è meglio sistemarle direttamente al loro punto di interruzione. A volte mi sorprende il modo in cui funziona per mettere un disegno nella griglia. Quindi, forse potresti obiettare che disegno nel browser dopotutto ...
Tuts +: Quindi è quasi un'intuizione a un certo livello - hai imparato che questo è il modo in cui le persone interagiscono con i browser, questo è il modo in cui i browser funzionano, quindi vediamo se possiamo, per esempio, tenerlo più verticale.
Halli: Questa è una delle cose principali che faccio - provo a mettere le cose quasi sempre in verticale. Non necessariamente a causa della reattività, ma perché voglio che l'utente si concentri su una cosa alla volta - non voglio che vedano più cose. Voglio che scorrano lungo la pagina, sperimentino una progressione, una specie di storia che sto cercando di raccontare, colpendo le cose emotive che vuoi colpire. Se stai cercando di vendere qualcosa, finisci alla fine della storia dopo aver colpito questi punti, e lì c'è un pulsante Acquista.
Questo approccio è ovviamente molto più semplice con il design della comunicazione. Non è così semplice nella progettazione del prodotto, in cui di solito ci sono molte più azioni da mettere davanti agli utenti, il che è più impegnativo. Questo è uno dei motivi per cui nessuno di questi grandi siti di prodotto è reattivo fino in fondo.
Per tornare alla domanda sul pubblico, il pubblico per questo era in realtà agenzie o clienti che di solito hanno un grande monitor. Avranno le cose costose, e volevo che apparisse davvero buono su un display da 27 ". Ha bisogno di essere davvero eccezionale su un display enorme, quindi quando è necessario, abbiamo enormi immagini in cima ad alcune di queste cose - come 2500px di larghezza - e sai, non dovevo pensare molto ai vincoli come la larghezza di banda, perché di solito non è un vincolo per quel pubblico.
In termini di reattività, il mio sviluppatore merita molto del merito. Inizialmente pensavo che rendere questo sito reattivo sarebbe stato troppo lavoro, gli ho detto all'inizio che non dovrebbe preoccuparsi affatto di questo, ma ha insistito. Quindi, dovrebbe in realtà ottenere la maggior parte del credito.
Tuts +: E questo è anche qualcosa di cui vogliamo parlare qui: quanto valore metti su quanto bene puoi comunicare con il tuo sviluppatore? L'hai menzionato un paio di volte e sembra che il lavoro di squadra sia molto importante per il tuo processo.
Halli: Non esiste un sito web senza un designer e non esiste un sito web senza uno sviluppatore. Potrebbe essere la stessa persona, e potrebbe non essere ben progettata o ben sviluppata, ma non c'è modo di avere un sito senza entrambi quegli elementi. Come ho già detto in precedenza, penso che molte persone possano davvero essere grandiose solo in una di queste cose. Avere uno sviluppatore che può prendere qualcosa che disegno e codice è estremamente importante, quindi avere una buona relazione con quello sviluppatore è anche molto importante. Lavoro con James da un po ', e lo intervengo per ogni progetto su cui lavoro.
La cosa più importante è solitamente la comunicazione. Se sei in grado di parlare con qualcuno e loro rispondono alle tue note e concordi nel dire che spostare quell'unica cosa 1px a sinistra è assolutamente valsa la pena, è prezioso. In questo progetto, cambierei idea, e James andrebbe avanti e indietro con me, suggerendo modi di fare le cose, di spostare le cose, ecc. Senza quel processo, non sarebbe la metà buono. Quindi, penso che sia estremamente importante avere uno sviluppatore coinvolto. Molte volte consegnerò un disegno e non me lo diranno nemmeno quando verrà lanciato. Non c'è comunicazione nel processo e, come puoi immaginare, non porta ai migliori risultati.
Tuts +: Sì, vuoi linee di comunicazione aperte il più possibile.
Halli: Vuoi essere in grado di non essere d'accordo, e avere qualcuno che possa dirti che esiste un approccio migliore. Se lo sviluppatore ha un buon occhio per il design, renderà tutto migliore. Alcuni dei migliori feedback che ottengo provengono dagli sviluppatori. Finché viene dal luogo in cui vogliono fare un ottimo lavoro piuttosto che fare la cosa più semplice, allora ascolto.
Tuts +: Sì, sembra che molti sviluppatori debbano pesare questo costantemente - che il valore commerciale della richiesta di design corrisponda allo sforzo richiesto per completare quella richiesta. Come bilanciare l'alternanza tra grande lavoro e grande valore commerciale?
Halli: Penso sempre che, alla fine, sono la stessa cosa. Se vengo a un sito web ed è brutto, probabilmente non mi venderà qualcosa. Se vengo a un sito web ed è bello ma non funziona, allora non mi venderà nemmeno niente. Mi piace molto lavorare con persone che faranno il miglio supplementare (o poche centinaia di miglia) perché vogliono che qualcosa sia veramente buono. Penso che sia difficile attribuire un valore in dollari, ma ne vale comunque la pena.
Tuts +: Completamente d'accordo. Stiamo per passare a una sorta di argomento caldo che è stato gettato su tutto il web a cui hai alluso in precedenza nell'intervista. Hai detto che il sito ha un'estetica piatta. Ci sono molti critici nell'esperienza utente e un sacco di persone che sono a favore o contro "flat" con veemenza - c'è una grande guerra di progettazione in questo settore. Sono sicuro che in quindici anni di lavoro nel design, hai sperimentato un dramma simile. Alcuni dicono di "piatto" che è genuino, che dirige l'esperienza digitale per essere veramente digitale. Quali sono i tuoi pensieri su questo argomento?
Halli: Bene, penso che sia una semplificazione. Penso che la ragione dell'appiattito sia complessa. Responsive gioca un ruolo - se hai una superficie piatta, è davvero facile scalarla in su o in giù. Se hai una superficie piatta, non occupa molta larghezza di banda. Ma richiede anche molto tempo per progettare le vecchie icone in stile Apple: ci è voluto tanto tempo.
Quindi penso che ci siano tutti i tipi di ragioni diverse e quindi le persone idealizzano alcune di queste cose dopo il fatto. Molte persone trattano questo come una religione, dicendo cose come "non è abbastanza piatto", come se l'obiettivo finale fosse di non avere ombre, sfumature da nessuna parte - come se il miglior design fosse completamente piatto, cosa di cui sono totalmente in disaccordo.
C'è un problema quando ottieni una tendenza in cui tutti vanno all in - tutto ora comincia a sembrare lo stesso. Come differenziare o rendere qualsiasi cosa memorabile?
Penso che sia piatta, o almeno più piatta di quello che avevamo, è fantastica per un sacco di cose. Ma mi piacciono ancora le sfumature e le ombre. Possono essere molto più sottili di prima. Le persone cominciano a capire che un pulsante non deve apparire come un pulsante fisico. Ma deve ancora distinguersi, e ha bisogno di sembrare come se lo si potesse premere. Penso che "più piatto" di quello che abbiamo collettivamente avuto prima è buono. Penso che totalmente piatto non abbia alcuno scopo. Se funziona, allora va bene per il tuo progetto. Non dovremmo renderlo un obiettivo in sé. Sono stato in riunioni in cui la gente diceva "non è abbastanza piatta" - non c'è davvero alcun modo per rispondere a questo.
Tuts +: Assolutamente. Il design dovrebbe essere rispettato come una cosa di livello superiore rispetto alla semplice decisione di voler andare verso un'estetica piatta, quindi portiamo tutto in piano. Non sta ottenendo nulla se non il desiderio di essere piatto.
Halli: Sì, per seguire la tendenza. A meno che tu non abbia una ragione, ad esempio Google. Non so se ti ricordi, ma Google era davvero brutto. Una delle ragioni era che hanno assunto il loro primo designer per circa sette anni nella società, era, e per molti versi è ancora, un'azienda molto guidata dagli sviluppatori. Ma hanno anche così tante divisioni indipendenti, a differenza di un'azienda come Apple, dove c'è un enorme imperativo di design top-down. Google ha molti dipartimenti che hanno molta libertà, quindi regnare tutto ciò è un grande sforzo.
Penso che il team di progettazione di Google abbia fatto un lavoro fantastico con quello. Penso che abbiano scelto lo stile piatto che hanno ora parzialmente perché potrebbe essere facilmente spiegato. Potresti avvicinare le persone e ridimensionare quel design, perché puoi impostare una guida di stile che possa essere facilmente seguita mantenendo comunque molta della libertà che avevi prima.
Tuts +: Ed è fantastico che tu abbia avuto una mano in quel cambiamento nel design di Google. E questa è una buona ragione per andare piatta. E puoi vedere di cosa stai parlando ancora in Google - con pezzi come Analytics che sono totalmente diversi da qualcosa come Google+ o Gmail.
Halli: Inoltre, con iOS 7, non penso che sia affatto piatto. C'è molta profondità, ci sono molte sfumature. E btw, mi piace molto iOS 7, ci sono alcuni spigoli, ma nel complesso penso che sia un grande balzo in avanti per Apple. Potrebbe non essere più quello skeuomorphic ma non è piatto.
Tuts +: Sì, è un malinteso comune - simile a quando qualcuno dice che c'è una parallasse quando non è in realtà la parallasse. L'idea sbagliata è, se i pulsanti non sembrano più pulsanti, se le cose sono ridotte a un minor numero di colori, meno bordi - le persone lo etichetteranno come "piatte".
Halli: Si. Una cosa che mi piace di flat è che puoi avere più elementi. Non sono in competizione tra loro. Se ogni pulsante è veramente pesante, avere un gruppo di essi su una pagina inizia a sembrare strano, la gravità della pagina si spegne. Flat ti consentirà di avere un'interfaccia utente più complessa e di non occupare troppo spazio visivo.
L'interfaccia utente di iOS 6 Trova i miei amici è un buon esempio di questo. L'interfaccia utente è d'intralcio. È così pesante che tutto il resto ricade. Dovrebbe essere l'opposto di quello - l'interfaccia utente dovrebbe essere in secondo piano, l'esperienza e il contenuto dovrebbero essere in prima linea.
Tuts +: Assolutamente. Concluderemo questo argomento con un'altra domanda sul tuo portafoglio, e questa è una sorta di ampia domanda. Quali sono state le sfide più difficili in questo processo? Ognuno è il loro peggior critico, ed è empiricamente difficile costruire qualcosa per te stesso, perché c'è la sensazione che non avrà mai fine se tu hai le chiavi. Ad esempio, ti sei limitato ai quattro progetti al momento del lancio e poi hai indirizzato le persone al tuo Dribbble. Hai impostato una timeline o vincoli per il lancio?
Halli: Circa un anno fa, ho iniziato a rifare il mio portfolio. Sapevo che volevo avere la flessibilità, sapevo che volevo davvero prendermi il mio tempo e sapevo di non avere il codice. In realtà ho iniziato costruendo l'intero sito interamente fuori dai PNG, testo incluso. In questo modo, ho potuto creare un case study nel mio tempo libero: non dovevo dipendere da uno sviluppatore. Potrei vederlo dal vivo per un po '. Potrei prendermi il mio tempo progettandolo tra progetti a pagamento.
Era estremamente semplice, e faceva sobbalzare alcuni sviluppatori, ma ciò significava che potevo davvero prendermi del tempo per pensare a quei pezzi. Quando finalmente siamo andati avanti, sapevo che quegli studi di casi erano quelli che volevo usare. Volevo mostrare l'ampiezza, alcune cose che potevo fare.
Dopo il rilancio, il sito era più o meno come è ora tranne che gli studi di casi erano in una giostra. Ma questo ha dato troppo peso al feed Dribbble, in quanto è molto più visivamente complesso dei link ai case study. Quindi James ha suggerito di romperli dalla giostra, l'abbiamo fatto e alla fine ho pensato che il sito fosse finito.
Le persone a volte mi chiedono della griglia di Dribbble, come ho detto prima, uno dei motivi era quello di spingere il traffico lì e guadagnare seguaci, ma volevo anche essere in grado di mostrare nuove cose facilmente. Alcuni progetti non sono abbastanza grandi per un case study, ma voglio comunque mostrarli in qualche modo. Volevo anche che la sensazione di persone arrivasse e dicesse, "okay, ci sono molte cose qui". quindi la griglia di Dribbble è un modo per evitare di essere percepito come qualcuno che progetta solo per Google.
Tuts +: E questo è interessante, perché sicuramente delinea il tuo lavoro con Google più avanti. Naturalmente, questo è il più visibile al mondo, quindi quella decisione ha senso dal punto di vista del tentativo di acquisire nuovi clienti. Ma poi guardi il tuo Dribbble, ed è una gamma molto più ampia di lavoro e stile.
Halli: E torna a una domanda precedente - quando stavo iniziando a fare il mio portfolio, e gli studi di casi, stavo leggendo un articolo. Hanno fatto questo esperimento dove hanno messo un violinista davvero grande, Joshua Bell, in una stazione della metro DC. Ha giocato per un'ora o due, e ha fatto forse $ 20. La sera dopo, ha suonato in un teatro a Boston e ha venduto un auditorium a $ 100 a sedere.
Mentre leggevo che mi sono ricordato di aver pensato, ho dei progetti che mi piacciono molto. Li ho sistemati su Dribbble e non sono decollati affatto. Come designer dovresti davvero sapere che il contesto è tutto ma, per qualsiasi motivo, non ha mai fatto clic sul fatto che è esattamente lo stesso quando stai mostrando il tuo lavoro.
Le persone hanno bisogno di aiuto per percepire il valore. Le persone possono pensare che qualcosa sia prezioso perché costa molto, o nel mio caso perché è inserito in un qualche tipo di contesto, in modo che tu possa vedere che ci si cura di farlo. Stavo pensando a Joshua Bell, lo stesso ragazzo che suona lo stesso pezzo in entrambi i posti. Forse l'acustica non era la stessa cosa, ma c'era qualcosa con il contesto che rendeva un gruppo di persone in una situazione in grado di capire il valore del lavoro e un altro gruppo di persone in un'altra situazione la valuta in modo completamente diverso, o più precisamente, senza valore a tutti.
Il mio sito ha richiesto molto tempo e impegno. Quindi la domanda era: è giustificato per me mettere da parte il lavoro dei clienti e concentrarmi sulle mie cose? Alla fine ho deciso che forse è importante per le persone vedere il mio lavoro nel giusto contesto. E posso parlare per esperienza dopo il fatto e dire che ne è valsa la pena. Mi ha aiutato a ottenere progetti più grandi e migliori e in effetti mi ha reso un designer migliore.
Quindi penso che tutti dovrebbero farlo - per mostrare il loro lavoro nella miglior luce possibile. Se non fosse per il mondo, allora solo per se stessi.
Tuts +: Questa è una grande sfida. Grazie per il tuo tempo, Halli, lo chiameremo involucro!
Accentsconagua