¿Qué recomendaciones darías a la hora de hacer un skin?
Bueno, creo que esta es una pregunta a la que @necromancercoding dio una respuesta más que acertada en este post y que me parece muy precisa. Sin embargo, bolita gris con gafas sí que creo poder responderte con algunas cosas más añadiendo a todo lo dicho por aquí mi compi y que, dentro de lo que cabe, considero fundamentales ya sea para hacer una skin o cualquier otro tipo de proyecto.
Todo proceso creativo necesita de un proceso de preparación previo. El motivo es simple, generar algo de la nada sin siquiera haber o conocer ningún tipo de referencias, por lo general, es desastroso.
¿Qué podría entrar dentro de esta categoría?
Bueno, fácilmente cualquier cosa que te inspire. Estaría bien estar al tanto de las últimas tendencias, funcionalidades y estilos.
Conocer sitios que puedan proporcionarte inspiración, desde generadores de paletas pasando por sitios de iconografía hasta las canciones o los anuncios que ves de camino en el bus.
Cualquier cosa es válida para empezar a hacer funcionar los motores.
Un BUEN proyecto necesita al menos un poco de preparación previa.
Considero que, una vez tienes o has empezado a formarte una idea más o menos clara en la cabeza sobre lo que quieres o necesitas, lo que deberías hacer a continuación es investigar.
Hacer un poco de muchas búsquedas en las que compruebes qué se ha hecho hasta ahora o qué tipo de cosas se vienen haciendo en el ámbito que hayas decidido empezar tu idea. Y aquí considero que hay una cosa importantísima a tener en cuenta: Mide BIEN tus CAPACIDADES.
Con esto quiero decir que el proceso de búsqueda te arrojará ciertos resultados con los que puedes ir viendo qué y qué no está a tu alcance.
Por mucho que te guste lo que hacia Picasso, si no has tenido las herramientas y formación necesarias, no te embarques en un Guernica así a palo seco. Eso solo te va a generar mucha frustración porque nunca saldrá tal y como lo tienes imaginado en tu cabeza. Siempre id de menos a más.
Siguiendo un poco la linea de Necro, aquí ya nos empezamos a meter en el meollo del asunto.
Es importante que, una vez tengáis claro qué queréis hacer y sepáis más o menos cómo se podría hacer, antes de empezar la casa por el tejado, hagáis unos bocetos previos y empecéis a pensar en la organización previa a todo ello.
Si queréis hacer una skin y ya tenéis la preparación y vuestra investigación os dice que deberíais pensar en poner tal o cual funcionalidad, que se suelen llevar estas paletas y estos layouts… Antes de liaros la manta a la cabeza, tenéis que sentaros a pensar y dibujar -literalmente, un cuaderno está bien- cuales son vuestras necesidades reales.
Aquí sí que quiero añadir una cosa también relevante llegados a este punto.
NECESITAS saber cuál va a ser el contenido de lo que hagas, al menos a grandes rasgos. No puedes empezar a plantearte una skin si no tienes ni koalil idea de cuantos apartados habrá, a qué estará dedicado… En suma, lo que sea que necesitará el foro en cuestión.
Una vez tengas todo esto claro clarinete, el siguiente paso a todo esto es empezar a esbozar tu idea.
Literalmente, repito. Dibuja. Dibuja aunque sea una mierda con patas y ojitos. No pasa nada, haz cajas, pon lineas en vez de texto… HAZ. TU. PUTO. DIBUJO.
(Esto en términos exactos de diseño se llama wire-framing y tiene mucha miga detrás que quizás un día os cuente).
Y diréis: Pero Koalita…¿para que cuando puedo ir directamente a hacer un mock up? Bueno, veréis. Es mucho más sencillo ver los errores de organización y espacio una vez lo tienes planteado en un dibujo. Y te ahorras pasos que quizás una vez empieces con el mock up tengas que modificar desde cero, con lo que pierdes tu tiempo. Borras mejor con una goma que con un ratón.
(Ojo cuidao, dibujo digital esta incluido. Puedes hacer tus cajitas de borde negro en photoshop también si te es más cómodo claro. Cada maestrillo tiene su librillo)
Es importante que tras el boceto y el mock up lo revises correctamente. Haced las pruebas que necesitéis sin meteros en la parte de código aún. ¿Por qué? Bueno, pues por lo mismo. Cuantas más pruebas y diferentes versiones hayáis hecho, mejor veréis los fallos que podrían saliros una vez estéis con el código.
Y que de repente te des cuenta de que has planteado una barra lateral mucho más ancha de lo que debería cuando ya tienes todo el esqueleto HTML jode un poquet.
Aquí entraría también la planificación de lo que serían los puntos que comentó Necro: La usabilidad, la estética y que sea ante todo LEGIBLE. ETC. ETC.
(Sí, soy un koala pesado con esto de la legibilidad. Me lo voy a tatuar en el jepeto.)
Y cómo esto da para una temporada entera pues ya profundizaremos más en este asunto.
En fin. Boceta. ¿Ya? ¿Sí? ¿Satisfecho? Pues pasamos a lo siguiente.
Ya lo siento por los informáticos, porque hacer HTML y CSS NO es desarrollar, que son lenguajes de marcado y no son lenguajes de programación. Pero bueno, os robo la palabra y os aguantáis, que así se entiende mejor.
Aquí viene cuando la matan. Una vez tienes tu mock up en dónde mejor te haya venido hacerlo, lo siguiente que debes hacer es…
¡SORPRESA! ¡Volver a coger otro papel! (O lo puedes hacer de cabeza, vaya, pero si es algo complejo igual te da un ictus)
Debes ir marcando las cajas y los componentes con los que vas a crear el esqueleto y posteriormente todo el cuerpo de tu skin.
¿Por qué Koalita? Pues porque hay una cosa que se debería hacer por norma general y es empezar siempre desde el contenedor al contenido. Así es mucho más fácil arreglar posibles fallos que vayan surgiendo.
DE MAYOR A MENOR. Primero la caja más grande, luego las que la compongan, y así sucesivamente. En serio.
Colocad primero el texto y luego los veinte divs que lo engloban puede darte dolores de cabeza como no salga a la primera. Spoiler: Casi nunca sale bien a la primera de esta forma.
En cualquier caso, esto también da para otra temporada y ya me he alargado muchísimo.
Seguimos, masticad un poco de eucalipto y p’alante.
Este en principio sería el paso final que recomiendo ENCARECIDAMENTE no saltarse a la ligera.
Ya has terminado de desarrollarlo. Todo parece correcto. Se ve bien en tu pantalla y en tu ordenador funciona de lujo así que lo subes y te olvidas.
Nunca confíes en lo que ves en tu pantalla.
Utiliza el inspector de elementos para comprobar si todos los javascript funcionan, para cambiar el tamaño de vista, etc.
Revisa si puedes cómo se visualiza en otros ordenadores, móviles o en el frigorífico de tu casa si es inteligente. REVISA. Testea.
Prueba siempre tu trabajo antes de darlo por terminado. Pide a algún amigo o familiar que le eche un ojo. Crea cuentas test para probarlo. Intenta romperlo por todos los medios posibles para encontrar fallos. Saldrán. Ya te lo digo. Y es ese el momento para subsanarlos.
Evidentemente, si te pasas toda la vida probando fallos igual no terminas en siete años, pero cuando lo hayas intentado todo y en general parezca que funciona todo bien, ENTONCES ya lo puedes dar por finalizado.
(Claro que cómo nunca sucede así te encontrarás algún que otro fallo minúsculo en algún lado, pero nada relevante si has probado y testeado todo lo posible)
Estos serían todos los consejos o más bien las «best practices» que creo se deberían usar para skins o cualquier otro proyecto. Espero que os haya servido.
Y bueno, si alguien quiere que expanda algún tema de estos… pues que lo pregunte cómo la bola gris con gafas.
Un eucalipto con café para vosotros. <3
germansingergirl
turnnoffyourmind
prguitarman
janainaart
titsay
snowghoul
