Transcripciones
1. Avance: Yo soy Erika Heins. Soy diseñador web y desarrollador web. Llevo más de 10 años trabajando en el campo en la ciudad de Nueva York. En esta clase hablaremos sobre el diseño web visual y cómo planificar tu dirección visual, cómo tomarla en opciones de color, opciones tipográficas, opciones imagen, y luego cómo adaptar ese proceso para un diseño web receptivo. Entonces, creando collages de elementos o diseños de Frankenstein, y luego entrando en diseños responsivos específicos que trabajarás con varios usuarios y seguirás iterando. Al final de esto tendrás tu tablero de inspiración y a partir de eso
habrás creado un collage de elementos o un layout de Frankenstein para que sirva de guía para el resto de tus diseños y además tendrás diseños de respuesta completa que podrías entregarle a un desarrollador, o podrías llevarlos a la siguiente clase y construir un sitio web tú mismo. Esta clase es Gorgeous Web Design: Branding, UI, y Visual Prototipos.
2. Introducción: Hola, y bienvenidos a Gorgeous Web Design. En esta clase, harás el branding, el diseño de la interfaz de
usuario y los prototipos visuales para un sitio web receptivo. Después puedes entregárselo a un programador o continuar con la siguiente clase para construirlo tú mismo. Ya debes tener un sitemap y bocetos o alarmas. De no ser así, puedes hacer la primera clase de esta serie para ayudar a planear este sitio. Empezaré con esta cotización de Scott Adams sobre creatividad permitiéndote cometer errores y ese diseño es saber cuáles guardar. Entonces, ese será un tema de que queremos hacer mucha exploración y luego tener mucho para elegir mientras editamos y pulimos y refinamos. Entonces, las herramientas que usaremos en esta clase son Illustrator y Photoshop para hacer maquetas. También podrías usar Sketch que estoy probando ahora y me gusta mucho, pero eso es tal vez un tema para una futura clase. Twittear a mí si te gustaría escuchar de eso. Entonces, empecemos. De acuerdo, así que adelante y prepárate. Descarga Sketch si no lo tienes. Podrías usar Illustrator o InDesign u otra aplicación de diseño de tu elección, pero te voy a recomendar Sketch por
lo fácil que se convierte en desarrollo web y las herramientas que tiene. Entonces, obtén una cuenta de Google Drive también si necesitas una, y luego sigue adelante y consigue una cuenta de icebergs.com mientras estás en ello. Es realmente útil para hacer tablas de moodboards y cosas.
3. Dirección visual: Está bien. El primero que necesitamos para nuestro diseño web visual es un sentido de dirección. Queremos pensar en lo que es apropiado para nuestros usuarios particulares. Entonces, ¿cómo vamos a hacer eso? Es tentador mirar las tendencias las diferentes formas
que la ilustración, la arquitectura, el color, han reflejado la cultura de los tiempos y la tecnología de los tiempos a través del art nouveau, su art deco, a través de la Bauhaus, y ahora incluso vemos eso con diseño web. La gente siempre está copiando a Apple como líder en buen diseño, sobre todo en software y hardware. Pero si lo miramos atrás, vemos que no nos podemos imaginar copiando eso ahora, pero simplemente reflejaba el espíritu de los tiempos. Por ejemplo, cuando Apple empezó a hacer esta superficie reflejada reflejada debajo del iPhone, empezaste a ver que debajo de cada producto que se presentaba en la web, y lo mismo con sus barras de navegación, esas fueron estilos comunes que empezaste a ver todos estos tutoriales de photoshop de cómo recrear eso. Entonces las cuadrículas finalmente se hicieron posibles en la web y bastante perspicacia se copió una tonelada para las personas que estaban tratando de explorar cómo usar una cuadrícula, y ahora el diseño plano es las últimas tendencias. Entonces, LayerVaults fue una de las ejecuciones más claras de este estilo, y así han tenido kits de interfaz de usuario copiando todo su sitio. Mucha gente sólo tratando de hacer lo que parece actual, y lo que parece fresco y moderno. Entonces, es útil hasta cierto punto porque obviamente una tendencia a servir al apetito cultural actual. Si estás liderando esa tendencia, estás mostrando tu gusto, estás demostrando que eres moderno, que entiendes tipo de lo que es actual y fresco en la cultura actual, y si estás siguiendo esa tendencia eres una especie de tratando de enloquecerse en esa plusvalía de marca como de Apple. Estás tratando de decir que eres tan sofisticado o tenías tan buen diseño como las manzanas. Entonces, estás tratando de ganar algo de esa misma reputación. Pero claro que también son un poco cojos porque cuando estás siguiendo las tendencias hace que tu trabajo sea menos distintivo, también
lo fecha a un periodo en particular, y también embota lo que estás pensando porque estás empezando a copiar otras fuentes visuales en lugar de
tratar realmente de llegar a un nuevo lenguaje visual propio. Entonces, quieres partir de un sentido de tu propia marca, cuáles son sus valores, cuáles son sus personalidades, y así la clase anterior en esta serie pasó por algunas preguntas detalladas que te ayudarán a articular eso, cosas como un mapa de personalidad o tus métodos de compromiso que podrías usar. Por lo que necesitas algún sentido de cuál
es tu marca y de qué vas antes de pasar al diseño visual. Entonces una vez que estás ahí, el primer paso para mí es siempre un tablero de inspiración donde empiezo a tratar de averiguar donde- empiezo a tratar de meter mis materiales en un formato digital. Entonces necesito capturar colores, necesito capturar fotografía, necesito empezar a ver todas estas cosas juntas para poder
empezar a visualizar lo que va a tomar forma mi sitio web. Entonces, Dropmark es una gran herramienta para esto. Aquí hay una colección que estaba haciendo para sitio de protesta, y aquí hay otra reciente de más de una marca de estilo de vida, y se puede ver que algunas de ellas sólo
estoy agarrando para el color y algunas de ellas son estoy agarrando para ejemplos de fotografía. Entonces, por ejemplo, queremos que los libros que estaban vendiendo sean blancos y queremos mostrarlos sobre un fondo siluetado. Esto permite a mi cliente visualizar cómo se va a ver. Pero otras cosas, no siempre muestro pizarras de humor o pizarras de inspiración a los clientes porque no está claro por qué has escogido cada imagen ahí dentro. Entonces por ejemplo este vestido a la derecha, escojo porque tengo el color azul que quiero usar. Pero si le mostrara esta pizarra de humor a un cliente, ella podría pensar, ¿
vamos a mostrar fotografía de moda en la página web? No siempre entienden. Entonces, realmente tu tablero de inspiración debería ser solo para ti para que tengas colores, que tengas tipografías, comienzas a tener una idea de en qué familia va a caer tu sitio. Entonces empieza por ahí, me gustan los Icebergs porque de nuevo te
permite resaltar ciertas fotos como favoritas y te permite agruparlas, y quieres recolectar un montón de fotos que podrías usar, intenta conseguir unas reales. Entonces, si sabes que tienes un montón de fotos de usuarios que van a ir en tu sitio, adelante y ponlas en tus tableros de inspiración, que empiecen a formar parte de la mezcla. Si no lo haces, entonces adelante y busca tiro de sujeto
similar de la manera en que planeas dispararles. Se quiere empezar a recolectar colores. Entonces así como navega por la web, tus blogs favoritos, tus sitios favoritos, solo busca color y solo toma cualquier imagen que se vea bien en la web. Diseño de impresión, diseño de interiores, diseño web, todos tienen formas distintas en las que se utiliza el color. Por lo que quieres intentar encontrar activos que ya estén en formato digital, para que sepas que esos colores se van a renderizar bien aún en pantalla. Entonces también quieres empezar a coleccionar tipografía que habla en tonos similares a la voz de tu marca. Entonces, se puede buscar tipografía fuera en la calle, se
puede mirar la señalización, se
puede mirar el empaque. Simplemente empieza a visualizar lo que va a reflejar, nuevo, tu personalidad raíz y los valores de tu marca.
4. Color expresivo: De acuerdo, adelante a color. Realmente me gusta comenzar Visual Design decidiendo mi color. ¿ Esta marca es clara u oscura? ¿Brillante o suave? Porque los colores que elijas crean una fuerte impresión no verbal. Entonces, piensa en la celebridad que podrías elegir para representar a tu marca. ¿ Están callados o ruidosos? ¿ Están frescos de cara o desgastados? En tus pautas de marca te gustaría una descripción de tu esquema de color general, ya sea pastel, colores brillantes, neutrales o lo que sea. Entonces, a medida que nos
adentramos en los detalles, necesitamos entender nuestro medio. Entonces, lo que todavía me sopla la mente después de años y años en el campo es solo RGB versus CMYK, color
aditivo versus sustractivo. Eso en la pantalla, rojo azul y verde juntos hacen blanco. Es la luz que realmente brilla fuera de la pantalla y en tus ojos, no
es la luz que brilla sobre el papel y que te absorbe la tinta. Entonces, pienso en el diseño web como una oportunidad para usar muchos colores más brillantes que no tienes de otra manera. CMYK no puede hacer estos azules y verdes brillantes de Internet que puedes hacer en RGB. Es como colores libres, hay
que pagar mucho dinero y las tarifas de Pantone están en tintas para conseguir estos colores particulares en impresión. Entonces, pienso en qué diseño se parece mucho a artistas trabajando en luz. Es como Dan Flavin haciendo esculturas con luz, James Turrell, estas son algunas de las referencias de cómo pienso sobre el diseño web. Una buena idea es mantener una rueda de color cerca ti cuando intentas escoger colores para que te jogre la memoria, para que no solo seas como el azul,
el rojo, los colores que puedes nombrar pero en realidad estás viendo todas estas colores raros en medio que no tienen nombres. Entonces, hay todo tipo de formatos diferentes para ruedas de color, solo
puedes buscar por Internet y ver cuál te habla, y otra vez buscar uno que sea RGB que realmente esté hecho en un medio en el que estaré trabajando. Y mira uno por un rato y ve qué colores parecen representar tu marca. A mí me gusta elegir un color como mi color base. Entonces, mira a qué color siguen regresando tus ojos. El color es una cosa del cerebro derecho, es visual, no es verbal, pero siempre me gusta ir con cerebro izquierdo y considerar su simbolismo también. Entonces, podrías pensar en todas las cosas que alguna vez has visto que eran azules. ¿ Cómo te hacen sentir? Este es el simbolismo agregado de un color. Y obviamente hay diferencias culturales con el color, por lo que debes entender eso e investigar a tu público. Entonces, solo pasemos por algunas de las principales familias y sus connotaciones hasta donde las conocemos en el occidente por orden de popularidad. Estos pasos son todos de Stephen Sidelingers manual de color. Los diagramas son del sitio web de color de
habla gráficamente y de un estudio de color de Kissmetrics. Entonces, el azul es el color más querido de los adultos, pero es sólo el número cinco con niños, lo cual es gracioso. Está fresco, está tranquilo, es seguro, es clásico. Rara vez, si alguna vez, que un cliente rechace el azul. Es bastante legible en blanco o como tipo invertido. El rojo es el siguiente más popular, es cálido, es vibrante, es fuerte, es llamativo, es genial para llamadas a la acción o como color de acento. Siempre obtendrás la mayor cantidad de clics en botones rojos grandes. También supuestamente es atractivo para las papilas gustativas como la fruta roja dulce, razón por la
cual muchas marcas de dulces son rojas. Es legible sobre blanco, no es tan legible sobre negro. El verde es el número tres con los adultos pero solo es seis con los niños. Hay una gran diferencia entre los verdes amarillos y los marinos azules, pero en general se podría decir que es natural y animado y también es bastante legible. El morado es el número cuatro en general, pero es el único color que tiene una fuerte diferencia para hombres y mujeres. En un estudio el 23 por ciento de las mujeres dijo que el morado era su color favorito pero el cero por ciento de los hombres. A menudo se usa para transmitir espiritualidad, realeza o relajación como la lavanda. El amarillo es el número seis con los adultos, es alegre, emocionante y se pone atención. En mi experiencia es muy polarizante. A la gente o le encanta el amarillo o lo odian. Si quiero usar amarillo para una marca, siempre le pregunté primero al cliente, ¿cómo te sientes por el amarillo? Es súper legible con negro por lo que se utiliza en señales de advertencia. El azulado es nuestro último color, cual se incluye como una mirada recordatoria en colores intermedios, es útil para la web, puedes empujarlo hacia azul o el verde y combinarlo con casi cualquier cosa. Es calmante, está claro y es afable. Nuevamente, aquí está el estudio del morado fue el único color con una gran discrepancia entre hombres y mujeres. Entonces, eso es algo a considerar si te han dirigido a no hacer que la marca sea demasiado femenina, pero te están diciendo que uses el morado como color de su marca, tal vez
tengas un poco de desconexión ahí. El naranja es otro, es el número cinco con adultos y el número cuatro con niños, se ve como flamboyante, cálido, y brillante pero en un estudio de 2011 fue el color menos favorito del 22 por ciento de los hombres y el 33 por ciento de las mujeres. Y también es el color que se ve más a menudo es barato o barato, lo que podría tener algo que ver con ello. Pero sí parece entrar y salir de moda porque es un color contrastante con el azul. Entonces, es utilizado por marcas que quieren ser vistas como una alternativa. Hay algunos bancos que usan naranja porque todos los bancos usan azul. Entonces, eso es algo a considerar, pero solo nota si te sientes bien en este momento de la historia. El color también es una forma en que estás trayendo emoción a tus diseños. Entonces, aquí te dejamos un gráfico divertido de cómo diferentes empresas están recogiendo color para transmitir diferentes sentimientos. Tómalo con un grano de sal pero hay una razón por la que tantos bancos están usando el azul, y sí agrega emoción a tus diseños o cuál podría ser el motivo por el que algunas personas le temen. También hay algunos estudios que dicen que las mujeres nombran mucho más variaciones de color que los hombres. Entonces, si estás escogiendo muchos neutrales, podrías tener diferentes personas en tu audiencia recogiendo o no. Por lo que de nuevo, me gusta escoger un color como mi base. Entonces, pienso en eso como el sentimiento principal que estoy tratando de transmitir con mi branding. Entonces, digamos que escojo este popular azul. Ahí se puede parar. Si solo tienes un color con blanco y negro, eso te da mucho con qué trabajar. Aquí te presentamos la guía de voz y tono de Mailchimps y puedes ver que están haciendo mucho con un solo color. En realidad lo son si vas por el nav izquierdo de este sitio están usando un color diferente para cada sección. Entonces, sí crea un poco más de vivacidad con este arco iris de colores pero para cada diseño, lo
están haciendo bien con solo uno. Entonces, desde tu color base, si quieres ir más allá por orden de complejidad aquí hay algunas opciones, podrías agregar tintes y tonos, podrías agregar colores análogos, podrías agregar colores contrastantes, o incluso podrías probar colores discordantes. Entonces, tintes y sombras, 0-255 es una herramienta realmente buena donde te muestra aquí hay algunos códigos hex para colores tintes y tonos de ese mismo color. Y eso es útil porque un color que es bueno para un botón no es el mismo tono que va a ser bueno para un color de fondo o para el color de borde. Por lo tanto, a menudo necesitas en especialmente un diseño de aplicaciones versus diseño de sitios, a menudo
necesitas más colores
de los que crees y necesitas muchos tintes y tonos del mismo color. También hay herramientas que sugerirán colores análogos, colores contrastantes, combinaciones que no necesariamente encontrarías por tu cuenta y que no escogerías. Esto es una especie de rojo ladrillo y como un azul de pavo real tealish, como si no pensaras en estos colores fuera de juego pero cuando te estás cambiando a las buenas herramientas de alguien que te ayudarán a encontrarlos. Ian Storm Taylor tiene un buen artículo llamado “Never Use Black” sobre cómo puedes usar estos tintes y tonos para reforzar tu marca pero la aplicación de Facebook es todos tonos de Facebook azul en lugar de negro o gris medio. Simplemente están usando unas saturaciones diferentes. De nuevo, incluso si lo
haces, normalmente necesitas más colores de los que crees. Diseño de app, tienes reflejos, tienes alertas, tienes errores, incluso en los sublimes temas de texto todavía hay mucho color pasando aunque solo lo pienses primero tu primera impresión es que solo es una App gris. Slack es un ejemplo realmente bonito de color también que usan esta ciruela tonos de ciruela para su navegación lateral con acentos de este color salmón y azulado claro. Entonces, realmente no lo notas después de usarla por un tiempo, solo se siente como luz de noche o algo así, pero realmente crea un estado de ánimo realmente único para esta aplicación. Aquí hay otro hermoso sitio de Urban Ministerios de Durham, también usando color para agregar mucha emoción y belleza a objetos baratos muy cotidianos. Aquí tienes un sitio de turismo en Brujas. Entonces, verás que están usando colores vivos supersaturados para transmitir la diversión que vas a tener en tus vacaciones y lo activo que es este lugar, cuánto hay que hacer. Por lo que el color se utiliza para reforzar la sensación o la importancia del sitio. Nuevamente, los botones rojos grandes son siempre una llamada clara a la acción y aquí hay uno con un audaz uso del amarillo como fondo que te da un todo es una sensación muy diferente a solo un fondo blanco liso. XOXO es una conferencia para diseñadores y otras personas creativas y su sitio inicial fue tan loco gradiente morado o azul que transmitió la idea de que este es un lugar para personas creativas. El color a menudo aumenta los clics. Entonces, las personas que hacen anuncios de banner te dirán esto que cuanto más brillantes los hagas, más clics obtendrán. Entonces, puedes volver a tomar eso con un grano de sal pero agregar color a tu diseño a menudo aumentará los
clics La última precaución es que por supuesto los colores no se ven iguales en todas las plataformas, querrás probarlos tanto en Mac como en PC. En PC tus colores tienden a estar un poco más saturados, un poco más oscuros. Mac tiende a ser un poco más ancho, puede ser un poco lavado. Así que ten cuidado si estás usando colores realmente claros en un Mac y también estar realmente especialmente con naranjas y marrones. Nunca olvidaré un sitio que diseñé para un camión de café y con orgullo fui a mostrárselo a alguien en un PC y se veía horrible. Entonces, siempre quieres tener cuidado con eso cualquier cosa en la familia amarilla, verde. Entonces, solo por referencia vamos a empezar a hacer este archivo patrimonial. Entonces, en Illustrator, es agradable tener un archivo grande con todas las piezas comunes que vas a usar para el diseño de tu sitio. Entonces, aquí está Teehan y Lax han lanzado una gran cantidad de plantillas y
kits de Photoshop y aquí hay un ejemplo en una larga publicación de blog que
escribieron describiendo el proceso de diseño para medio, que bien vale la pena una lectura. Aquí tienes un ejemplo de su archivo de activos de UI que hicieron. Entonces, a medida que empieces a escoger tus colores, pégalos en tu archivo de activos de Illustrator y empieza a ver cómo encajan. Entonces, adelante y empieza un nuevo archivo en Sketch, quieres usar la plantilla de diseño web para
que tenga los diferentes tableros de arte para cada uno de tus puntos de ruptura sensibles y vas a crear una paleta de colores en el página de símbolos. Verás dos páginas en el documento predeterminado, hay una donde crearás tus diseños reales y luego hay una segunda que contiene todos los símbolos. Si estás haciendo esto en Illustrator podrías crear un archivo de activos separado o simplemente un tablero de arte de activos o símbolos en tu archivo. También puedes usar algunas herramientas web como Kuler o ColorLovers para investigar y configurar paletas si lo deseas.
5. Tipografía expresiva: A continuación, trabajaremos en la tipografía que exprese la personalidad del sitio. Entonces, ¿cómo elegimos tipografías? Bueno, hay algunas tipografías que simplemente son inapropiadas. tipografía práctica tiene un buen ejemplo de eso. Un guión elegante sería inapropiado si conduces 80 millas por hora, y de igual manera, hay algo que simplemente no será legible en pantalla. legibilidad significa que en realidad se puede distinguir la forma de cada letra. Entonces, cuando estás mirando tus diseños en Illustrator u otro programa vectorial se ven todos perfectos, pero luego cuando los renderices como un mapa de bits a 72 dpi, comienzas a ver dónde está el anti-aliasing tratando de sombrear este pixel grid no está realmente haciendo la letra forma justicia. No estamos trabajando en piedra, no
estamos tallando letras ahí dentro con un cincel. estamos pintando en papel. Tenemos que entender a nuestro medio. No estamos tallando letras en piedra con un cincel ni pintarlas sobre papel con un pincel. Estamos sombreando rejillas de píxeles con código. Ciertas caras se ven horribles en una cuadrícula de 72 dpi. antialiasing intenta renderizar redondez o trazos que son más
delgados que un píxel pero no está haciendo la justicia de forma de letra real. Se pierden a baja resolución las cualidades que hacen especial a Garamond o Bodoni. Una tipografía Web legible tiende a tener formas rectas, una gran altura x, contadores abiertos y un peso de línea uniforme. Esto es lo más importante para las etiquetas de texto corporal y otros elementos pequeños, un tamaño más grande que tenga más flexibilidad. pantallas de alta resolución cambian todas estas reglas pero aún no son universales por lo que aún necesitamos reconocer 72 dpi. En la cuadrícula de píxeles también se ven tan pocas cursivas en la Web. La línea diagonal simplemente no se ve muy bien a 72 dpi. Lucy de grant ni siquiera ofrece cursiva en absoluto. cursivas Serif fueron diseñadas como caras de cortesía con mucho carácter distinto. cursivas sans-Serif son básicamente versiones inclinadas. Entonces, no suelen dar suficiente énfasis. Cuando estés configurando tus tipografías y eligiendo fuentes que sean apropiadas para tu marca, solo piensa en la misma topografía que podrías haber aprendido en diseño impreso o gráfico. Eso si quieres que una línea de texto se lea como línea divisoria o que las mayúsculas se destaquen como formas geométricas, podrías usar todas las mayúsculas. Si quieres que sea más legible en tallas pequeñas o para alguien con vista que no sea tan buena, minúscula tiene los ascendentes y descendientes que le dan una silueta más distinta que sea más legible. Por supuesto que podrías elegir tipografías o fuentes por razones
prácticas que una fuente condensada te permita encajar mucho más palabras en el mismo espacio. Los titulares pueden ser un poco más aventureros porque estás trabajando con ellos en tamaños más grandes. Chuck Walton tiene una serie de artículos realmente agradable donde está jugando con el titular. Diferentes diseños de los titulares para cada artículo. Jason Santa Maria también explora el diseño editorial único para cada artículo en su sitio, e incluyendo la serie de gramos de caramelo aquí hay uno de Jesse Arrington donde deletrea el titular en dulces. Entonces, recuerda que la tipografía también puede tener lugar fuera de la computadora. Si buscas tipo para reflejar un cierto periodo o cierto sentimiento, puedes mirar el proyecto paralelo de Jason llamado Typedia, donde es toda una enciclopedia y puedes ordenar a través de tipografías por diseñador, por periodo histórico, por y realmente obtener una sensación de un nivel mucho más profundo de información sobre un tipo de letra. Tenemos suerte ahora porque ahora podemos hospedar estas tipografías arriba en la Web. Antes en los viejos tiempos de la Web, tendríamos que exportar cada titular de fantasía como imagen y subirlo al servidor con el resto de nuestros archivos pero ahora hay un montón de empresas que se han dado cuenta con los requisitos técnicos y de licencias para hacer esto por nosotros. Se puede ver la tipografía en la nube que tiene fuentes
Web que se ven bien incluso hasta nueve píxeles cursivas. Podrás ver Typekit el cual ha reunido muchas listas
geniales para alternativas a caras de tipo común o algunos de los favoritos de la multitud. Puedes mirar MyFonts donde puedes navegar por una enorme biblioteca de fuentes Web que puedes hospedar en tu propio servidor y luego Google Fonts es una forma rápida y fácil usar muchas tipografías de código abierto e incluirlas en tu sitio con una sola línea de código. Por supuesto, hay temas de plataforma cruzada con tipo dos. Entonces, a la izquierda está nuestra versión para PC de la misma fuente que está a la derecha y puedes ver que casi ni siquiera lucen igual. Entonces, con cada tipo de letra que elijas, realmente
necesitas probarlo en un navegador Mac y en diferentes versiones de Internet Explorer y en Firefox, versiones
antiguas de Firefox, pero gracias a dios Typekit nos permite probar todo todo esto en un solo lugar. Entonces, ese es otro gran lugar para empezar a escoger tipografías web por esa razón. También cuando estás escribiendo tu CSS o especificándolo para tu programador, quieres especificar algunos retrocesos. Entonces, antes de que tu fuente Web se cargue o en caso de que no se cargue, qué usarías en su lugar. Entonces, estos se llaman pilas de fuentes así que podría decir usar Franklin Gothic medium pero si eso no está disponible usado Franklin Gothic, bla bla bla, suplente a Verdana o algo más. Quieres por supuesto elegir tipografías que reflejen la personalidad de tu marca y las características más importantes. Entonces, piensa en cuánta personalidad puede llevar un tipo de letra. Aquí te presentamos un gran sitio llamado Thank a Type Designer sobre qué si los diseñadores de branding
acabaran de cumplir con las fuentes del sistema y miraran lo diferentes que serían estos logotipos. Tendrían realmente el mismo atractivo universal y duradero si solo se establecieran en fuentes estándar en stock? Entonces, haz algunas investigaciones y realmente piensa en cómo puedes transmitir los valores de tu marca. Aquí hay un sitio que hace la China vintage y así están usando títulos
pintados a mano para transmitir el encanto artesanal de su alfarería. BK Swiss o BX Swiss está usando Helvetica para transmitir neutralidad y modernismo. Usar All Five es usar avant garde, sans-serif para mostrar su modernidad y
usarla con transparencia para transmitir una sensación de misterio. Essence está usando didot para lucir a la moda y clásico. Oscar salud está usando un serif de losa para parecer humano pero aún más conocedor de la Web. I'm Not There, la película usó tipografía grunge que es en cualquier momento que estás cortando o angustiando al tipo para retransmitir el tema de las películas de la disolución. Entonces lo último es que una vez que has elegido algunos tipos de letra y estás trabajando con los diseños de página reales, hay algunas preocupaciones por la legibilidad, que es lo rápida o fácilmente que eres capaz de leer el texto. Entonces, generalmente, hay una cierta longitud de línea que se considera legible y algunas personas dicen que es entre 45 y 75 caracteres. Algunas personas dicen que puedes ir todo el camino hasta 90 y las velocidades de lectura no disminuyen sino nada más largo que eso y se considera que causa fatiga para que el ojo tenga que viajar todo el camino de regreso al inicio de la siguiente línea para encontrar por dónde empezar. Entonces, lo que puedes hacer, este es un truco de Trent Walten otra vez, es dejar caer un personaje de marcador después de 45 caracteres, y luego caer otro en después de 75 o 90 y luego mientras tu línea se rompa entre esos dos marcadores sabes que esa es una buena longitud para tu párrafo. Entonces si estás haciendo columnas más
estrechas, sabes que puedes apretar la delantera pero una columna más ancha va a necesitar un poco más de plomo porque el ojo tiene que tener un poco más de espacio para volver a hacerlo al inicio de la siguiente larga línea. Si estás noqueando al tipo, posible que necesites un peso más ligero que en tu texto normal sobre un fondo blanco lo cual es lo contrario de la impresión porque de nuevo, el blanco es luz brillando en tus ojos lo cual está comiendo en el tipo oscuro donde es como en si estuvieras imprimiendo este layout, el negro sería tinta, eso estaría sangrando en el tipo knockout. Entonces, es al revés. Se quiere asegurar que haya un contraste adecuado para evitar la tensión ocular. En la paleta de desarrolladores hay herramientas que te ayudarán a probar esto vez que tengas un prototipo HTML pero solo intenta usar tu juicio cuando estés haciendo maquetas de que
no va a ser difícil para la gente leer. Una última cosa es que subrayar es un holdover desde la era de las máquinas de escribir. Reduce la legibilidad porque estás perdiendo. Si entrecerras los ojos, puedes ver que no puedes ver a los descendientes en este párrafo de texto también cuando está subrayado. Entonces, los subrayados solo estaban alrededor para las máquinas de escribir y se puede usar color, se puede usar audacia. Hay otras formas de indicar longitudes y aún así tener tu sitio sea muy utilizable. Incluso el grupo de investigación de Jacob Nielsen que es la firma líder en investigación de usabilidad ha eliminado los subrayados de sus longitudes. Entonces, tal como lo hizo Google recientemente. Entonces, si alguien está tratando de decirte debes subrayar tus enlaces, puedes darles como refutación al grupo Nielsen Norman. De acuerdo, entonces, ahora vamos a configurar nuestro sistema de tipos para que investigue y elija un par de
tipos de letra que puedan servir para su marca y luego vaya
a su página de símbolos o a su archivo de activos y pruebe algunas muestras. Vea cómo funcionan esas tipografías como titulares, como párrafos, como rótulos. Es posible que necesites más de uno para servir diferentes propósitos. También pruébalos en pestañas de botones y elementos interactivos. También podrías probar Typecast o Typekit para ver cómo se verán realmente estas caras en el navegador.
6. Imágenes potentes: El último pedazo importante de nuestro diseño visual son las imágenes. Fotografías bien elegidas pueden llevar un diseño. Las imágenes cuentan tu historia a través de idiomas con velocidad y emoción. Estas fotografías de Rosie Holtom de personas sin hogar como desean que se les vea, cambiaron
totalmente la historia en cómo percibes a la comunidad sin hogar. Pero antes de saltar a la búsqueda de imágenes, asegúrate de haber recogido tus pensamientos. Vuelve a las pautas de tu marca y haz algunas notas sobre el tipo de imágenes que capturaría tu marca. Serían fondos atmosféricos o retratos personales? ¿ Deliciosas bodegones o ilustraciones encantadoras? ¿ Te gustaría mostrar estilos de vida aspiracionales o quizás mapas? Y por suerte, la web está finalmente en el ancho de banda donde estas imágenes se cargarán en milisegundos y no minutos. Http significa protocolo de transferencia de hipertexto que era todo lo que podía manejar en los primeros días, pero ahora estamos viendo cada vez más sitios cuentan sus historias a través imágenes e incluso videos de fondo como este. Si no tienes el presupuesto de tiempo ni el acceso a la fotografía personalizada, hay algunos recursos en línea que pueden ayudar mucho. Pero no descartes la posibilidad de contratar un fotógrafo y tomar algunas tomas profesionales y personalizadas, te
servirán bien durante muchos años. En el archivo de recursos sin embargo, he enumerado algunos de mis lugares favoritos para fotografía de código abierto y reutilizable. También puedes usar las imágenes de google para buscar y filtrar las imágenes en cualquiera de estos sitios de código abierto poniendo el sitio colon y luego url delante de tus términos de búsqueda. Los fotógrafos ponen mucho trabajo en sus imágenes. Por lo que de nuevo, asegúrate de tener los derechos adecuados para las imágenes que elijas. Pero claro que vas a tener que lidiar con algunas malas imágenes. Si estás armando un evento podrían solo tener fotos de cámara del año pasado, tal vez solo tengas algún tiro en la cabeza torneado y alguien se niega a tomar uno nuevo. Entonces vas a tener que lidiar con ello. Número uno es cosecharlo. Trata de encontrar las mejores partes de la foto y solo concéntrate en eso. También podrías desenfocar todo el asunto y usarlo como foto
de fondo y poner algo de texto en la parte superior. También puedes idear algunos filtros de photoshop o estilos de
coloración particulares que podrían hacer que todas las imágenes de tu sitio tengan una sensación cohesiva, o puedes pasar algún tiempo y retocarlo. Asegúrate de presupuestar para esto porque
es la que consume más tiempo de cualquiera de estas opciones. La otra mitad de las imágenes es la iconografía. Mira los símbolos establecidos para un gran ejemplo de lo fácil esto se puede usar para trabajar en tus diseños. Un simple conjunto de semántica, así que si escribiste la palabra “amor” se convierte en
un corazón pero un lector de pantalla todavía va a ver la palabra amor y poder leerlo a los ciegos. También hay servicios como iComoon donde puedes construir tu propia fuente de icono, si estás creando un conjunto personalizado de símbolos para un sitio. También hay Iconico que tiene un nuevo conjunto de iconos diseñados pensando en la legibilidad, y ahora estamos obteniendo la capacidad de usar svg. Entonces desde illustrator si diseñas tus propias ilustraciones, en realidad
puedes guardarlas como archivos vectoriales y servir esos vectores en la web para que no tengas que preocuparte tanto por las resoluciones de mapa de bits. Y al igual que la tipografía, iconos también tienen problemas de legibilidad. Así que asegúrate de que tus iconos se estén renderizando bien exactamente al tamaño que lo que planeas usarlos. Entonces, ve a buscar las imágenes que vas a utilizar en tu sitio. Puedes investigar o disparar tu fotografía y nuevamente he proporcionado un montón de recursos para encontrar fotos de stock o fotos de código abierto en la lista de recursos para esta clase, y luego seguirías adelante y retocar o recortar o recortar o los filtra como lo estás planeando para tu sitio, que tus maquetas tengan un aspecto realista. Adelante e investiga o
diseña tus iconos, para encontrar los iconos que quieres usar, la fuente del icono que podrías usar y colocar todo eso en la página de tu símbolo o tu tablero de arte de activos para que puedas empezar a ver cómo todo luce juntos.
7. Diseño adaptable: Muy bien, hemos terminado nuestros activos visuales y estamos listos para seguir adelante con el diseño. Pero espera ahí antes de saltar directamente a los diseños de página porque el diseño web receptivo cambia muchas cosas. Nuestra lectura de antecedentes, si aún no has pasado por estos libros, es Responsive Web Design de Ethan Marcotte y Mobile First de Luke Wroblewski. Entonces, ¿qué es esta web responsive? Bueno, básicamente cuando empezamos a tener un millón de dispositivos diferentes para diseñar, empezamos a darnos cuenta de que las cosas que se veían bien en nuestros diseños de escritorio no necesariamente se traducían bien en móviles. Por lo tanto, un hermoso sitio web de escritorio con cuadrículas requería
un zoom, un pergamino y un toque para llegar solo a la siguiente página. Por lo tanto, el diseño web receptivo refluye nuestro diseño para que
se ajuste al contenedor podría hacer que las cosas a un solo clic de distancia. Entonces, empezamos a pensar más en las rejillas y más los diseños de
reflujo y cómo serían apropiados para cada dispositivo, pero luego también tuvimos que lidiar con una multiplicidad de hardware nuevo y nuevos dispositivos cada mes. Entonces, los procesos de diseño cambiaron como resultado de esto. He pasado a lo que llamo diseños de Frankenstein que son combinaciones de todas las piezas principales de la página. Otras personas han hablado de collages de elementos, que son una idea similar y todo viene de
que un sitio es mucho más complejo que nuestras cosas anteriores. Un póster, no necesitarías una guía de estilo para. Es una cosa. Estás totalmente en control. Se lo mandas a la impresora y ya está hecho. Un libro, tenías que empezar a pensar en sistemas. Querías que un titular en una página fuera del mismo estilo que un titular en otra página, pero los sitios son infinitamente más complejos. El contenido podría ser una promoción en una página y luego el artículo completo en otra página y luego archivado en otra sección. Necesitamos tener sistemas para todos estos diferentes estilos y propósitos de tipo y dispositivos ahora. Entonces, tuvimos que empezar a pensar en el diseño modular que pudimos enfocarnos en las piezas pero dándonos cuenta que iban a entrar en varios diseños diferentes. A algunas personas se les ocurrió azulejos de estilo como respuesta a esto. Entonces, son un poco más específicos que un tablero de humor. Una pizarra de humor tiende a conseguir que la gente apruebe dice “Sí, me gusta, hagamos la junta de humor B”, pero luego cuando volverías con el diseño real del sitio, dirían “Eso no es lo que esperaba”. Entonces, un azulejo de estilo era un poco más específico donde tendrías un titular real, tendrías colores e imágenes reales y botones y activos de interfaz en la página pero no era del todo un diseño completo. Entonces, estos son un paso útil pero de nuevo
creo que les falta un poco de especificidad que ayude tanto a clientes como a nosotros como diseñadores a averiguar cuál es realmente nuestra visión. Entonces, Dan Mall escribe sobre collages de elementos y cómo empezó a hacerlos creo que en Leer es Fundamental. Entonces, aquí un ejemplo de cómo las hizo en el rediseño Entertainment Weekly que son todas las piezas principales. Incluso antes de que conozcas algún diseño de página o requisitos de página, sabes que vas a tener una imagen de una celebridad y vas a tener un encabezado. Entonces, puedes diseñar esa sección y los colores en los que podría aparecer. Podrías empezar a tomar algunas decisiones de que las revistas aparecerán siluetadas sobre un fondo de colores brillantes o cómo se verían tus botones, cómo serían tus principales widgets para compartir, qué iconos vas a usar. Entonces, estas son todas las piezas juntas y como puedes ver te da una buena idea de la personalidad del sitio web incluso antes de que nos mudemos a los diseños. Aquí hay uno que hizo para TechCrunch el cual se puede ver a la izquierda es la versión completa. Es muy largo. Realmente está entrando en detalle sobre un montón de diferentes piezas del sitio web y a la derecha está de cerca; los widgets para compartir, las etiquetas, los títulos, las piezas más importantes del sitio. Entonces, los collages de elementos no son tableros de inspiración. Los azulejos de estilo no son tableros de inspiración. No quieres estar grabando en pantalla otras cosas y pegándolo en tu diseño porque está dando tanto al cliente como a ti una percepción equivocada de lo lejos que estás en el proceso. Quieres estar haciendo estos como tus primeros borradores reales de las piezas del diseño. Entonces, este es un tablero de inspiración donde he recogido algunos colores que me gustan, alguna inspiración tipográfica, algunos ejemplos de usuarios, solo algunos
estilos de foto pero luego un collage de elementos se extraerá de esto. Entonces, he empezado a convertir eso en tipografías reales que podría usar, elecciones de color
reales que muestran cómo podría recortar las fotos, qué estilos de fuente podría usar y no hay diseño. Se puede ver que estos sólo son collaged en la página. El cliente podría decir: “Esto es un poco flotante”. Podrían ver que es una luz, podrían pensarlo como un diseño pero en realidad se trata solo comiences a diseñar los diversos activos de la interfaz de usuario. Entonces, aquí hay otro ejemplo de donde me mudé de un azulejo de estilo el cual fue útil e hice tres de estos y
ayudan al cliente a tener una idea de qué familia de colores preferían y también hice comps para que coincida con cada una de las fichas de estilo y luego de esa retroalimentación, eligieron un azulejo de estilo y por supuesto una comp diferente y así, yo collage que en la siguiente iteración era un layout de Frankenstein. Entonces, yo lo llamo Frankenstein sólo porque es como tres páginas todo en una y en este caso, realidad
fue la página principal más un formulario de inscripción, más el perfil de usuario más el panel de comercio todo en uno. Entonces, pude seguir revisando y puliendo este diseño y luego usarlo como mi referencia para todas las páginas subsiguientes a lo largo del sitio. Entonces, el cliente entendió que así se iban a ver
todas las piezas de su sitio web y
tenía un buen marco de referencia para asegurarme de que cada página subsiguiente coincidiera con esta página inicial de Frankenstein. Pero recuerda el punto de estos; ¿por qué los estamos haciendo? Estás tratando de obtener retroalimentación. Entonces, todos estos son diseñadores diferentes conformando diferentes tipos de entregables que sirven al proyecto en particular y les
permiten obtener la retroalimentación que necesitan en ese momento. Entonces, un azulejo de estilo es apropiado si solo quieres saber si les gustan tus colores o no. Un diseño de Frankenstein es más apropiado si realmente quieres
obtener algunos comentarios de diseño sin tener que diseñar un sitio web completo. Si trabajas en una agencia de anuncios sí, vas a trabajar con grandes clientes y ellos van a querer ver conceptos totalmente terminados para- podrías hacer tres diseños de sitios web separados y dos de ellos se tirarán a la basura. Pero los clientes y diseñadores de menor escala no tienen tiempo para eso. Entonces, todos estos son intentos de obtener la retroalimentación que necesitas sin tener que hacer tanto trabajo desperdiciado. Entonces también es bueno porque se empieza a redactar estos elementos realmente importantes. Entonces, terminarán con seis y ocho y 10 rondas de revisión frente solo a tu estándar; una maqueta y dos rondas revisiones a las que están acostumbrados muchos contratos de diseño. De acuerdo, entonces ahora vamos a diseñar nuestro layout de Frankenstein. Vas a ir a diseñar un puré de tus páginas más importantes, para que empieces a abordar todos los elementos. Entonces, en Sketch o Illustrator, puedes comenzar con tu Desktop art Board si quieres divertirte con el diseño más complejo o puedes hacer tu placa de arte móvil si quieres tener más restricciones. Entonces, haz una maqueta de tus elementos más importantes para tu sitio; botones, menús, pestañas, titulares, párrafos, llamadas, cualquier cosa que te vaya a dar la mejor idea de cómo van a ir juntas todas esas piezas.
8. Diseños sólidos: Está bien. Terminaste tu diseño de Frankenstein y obtuviste algunos comentarios. Ahora, estamos listos para arrancar los diseños individuales. Entonces, piense en el propósito de cada página. ¿ Qué quieres que haga el visitante? ¿Cómo vas a convencerlos de que lo hagan? Los marcos de alambre o los contornos de contenido deben proporcionar una idea general de la jerarquía de la información, pero es tarea del diseñador visual hacer que las prioridades de cada pantalla sean cristalinas. Piensa en las primeras impresiones, alguien va a tener con cada pantalla y luego piensa en qué es el contenido de apoyo vas a agregar o diseñar para seguir eso. Entonces, el principal llamado a
la acción, lo más importante en muchos casos. Todo se trata de la atención, donde tus ojos van primero, y luego segundo, y luego tercero. Existen estudios de seguimiento ocular que pueden ayudarte a entender dónde se ve la gente. Entonces, aquí, el precio está haciendo un buen trabajo de atención y también el rostro de la mujer de la izquierda. El titular parece que está consiguiendo algo de acción. Pero si quieres que estas ofertas de laptop destacadas llamen algo de atención, no
se destacan. Aquí tienes un ejemplo de contacto visual, y es uso, y es importancia en la página. La gente siempre busca primero la cara en la página. Entonces, puedes ver aquí, están acercando al bebé. Entonces, están mirando por encima del titular, el texto de apoyo, el disparo del producto, y luego en el logotipo. También puedes trazar los ojos de una manera lineal. Entonces, aquí es donde un usuario miró primero, segundo, tercero, pasó algún tiempo, y se cruzó. Entonces, piense en los ojos como dibujando un camino en la pantalla. ¿ Es un buen camino claro o es un poco esquizofrénico? Si están leyendo, el camino del ojo tiende a seguir en F layout. Entonces, van de izquierda a derecha en línea por
línea abajo de la página igual que si estuvieras leyendo un libro. Entonces, este es el patrón tanto para leer como para desnatar. Existen diversas técnicas que puedes utilizar para guiar el ojo del visitante alrededor de la página. contacto ocular siendo el primario. Te vas primero a la cara de la chica y luego abajo por el centro o te pones abajo. Contraste siendo otro mayor. No puedes evitar, pero mira este color naranja brillante sobre el fondo negro y luego también el campo de correo blanco en la parte superior del fondo naranja. Color especialmente, rojo, agarrando la atención y mira estos pequeños puntos de rojo cómo llevan tu ojo alrededor de la página, las piezas más importantes. Entonces, espacios en blanco adecuados para dar el ojo
en algún lugar donde descansar entre todos estos llamados a la acción y todos estos puntos focales. Estás atrayendo a alguien con un punto focal fuerte. En este caso, es un video animado, la pared que cuelga en el espacio y gira. También estás usando alineación. Aquí tienes un diseño súper minimalista, pero todavía tienes una sensación de que tu ojo quiere viajar por el nervio superior o por abajo los llamados de artículo por la forma en que están alineados en una cuadrícula estricta. También puedes usar la herramienta de escala. Entonces, enorme es lanzarse con una enorme H y llevar tu ojo de ahí a todo el contenido secundario. Porque el diseño está creando el interés, pero entonces también está tratando de mantener el interés del visitante o dirigirlo a otro lugar, luego recrear el interés una vez que empiezan a aburrirse un poco. Dale a cualquier disposición la prueba de entrecerradura. Esto es algo que se hace en la escuela de arte y es algo que se sostiene en el diseño web. Incluso cuando entrecerras el ojo, aún
puedes tener una sensación de cuál es la llamada principal la acción en la página. Entonces, mirando algunos ejemplos de diferente diseño, puedes ver que la primera impresión del sitio web de la aplicación de papel es dejarte saber, sí, es una aplicación para iPhone, pero también están haciendo algunas cosas con las imágenes. Entonces, están mostrando un periódico en segundo plano para darte una sensación de lo que es esta app. Es como un periódico. Están mostrando tus cafés matutinos, así que te imaginas que es parte de tu rutina matutina. Entonces, hay algún contenido secundario. Es una frase que explica el beneficio de esta app, y luego un par de llamadas a la acción, muy claras y fáciles de encontrar. Esto hace que sitio esté utilizando sus primeras impresiones de creatividad. Estás viendo muchos dibujos infantiles aquí y tipografía creativa. Gira en el espacio, y luego el texto de soporte obviamente está siguiendo hacia abajo en el diseño central, y la llamada a la acción más abajo en la pantalla. The Peek app es un calendario y así de nuevo, nuestra primera impresión es que entendemos que es una app para iPhone, estamos viendo que la interfaz de usuario se ve creativa y única, y luego estamos viendo algunos contenidos de apoyo aquí es un video donde hacemos clic en botón de reproducción obvio para ver el video, y nuestra acción de llamada es obtenerlo después de que estemos convencidos. Incluso si no estás usando imágenes, puedes dibujar el ojo con solo tipografía. Entonces, aquí hay titular masivo está transmitiendo la distinción de este organismo. Después, hay contenido de apoyo sobre todos los detalles, y sus áreas de especialización, y luego algunos pequeños llamados a la acción porque aún están retratando una marca más formal. También estás guiando el ojo a través de la estructura subyacente de la página. Lo más notable es la grilla. Por lo tanto, existen rejillas comunes como la 960, que viene en formato de 12 columnas o 16 columnas, que son fáciles de usar tanto en las fases de diseño visual como en las fases de desarrollo. Pero también hay muchas herramientas ahora donde puedes diseñar una cuadrícula personalizada que se adapte a tu contenido en particular. Gridpak s uno. También hay un Gridset. Entonces, eres capaz de diseñar realmente desde el contenido hacia afuera y no solo encajar tu contenido en las cajas de otra persona. Asegúrate de entender cómo están destinadas a usarse las rejillas. Algo que me tomó, no aprendí en la escuela fue que típicamente rellenas tu contenido dentro de la columna de la cuadrícula, que si coloreas ese fondo, todavía
vas a tener márgenes adecuados entre el texto y el coloreado fondo. Entonces, el PDF de Khoi Vinh y Mark Boulton, es un poco viejo, pero sigue siendo una gran explicación de por qué las cuadrículas son buenas y cómo usarlas como estás haciendo diseño web. Warby Parker es una marca que tiene un hermoso diseño usando la cuadrícula y de nuevo, es una cuadrícula creativa. Entonces, este es un calendario. Entonces, esperarías que sea una cuadrícula de siete columnas que refleje los días de la semana. Pero en cambio, la sección de calendario es ocho columnas y hay una novena columna de a la izquierda para el mes. Entonces, es una cuadrícula de nueve columnas, lo
que le da definitivamente un sabor único. Lo están usando para estructurar un montón de imágenes, y contenido, y gráficos de una manera que todavía se siente organizada y única. Incluso si no estás dibujando todas las líneas de cuadrícula, el tipo flotante aún puede tener sentido de orden y alineaciones. Aquí, la cuadrícula permite que el contenido dinámico se llene más adelante y mantenga un diseño más dinámico, modo que haya cosas más grandes que atraigan la atención y cosas más pequeñas que mirar más adelante. Nuevamente, las cosas flotantes aún tienen una cuadrícula subyacente. Entonces, esto Check my pipes titular no está al ras con el logo, pero está alineado con la rejilla subyacente. Por lo tanto, es posible que no veas todas las líneas de cuadrícula, pero los sitios web que se construyen con cuadrículas tienen una sensación de estructura subyacente. Nuevamente, Khoi Vinh es uno de los principales defensores y maestros de esta técnica. Entonces, su sitio, que se imita desde hace años, fue uno de los primeros en mostrar realmente hermoso uso de una grilla y tipografía suiza. Recientemente lo ha rediseñado, pero aún así es alguien a quien seguir realmente, si te interesa esta herramienta. Hizo un rediseño de ejemplo completo del sitio Yahoo hace unos años mostrando que incluso una página de inicio caótica y sobrecargada se
puede hacer más organizada con el uso de una cuadrícula subyacente. Entonces, las cuadrículas no solo crean este sentido de control del orden, sino que también lo hacen más fácil una vez que estás entregando cosas a un desarrollador. Si cada una de las páginas que estás diseñando es un diseño único, va a ser mucho más trabajo construir y mantener esas páginas. Entonces, cuando tengas este sistema, va a hacer las cosas mucho más fáciles por el camino y sobre todo con un diseño
receptivo cuando tienes que empezar a pensar cómo fluirán
estas cosas en diferentes dispositivos. La única advertencia es que pueden crear diseños aburridos si los estás usando mal. Si solo estás llenando las cosas en la misma cuadrícula de 3 columnas, realmente no
estás obteniendo toda la ventaja de la cuadrícula. Debería estar haciendo que tu diseño sea más simple, pero también debería inspirar algunos diseños únicos inspirándote a colocar las cosas en un espacio en blanco donde
podrían o colocarlas en espacios que quizás no hubieras pensado antes. Entonces también tenemos que recordar que estamos diseñando diseños responsivos. Entonces, empecemos con el móvil. Porque esa es la que es más nueva, pero también creciente en importancia. Entonces, las proyecciones de los usuarios son que el móvil está a punto de superar nuestro diseño de escritorio. Tengo que bosquejar eso. Entonces, diseñar para móviles y para otros dispositivos además de una computadora de escritorio, nos
hace pensar en el espacio y los diseños de una manera diferente. Entonces, en un escritorio, el centro de la pantalla es donde la gente está buscando en su mayoría o tal vez el borde izquierdo de la pantalla mientras siguen al NAV izquierdo por la página. Pero en un teléfono, es más fácil deslizar para golpear la sección inferior izquierda de la pantalla si estás sosteniendo el teléfono con la mano derecha. Entonces, ahí podría ser donde pongas a la acción los principales llamados. Si estás sosteniendo una tableta en posición vertical, son los lados de la pantalla donde es más fácil de golpear. Entonces, la colocación de las cosas en la página se ve afectada por el dispositivo. Definitivamente leí los libros de Global Moxie sobre este tema. Lleva años trabajando y hablando y compartiendo todos sus pensamientos al respecto. El otro punto a darse cuenta es que los diseños móviles no son un pequeño cursor, una flecha pequeña, sino un gran dedo gordo tratando de golpear estos botones. Entonces, la primera vez que comienzas a diseñar diseños móviles, no
puedes creer lo grandes que tienen que ser los botones. Apple recomienda al menos 44 píxeles o 88 en una pantalla de retina como tamaño, pero aquí hay algún tipo probando y mostrando que el área amarilla era donde su dedo era aún más grande de lo recomendado. Entonces, no tienes que hacer que los iconos en sí mismos sean tan grandes, pero el área clicable o el área tappable necesita
poder lidiar con el dedo real de alguien. Entonces, aquí hay un ejemplo de nuevo de darse cuenta de que este dispositivo de entrada en realidad va a encubrir lo que la persona está tratando de tocar. Entonces, viste muchos cambios cuando el móvil comenzó a prevalecer en el diseño. Entonces, viste apps. Viste los botones cada vez más grandes y más fáciles de deslizar. Viste botones que eran de ancho completo de la pantalla ya que nos pusimos cada vez más refinados y como entendimos lo que hacía un buen diseño en el móvil. En apps como el cuerpo humano por Tinybop realmente captan este sentido de exploración y de gesto. Ese pellizco y zoom son mucho más naturales. Esos botones, como dice Josh Clark, los botones son hackeados. Que es sólo una forma en que un dispositivo que hemos usado para representar clickability, pero es mucho más natural agarrar cosas o deslizar cosas o borrar cosas de tu escritorio de la manera que lo haces en un escritorio real. Entonces, hay un vocabulario completamente nuevo que la gente está aprendiendo. Aquí está la guía de gestos de Luke Lebrewski y esto es sólo una parte de ella. Hay tantos gestos que puedes usar en una app nativa. Obviamente amplía el potencial interactivo de tu sitio o de tu aplicación, pero después tienes que confiar en tus usuarios para aprenderlos y luego
también tienes que confiar en tus desarrolladores para ejecutar lo que es posible en un sitio web receptivo. Entonces, un sitio web receptivo en móvil, definitivamente necesita permitir los dedos y el uso de gestos y deslizamientos, pero también hay que estar informado sobre lo que es posible solo en aplicaciones nativas y lo que es posible en un sitio responsive. Recuerda, no hay estados flotantes en el móvil. Esta fue una herramienta útil durante muchos años en el diseño web pero no más. Porque por supuesto, puedes tocar y luego revelar el menú y luego vuelven a tocar para ir a algún lugar, pero no tienes esta sensación de que alguien cierne
al azar sobre tu contenido y descubre algo oculto. Porque tienen que tocar para poder ver algún contenido oculto. Google hizo este enorme estudio de investigación llamado El mundo multipantalla. Entonces, se quiere considerar el contexto para cada uno de estos dispositivos. Entonces, podrías coger tu teléfono porque solo tienes un segundo y no quieres tener que ir a iniciar sesión en tu computadora o no quieres tener que caminar por la habitación y recoger tu computadora. Podría estar tratando de hacer una cosa determinada. Agarraste tu teléfono porque querías tomar una foto y luego quieres enviársela a un amigo o luego quieres subirla a tu cuenta. Podrías agarrar tu teléfono porque no tienes acceso a tu computadora o estás fuera en la calle o en un auto o en casa de un amigo y podrías simplemente hacerlo porque estás tratando de relajarte. No quieres abrir la computadora que representa el trabajo y tu correo electrónico, solo
quieres quedarte en más de una mentalidad social. Entonces, piense en las características de cada uno de estos dispositivos. Que los teléfonos tienden a ser más uno a uno y es más personal. Las tabletas tienden a ser tal vez donde estás navegando, leyendo revistas, mirando recetas y luego las laptops o computadoras de escritorio pueden ser más sobre el trabajo para las personas. Entonces podrías iniciar algo en tu teléfono y usarlo como dispositivo de colección, pero luego terminar la tarea en tu escritorio y ese sería tu dispositivo de organización. Entonces, aquí hay algunos ejemplos de cómo empiezan a verse mis diseños. Empecé con el móvil y presenté mi contenido para el sitio de yogas. Se puede ver en su mayoría es una sola columna y yo hice un par. Tenía un poquito donde son dos columnas y decidimos hacer de toda la imagen el área clicable. Entonces, la gente podría simplemente tocar con sus pulgares muy fácilmente. Es un diseño muy cuadrícula así que entonces ahora es fácil refluir sobre el escritorio. Sabía que quería que la imagen principal, la imagen introductoria fuera más grande y entonces
todavía quería que el retiro de Perú fuera muy destacado. Entonces, se puede ver que la jerarquía se está preservando entre los diseños. Entonces puedo visualizar cómo podría funcionar el diseño de mi tableta. Aquí están mis tres tableros de arte en ilustrador, pero podría volver a entrar y llenar esto y para tratar de decidir, ¿voy a seguir manteniendo juntas todas esas cuatro imágenes en la segunda fila o voy a intentar dividirla en filas separadas? Entonces, haz todo lo que necesites. De nuevo, depende de a quién vas a estar entregando estos. Aquí hay un ejemplo donde acabo de hacer el escritorio y el móvil lado a lado. Entonces, el escritorio está a la izquierda y los móviles a la derecha. Aquí está la página principal y la página sobre para este gran sitio. Este es un diseño más complejo. Entonces, tuve un poco más para tratar de averiguar qué hacer con todo este contenido diferente yendo de 4 hasta carruseles a solo carruseles ese tipo de cosas. Entonces, me ayudó con la funcionalidad para marcarlo antes de empezar a codificarlo. También consiguió a la gente en la misma página sobre lo que iban a ver en cada dispositivo. En la sección de recursos del sitio, hay una plantilla de ilustrador sensible que otra persona creó. Eso es útil si lo deseas o simplemente puedes crear tus tableros de arte para que se adapten a tus propias necesidades. Entonces, a partir de tu diseño de Frankenstein, vas a ir página por página y desde tus wireframes, diseña estos diseños. Entonces, nuevamente el wireframe debería mostrarte cómo los demás integrantes
del equipo o tal vez tú mismo viste las jerarquías de la página, pero siente que quieres asegurarte de que los diseños visuales se vean lo mejor que puedan. Entonces, generalmente hay algún reordenamiento que continúa cuando se está pasando de las tramas alónicas al diseño visual. Entonces, empieza primero con tus pantallas móviles. Porque los diseños móviles tienden a ser de una sola columna. A veces puedes caber dos o incluso tres columnas, pero es raro. Entonces, te obliga a priorizar tu contenido de manera lineal, lo que hay primero en la página luego segundo, luego tercero, luego cuarto. Entonces, me gustaría empezar con el móvil y luego me gusta ir todo el camino al diseño de escritorio y probar el otro extremo. ¿ Cómo voy a aprovechar esta enorme pantalla? ¿ Qué voy a hacer aquí? Nuevamente, no se trata solo de la forma del lienzo, se trata del contexto. ¿ Qué voy a hacer si alguien está trabajando y visitando mi sitio? ¿ Qué voy a hacer si están en su teléfono y están visitando mi sitio? Entonces vas a repetir con todas tus páginas principales. Hago justamente esos dos primero para sitios principales. A menudo sigo adelante y haciendo el desarrollo también. Entonces, haré los puntos de ruptura medios en código, pero si estás entregando estas páginas a un desarrollador, tendrás que seguir adelante y hacer todas tus marcas de tablet o cualquier otro punto de ruptura que decidas. De nuevo, puedes hacer tantos puntos de rotura como quieras. No son particulares a ningún dispositivo como el iPad o el Nexus, lo que sea. Quieres pensar en cuándo tu contenido empieza a caer. Cuando estás escalando el video comienza a ocupar toda
la pantalla y no mostrar ninguna de la segunda fila de contenido y
así, ahí fue cuando tenías un punto de ruptura y revisar tu diseño. Entonces, trabaja en tus diseños. Puedes hacer todos los móviles primero si quieres o simplemente hacer una pantalla. El móvil de pantalla más importante y de escritorio y obtener algunos comentarios y ver cómo va.
9. Pruebas de usabilidad: Está bien. Ahora es el momento de hacer algunas pruebas de usabilidad de nuestros sitios web. Cuando nos metemos en nuestros diseños, en nuestros diseños responsivos, puede
ser tentador o cuando nos metemos en nuestros diseños tiende a empujarnos de nuevo al pensamiento de diseño 2D. Que nos preocupa organizar este contenido en el espacio. Pero hay que recordar que el diseño web es un medio cambiante que estamos trabajando en cuatro dimensiones que es interactivo que las cosas sucedan. Entonces, queremos volver atrás y pensar la interactividad del sitio y juzgar nuestros diseños desde esa perspectiva. Entonces, ¿cuáles son las mediciones básicas? ¿ Cuáles son las cosas básicas que hacen que un sitio web sea utilizable? Aquí te presentamos esta heurística de 10 usabilidad de Jacob Nielsen, quien es la autoridad líder en este campo, que podemos mirar para juzgar nuestros diseños. Por lo tanto, número uno que desea asegurarse de que el estado de su sistema sea claro. Entonces, pantallas de confirmación. Si alguien hace clic en enviar, quieren saber que se recibió su pedido que bien
van a recibir el artículo o no lo hicieron. Si tu página se está cargando, posible que quieras que alguien sepa lo que se está cargando para que entienda por qué lleva tanto tiempo y no piense que sea su navegador o su Wi-Fi. Entonces, asegúrate de que al igual que haya indicadores de estado del sistema si los necesitas. El número dos es que coincide con su modelo mental. Entonces, esto se reduce a otra vez el etiquetado que estás usando en tu arquitectura. Esperemos que tu fase de planificación haya aclarado algo de esto pero tu diseño visual también necesita reforzarlo. Entonces, Instapaper utiliza una bandeja de entrada o un archivo. ¿ Estás ahorrando o estás subiendo? ¿ Cuál es la metáfora? ¿Cuáles son los iconos? Asegúrate de que todo eso coincida con su modelo de lo que están esperando. El número tres es que los usuarios tienen el control. Entonces, esto podría significar que les estás dando un poco de entrada en el diseño de ¿es lo suficientemente brillante para ellos? ¿ El tamaño de la fuente es lo suficientemente grande para ellos? Algunas apps ofrecen el modo nocturno, si todo se trata de leer y también se relaciona con la navegación. Que puedan llegar a las partes en el sitio a las que quieran llegar. Cuando comienzas a trazar la experiencia del usuario, puedes tenderla a trazarla
como una película, como si estuvieras scripting pantalla por pantalla lo que van a experimentar. Sí, lo estás haciendo por tus historias de usuario pero luego también necesitas darte cuenta de que gente se va a ramificar en otras historias y cambiar de ruta todo el tiempo. Entonces, una buena navegación les ayuda a hacer eso y vamos divertirse y hacer lo que quieran hacer en el sitio. El cuarto es una especie de peeve de mascota mío el cual
es que los iconos sean consistentes y son consistentes desde una perspectiva de usabilidad de like, son ilustraciones o son botones? Entonces, aquí se puede ver que en las pestañas los iconos se utilizan aquí como botones y en pestañas. No se usan como ilustraciones. Entonces eso es algo por donde puedo saber, puedo despreciar esta página y puedo conocer los iconos que puedo hacer click en aquellos que es algo funcional. número cinco es que estás tratando de ayudarlos a prevenir errores y aquí es donde el diseño visual juega un papel importante. Entonces, por ejemplo, la acción primaria, el botón principal suele ser más grande, más audaz, pero es posible que la acción secundaria no tenga que parecer un botón en absoluto. De hecho, si es una indebida o una cancelación, quizás no quieras que sea algo que es demasiado fácil de golpear. También lo ves con cosas como en la planeación de seleccionar un color para una blusa que si puedo cambiar la imagen para reflejar ese color, disminuye la probabilidad de que alguien vaya a ordenar el color equivocado por error. Entonces, este algo que puedes burlarte en tus diseños o puedes escribir una nota al desarrollador para cambiar
la fotografía cuando el usuario hace clic en esa muestra de color. Lo siguiente también es que no quieres que el usuario tenga que hacer demasiado trabajo sobre todo, si están en un teléfono y están escribiendo con los pulgares. Entonces, si puedes, si están escribiendo en un campo de búsqueda ¿por qué no hacer un desplegable autocompleto que les ayude a seleccionar de una lista de opciones y eso no hace que escriban los 50 caracteres de la descripción. Por otra parte, quieres pasar y volver a visitar cada una de tus historias de usuario y asegurarte de que sean lo más eficientes posible. Entonces, eso puede ser tanto tú reduciendo el número total de clics que se necesita para llegar de la A a la Z, que no estás haciendo que naveguen por 10 pantallas para registrarse y crear una cuenta con el fin de comprar un producto en tu sitio o puede significar que estás reduciendo el tiempo de carga de la página. Entonces, muchos carros de compras como este dosel del sitio harán como una capa para que toda la página no tenga que recargar para que puedas obtener más información sobre el producto pero solo
haces una capa rápida que es cargado a través de Ajax. También puedes reconocer que a algunas personas les gusta navegar usando sus teclados. Por lo que las flechas izquierda y derecha se pueden activar para página a través de un carrusel o una pastilla de diapositivas u otros botones. posible que tengas que enseñarles esos a tus usuarios, Esposible que tengas que enseñarles esos a tus usuarios,
pero todo se trata de facilitarles
hacer lo que quieren hacer y hacer que esos flujos sean lo más eficientes posible. Además, intenta solo ayudar a tus usuarios solo a enfocarte en una cosa a la vez. Entonces, si estoy aquí tratando de decidir cuál de estas plataformas quiero el estándar de la costumbre, podrías quitar todo lo demás de la página porque realmente solo estoy tratando de analizar
y tomar esa decisión en base a las características y a la costos y todas estas otras cosas. Entonces, tengo mucho espacio en blanco aquí. Tengo una tabla clara ayudándome a entender las diferentes opciones y todo lo demás
se ha eliminado lo cual es muy útil para mí como usuario. Entonces, por último, su alerta debe ser clara. Entonces, nada es más frustrante que, “Lo siento error del sistema", Y no tienes idea de cómo solucionarlo. Por lo tanto, estos son algunos ejemplos de alertas útiles que indican exactamente cuántos caracteres se requieren en la contraseña, cuáles de los campos de formulario son requeridos. Esta es la cosa que a menudo se olvida en maquetas de diseño
estático pero si estás diseñando una experiencia web, hay tantos estados para cada página. Entonces, regresa y trata de editar y pensar a través de cada una de esas interacciones y cómo puedes hacerlas más claras. El último es que conseguir ayuda debe ser fácil. Entonces, la gente sí se confunde. No, no puedes hacer el clippy, un pequeño clip de papel que te dice cómo usar Microsoft Word ni te gustaría. Pero quieres hacer la ayuda fácil cuando la gente la está buscando. Ponlo en un lugar estándar como el nav superior o en el pie de página y luego también se dan cuenta de que las personas tienen diferentes modales en los que quieren recibir ayuda. A algunas personas les encantan los videos. Algunas personas sólo quieren coger el teléfono. Algunas personas quieren escribir un e-mail o chatear. Entonces, es agradable si las empresas pueden ofrecer todas esas opciones. Nuevamente, tu diseño visual reflejaría lo que a la gente le gusta de cada una de esas opciones. Entonces, si soy alguien que sólo quiere hablar con una persona real, estas fotos de caras de usuario me van a hacer sentir que estoy recibiendo ayuda más que alguien que sólo quiere ver un video donde una captura de pantalla de un tutorial de ayuda o una revisión de producto sería un más atractivo para ellos. Una vez más, revise sus diseños y juzgue la interactividad de cada uno. Es nuestro clickable por un estilo consistente o por donde se colocan en la página. Entonces, por ejemplo, los enlaces deben ser azules y subrayados con un mantra durante mucho tiempo. No estoy de acuerdo en que tengan que subrayarse porque realmente reduce la legibilidad, pero el color consistente es una buena pista para la interactividad. Nuevamente, los iconos son algo particular de que debo saber como usuario si es solo una ilustración que está sentada al lado de algún contenido o si es un botón al que necesito hacer clic para obtener contenido adicional. grupo Nielsen Norman es uno de ellos. El firma de investigación basada en la experiencia del usuario. Entonces, tienen todo tipo de estudios y métricas si quieres más datos para apoyar alguno de tus argumentos. Lo último de la usabilidad es que los patrones son algo que quieres considerar. Ese diseño intuitivo a menudo significa familiar que estás usando la colocación estándar para algunas de las funciones básicas. Si estás buscando la barra de búsqueda, probablemente
estés buscando en el encabezado de la página cuando gente la pone en la barra lateral es un poco más difícil de encontrar. Lo mismo con el inicio de sesión. Entonces, mira estos patrones estándar y considera si necesitas
innovar y romper el molde en esos o si es algo donde quieres seguir lo que se considera buena práctica. Pero de igual manera, quieres asegurarte de que no solo estás copiando otros sitios web. Algunos clientes tienen problemas para visualizar las cosas y así te dirán “Hazlo así”. Simplemente querrán que copie directamente un determinado diseño y hay que empujar hacia atrás cuando sea apropiado decirles que mirar más de un ejemplo de un patrón con el fin de demostrar que es la mejor manera de hazlo y que es una tendencia general. Pero realmente como todo, estás tratando de hacer que tus diseños estén contenidos hacia afuera y estás tratando de que también interactúen hacia afuera. Entonces, piensa en tus propios ciclos particulares y usa esos para ayudar a determinar qué patrones son apropiados. Porque todos estamos trabajando con el mismo vocabulario de los elementos HTML, el mismo alfabeto básico de los elementos HTML pero podemos combinarlos de un millón de maneras diferentes y así siempre quieres estar aumentando tu vocabulario viendo qué está ahí fuera y viendo lo que es posible con la nueva tecnología y las nuevas ideas. Entonces, hay algunos grandes recursos para ayudarte a visualizar y ver cómo y ver cómo podrían funcionar estos patrones. Brad Frost es súper generoso sobre compartir su trabajo. Ha creado toda esta biblioteca de patrones responsivos. Entonces, si solo estás tratando de visualizar cómo podría refluir tu diseño, aquí te presentamos algunos prototipos viables que puedes
ver y ver cuál parece apropiado porque es difícil
diseñar para un medio cambiante cuando estás usando herramientas estáticas y hay diferentes herramientas de diseño que intentan replicar esto, pero al final del día, es bueno usar lo que estás familiarizado y llegar a codificar lo antes posible. Esta es mi estrategia para esto. Entonces, los patrones de respuesta son un gran recurso. Pattern tap es otro en el que puedes ordenar por ese tipo de cosas que estás tratando de crear y ver qué tipo de ideas hay por ahí. Hover estados es uno genial también donde es un montón de diseños de interacción
nuevos e interesantes y luego hay una biblioteca de interacción del usuario, donde se pueden ver ejemplos animados de cómo se pueden suavizar estas transiciones, hacerlas más dinámico, lo que quieras hacer para ayudarte a visualizar. Entonces, exporta todos tus maquetas como PNG. Se desea ordenarlos para que tenga cada punto de ruptura en una carpeta. Entonces, todos tus diseños móviles estarán en una carpeta, todos tus diseños de escritorio estarán en otra carpeta, etcétera. Entonces para hacer algunas pruebas de usabilidad, puedes subirlas a la app de visión y es bastante claro, o bastante intuitivo usar la app. Pasarás y subirás cada carpeta de PNG y luego podrás crear hotspots y hacerlos clicables y luego podrás hacer algunas pruebas de usuario. Entonces, o siéntate junto a alguien y mira cómo sacan esta carpeta en la app de tu teléfono y mira cómo intentan navegar o puedes compartir la pantalla, haz como un Hangout de Google y dale algunos escenarios, pídeles que hagan lo más acciones importantes en tu sitio y observarlas a medida que tratan de hacerlo. Es muy iluminador y te da una perspectiva totalmente diferente de tu diseño. Entonces, pruébalo. También puedes publicar tus enlaces al formulario Skill Share y obtener comentarios unos
de otros y hacer alguna iteración en tu sitio web y ver cómo va.
10. Limpieza y documentación: Última lección, Limpieza y Documentación. Yo solo quiero enfatizar este proceso de iteración porque es algo tan importante en el diseño web. Nunca se termina un diseño web. Es igual que un niño. Sigue creciendo y necesitando ropa nueva y la cultura cambia y la tecnología cambia. Entonces, siempre eres capaz de seguir mejorando un sitio web. Esa es una de las grandes cosas del diseño web. No es como un libro donde lo mandas a prensa y luego se ha ido y tendrías que hacer otra edición. Pero un sitio web siempre está ahí y siempre puedes modificar los archivos y modificar tus diseños y hacerlos mejores. Por lo tanto, continuamente prueba e itera y mejora tus diseños. Esto es algo que no nos damos cuenta de muchas aplicaciones populares. Entonces, iOS siete, cuando salió fue como un diseño enorme pero se puede ver cada uno de estos paneles muestra tres versiones de las pantallas y cómo han seguido refinando el lenguaje. Antes estaba lleno con los botones de barra y luego se hicieron más pequeños con esquinas redondeadas y luego se convirtieron en círculos o algunos de los mensajes secundarios más pequeños se convirtieron en pequeños iconos. Por lo que incluso Apple, uno de los líderes en diseño tiene un diseño mucho más iterativo de lo que podríamos darnos cuenta. Aquí te mostramos un ejemplo de cada una de las actualizaciones de iOS y cuánto tiempo pasaron en Beta. Lo que me interesa es solo la cantidad total de versiones que están haciendo eso cada dos semanas básicamente, están lanzando nuevas versiones del software. Entonces, no pienses en tu sitio web como esta fiesta gigante de lanzamiento, sino piensa en cada una de estas pequeñas iteraciones que estás lanzando como una pequeña prueba y estás recibiendo un poco de retroalimentación y es un paso de paso en el camino. De vuelta a Jakob Nielsen, habla de cada una de estas iteraciones. Al principio, solo estás eliminando estos errores de interacción y estás aumentando la usabilidad. Ese es el valor principal al principio pero con el tiempo, cuando empieza a ser realmente pulido entonces comienzas a ser capaz de reconceptualizar
realmente la interfaz a medida que vas en más iteraciones y obtienes otro bache en usabilidad a medida que comienzas a estar dispuesto a tirar a cabo tal vez algunas de tus características favoritas y realmente repensar las cosas. Entonces, quieres fallar más rápido. Te das prisa y descubres lo que no funciona cuando iteras. Entonces, también evitas el trabajo innecesario al hacer eso. También reduce su riesgo porque está haciendo trozos más pequeños. No estás trabajando en un proyecto desde hace un año solo para enterarte de que nadie realmente lo quería en primer lugar. Entonces, estás descubriendo tus mejores características y en qué quieres enfocarte. Entonces, concéntrese en los detalles también con cada iteración se llega a poner vez más pulir y hacer que sus diseños se vean mejor y mejor. Entonces, si hablas de diseño plano, podrías pensar que esa es una forma de hacerlo pero si
realmente comienzas a cero en los pequeños detalles, notarás muchas particularidades en la forma en que estás implementando lo que podrías considerar un diseño plano. Entonces, tal vez haya bordes inferiores en algunos de los elementos o sus esquinas de tres píxeles frente a esquinas de cinco píxeles. No te das cuenta de estas cosas cuando solo eres consumidor y usuario de sitios web. Pero una vez que comienzas a ser un creador y un crítico, comienzas a acercar realmente los detalles. ¿ Tienen los botones de Facebook una sombra de gota o no? ¿ Tienen frontera o no? Estos son el tipo de cosas que se empieza a refinar realmente a través de niveles de pulido mirando a escala y mirando el contraste a lo largo del tiempo. También hay una gran fase de edición que entra en iteraciones. Entonces, me encanta esta cita de Ellen Lupton de “El diseño es tanto un acto de espaciado como un acto de marcado”. Entonces, se trata de lo que puedes quitar y lo que no puedes poner en la pantalla. Entonces, Mark Boulton tiene un gran artículo sobre
espacios en blanco donde habla como mirar este layout de
la izquierda y los diseñadores novatos tienden a poner todo en cajas. Todo necesita ser anclado. Notamos que como cuando quitamos algunas de esas cajas, caemos más fácilmente en esta fotografía y somos capaces de usar tipografía un poco más creativamente para expresar algunas de las ideas. blanco básico está bien. Este párrafo de la izquierda es más una historia sobre lo que es importante de este contenido, a través de un poco de espacio en blanco, un poco de énfasis, el diseño empieza a ser más comunicativo. El otro tema de los diseños web es de nuevo es que estamos diseñando sistemas, no carteles, no diseños de páginas que están bloqueados. Entonces, con suerte, descubriste tus pautas de marca en primera clase pero también
quieres pulir tus activos visuales en una guía utilizable. Entonces, el valor de este activo comenzó, vuelve a él y trata de hacerlo utilizable para otras personas no solo para ti mismo. Entonces, aquí hay un ejemplo del libro de marca de Jamie Oliver y por
supuesto habla de su personalidad y de los valores. Estas son las cosas por las que estás eligiendo estos colores en particular o fotografías en particular. Pero también vas a entrar en los detalles de lo grandes que son tus márgenes, o tus titulares, o tus colores. Entonces, intenta especificar lo que has
descubierto en esta fase de diseño para que alguien más pueda recogerlo y la personalidad no se mueva totalmente pero que seas capaz de tener cierta consistencia entre los proyectos. Entonces, piénsalo como un sistema, que no son elementos de tipo fragmentario los que has colocado alrededor de la página sino que es un sistema de titulares y un sistema de texto relacionado. Se puede pensar en las ventas tipográficas. Tim Brown ha escrito sobre las relaciones modulares pero podemos tender a empezar a diseñar
solo con los tamaños de fuente predeterminados de las paletas en nuestra herramienta de software. Entonces, 72 o 60, 48, 36. Pero no hay razón por la que tengas que hacer eso. Puedes mirar la relación dorada, puedes mirar todo tipo de ratios
matemáticos y geométricos para ejemplos de cómo tus tamaños de tipo podrían relacionarse entre sí. Entonces, regresa y mira tus titulares y asegúrate de que todos sean consistentes y luego mira tus relaciones entre tus elementos y ve si son armoniosas. Entonces, el último paso en nuestro proceso de diseño son las cosas
documentales para que la ejecución pueda estar lo más cerca posible de nuestra visión. Entonces, cada vez es más fácil hacer esto. Hay cosas como proyecto parfait para Photoshop que te permite exportar el CSS directamente desde un PSD. Lo mismo con los bocetos que puedes seleccionar cualquier elemento y obtener los atributos CSS básicos para ese color de fondo o ese tamaño de fuente para que
no tengas que pasar por un cuentagotas cosas todo tú mismo. Entonces, pasa por y asegúrate de que tus símbolos o tu página de activos tengan todos los elementos principales que necesitas. Si has diseñado todo excepto en h3, solo tienes que seguir adelante y añadir una muestra h3 ahí para que tengas un sistema cohesivo y luego vas a escribir las especificaciones si las necesitas pero si vas a continuar en un final, desarrollar el sitio que necesitarías para hacerlo. Te preocuparía más exportar CSS. Normalmente quieres tener conversaciones con el desarrollador al principio. Entonces, habla con tu desarrollador, lo siento, golpea esa última frase, por favor. Vas a escribir especificaciones si son necesarias. Habla con un desarrollador y ve qué es lo que quiere. En ocasiones solo quieren que les des PSD o les des un archivo fuente. Entonces, o cuéntales sobre Sketch y cómo funciona o a
ver si les gustaría que hicieras a
ver si les gustaría que hicieras
todo el corte y hablaremos de eso también en tercera clase.
11. Explora sobre diseño en Skillshare: manera.
Erica Heinz, Designer/Developer
