• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Pixel Perfect Web Design.
 

Pixel Perfect Web Design.

on

  • 1,161 views

Presentation for the conference: Web is the New Sexy.

Presentation for the conference: Web is the New Sexy.

Statistics

Views

Total Views
1,161
Views on SlideShare
1,160
Embed Views
1

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 1

https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Pixel Perfect Web Design. Pixel Perfect Web Design. Presentation Transcript

    • PIXEL PERFECTDESIGN—<My pixels bring all the developers to the yard./ Gabriela Salinas>
    • GABRIELA—Diseñadora Gráfica. Egresada en 2010.Tres años trabajando en Face.Identidad, Editorial, Branding, Diseño Web,Fotografía, etc.Proyectos Freelance. Mitosis010. Splittt.Master in Business Innovation.@gabrielasalinasgabrielasalinas.tumblr.com Mi nombre es Gabriela Salinas, tengo 23 años soy diseñadora gráfica egresada hace 2 años del Cedim. Tengo tres años trabajando en Face, soy diseñadora senior y hago identidad, editorial, branding, diseño web, fotografía, empaque, naming, entre muchas otras cosas. Actualmente también freelanceo, la cantidad de proyectos web que hago ha aumentado considerablemente. Hay una fuerte demanda de diseño web, y ahora es de los proyectos que más me gusta diseñar, es bien divertido, y te mantiene aprendiendo constantemente.
    • PIXEL PERFECT. 100% AMOR ¿Qué es el diseño pixel perfect? No es una técnica, sino el amor más puro al diseño web. Donde el amor te permite observar los más finos detalles de cada pixel, y elaboras minuciosamente cada elemento para que cuadre perfectamente entre pixeles y proporciones. Cuando los más pequeños detalles están en armonía, un sitio se vuelve pixel perfect.
    • BELLEZA & FUNCIÓN. El objetivo del diseño web es crear un ambiente digital que facilite la actividad humana, refleje una acción, y se adapte al contenido. Parte de este amor no es solo diseñar por que se vea bonito, hay que tomar en cuenta la funcionalidad del sitio, las jerarquías de los elementos, que el diseño respire, que las acciones (call to action) se distingan, que el usuario no tenga problemas en entender. Y ya después se puede dar paso a los detalles.
    • Less is more No hay que olvidar que todo gira en torno a un balance de detalles, y consistencia en el estilo. Un sitio puede ser simple o complejo, pero al diseñar nunca hay que olvidar lo que Mies Van der Rohe nos decía: Less is More. Un sitio con elementos innecesarios es confuso, incluso debe ser como dicen en la moda: Cuando terminas de arreglarte al final quitate un accesorio. Con el diseño web también tendemos a exagerar mucho en elementos y detalles, cuando te brincas al lado opuesto y el diseño es muy cargado de detalles pierdes la armonía y usabilidad. A veces un verdadero reto es hacer algo sencillo en vez de tantos detalles. Nunca está mal ser muy obsesivo con ello.
    • FORMAS DE TRABAJO. DISEÑAR PROGRAMAR MAGIA Para hacer un sitio hay dos fases principales necesarias: el diseño y la programación. En la vida real un diseñador no necesariamente tiene que saber programar, y a su vez un programador no tiene que saber diseñar. Pero existe un limbo mágico entre los dos, y la persona que tiene los skills para lograr los dos de manera perfecta, es esa persona que todos los startups buscan - los llamados rockstars o los ninjas. Generalmente el perfil de esa persona es muy específico, pero de alguna manera es lo que todos aspiramos. Yo creo que los diseñadores tenemos ventaja para lograrlo a diferencia de los programadores que usualmente cuentan con una mente muy analítica y una visión no tan refinada de estética
    • WORKFLOW. BRIEF DISEÑO WIREFRAMES PROGRAMACIÓN Desde la perspectiva de un diseñador para hacer un sitio primero se tiene que hablar con un cliente y generar un brief del alcance, muchas veces los clientes no tienen idea de lo que buscan, y es nuestro papel orientarlos y proponer o mostrar ejemplos. El siguiente paso funciona mejor si se hace de la mano de un programador, que es hacer el wireframe. Después sigue la fase de diseño, y al final la fase de programación, que usualmente suele tardar un poco más que la de diseño, dependiendo el sitio.
    • WORKFLOW — WIREFRAMES. Vamos a adentrarnos un poco al proceso. La fase de los wireframes suena aburrido pero es fundamental y probablemente implica un input mayor de creatividad. Hay muchas maneras para hacerlo, puede ser a mano, existen varias apps, algunos prefieren directo a photoshop para determinar el grid de una vez, incluso existen stencils como este con elementos básicos de interfaces.
    • WORKFLOW — DISEÑO. PHOTOSHOP BROWSER FIREWORKS El proceso de diseño es mucho más complejo. Lo normal es que primero se defina si se va a diseñar en un programa como photoshop o fireworks. O muchos lo que hacen es diseñar con el browser, hacen tests y el photoshop solo lo usan para cosas generales. Ninguna opción es mejor que la otra, cada quien se adapta a lo que más prefiera. Si no sabes programar comoquiera es importante comprender nociones básicas de lo que es posible en cuanto a programación, por que aquí entran muchas preguntas de diseño como si el sitio es responsive, cómo se usa el webfont, ente muchísimas otras cosas. Pero a final de cuentas lo más importante es definir el problema a resolver, y pensar lo que los usuarios necesitan antes de empezar el diseño.
    • WORKFLOW — PROGRAMACIÓN.FRONT END BACK END En cuanto a programación también hay varias dudas que se deben tomar en cuenta desde las fases iniciales, para empezar si el programador es frontend o backend, y si en ese caso va a usar un cms o administrador de contenido como wordpress o ruby on rails, si se van a aprovechar herramientas como html5 o css3, entre otras cosas que no estan demás cuestionarlas desde un inicio para sacarle el mejor provecho al proyecto.
    • LOVE THE GRID. Siempre habrá comentarios de las personas sin experiencia como: "el diseño web es muy cuadrado", "todo son columnas", entre otras cosas. Hay que entender como cualquier oficio se deben contar con las bases, un diseñador editorial sabe que debe usas títulos y textos columnados, un arquitecto sabe que debe haber baños y escaleras. Y normalmente los que han intentado diseñar webs sin estos fundamentos terminan con sitios web imposibles de usar. Es nuestro trabajo como diseñadores entender el grid, encontrar la belleza que se esconde detrás del él, y usarlo con el respeto que se merece. Como dicen "hay que conocer las reglas para después romperlas"
    • USABILIDAD & USUARIOS. UI UX Es por esto que llegamos finalmente a lo más importante que hay que tener en mente al momento de diseñar un web. El diseño debe ser estético pero sin dejar a un lado la funcionalidad y la experiencia del usuario. Los mejores diseñadores saben crear sitios intuitivos. La usabilidad va más alla de definir reglas para los diseñadores, realmente lo que hace es ahorrar tiempo y añadir valor para los clientes y los usuarios finales. Cuando consideramos la usabilidad como el factor principal en todo lo que hacemos, nos aseguramos que el proyecto funcione y que la necesidad de los usuarios sea resuelta, esto va de la mano de un buen diseño.
    • FUTURE—FRIENDLY DESIGN. Antes de mostrarles algunos ejemplos y platicarles mi experiencia, quisiera hacer una recomendación si les interesa iniciar a diseñar web. Igual como en el diseño gráfico, en el diseño web también hay que pensar en el futuro, la realidad es que el diseño web avanza más rápido de lo que incluso nosotros podemos seguir, los estandares cambian, ahora hay muchos devices, muchas resoluciones, retina display, nuevos lenguajes, nuevas tendencias de diseño como el famoso skeumorphism del que se apoya tanto apple. No hay que olvidar que un sitio bien hecho y con elementos atemporales va a cumplir su función por un tiempo más largo que uno apoyado de tendencias que en un año o dos se volvería obsoleto. Hay que tratar de mantener nuestro trabajo relevante y nuevo, pero a la vez que su funcionalidad y valor estético se mantengan más tiempo.
    • Semeantoja.com es un sitio para ordenar comida por internet, ellos son unstartup y necesitaban hacer un sitio más limpio y entendible, pero a la vezmuy estético, moderno y único. Con ellos el flujo de trabajo se dióincreiblemente sencillo, ya contaban con los wireframes e incluso ladirección del diseño que esperaban, aportaron muchos ejemplos y de las dospartes quedamos muy satisfechos.
    • Este es un ejemplo de las pantallas quese propusieron en cuanto a roll-overs.
    • Bleumind es un sitio que hice en Face para un servicio de reclutamiento laboral.Con ellos se rediseñó completamente la marca, ya que buscaban una identidadfina y con mucho detalle, inspirada en universidades como Hardvard y trajes ala medida.
    • Para el sitio web se generóiconografía basada en el monograma,e ilustraciones modulares paracomplementar el sitio. Se manejaronpequeñas sombras y texturas paracomunicar mejor el estilo de lamarca.
    • Cuatro44 son un despacho de arquitectura, buscaban un sitio limpio ypráctico pero con un poco de onda. El problema que ellos tenían esque no contaban con buena documentación fotográfica de susproyectos. Para este caso se pensó en sliders un poco escondidos, paraser visualizados solo por los verdaderamente interesados, y así noensuciar el sitio.
    • Las galerías se buscaban sermodulares, un sitio con unsentimiento muy arquitectónicoy sobrio, pero con elementosactuales.
    • Se pensó en maneras alternativas de agregar detalles al sitio sin recurrir aimágenes, tal es el caso de la sección del proceso, donde se trabajó coniconografía, colores y copy para que la atención se enfocara en estoselementos.
    • Soy Novia es una revista hermana de Chic la cual fuerediseñada en Face. Estos clientes quedaron muycontentos con el trabajo que se hizo y quisieron agregareste sitio al rediseño. Este proyecto fue sencillo por queya se contaba con una dirección y estructura similar paraChic, solo había que adaptar los elementos a la identidadde Soy Novia.
    • Esta es una vista interior de los artículosdentro del sitio.
    • Highpark es un residencial en San Pedro. Estesitio fue el segundo rediseño que se hizo delsitio, ya que el primero que diseñamos resultóser "demasiado innovador" para el tipo deaudiencia que se contaba, ya queoriginalmente el primer sitio se diseñopensando en las dinámicas de iPad y elmercado no estaba familiarizado con esto.Este sitio resultó en una síntesis del primero,donde se mantuvieron solo los elementos másimportantes, y con un diseño más sobrio yelegante.
    • Se intentó destacar las imágenes yelementos de la identidad. A veces lomás simple es lo que mejor funciona. Eldiseño debe ser inteligente y sencillo. Sise aventuran a diseñar algo complejo,al menos la interacción debe sentirseintuitiva.
    • Hilda55 es una marca de jeans,este proyecto solo esperaban unapropuesta conceptual del caminoque debería tomar la marca yesto fue lo que se presentó en elpitch.
    • We get better designwhen we understand our medium. Lo más importante de todo es seguir aprendiendo, entendiendo el medio, intentar aprovechar las herramientas nuevas, y recuerden que el diseño está en los detalles. La meta de atender hasta los más mínimos detalles es pensar de manera crítica hacia el diseño para poder mostrar las mejores propuestas posibles. Y pensar de manera crítica es más importante que las herramientas o skills para diseñar el web. Hacer diseño pixel perfect no es fácil, requiere tiempo, inspiración e imaginación, sin embargo te ayuda a cultivar tu ojo crítico y diseñar mejor.