Share
Haríamos una apuesta segura de que has visto el trabajo de Haraldur "Halli" Thorleifsson en la naturaleza. Con importantes proyectos en su haber, como la página de información de Google+, la página de información de Google Drive, así como el trabajo para Square, Pinterest, Microsoft y otros clientes de alto perfil, el trabajo de Halli está en todas partes. Sin embargo, hoy nos centramos en su hermoso sitio de cartera, que puede ver en haraldurthorleifsson.com.
Tuvimos la oportunidad de hablar con Halli sobre cómo aborda el diseño, y hablamos específicamente sobre cómo abordó el proyecto de poner su propio trabajo allí. Esto es lo que tenía que decir..
Tuts +: Cuando abordaba el problema de crear su propio portafolio, ¿cuáles eran sus requisitos y objetivos de diseño??
Halli: En primer lugar, fue para mí. Como sabe, por lo general no tiene control total sobre los proyectos en los que está trabajando [en el mundo contratante]; es posible que tengan razones comerciales o comerciales para hacer algo que preferiría hacer de otra manera. Creo que la mayoría de los diseñadores están orgullosos de su trabajo y quieren mostrarlo de la mejor manera posible, así que eso era lo que estaba pensando al principio, principalmente para mí mismo y, obviamente, una vez que tenía algo que me sentía cómodo podía poner. que hasta atraer más clientes.
He estado haciendo esto durante mucho tiempo, por lo que he tenido varias carteras en el pasado, siempre fueron básicamente interminables filas de capturas de pantalla, porque eso es lo más fácil de hacer. Sin embargo, eso es algo aburrido, así que quise dividirlo, poner esas capturas de pantalla en algún contexto, poner elementos de diseño a su alrededor y hacer de estos estudios de casos algo propio..
Pero aunque comenzó como un proyecto para mí, también se convirtió rápidamente en otras cosas. Si tiene una buena cartera, puede enviarla a sitios de premios, y suponiendo que gane unos pocos, eso le generará mucho tráfico y, con suerte, en algún lugar de ese tráfico hay algunos nuevos clientes interesantes..
También uso mucho Dribbble, y vi que la cartera y mi cuenta de Dribbble estaban conectadas. Quería dirigir el tráfico de mi Dribbble a mi cartera, y de mi cartera a mi Dribbble, así que hay una especie de "tenia" autoalimentada. Si lo hiciéramos bien, obtendríamos mucho tráfico al sitio y lo aprovecharíamos para obtener más seguidores de Dribbble. No es solo una cuestión de vanidad o una búsqueda de seguidores, Dribbble se está convirtiendo en una plataforma tan importante para conseguir trabajo para nuevos clientes. Cuantos más seguidores tengas, más arriba estarás en los resultados de búsqueda en Dribbble..
Tuts +: Así que es casi como SEO para Dribbble?
Halli: Sí, esa fue una de las razones principales por las que decidí tener el índice Dribbble en la parte inferior. Quería la mayor cantidad posible de personas que vinieran al sitio (obtuvimos alrededor de 100,000 en el primer mes) para seguirme en Dribbble.
Tuts +: Entonces, ¿has visto un aumento en ese número de seguidores??
Halli: Sí, vi a unos 3,000 seguidores de este lanzamiento..
Tuts +: ¡Eso es fantástico! Entonces, ha mencionado que ha tenido capturas de pantalla en el pasado en su sitio, que sigue siendo un elemento principal de esta iteración de diseño. ¿Cómo has encontrado el lugar para que estos se sienten? Cada una de estas piezas de la cartera son sus propios elementos específicos de bestias para cada entrada de la cartera con sus propias características interactivas. Son una especie de "meta proyectos", o proyectos sobre proyectos. ¿Cómo ha hecho que el sitio sea compatible con estas capturas de pantalla variadas en un solo lugar, al tiempo que mantiene la cohesión en todo el diseño??
Halli: El problema con el uso de un sitio web como forma de mostrar el trabajo del sitio web es: bueno, una persona ha venido al sitio y tiene un marco para el sitio que está tratando de mostrar, y cómo lo muestra en el navegador. ? ¿Al mostrarles otro navegador? Se vuelve tan aburrido. Algunos proyectos son más difíciles que otros. Por ejemplo, el proyecto de Google+ fue todo un trabajo de diseño, y realmente no hay mucho que pueda hacer allí, así que tuve que intentar apilarlos de alguna manera interesante, pero realmente no se presta para algo así. En el otro extremo, algo como Santa Tracker o More Than a Map es muy diferente porque hay muchos elementos visuales fuera de lo que puedes encontrar en un sitio web estándar y dado que ambas fueron experiencias de pantalla completa, todas las capturas de pantalla tienen el mismo aspecto ración. Google+ en el otro extremo es una gran cantidad de páginas realmente largas, no es fácil mostrar que.
Al principio, no quería tener una plantilla, porque sabía que los proyectos serían diferentes, no habría manera de que diseñara una plantilla que se ajustara a todas ellas. También quería que el estilo de cada proyecto se hiciera cargo de la página. La mayoría de estos son realmente planos, o dirigidos a cosas planas, pero quería poder dejar que un proyecto que no es plano en el sitio. Es por eso que el sitio no tiene ningún otro control que no sea la barra superior, y puedo cambiar el color de eso. El sitio es prácticamente un lienzo en blanco cuando comienzo a mostrar un proyecto. Y creo que hay que señalar que mi desarrollador es tan increíble que solo acepta que no podrá reutilizar ningún elemento. * (risas) *
Tuts +: Ese es otro aspecto interesante de este proyecto. Antes de la entrevista, nos dijo que no codifica, lo que puede ser una buena restricción. Este es un tema candente en el mundo del diseño. Personas como Chris Coyier han dicho cosas positivas sobre permitir que los diseñadores tengan total creatividad sobre su trabajo, para diseñar sin tener que traducir eso al navegador en conjunto con su proceso de diseño, y luego llevarlo al desarrollador como un desafío. ¿Se ha mantenido intencionalmente alejado del código, o ha sido más una elección personal no aprenderlo??
Halli: Creo que casi todo el mundo puede aprender cualquier cosa, así que no creo que sea tanto. Para que yo o alguien sea realmente bueno en algo, tienen que concentrarse realmente en eso durante mucho tiempo. Y no es donde quiero enfocar mi tiempo. Podría codificar un sitio básico súper simple, pero me llevaría mucho tiempo y estaría muy mal hecho. Hay gente que está mucho mejor que yo en este aspecto y, para que yo pueda ponerme al día, Tendrías que hacerlo a tiempo completo. La gente habla sobre estos "unicornios" (híbridos de diseñador-desarrollador que son geniales en ambos) ... y francamente no hay muchos de ellos. Cuando pides una lista siempre obtienes los mismos nombres. Cuando tienes un diseñador que también es un desarrollador, por lo general están pensando "cómo puedo diseñar esto para que sea fácil de codificar", ya que como no tengo que pensar en eso, puedo decidir lo que quiero hacer. diseño. Casi cualquier cosa en este momento se puede traducir al código. Ese no fue el caso cuando comencé hace quince años. Ahora, cualquier cosa que pueda soñar, alguien puede codificar.
El problema que tengo con el argumento de "los diseñadores deberían codificar" es que también hay muchas otras cosas que realmente deberían estar haciendo. Deben saber sobre mercadotecnia, deben entender negocios, redacción de textos publicitarios, narraciones: hay muchas cosas que deben tener en cuenta. No pondría el código en el lugar de segunda prioridad en la lista de cosas que aprender para un diseñador. Pero habiendo dicho todo eso, no creo que haya realmente una regla para "esto es lo que debería ser un diseñador": si la gente quiere diseñar y codificar, entonces hay más poder para ellos, pero no es para mí..
Tuts +: Uno de los principales argumentos para los diseñadores que necesitan aprender código es que ayuda a los diseñadores a comprender el diseño sensible y el agnosticismo de los dispositivos. ¿Cómo afecta el problema de la compatibilidad entre dispositivos a la forma en que piensa sobre un enfoque de diseño? Por ejemplo, con su sitio, lo dimensionamos a 220px de ancho, y se veía genial, pero también se ve fantástico a 2000px de ancho. ¿Cómo hace eso con un sitio como la página de inicio de información de Google+ cuando está diseñando estáticamente??
Halli: Creo que su experiencia, en su mayoría. Miro los sitios web todo el día y los tengo desde hace mucho tiempo. Ahora, después de que el diseño receptivo entró en escena, cada vez que vengo a un sitio, lo redimensiono para ver si responde. Trato de ver cómo mueven los elementos, no necesariamente cómo técnicamente lo están haciendo en código, porque alguien más puede darme cuenta de eso..
Me parece que los problemas con el diseño total en el navegador es que los diseños tienden a parecer iguales, pero tal vez sea demasiado viejo, he estado haciendo esto durante demasiado tiempo. Tal vez los nuevos diseñadores lo resolverán mejor que yo..
Si estoy trabajando con un desarrollador realmente bueno como James Dickie, quien codificó mi sitio, si tengo una idea de cómo se verán las cosas en el móvil, y tengo una idea de dónde están los puntos de interrupción y cómo deberían funcionar, Usualmente lo que hago es entregarle la porción de escritorio. Él pone eso en la cuadrícula, y vemos lo que sucede. Solo iteramos desde allí. Ya no diseño todos los puntos de ruptura. Sé que si el diseño es de cierta manera, por lo que no tenemos muchos elementos apilados, es probable que se reduzca su tamaño con gracia. Siempre hay áreas problemáticas, pero generalmente es mejor solucionarlos directamente en su punto de interrupción. A veces me sorprende lo bien que funciona poner un diseño en la cuadrícula. Entonces, tal vez podrías argumentar que yo diseño en el navegador después de todo ...
Tuts +: Así que es casi como una intuición en algún nivel: has aprendido que esta es la forma en que las personas interactúan con los navegadores, esta es la forma en que funcionan los navegadores, así que veamos si podemos, por ejemplo, mantener esta disposición más vertical..
Halli: Esa es una de las principales cosas que hago, intento casi siempre poner las cosas verticalmente. No necesariamente debido a la capacidad de respuesta, sino porque quiero que el usuario se centre en una cosa a la vez, no quiero que vean varias cosas. Quiero que se desplacen por la página, experimenten una progresión, algún tipo de historia que estoy tratando de contar, golpeando las cosas emocionales que quieres golpear. Si intentas vender algo, terminas al final de la historia luego de alcanzar estos puntos, y ahí hay un botón de compra..
Ese enfoque es obviamente mucho más fácil con el diseño de la comunicación. No es tan fácil en el diseño de productos, donde generalmente hay muchas más acciones que desea poner frente a los usuarios, lo que es más desafiante. ¿Cuál es una de las razones por las cuales ninguno de estos sitios de productos realmente grandes responde tan rápidamente?.
Para volver a su pregunta sobre la audiencia, la audiencia para esto fue en realidad agencias o clientes que generalmente tendrán un gran monitor. Tendrán el material caro y yo quería que se viera realmente bien en una pantalla de 27 ". Tiene que verse muy bien en una pantalla enorme, así que cuando lo necesitamos, tenemos imágenes enormes en la parte superior de algunas de estas cosas, como 2500px de ancho, y ya sabes, no tuve que pensar mucho acerca de restricciones como el ancho de banda, porque generalmente eso no es una restricción para esa audiencia.
En cuanto a la capacidad de respuesta, mi desarrollador merece mucho crédito allí. Inicialmente pensé que hacer que este sitio respondiera sería demasiado trabajo. Le dije al principio que no debería preocuparse por eso en absoluto, pero insistió. Por lo tanto, en realidad debería obtener la mayor parte del crédito.
Tuts +: Y también es algo de lo que queremos hablar aquí: ¿cuánto valor le da a usted lo bien que puede comunicarse con su desarrollador? Lo mencionaste varias veces y parece que el trabajo en equipo es muy importante para tu proceso..
Halli: No hay sitio web sin un diseñador, y no hay sitio web sin un desarrollador. Puede ser la misma persona y puede no estar bien diseñado o bien desarrollado, pero no hay manera de tener un sitio sin esos dos elementos. Como dije anteriormente, creo que la mayoría de las personas solo pueden ser geniales en una de estas cosas. Tener un desarrollador que puede tomar algo que yo diseñe y codifico es extremadamente importante, por lo que tener una buena relación con ese desarrollador también es realmente importante. He estado trabajando con James por un tiempo, y lo lanzo por cada proyecto en el que trabajo.
Lo más importante suele ser la comunicación. Si puede hablar con alguien y ellos responden a sus notas y están de acuerdo en que vale la pena mover esa única cosa 1px a la izquierda, eso es valioso. En este proyecto, cambiaría de opinión y James me acompañaría, sugiriéndome formas de hacer las cosas, moviendo las cosas, etc. Sin ese proceso, no sería la mitad de bueno. Entonces, creo que es extremadamente importante tener ese desarrollador involucrado. Muchas veces voy a entregar un diseño, y ni siquiera me avisan cuando se lanza. No hay comunicación en el proceso y, como puede imaginar, eso no conduce a los mejores resultados..
Tuts +: Sí, quieres líneas abiertas de comunicación tanto como sea posible.
Halli: Desea poder estar en desacuerdo y tener a alguien que pueda decirle que existe un mejor enfoque. Si el desarrollador tiene buen ojo para el diseño, mejorará todo. Algunos de los mejores comentarios que recibo son de desarrolladores. Mientras venga del lugar en el que quieren un gran trabajo en lugar de hacer lo más fácil, entonces escucho..
Tuts +: Sí, parece que muchos desarrolladores tienen que sopesar esto constantemente, que el valor comercial de la solicitud de diseño coincide con la cantidad de esfuerzo necesario para completar esa solicitud. ¿Cómo se equilibra el equilibrio entre gran trabajo y gran valor comercial??
Halli: Siempre pienso que, al final, son lo mismo. Si llego a un sitio web y es feo, entonces probablemente no va a venderme algo. Si llego a un sitio web y es hermoso pero no funciona, tampoco me va a vender nada. Realmente me gusta trabajar con personas que harán un esfuerzo adicional (o unos pocos cientos de millas) porque quieren que algo sea realmente bueno. Creo que es difícil ponerle un valor en dólares, pero aún así vale la pena.
Tuts +: Completamente de acuerdo. Vamos a cambiar a una especie de tema candente que se ha difundido por toda la web y que mencionó anteriormente en la entrevista. Usted mencionó que el sitio tiene una estética plana. Hay muchos críticos en la experiencia del usuario y muchas personas que están a favor o en contra de "plano" con vehemencia. Hay una gran guerra de diseño en esta área. Estoy seguro de que en quince años de trabajo en diseño, has experimentado un drama similar. Algunas personas dicen de "plano" que es genuino, que dirige la experiencia digital para que sea realmente digital. ¿Qué piensas sobre este argumento??
Halli: Bueno, creo que eso es una simplificación. Creo que la razón para el piso es compleja. Responsive desempeña un papel: si tiene una superficie plana, es muy fácil escalarla hacia arriba o hacia abajo. Si tiene una superficie plana, no ocupa mucho ancho de banda. Pero también es solo un poco de tiempo diseñar los viejos iconos de estilo Apple: tomó mucho tiempo.
Así que creo que hay todo tipo de razones diferentes y luego la gente idealiza algunas de estas cosas después del hecho. Mucha gente trata esto como una religión, diciendo cosas como "eso no es lo suficientemente plano", como si el objetivo final es no tener sombras ni gradientes en ninguna parte, como si el mejor diseño fuera completamente plano, con lo que no estoy de acuerdo..
Hay un problema cuando se obtiene una tendencia en la que todo el mundo se involucra: todo está empezando a verse igual. ¿Cómo diferenciar, o hacer algo memorable??
Creo que plana, o al menos más plana de lo que teníamos, es genial para muchas cosas. Pero todavía me gustan los gradientes y las sombras. Pueden ser mucho más sutiles de lo que solían ser. La gente comienza a comprender que un botón no tiene que verse como un botón físico. Pero aún debe destacarse, y debe parecer que puede presionarlo. Creo que "más plano" de lo que colectivamente teníamos antes es bueno. Creo que totalmente plano no sirve para nada. Si funciona, entonces está bien para su proyecto. No deberíamos convertirlo en un objetivo en sí mismo. De hecho, he estado en reuniones donde la gente diría "eso no es lo suficientemente plano", no hay realmente ninguna manera de responder a eso..
Tuts +: Absolutamente. El diseño debe ser respetado como una cosa de nivel superior a la simple decisión de querer ir hacia una estética plana, por lo que vamos a conducir todo a plano. Eso no es lograr nada más que el deseo de ser plano..
Halli: Sí, para seguir la tendencia. A menos que tengas una razón, como por ejemplo, Google. No sé si lo recuerdas, pero Google solía ser muy feo. Una de las razones fue que contrataron a su primer diseñador luego de siete años de experiencia en la empresa, fue, y en muchos aspectos sigue siendo, una compañía muy desarrollada por desarrolladores. Pero también tienen muchas divisiones independientes, a diferencia de una empresa como Apple, donde existe un imperativo masivo de diseño de arriba hacia abajo. Google tiene muchos departamentos que tienen mucha libertad, por lo que reinar todo eso es un gran esfuerzo..
Creo que el equipo de diseño de Google hizo un trabajo increíble con eso. Creo que eligieron el estilo plano que tienen ahora parcialmente porque podría explicarse fácilmente. Usted podría atraer a la gente y escalar ese diseño, ya que puede configurar una guía de estilo que se puede seguir fácilmente a la vez que mantiene mucha de la libertad que tenía antes..
Tuts +: Y es increíble que tuvieras una mano en ese cambio en el diseño de Google. Y esa es una gran razón para ir plana. Y puedes ver de qué estás hablando aún en Google, con piezas como Analytics que son totalmente diferentes de algo como Google+ o Gmail..
Halli: Y también, con iOS 7, no creo que sea plano en absoluto. Hay mucha profundidad, hay muchos gradientes. Y, por cierto, me gusta mucho iOS 7, hay algunas ventajas, pero en general creo que es un gran avance para Apple. Puede que ya no sea tan skeuomorphic pero no sea plano.
Tuts +: Sí, es un error común, similar a cuando alguien dice que algo es paralaje cuando en realidad no lo es. La idea errónea es que, si los botones ya no se parecen a los botones, si las cosas se minimizan a menos colores, menos bordes, la gente lo etiquetará como "plano".
Halli: Sí. Una cosa que me gusta de plano es que puedes tener más elementos. No compiten entre sí. Si cada botón es realmente pesado, tener un montón de ellos en una página comienza a parecer extraño, la gravedad de la página se dispara. Flat le permitirá tener una interfaz de usuario más compleja y aún así no ocupar demasiado espacio visual.
La interfaz de usuario de iOS 6 Find my Friends es un buen ejemplo de esto. La interfaz de usuario está en el camino. Es tan pesado que todo lo demás cae hacia atrás. Debería ser lo contrario a eso: la interfaz de usuario debe estar en segundo plano, la experiencia y el contenido deben estar a la vanguardia..
Tuts +: Absolutamente. Vamos a redondear esto con una pregunta más sobre su cartera, y esta es una especie de pregunta amplia. ¿Qué desafíos fueron los más difíciles en este proceso? Todos son sus peores críticos y es empíricamente difícil construir algo para ti mismo, porque existe la sensación de que nunca se terminará si tienes las llaves. Por ejemplo, se limitó a los cuatro proyectos en el lanzamiento y luego señaló a las personas a su Dribbble. ¿Estableciste una línea de tiempo o restricciones para lanzar??
Halli: Hace aproximadamente un año, comencé a rehacer mi cartera. Sabía que quería tener flexibilidad, sabía que realmente quería tomarme mi tiempo y sabía que no codificaba. En realidad, comencé construyendo todo el sitio completamente a partir de PNG, incluido el texto. De esa manera, podría presentar un estudio de caso en mi propio tiempo, no tenía que depender de un desarrollador. Pude verlo en vivo por un tiempo. Podría tomarme mi tiempo diseñándolo entre proyectos de pago..
Era extremadamente simple, e hizo que algunos desarrolladores se estremecieran, pero significaba que realmente podía tomarme un tiempo para pensar en esas piezas. Cuando finalmente nos mudamos, sabía que esos estudios de caso eran los que quería usar. Quería mostrar amplitud, algunas cosas que podía hacer..
Después de relanzar, el sitio estaba más o menos como está ahora, excepto que los estudios de caso estaban en un carrusel. Pero eso le dio demasiado peso a la alimentación de Dribbble, ya que es mucho más complejo visualmente que los enlaces del estudio de caso. Así que James sugirió que los sacáramos del carrusel, lo hicimos y finalmente pensé que el sitio estaba hecho..
La gente a veces me pregunta acerca de la red de Dribbble, como dije antes, una de las razones era conducir el tráfico allí y ganar seguidores, pero también quería poder mostrar cosas nuevas fácilmente. Algunos proyectos no son lo suficientemente grandes para un estudio de caso, pero todavía quiero mostrarlos de alguna manera. También quería que la gente entrase y dijera: "bueno, hay muchas cosas aquí". por lo que la cuadrícula Dribbble es una forma de evitar ser percibido como alguien que solo diseña para Google.
Tuts +: Y eso es interesante, porque ciertamente esboza tu trabajo con Google más por adelantado. Por supuesto, eso es lo más visible para el mundo, por lo que la decisión tiene sentido desde la perspectiva de tratar de ganar nuevos clientes. Pero luego miras tu Dribbble, y es una gama mucho más amplia de trabajo y estilo..
Halli: Y vuelve a una pregunta anterior: cuando estaba empezando a hacer mi cartera y los estudios de caso, estaba leyendo un artículo. Hicieron este experimento en el que pusieron a un gran violinista, Joshua Bell, en una estación de metro de DC. Jugó como una hora o dos, y ganó tal vez $ 20. La noche siguiente, tocó en un teatro en Boston y vendió un auditorio a $ 100 por asiento..
Mientras leía, recordaba haber pensado, tengo proyectos que realmente me gustan. Los he puesto en Dribbble, y no despegaron en absoluto. Como diseñador, debes saber que el contexto lo es todo, pero por cualquier motivo, nunca hiciste clic en que es exactamente lo mismo cuando estás mostrando tu propio trabajo..
Las personas necesitan ayuda para percibir valor. La gente puede pensar que algo es valioso porque cuesta mucho o, en mi caso, porque se pone en algún tipo de contexto para que pueda ver que se pone atención en ello. Estaba pensando en Joshua Bell, el mismo tipo tocando la misma pieza en ambos lugares. Quizás la acústica no era la misma, pero había algo en el contexto que hacía que un grupo de personas en una situación entendiera el valor del trabajo y otro grupo de personas en otra situación lo valorara de manera completamente diferente, o más exactamente, no valorara en absoluto.
Mi sitio tomó mucho tiempo y esfuerzo para mí. Entonces, la pregunta era: ¿es justificable para mí dejar de lado el trabajo remunerado del cliente y centrarme en mis propias cosas? Finalmente decidí que tal vez es importante que las personas vean mi trabajo en el contexto correcto. Y puedo hablar por experiencia después del hecho y decir que valió la pena. Me ayudó a hacer proyectos más grandes y mejores y, de hecho, me hizo un mejor diseñador..
Así que creo que todo el mundo debería hacer esto: mostrar su trabajo de la mejor manera posible. Si no fuera por el mundo, entonces solo para ellos mismos..
Tuts +: Ese es un gran desafío. Gracias por tu tiempo, Halli. Llamaremos a eso una envoltura.!
Accentsconagua