Introducción al minimalismo enfocado en contenido en diseño web

1. Introducción: Oigan, chicos, en Joshua Stone en el día de hoy voy a mostrar algunas de las cosas que he aprendido a lo largo de los años sobre el desarrollo de sitios web en torno a los conceptos de minimalismo centrado en contenido. Ahora, ¿qué significa eso exactamente? Bueno, se trata de equilibrar estructura y estilo para que realmente el contenido tome el centro de la escena. Se trata de diseñar y desarrollar un sitio web que sea fácil de entender y de navegar. Por lo que los usuarios finales confinaron exactamente lo que están buscando sin ninguna molestia. Se trata de diseñar un sitio web que funcione casi en cualquier lugar desde donde se cargue y hacerla receptiva tanto que se adapte a diferentes resoluciones. Y entonces en realidad responde a la entrada del usuario de manera oportuna. Por lo que en esta clase estará cubriendo algunas cosas desde decidir qué contenido incluir. Decidir cómo diseñar ese contenido. A qué priorizar, averiguamos dónde podemos poner flyer con estilo sin ir por la borda y ser demasiado artísticos. Distraer a los usuarios del contenido también estar yendo a un poco más de detalle sobre diferentes formas. Puedes tratar de evitar confusión y frustración para las personas que usan tu sitio y también algunas consideraciones técnicas y de accesibilidad que tal vez quieras hacer ahora a lo largo de esta clase , en realidad voy a estar mostrando un mundo real ejemplo porque necesito hacer una actualización. Mi página web ahora. También te recomiendo que sigas y construyas o al menos diseñes un sitio web siguiendo estos conceptos. Ahora este tipo de clase difumina la línea entre el diseño Web y el desarrollo Web. Por lo que se recomienda al menos una comprensión básica de H. Melón CSS. Pero de todos modos, supongo que básicamente lo cubre todo. Entonces si estás listo para empezar, sigamos adelante y saltemos de inmediato. 2. Comienza con el contenido: Siempre que empiezo a construir un nuevo sitio web, Lo primero que pienso es el contenido. El contenido es la razón por la que la gente está ahí. Es lo que están buscando. Es todo el motivo para que el sitio exista en general. Entonces por el hecho de que el contenido es el foco número uno del sitio, todo lo que hacemos desde aquí va a ser sobre asegurarnos de que mantenga ese enfoque en que hace que la experiencia del usuario sea mejor y facilite encontrar la información que el usuario necesita. Entonces, ¿cómo vamos a pensar en el contenido? Bueno, ya deberías tener una idea de para qué sirve el sitio ISS, Pero empecemos a pensar en cómo podemos desglosar eso hasta sus elementos constituyentes base Ahora, para darte una mejor idea de lo que quiero decir con eso, Te mostraré mi proceso en averiguar el contenido de mi nueva página web. Muy bien, entonces mi sitio web es esencialmente una página de portafolio, así que lo primero que claramente necesito es una bio. Algo sobre quién soy. Necesito información de cómo contactarme así como mis enlaces sociales. Lo siguiente que me gustaría es contar con mi trabajo actual. También me gustaría un listado de mi trabajo anterior, mis juegos y proyectos misceláneos, y también me gustaría alguna información sobre ayuda, contribuir en mi página de mecenas que he configurado. Pero ahora que tenemos eso resuelto, ¿qué sigue? Bueno, necesitamos priorizar las cosas, y lo que quiero decir con eso es cuando piensas en lo que queremos que la gente descubra primero en nuestro sitio y si se van temprano, ¿qué primera impresión quieres dejar? ¿ Y qué podrían estar buscando en primer lugar de todos modos? Esencialmente, solo queremos asegurarnos de que el usuario vea primero las cosas correctas y que todo esté simplemente generalmente en un orden lógico. Entonces para mi página web, como que tengo esto ya en un orden decente porque básicamente, lo primero que quiero que la gente vea es información sobre quién soy, cómo contactarme y en qué estoy trabajando actualmente eso va a estar todo al frente página. Después fui páginas en mis juegos por los proyectos de Miss Lane y una página sobre contribución. Ahora ya es hora de que empecemos a pensar en dónde entran las cosas. Ese tipo de solapamientos con priorización, honestamente. Pero básicamente lo que quiero decir es debilitar las cosas desglosadas por dos páginas y podemos descomponer cosas dentro de la página típicamente iban a hacer ambas cosas a menos que sea un sitio que simplemente sucede construido para realmente encajar todo en una sola página. Pero por lo general tendrás las cosas categorizadas juntas en páginas distintas, y dentro de esa página todo se agrupará de manera lógica, y definitivamente queremos asegurarnos de que todo esté equilibrado aquí. Si bien queremos usar el espacio de manera eficiente y no queremos que todo se extienda en un montón de páginas diferentes o simplemente realmente escaso dentro de cada página, tampoco queremos que sea demasiado compacto y denso con los datos. 3. Estilo y estructura: bien, Así que ahora que nos dimos cuenta de qué contenido vamos a tener en nuestra página web y cómo generalmente se va a diseñar, es hora de pensar en cómo va a quedar específicamente. Y esto se trata en gran medida de decidir sobre un tema consistente. Queremos un tema que encaje con el contenido y, como dije, sea consistente ahora volver al tema original El minimalismo enfocado al contenido es sobre mantener las cosas simples, por lo que queremos mantener el foco en el contenido. Pero utilizamos el diseño y el estilo general para complementar el contenido. Simplemente en general queremos mejorar la experiencia de usar nuestro sitio. Por lo que al averiguarlo todo, suelo empezar con un diseño básico, una estructura sencilla que contendrá el contenido. Entonces otra vez, para darles un ejemplo, les mostraré en qué estoy trabajando a mi vista. Esencialmente voy a tener todo centrado. Pero con los fondos desbordados en cualquiera de los lados, tendré una barra lateral con el logo y los enlaces de navegación en, y tendremos el contenido ahí mismo. La barra lateral permanecerá fija a medida que se desplaza la parte principal del contenido, y cuando se ve en un dispositivo móvil o en las cejas. Cuando sabemos algo, es lo suficientemente delgado. Ill swap, también, la navegación estando en la parte superior y eso se desplazará con la página para que no bloquee el contenido de la vista. Pero en general, es un patán bastante simple. Y la razón por la que decidí ir con eso se debe al tema que decidí ya que soy desarrollador de juegos que sería interesante si mi vista se pareciera un poco a un menú en un juego. Ahora ese ladrón no es necesariamente un papel estricto. Pero en general, este tema parece realmente funcionar bastante bien con lo que voy a buscar. Pero de todos modos, ahora que tenemos un diseño y estructura básicos para nuestro contenido, necesitamos descifrar algunos patrones de diseño consistentes que se reduce al color y la forma. También se trata de las fuentes, todas esas pequeñas cosas que realmente van un largo camino para crear un tema consistente. Y de nuevo, estamos tratando de mantener las cosas simples y no distraer. Entonces siempre hay un acto de equilibrio de tratar de asegurarse de que el contenido sea accesible, fácil de encontrar y donde lógicamente debería ser que todo se vea bien y funcione bien , así , que seguiré adelante y te mostraré lo que realmente he hecho. En este momento, se puede ver ese diseño subyacente aquí mismo. Todo está centrado en el fondo. deletrea a los lados, y la navegación está fija. Pero le he puesto mucho estilo, pero no demasiado. Todo sigue siendo muy sencillo, no distraer, pero ayuda a agregar un poco de ese estilo. Y de nuevo, encaja con el tema de ser un menú de videojuegos. Todavía hay mucho trabajo, cualquiera a dio. Claramente este aire se supone que son imágenes. No tengo mi correo aquí en mi bastante seguro sobre el saldo de todo esto. Pero en general, eso hace pasar la idea. Y, sí, también tengo la versión móvil. Nada demasiado complicado. Simplemente se derrumba. Y como puedes ver, no hay mucho en ello. Se trata de elementos realmente simples a medida que empiezas a descomponerlo. Ahora, en realidad construyendo una página como esta, hay muchas cosas en las que pensar, y la más grande que tiende a surgir es la compatibilidad con navegadores. En pocas palabras, diferentes navegadores admiten un conjunto diferente de características, y siempre habrá características más nuevas que los navegadores más antiguos que la gente todavía usa no admiten. Y se reduce a una decisión que tienes que tomar sobre qué características realmente necesitas usar y qué otras formas hay de hacer ciertas cosas. No, por supuesto, compatibilidad importa mawr, en algunos casos en menos y en otros, y esto depende en gran medida de tu audiencia. Si estás construyendo algo que absolutamente necesita usar algunas de las últimas características, y eso está bien, solo tienes que saber que no vas a poder llegar a tantos usuarios. Pero si estás construyendo algo que necesitas ser lo más compatible posible, tendrás que hacer algunos sacrificios, y normalmente trato de encontrar ahí el medio terreno. 4. Mantén el sentido de: Entonces ahora que he cubierto el diseño del contenido y el estilo y estructura para nuestro sitio, quiero hablar de algunas cosas más pequeñas. Y de lo primero de lo que hablaría es de la capacidad de respuesta. Queremos asegurarnos de que nuestro sitio pueda ser visto desde tantos lugares diferentes como sea posible, todo teniendo en cuenta el hecho de que aproximadamente la mitad de su tráfico probablemente va a ser dispositivos de desmoldeo. Por supuesto, esto dependerá de tu público objetivo, pero en general eso va a ser cierto. Entonces, ¿cómo hacemos esto? Bueno, el concepto general a tener en cuenta es que queremos que nuestro sitio sea fluido. Queremos que la estructura se adapte de diferentes maneras, dependiendo de qué tipo de estructura pretendamos tener. Hablé brevemente de esto en la última parte cuando mostré cómo mi sitio lleva la navegación viene de la izquierda a estar arriba cuando haga la ventana demasiado estrecha, y eso es lo que haré en Mobile. Ahora bien, ¿cómo estoy haciendo mucho de esto? Bueno, lo primero sería sobre dimensionar porque, como sabrás, muchos teléfonos tienen una pantalla que es de 12 80 por 7 2019 20 mes en 80 o incluso cuatro resoluciones K. ¿ Cómo nos aseguramos de que nuestro contenido no aparezca extremadamente pequeño en su dispositivo? Ahora hay algunas formas complicadas que se hacía en el pasado, pero hoy en día es realmente sencillo y muy bien apoyado. Y son las etiquetas de puerto meta Vieux que se llama. Se trata de definir aquí algunas propiedades que ajusten cómo se renderizará el navegador. El contenido de la página está esencialmente acercándose automáticamente a un nivel razonable para ese dispositivo. Entonces, por ejemplo, mi teléfono usa una pantalla 12 80 por 7 20. Pero el tamaño que renderiza el contenido real, es como si solo tuviera 420 píxeles de ancho, no 720. Por lo que todo parece estar en un tamaño más razonable que esperaría en un monitor con resolución más típica. Ahora hay varias propiedades diferentes que puedes usar aquí. Estos airean solo los tres que uso que aprendí de otros lugares, y ayuda a ajustar el contenido específicamente a lo que hay en la página, no a lo que se está desbordando ahora. Por supuesto, esto no maneja derrumbar todo. Entonces, ¿cómo hacemos eso? Bueno, utilizamos consultas de medios, que son otra característica que de nuevo es bastante nueva, pero aún bien apoyada. Usas esta sintaxis y pasas un parámetro, y aquí estoy revisando un ancho máximo de poco menos de 640 píxeles para que bajo ese tamaño me vaya a colapsar hacia abajo en la vista móvil. Y dentro de él, sólo podría definir reglas como lo haría normalmente, para ajustar todo desde lo normal hacia fuera para permitir que fuera que se ajuste mejor para el móvil. Y luego tengo un par más para ajustar el tamaño, ings y espaciado de diferentes elementos. Por lo que estos dos métodos diferentes el método Vieux port tag y las consultas de medios hacen un largo camino para hacer que su sitio móvil amigable. Ahora también sabemos que piensas en cómo se hace la entrada. Y lo que quiero decir con eso es en una computadora. Generalmente vas a estar usando un ratón, y eso significa que podrás pasar el ratón sobre los enlaces en el móvil. Claramente, no se puede flotar en ese tipo de pantallas, así que realmente no se debe revelar información sobre un evento de flotación, y en realidad lo he hecho en el pasado sin darme cuenta. Seguiré adelante y te mostraré en mi página actual de juegos. Tengo estos lindos azulejos representando a cada uno mis juegos, y al pasar el rato sobre ellos, revelan el nombre y eso es todo genial. Pero no puedo flotar sobre ellos en el móvil, así que realmente no puedo revelar el nombre. No, podría haber otras cosas y piensas en tu sitio en móvil. Pero en general eso cubre casi todo. Entonces supongo que eso es todo por ahora. Entonces pasemos a la siguiente parte. 5. Prevalencia y frustración: todo en este momento, quiero hablar un poco de prevenir confusión y frustración para los usuarios de tu sitio, y el primer punto que quiero hacer es que la previsibilidad es muy importante. A lo que quiero decir es que, sobre todo cuando se trata de elementos interactivos, esas interacciones deben comportarse de la manera en que la gente espera que vuelvan a hacerlo. Todo está de vuelta para asegurarse de que todo sea intuitivo. El siguiente punto que quiero hacer es sobre conjeturas. No quieres que el usuario tenga que adivinar qué hacen ciertas cosas. Por ejemplo, si vas a usar iconos para la navegación, si su propósito no es extremadamente claro e incluso si lo es, probablemente quieras algún tipo de impuesto para poder explicar qué es. Y lo siguiente sería que se desea minimizar los tiempos de carga y maximizar la compatibilidad . tiempos de carga importan en que la gente no quiere estar esperando tus vistas y cargar. Es bueno pensar en dónde realmente necesitas imágenes u otros multimedia y dónde puedes escapar sin ella. Hay muchas formas en que puedes estiling y CSS que se ven realmente bonitas que no requieren imágenes. Hay un montón de técnicas para mantener estos archivos pequeños, incluso si necesitas muchas imágenes las formas más sencillas,por supuesto, por supuesto, pensar en los tipos de archivos y métodos de compresión. Por ejemplo, la mayoría de las veces vas a estar usando ya sea J Pigs o P y G's P y G son buenos para imágenes más simples, unas con colores más sólidos o transparencias parciales. Por supuesto, no se puede hacer eso con J Pegs ahora con P y G's. Si estás usando 256 colores son menos y no necesitas transparencias parciales. En realidad puedes usar indexación mucho como un Jiff, pero en realidad es un tamaño de archivo más pequeño que un Jeff, y yo uso mucho esa técnica. Y, por supuesto, con J Pegs, se trata de determinar con qué niveles de compresión podrías salirte con la tuya no destruir demasiado la calidad de la imagen de todos modos. Hay algunas otras técnicas que realmente no he explorado demasiado, pero son útiles para estar al tanto, y se trata de cargar diferentes versiones de la imagen que son de diferentes tamaños, dependiendo de la resolución del dispositivo. Tu visualizarlo en otra cosa que se relaciona con esto son fuentes personalizadas. Podría ser realmente agradable desde el punto de vista del diseño, construido una carga, sus propias fuentes para usar en la página. Pero si no tienes cuidado, puedes sacarte un poco de las manos. Por lo general lo que traté de hacer es mantenerlo abajo para que me guste una o dos fuentes personalizadas. Y si pudieras salirte con la tuya, usar fuentes del sistema puede ser una muy buena idea. Hay una nueva técnica que está usando esta pila de fuentes del sistema. Puede parecer un poco largo y fuera de lo común, pero esta es una nueva forma de manejar los fondos que usará las mejores fuentes que los sistemas operativos y navegadores que conoces, incluyendo ahora , claro, si quieren que se vea igual en todas partes. Los bonos personalizados vuelven a ser algo importante para eso. Y en cuanto a la compatibilidad entre diferentes navegadores. Eso se reduce a todas las cosas de las que hablé antes. Porque si alguien está usando un navegador eso no es realmente todo tan oscuro y el sitio no está funcionando demasiado bien para ellos. Esa no va a ser una muy buena experiencia de usuario. Quieres asegurarte de que tantas personas puedan usar tu sitio como sea posible, pero claro, un grado razonable 6. Considerar la accesibilidad: Ahora hay un último concepto que quiero discutir, y eso se trata de accesibilidad. Ahora esto cubre una gama muy amplia de temas, pero voy a tratar de descomponer algunas de las cosas que trato de tener en cuenta. El primer punto sería sobre la invisibilidad del contraste, y eso se reduce al color, tamaño y forma de los objetos en la página. Cuando se trata de opciones de color, se quiere pensar en la diferencia entre el fondo en primer plano. También es una buena idea asegurarse de que los colores no sean demasiado nítidos y atrevidos y simplemente evidentes y difíciles de ver. Quieres pensar en la ceguera del color. Existen diferentes herramientas que puedes usar para emular daltonismo, y luego, cuanto al tamaño y la forma de los objetos, generalmente se trata de asegurarte de que las fuentes que eliges nuestra cornisa herbal al tamaño que pretendes para que lo sean. Ahora estos conceptos sí se aplican a cosas de texto parejo, pero eso es típicamente lo principal por lo que tendrás que preocuparte. Otra cosa que tal vez desee estudiar es apoyar a los lectores de páginas en su sitio. Existen algunas técnicas diferentes que puedes usar para asegurarte de que el contenido se lea correctamente para usuarios ciegos que tienen que confiar en programas para leer en voz alta el contenido de la página. Realmente no me he preocupado demasiado por ello en mi mira, porque el contenido que hago tiende a estar orientado visualmente para empezar. Pero es algo en lo que pensar ahora. Otra cosa sería no requerir movimientos de precisión y navegación. No quieres requerir que alguien tenga que estudiar de una mano, y eso ni siquiera afecta a personas con discapacidad o personas de la tercera edad. Es realmente molesto para cualquiera tener que navegar a través de un menú que se sigue escondiendo si te mueves de la manera equivocada, Oh! 7. Reflexiones finales: todo bien. Supongo que eso cubre casi todo. Entonces en este punto, deberías tener una comprensión bastante sólida de por qué diseñé sobre sitios web de la manera que lo hago. Y sólo recuerda que no hay reglas duras y rápidas a la hora de diseñar nada . Es solo cuestión de tener en cuenta ciertos puntos y averiguar qué es lo mejor para tu proyecto. Ahora bien, si has estado construyendo o diseñando algo en el camino, sería genial que lo compartieras abajo. Para que todos puedan ver en qué has estado trabajando, y ni siquiera tienes que esperar hasta que termines para poder compartirlo. Se puede actualizar en el camino, ha avanzado y obtener aportaciones de otras personas que siguen esta clase. Y hasta me pueden hacer preguntas e intentaré ser lo más receptivo que pueda. Sólo recuerda, definitivamente no lo sé todo cuando se trata de todo esto. Solo estoy compartiendo los puntos que he aprendido a lo largo de los años de construir mis propios sitios web. Entonces espero haber compartido esos puntos lo suficientemente bien. Y si te interesa ver alguna clase futura que publique aquí. Asegúrate de seguirme abajo que sean muy apreciados y siéntete libre de hacer cualquier solicitud sobre cosas que te gusten para mostrarte si eso es más sobre desarrollo de diseño web o algo sobre hueso de juego. Pero de todos modos, supongo que eso va a tener que ser un cuatro hoy, así que sí, te veré por ahí. Adiós.