Category Archives: Desarrollo Digital

iphonex

Y AHORA, ¿CÓMO DISEÑAR PARA EL IPHONE X?

Como desarrolladores y diseñadores de app nos afectará en la forma de pensar y diseñar nuestros proyectos para el iPhone X, te explicamos que hacer para adaptarnos a este nuevo dispositivo. 

Y AHORA, ¿CÓMO DISEÑAR PARA EL IPHONE X?

7 8 9 1

Diseñadores y desarrolladores debemos pensar en nuestra forma de diseñar para este nuevo dispositivo que será lanzado oficialmente el 3 de noviembre. Así que aún tenemos tiempo de repasar algunos puntos clave que nos ayudarán en este proceso de adaptación.

FIMiguel2

AUTOR

Miguel Rios

Director UX

Llegó el día más esperado, pues Apple, una de las compañías tecnológicas más importantes del mundo, dio a conocer sus más recientes productos. Y como era de esperarse, la mayor atención la obtuvo el nuevo iPhone X, el cual posee una pantalla nueva OLED y extendida a los bordes. Sin embargo, dicha resolución no es el único gran cambio, pues con él llega una enorme cantidad de pautas para todos los diseñadores y desarrolladores.

Tamaño de Pantalla  ‘Super Retina’

El nuevo tamaño de pantalla es de 1125px × 2436px, es decir, agrega un 20% más de espacio adicional de forma vertical.

Así que ahora agrega 145pt más de alto a la pantalla de 4.7 pulgadas.

iphoneXtamano

Suena simple, ya que sólo se vuelve más alto, pero debemos pensar en que la proporción ahora es diferente y será importante saber qué elementos se verán en iPhone X que en las versiones anteriores no.

Resolución @3x

Recuerda, para diseñar en alta calidad de resolución para retina, solemos trabajar nuestros documentos por un factor de escala de ‘@2x’, pero ahora será ese factor cambiado a ‘@3x’ debido al aumento de pixeles. Por ejemplo, las imágenes de 100px x 100px para pantallas regulares, en lugar de manejarlas para retina de 200px × 200px tendrán que ser de 300px × 300px.

ImageResolution-Graphic_2x

Nuevo Layout

Los puntos anteriores resultan muy simples al compararse con el relacionado al nuevo layout; este debe ser respetado para asegurar una correcta experiencia de usuario. En primer lugar, habrá que colocar márgenes adecuados y para ello existen nuevas reglas generadas a partir de las nuevas esquina redondeadas del nuevo iPhone X, la barra de espacio para el micrófono/cámara en el centro superior de la pantalla y en el nuevo ‘botón’ de home.

Esquinas Redondeadas

En las versiones anteriores no contábamos con esquinas redondeadas, pero es un elemento más para considerar en diseños futuros. Sí, lo sabemos, esto significa menos pixeles, pero siguen siendo importantes, pues los bordes ya no serán como en el clásico rectángulo perfecto de las versiones anteriores.

iphoneXcurvas

Espacio de micrófono/cámara invasor.

Ahora bien, también tenemos el llamado ‘sensor housing’ justo en medio de la pantalla. Es otro espacio negativo con el que no podemos contar, pero el que de igual forma debemos considerar. Estéticamente debemos buscar un contraste adecuado, ya que entre las reglas nuevas no está permitido rellenarlo con negro. ¿Por qué? Aún no existe una razón oficial, pero piensen un momento en lo parecido que sería al Samsung S8, como lo vemos en el siguiente ejemplo:

iphoneXreglas

El Nuevo ‘botón’ de home.

La línea negra o blanca -dependiendo del color de fondo- ubicada en la parte inferior dentro de la pantalla es el nuevo “botón” de home, así que de manera “imaginaria” debemos considerar que este gesto de home tiene un área de protección como regla, ya que siempre estará presente en nuestras apps. Esta barra sólo desaparecerá cuando utilices alguna función de ‘Full screen’ en alguna app.

iphonex-newhome

A continuación podemos apreciar todos los nuevos elementos adicionales que terminarán transformando nuestra rectangular y clásica pantalla en el siguiente layout disponible con una ‘area segura’.

iphonex-safe

Márgenes

Ya que conocemos el área disponible restaría solamente aplicar los márgenes cuando estemos trabajando en el contenido de nuestra app, ya que estas reglas son esenciales para que Apple pueda aceptar tu producto en su iTunes Store.

iphonex-safe2

A continuación tenemos un pequeño ejemplo de lo que se puede hacer y que no. En el caso de tener controladores dentro de nuestra app, deben de tener siempre un margen.

iphonex-safe3

Adicional a esto, debemos pensar en que para cada forma anteriormente menciona, aplican de diferente forma ‘landscape’, pues ahora existe el botón de home si volteas tu iPhone y ese es otro punto a considerar.

Consideraciones para versiones anteriores

Finalmente, no sólo debemos pensar en una versión especial para iPhone X, sino también que nuestra app o desarrollo esté pensado en todas las versiones anteriores de iPhone. Por ello hay ciertas reglas de proporción para los fondos y elementos gráficos a considerar.

Proporción para los fondos

Prácticamente lo más fácil será tener un color sólido para nuestros diseños. Pero, en caso de que sea una imagen o fondo con elementos, debemos de revisar cómo va crecer dicho fondo para el nuevo iPhone X. La recomendación es que te asegures de que el contenido visual importante permanezca en el visor para ambas pantallas.

iphonex-resolusion

Elementos gráficos antiguos

Si en tu app ya lanzada contaba con elementos gráficos considerados y pensados en el rectángulo y esquinas rectas de los viejos iPhones, ahora hay que sacar una nueva versión para todos esos elementos que, ten en cuenta, se verán terriblemente cuando los abran, tan cual vemos a continuación.

iphonex-resolusion2

Para más especificaciones en diseño y desarrollo para el iPhone X les recomendamos revisar la información detallada de la fuente oficial de Apple

En resumen, prácticamente los nuevos espacios promocionados para el iPhone sólo serán ‘una pantalla’, ya que no te dejará utilizarlos más que para fondos, es decir, este ‘gran’ cambio es meramente estético y no funcional.

Pareciera que será un gran reto implementar diseño y desarrollos de apps bien adaptadas para el nuevo celular de Apple, pero cuéntanos aquí ¿tú qué opinas? ¿consideras un acierto de Apple el retirar la proporción anterior e incluir elementos restringidos con el nuevo diseño del iPhone X?  bullet-final

FIMiguel2

Miguel Ríos

Director UX

Director de UX en Danilo Design. Apasionado por el diseño e interesado por dejar la mejor experiencia al usuario.

PROYECTOS RELACIONADOS

Principal

¿DISEÑAMOS PARA USUARIOS O DISPOSITIVOS?

Es un hecho conocido que la forma en la que consumimos la información cambia constantemente. Hemos escuchado e incluso creemos que el contenido es lo más importante, el que mueve, el que manda; pero, ¿realmente estamos diseñando con esta idea en mente o seguimos procesos basados en alguna tradición o hábito aprendido? En suma, ¿estamos diseñando para usuarios o dispositivos?

¿DISEÑAMOS PARA USUARIOS O DISPOSITIVOS?

7 8 9 1

Es un hecho conocido que la forma en la que consumimos la información cambia constantemente. Hemos escuchado e incluso creemos que el contenido es lo más importante, el que mueve, el que manda; pero, ¿realmente estamos diseñando con esta idea en mente o seguimos procesos basados en alguna tradición o hábito aprendido? En suma, ¿estamos diseñando para usuarios o dispositivos?

FIEliezer

AUTOR

Eliezer Malo

Product Owner

Como diseñador siempre ha sido un reto desarrollar en cada proyecto una experiencia única para el usuario. Esto me ha llevado a buscar soluciones que expresen el contenido de una manera sencilla, útil e interesante de consumir. En ocasiones se vuelve un poco tedioso tratar de encontrar la mejor forma de presentarlo en diferentes tamaños y dispositivos, ya que no quieres que el usuario se pierda de nada; pero por inercia o costumbre, terminamos pensando en función de “cuáles ‘features’ vendrán en web y cuáles en móvil”. De nuevo, caemos en diseñar para un dispositivo y no para el usuario.

MOBILE IS A TRAP. DESKTOP, A TRAP. TV, AUTO, WEARABLE… TRAPS! DON’T DESIGN IN SILOS. DESIGN FOR PEOPLE ACROSS SCREENS!

Matías Duarte

En los años pre-internet, los encargados de llevar la narrativa de sus clientes eran las personas de relaciones públicas. Algunos de estos errepés eran tan maquiavélicos que recibieron el nombre genérico de spin doctors, término que puede traducirse como “especialistas en el giro”. ¿El giro de qué? Del relato. ¿Recuerdas esa película de nombre Wag the Dog (1997) en la que Robert De Niro y Dustin Hoffman modifican la historia que se cuenta en los medios sobre un escándalo sexual presidencial y para ello inician una guerra ficticia en Albania que sirve de distractor? Ahí De Niro es un spin doctor, y gente como él sigue escribiendo el lado oscuro de la narrativa de los gobiernos y las corporaciones.

Inline #1_0

Por lo tanto, no debemos restringir el contenido de un dispositivo a otro. El usuario debe tener la posibilidad y el derecho de experimentar el mismo contenido en cualquier pantalla. Nuestro enfoque debe estar en encontrar la mejor solución para no esconderle nada al usuario; diseñando una estructura de flujo y presentación del contenido adecuadas para alcanzar su máxima expresión sin importar la superficie. Necesitamos quitar de nuestra mente: “ésto es para desktop, ésto para móvil, etc.” Debemos de pensar en la expresión del contenido como un todo.

NECESITAMOS PANTALLAS, NO UN DISPOSITIVO.

Si realmente queremos diseñar centrados en el usuario, necesitamos tener la capacidad de visualizar las diferentes pantallas y superficies con las que interactúa. Sólo así podremos hacer que el contenido se exprese en una integral y consistente interfaz, provocando esa única, tangible y memorable experiencia.

Esto aplica directamente para cada contexto de interacción, para cada momento de su día. Por ejemplo, cuando está en casa en la computadora de escritorio, en la televisión, en el smartphone, en su tableta, en su reloj, cuando está en el carro, en la oficina, en el super mercado y, por que no, hasta en el cuarto pequeño if you know what I mean.

Principal e inline

En Danilo Design Group, trabajamos para crear e innovar en interfaces narrativas que lleven al usuario a tener una experiencia única e integral con el contenido a través de cada pantalla; y a que nuestros clientes realmente puedan expresar con libertad su marca e identidad, además de sus necesidades y capacidades. Como diseñadores, programadores, inversionistas, empresarios y sobre todo tecnólogos, necesitamos caminar con una visión renovada, enfocándonos en la evolución constante de las nuevas tecnologías.

Adaptarnos, actualizarnos, pero sobre todo adelantarnos a cada paso tecnológico, nos llevará a crear una nueva cultura de pensamiento que provocará la innovación de nuestros procesos de diseño. Necesitamos dejar de pensar en desktop, móvil o tablet como grupos separados con distintas métricas. Estoy de acuerdo en que debemos enfocarnos en donde el usuario interactúa la mayor parte del tiempo, pero eso no quiere decir que descuidemos los otros tamaños de pantallas o, más grave aún, que los tratemos como diferentes productos.

Somos pocas las compañías que tienen o han adoptado esta filosofía. Entiendo que es difícil empezar a desarrollar sobre ella en un corto plazo porque, como toda evolución, conlleva un proceso; pero consideremos que es inevitable, y con esta premisa podemos caminar buscando alternativas para crear nuevas prácticas que nos lleven a alcanzar esta meta, una interfaz integral y poderosa que lleve la experiencia de consumo a un nivel inimaginable.

Empecemos a enfocar todos nuestros esfuerzos en compartir esta nueva cultura de diseño en nuestra comunidad, y quién sabe, tal vez nos sorprendamos de lo que juntos podamos lograr.

En nuestra siguiente nota estaremos platicando acerca de “Material Design”, la nueva interfaz de Google; la cuál es un tema que se relaciona directamente con lo que aquí comentamos, así que estén al pendiente. bullet-final

FIEliezer

Eliezer Malo

Product Owner

Diseñador & Product Owner en Danilo Design, Co-Fundador de Hnos & Co. Menswear. Emprendedor y visionario en la aplicación de nuevas tecnologías para la educación.

PROYECTOS RELACIONADOS

personas-ux-alta

DISEÑO DE PERSONAS

Cuando una empresa inicia un proyecto, generalmente considera los deseos de sus clientes. Otras veces, el equipo trabaja de acuerdo al gusto de sus jefes o superiores e incluso esbozan sus ideas de acuerdo al gusto de sus otros colegas, también diseñadores.

DISEÑO DE PERSONAS

7 8 9 1

Cuando una empresa inicia un proyecto, generalmente considera los deseos de sus clientes. Otras veces, el equipo trabaja de acuerdo al gusto de sus jefes o superiores e incluso esbozan sus ideas de acuerdo al gusto de sus otros colegas, también diseñadores. Ésta manera de realizar los proyectos debe terminar. Pero entonces ¿para quién diseñar?, ¿será cierto que cuando diseñamos para todo el mundo, en realidad estamos diseñando para “nadie”?

FIMiguel

AUTOR

Miguel Ríos

Diseñador UX

Existen muchas metodologías para realizar un proyecto exitoso y terminar por responder dichas cuestiones, pero hay una idea clave que los diseñadores debemos tener presente siempre: Cuando se diseña se hace para personas, seres reales que usarán el producto que buscamos impulsar.

UNA PERSONA ES UN USUARIO QUE SE USA PARA GUIAR LAS DECISIONES DE DISEÑO SOBRE LAS FUNCIONALIDADES, NAVEGACIÓN, INTERACCIONES E INCLUSO DISEÑO VISUAL.

Kim Goodwin

Al diseñar para arquetipos puedes satisfacer un amplio grupo de personas representadas por ese arquetipo. En otras palabras, “diseñar para personas” se traduce en un trabajo con base a un arquetipo específico que se verá representado para posteriormente satisfacer un amplio grupo de usuarios o consumidores afines.

¿CÓMO CREAR PERSONAS?

En primer lugar, debemos estar conscientes de que se busca diseñar un modelo de persona cien por ciento real, por eso mismo puede empezarse por adjudicarle un nombre, una edad y una serie de características físicas. Pero sobre todo, este modelo, base de nuestro diseño y proyecto, debe poseer patrones de comportamiento, de gustos, de objetivos y necesidades de un grupo específico de audiencia. Todo esto se logra, por supuesto, a partir de una investigación de corte sociológico en donde se detectan los rasgos principales de la audiencia cuya atención se quiere captar, y preguntarse a sí mismo ¿Cómo es su personalidad, qué actividades realiza regularmente, qué música escucha, qué tipo de moda prefiere, en qué entornos se desenvuelve? Etc.

Dichas ideas terminan por vaciarse en un boceto para posteriormente ajustarlas en un documento digital. Esta formará parte de un entregable que servirá de base al resto del proyecto.

personasux-0

Las personas generadas deben estar presente durante todo el proceso, incluso dichos documentos pueden imprimirse y colocarse en algún lugar visible dentro del área de trabajo mientras se realiza el proyecto.

personasux-1

El documento que se genera durante la “creación de personas” no tiene que ser aburrido, podemos ser creativos como el caso oficial de la compañía ‘Mailchimp’ que así diseñaron a sus “Personas”:

mailchimp

Así, las personas facilitan que las discusiones sean menos políticas y más prácticas. Podemos evitar el que el director de arte, jefe o cliente nos digan el clásico “Ponle más ‘punch’ ” sólo por su preferencia, ya que le responderíamos “Pero a Victor, Rosa y Camen no les gusta”.

En Danilo Design la “creación de Personas” ha representado una parte fundamental dentro de nuestro proceso de UX. Dicho método lo recomendamos ampliamente para cualquier equipo que busque realizar un proyecto exitoso, pues el profundizar en el problema que busca resolver e identificar las necesidades del individuo a quien nos dirigimos son cualidades que todo buen diseñador debe desarrollar.

Entonces ¿Qué te parece? ¿Te gustaría trabajar con ‘Personas’ en tu próximio proyecto? bullet-final

FIMiguel

Miguel Ríos

Diseñador UX

Diseñador UX & Product Owner en Danilo Design. Apasionado por el diseño e interesado por dejar la mejor experiencia al usuario.

PROYECTOS RELACIONADOS

Inline-Image

INTERNET, INNOVACIÓN Y VIDEO

¿Cuántos videos encontró hoy en su Facebook? ¿Cuántos de ellos compartió con sus contactos? En México, el contenido estrella en internet es el video.

INTERNET, INNOVACIÓN Y VIDEO

7 8 9 1

¿Cuántos videos encontró hoy en su Facebook? ¿Cuántos de ellos compartió con sus contactos? En México, el contenido estrella en internet es el video. En YouTube, el país ocupa el tercer lugar a nivel global en consumo de productos de dicha plataforma y los usuarios dedican, en promedio, una hora viendo videos on-line.

Tomasini

AUTOR

Carlos Tomasini

Consultor Editorial

A nivel mundial, el consumo de imágenes en internet ha superado a los contenidos escritos. Una muestra de ello se encuentra en las redes sociales, donde hace unas semanas Instagram anunció que rebasó la cifra de 400 millones de usuarios, superando a Twitter, que a finales de septiembre tenía 316 millones de cuentas activas.

De acuerdo con cifras de la Asociación Mexicana de Internet (Amipci), el lugar donde los mexicanos consumen más video es Facebook (78 por ciento), red social con una penetración mayor a 90 por ciento de los usuarios de internet en el País; seguido, claro, de YouTube (59 por ciento).

En cuanto a los contenidos de esos videos, 64 por ciento son videos musicales (un formato que se hiciera popular en los 80 y que, curiosamente, hoy está casi extinto en la televisión), seguido de 53 por ciento de películas, por lo que servicios como Netflix se hacen cada vez más relevantes (en cuanto a contenidos legales se refiere).

Los tutoriales, es decir, aquellos videos que dan instrucciones al usuario de, por ejemplo, cómo maquillarse o cómo reparar un auto, son utilizados por 49 por ciento de estos usuarios. 40 por ciento prefieren las series de TV, mientras que 5 de cada 10 del total gustan de compartirlos a través de sus redes sociales.

Amipci también señala que la mayoría de los usuarios de internet que consumen contenidos en video en México tienen entre 18 y 35 años.

Estas cifras demuestran que el video será el principal contenido a desarrollar de parte de todos aquellos medios que deseen tener presencia relevante en internet, además de la importancia que tiene para ellos promoverlos a través de sus redes sociales.

EL VIDEO DE 10-15 SEGUNDOS ES LA NUEVA ‘MONEDA DE ATENCIÓN’ DE LOS MEDIOS; UNA ESPECIE DE ‘TRAILER’ MEDIÁTICO PARA EL ENTORNO MULTIPLATAFORMA DE HOY.

Eduardo Danilo Ruiz
CEO Danilo Design Group

Para que estos contenidos en video sean verdaderamente relevantes, deben ser atractivos y originales, en formatos cortos y que exploren nuevas alternativas que no se parezcan en nada a, por ejemplo, la televisión actual.

Un formato de noticiero tradicional o una serie con las mismas temáticas y ritmo que pueden verse en la TV abierta no tienen gran atractivo para las audiencias que hoy buscan contenidos novedosos, no sólo en su país e idioma de origen, sino en, literalmente, todo el mundo.

Copiar formatos (una práctica muy común en la televisión y la música el siglo pasado) tampoco es opción, ya que tarde o temprano saldrá un usuario que descubra el original, por lo que cuando se desee desarrollar contenidos en video será necesario hacer una investigación de lo que hay en el mercado, identificar las mejores prácticas y encontrar una manera en la que se pueda renovar o mejorar ese contenido.

Actualmente existe un gran campo de innovación en los contenidos en video en internet que, combinados con las nuevas tecnologías y las redes sociales, pueden generar nuevas formas de comunicación que vale la pena explorar sin miedo a la experimentación.

Una tendencia importante de los contenidos informativos en video es la producción de piezas cortas, no mayores a dos minutos (algunas sólo duran unos segundos) y que suelen ser distribuidas a través de redes sociales por medios digitales como AJ+ y Buzzfeed.

Inclusive, algunos de estos medios no tienen contenidos en una página web, como es el caso de NowThis, sino que su filosofía es “Hoy, las noticias viven donde tú vives”, refiriéndose a que sus videos los difunden a través de redes sociales como Snapchat, Vine, Instagram, Tumblr y, por supuesto, YouTube, Twitter y Facebook.

Inline-Image

A este género se le conoce como short-form-video-news y básicamente lo conforman imágenes, textos breves, música de fondo y el audio suele ser directo, es decir, sin algún locutor de por medio que narre lo que se está viendo. Las imágenes son el contenido más importante.

Las apps de smartphones y tablets también deben ser una apuesta de los medios, ya que los contenidos basados en web no siempre suelen ser amigables con las versiones móviles, las cuales son cada vez más utilizadas.

También ya existen en el mercado otras plataformas, como los “artículos instantáneos” de Facebook, que brindan al usuario la facilidad de consumir video y otros elementos desde la plataforma de esta red social, es decir, no es necesario dar un clic para ingresar a algún contenido.

Así que el video, al ser una de las tendencias de internet que más han crecido en los últimos tiempos, debe formar parte importante de las estrategias de contenido de cualquier medio digital. En este sentido, en Danilo Design ofrecemos a nuestros clientes el servicio de Estrategia de Medios, así como la Estrategia de Contenidos en donde se realiza un diagnóstico del producto editorial. Partiendo de éste análisis, diseñamos una programación de contenido durante todo el año para que el diario muestre contenido fresco y atractivo para el lector.

Definitivamente, producir contenidos en video requiere más tiempo, personal, infraestructura y, por lo tanto, dinero que los contenidos escritos, pero definitivamente, bien realizados, otorgan mejores resultados y son más valorados por la audiencia que busca y, sobre todo, comparte, ese tipo de contenidos. Vale la pena atreverse a experimentar. bullet-final

Tomasini

Carlos Tomasini

Consultor Editorial

Carlos Tomasini colabora en publicaciones online e impresas (Chilango, Milenio, Unocero); ha sido editor en Reforma, Prodigy MSN y la revista MUST, y es consultor editorial en Danilo Design Group. Ha impartido clases de Periodismo y realizado Media Training para grandes corporativos.

PROYECTOS RELACIONADOS

CSS-Inline-1

CSS MEJORES PRÁCTICAS

El CSS, Cascading Style Sheet, es uno de los lenguajes en que se desarrolla el front end, la parte que no se observa en un sitio y que permite al usuario ver las imágenes, colores, tipografías y otros elementos tal y como fue diseñado, así como interactuar y navegar en él.

CSS MEJORES PRÁCTICAS

7 8 9 1

El CSS, Cascading Style Sheet, es uno de los lenguajes en que se desarrolla el front end, la parte que no se observa en un sitio y que permite al usuario ver las imágenes, colores, tipografías y otros elementos tal y como fue diseñado, así como interactuar y navegar en él. Para que funcione correctamente existen reglas estrictas que deben seguirse, pero también es cierto que hay mejores prácticas que podemos implementar para hacer un uso más óptimo de él.

FIEloisa

AUTOR

Eloisa Pereyra

Diseñadora Gráfica

Estas mejores prácticas abarcan muchos campos, pero en esta ocasión quiero mencionar tres que nos han funcionado trabajando en equipo y con el administrador de contenido, CMS, Drupal.

UNA MARCA ES UNA NARRATIVA, ES LA SÍNTESIS DE UNA HISTORIA QUE DESCRIBE LA EXPERIENCIA DE VALOR DE UN PRODUCTO O SERVICIO.

Eduardo Danilo Ruiz
CEO Danilo Design Group

SEGMENTA Y CUIDA LA SEMÁNTICA

Aunque existen diferentes lugares para ubicar nuestros estilos, el lugar ideal es en “archivos externos .css.”

Si segmentamos en hojas específicas, debemos hacer que semánticamente nos indiquen de qué partes o elementos del sitio estamos hablando (layout.css, blocks.css, forms.css) así será más fácil organizar y mantener en orden el front end de nuestro proyecto. Mientras más grande sea el website que construimos, más complejos y abundantes serán los archivos que lo conforman, por lo que mantener una buena segmentación ahorra tiempo y dolores de cabeza.

La semántica siempre será importante y apreciada no sólo por ti, sino también por el resto del equipo y por los futuros desarrolladores; es por eso que debemos cuidar tanto los nombres de los archivos, como las clases y los ids de nuestros tags, buscando siempre que sean lo más explícitos posible.

CSS-miniinline

Elementos del sitio.

ORGANIZA Y COMENTA

Una vez segmentados nuestros archivos, es importante que cada uno esté organizado. Al momento de comenzar a codificar es muy fácil leer estas hojas pero ¿qué pasa cuando las líneas de código empiezan a crecer y nuestros archivos se hacen muy extensos? Si utilizamos una lógica para organizar nuestros selectores será más fácil leer y entender nuestros estilos. Recuerda siempre dejar comentarios que ayuden a saber de qué trata cada parte del archivo.

CSS-Inline-1

DE GENERAL A PARTICULAR

Codificar un buen CSS va de la mano con un markup limpio y bien estructurado de HTML. Así que una parte fundamental al momento de trabajar con cualquier CMS es conocer la estructura que arroja y su lógica de armado, clasificación e identificación de elementos. Esto nos facilitará estilar de lo general a lo particular, es decir, debemos identificar primero aquellos elementos que comparten características y declarar sus estilos solamente una vez, con selectores que nos permitan reutilizar el código, y después ir hacia aquellos que necesitan un tratamiento específico.

CSS-inline-2

Estas son sólo algunas prácticas que ayudan a que un website esté bien hecho de principio a fin. Al arrancar un proyecto haz un análisis, toma en cuenta todas las páginas y escenarios que conformarán el sitio web, establece junto con tu equipo las mejores prácticas a seguir y busquen ser consistentes y constantes a lo largo del proyecto. bullet-final

FIEloisa

Eloisa Pereyra

Diseñadora Gráfica

Diseñadora gráfica con enfoque en diseño web y desarrollo front end.

PROYECTOS RELACIONADOS