El documento presenta una guía sobre diseño web pixel perfect de Gabriela Salinas. Explica que el diseño pixel perfect se trata de observar los detalles más finos de cada pixel y elaborar minuciosamente cada elemento para que encaje perfectamente. También destaca la importancia de considerar la funcionalidad y usabilidad del sitio, así como seguir aprendiendo sobre las nuevas tendencias del diseño web. Incluye ejemplos de sitios web diseñados por Gabriela para ilustrar su proceso de diseño.

1. PIXEL PERFECT
DESIGN—
<My pixels bring all the developers to the yard.
/ Gabriela Salinas>

2. 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.
@gabrielasalinas
gabrielasalinas.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.

3. 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.

4. 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.

5. 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.

6. 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

7. 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.

8. 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.

9. 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.

10. 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.

11. 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"

12. 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.

13. 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.

14. Semeantoja.com es un sitio para ordenar comida por internet, ellos son un
startup y necesitaban hacer un sitio más limpio y entendible, pero a la vez
muy estético, moderno y único. Con ellos el flujo de trabajo se dió
increiblemente sencillo, ya contaban con los wireframes e incluso la
dirección del diseño que esperaban, aportaron muchos ejemplos y de las dos
partes quedamos muy satisfechos.

15. Este es un ejemplo de las pantallas que
se propusieron en cuanto a roll-overs.

16. 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 identidad
fina y con mucho detalle, inspirada en universidades como Hardvard y trajes a
la medida.

17. Para el sitio web se generó
iconografía basada en el monograma,
e ilustraciones modulares para
complementar el sitio. Se manejaron
pequeñas sombras y texturas para
comunicar mejor el estilo de la
marca.

18. Cuatro44 son un despacho de arquitectura, buscaban un sitio limpio y
práctico pero con un poco de onda. El problema que ellos tenían es
que no contaban con buena documentación fotográfica de sus
proyectos. Para este caso se pensó en sliders un poco escondidos, para
ser visualizados solo por los verdaderamente interesados, y así no
ensuciar el sitio.

19. Las galerías se buscaban ser
modulares, un sitio con un
sentimiento muy arquitectónico
y sobrio, pero con elementos
actuales.

20. Se pensó en maneras alternativas de agregar detalles al sitio sin recurrir a
imágenes, tal es el caso de la sección del proceso, donde se trabajó con
iconografía, colores y copy para que la atención se enfocara en estos
elementos.

21. Soy Novia es una revista hermana de Chic la cual fue
rediseñada en Face. Estos clientes quedaron muy
contentos con el trabajo que se hizo y quisieron agregar
este sitio al rediseño. Este proyecto fue sencillo por que
ya se contaba con una dirección y estructura similar para
Chic, solo había que adaptar los elementos a la identidad
de Soy Novia.

22. Esta es una vista interior de los artículos
dentro del sitio.

23. Highpark es un residencial en San Pedro. Este
sitio fue el segundo rediseño que se hizo del
sitio, ya que el primero que diseñamos resultó
ser "demasiado innovador" para el tipo de
audiencia que se contaba, ya que
originalmente el primer sitio se diseño
pensando en las dinámicas de iPad y el
mercado no estaba familiarizado con esto.
Este sitio resultó en una síntesis del primero,
donde se mantuvieron solo los elementos más
importantes, y con un diseño más sobrio y
elegante.

24. Se intentó destacar las imágenes y
elementos de la identidad. A veces lo
más simple es lo que mejor funciona. El
diseño debe ser inteligente y sencillo. Si
se aventuran a diseñar algo complejo,
al menos la interacción debe sentirse
intuitiva.

25. Hilda55 es una marca de jeans,
este proyecto solo esperaban una
propuesta conceptual del camino
que debería tomar la marca y
esto fue lo que se presentó en el
pitch.

26. We get better design
when 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.