Como hacer tú maqueta de un sitio web?
El flujo de trabajo típico comienza en Photoshop y luego pasa a HTML y CSS para imitar lo mejor posible el PSD original. Sin embargo, existe una tendencia creciente en el diseño web para eliminar el paso de Photoshop a favor de crear la composición inicial en el navegador con su editor favorito. Estoy seguro de que en este momento su cabeza está llena de motivos por los que este enfoque limitaría su diseño, pero en realidad hay mucho más que puede hacer en el navegador de lo que podría pensar. Este artículo le proporcionará las herramientas y los trucos que necesita para crear maquetas de trabajo brillantes como su primer paso en el proceso de diseño.
El argumento
Meagan Fisher de 24ways.org presenta un argumento convincente para el diseño en el navegador. Si bien no comparto su desdén por Photoshop (amo a Photoshop más que cualquier otra pieza de software en el planeta), estoy de acuerdo con algunos de sus otros puntos. Fisher sostiene que una imagen estática realmente no le da la sensación real de un sitio web como lo hace una página en vivo y que el diseño en el navegador lo obliga a centrarse en la organización de contenido antes del diseño, lo que puede ayudar a garantizar una mejor accesibilidad y una jerarquía adecuada de información.
Usaremos el artículo de Fisher como trampolín para nuestros consejos sobre cómo convertirnos en un profesional para crear fantásticas maquetas en el navegador que están casi listas para comenzar cuando (y si) el cliente le da luz verde.
Consejo 1: Comience básico y use una cuadrícula
Como mencioné anteriormente, incluir y organizar todo el contenido sin estilo le permite crear un diseño que se ajuste a su contenido y no al revés. El uso de un marco basado en cuadrícula puede reducir radicalmente el tiempo de desarrollo y ayuda a garantizar que su diseño sea sólido como una roca.
Recursos:
Para obtener más información sobre el diseño web basado en cuadrícula, consulte nuestro artículo sobre marcos CSS.
Consejo 2: Obtener un buen editor
Si está codificando sitios a mano, un editor web profesional es la piedra angular de su flujo de trabajo. Personalmente uso (y me encanta) Espresso de MacRabbit. Tiene todas las pequeñas características que quiero, como fragmentos y autocompletar, así como las grandes características que necesito, como poder ver los cambios en vivo en una vista previa del navegador mientras escribo el código. Debe buscar y encontrar la aplicación que mejor se adapte a sus necesidades. Aquí hay una lista rápida de editores para comenzar:
- Aptana: Mac, Windows Linux (de lejos, mi opción gratuita favorita)
- Komodo IDE: Mac, Windows, Linux
- NetBeans: Mac, Windows, Linux
- Coda: Mac (una alternativa digna de espresso)
- Texto Wrangler y BBEdit: Mac
Consejo 3: colocar una sombra en un elemento
Photoshop ya no es la única manera de obtener una sombra decente en la web. Muchos (pero no todos) los principales navegadores ahora admiten CSS3 y con ese soporte vienen varias características nuevas para crear diseños avanzados. Una de las características más útiles es sombra de la caja, que te permite agregar sombras a ciertos elementos usando solo CSS. El formato de box-shadow es box-shadow: 5px 5px 20px # 000000. Estos valores le permiten ajustar el ancho y la longitud de la sombra, así como su radio y color de desenfoque.
Recursos:
Consulte el artículo de CSS.flepstudio sobre el efecto de sombra de cuadro para obtener más información sobre cómo usar esta función.
Consejo 4: Sombreando el texto
Si desea colocar una sombra en el texto, use la sombra de texto Funciona como se demuestra en este tutorial Kremalicious. El formato para sombra de texto es text-shadow: 1px 1px 1px # 000. Los primeros dos valores determinan el desplazamiento de la sombra (xey, respectivamente), el tercer valor determina el radio de desenfoque y el valor final le permite cambiar el color de la sombra.
Esta función se puede aplicar para crear algo más que sombras. El tutorial anterior te mostrará cómo usar sombra de texto para crear un efecto de tipografía, un efecto de resplandor e incluso un efecto de texto ardiente.
Consejo 5: Redondear las esquinas
Las esquinas redondeadas son otra característica que finalmente se ha adoptado en el CSS moderno. Puede realizar esquinas redondeadas de CSS tanto en Safari como en Firefox usando el radio del borde función. Simplemente establece el -moz-border-radio y / o -webkit-border-radius a un valor dado en píxeles para ajustar la redondez de la frontera en un artículo dado.
Recursos:
Para obtener más tutoriales de esquinas redondeadas de las que puedes agitar, revisa el resumen de CSS Juice de 25 Rounded Corners Techniques con CSS.
Consejo 6: Construyendo un esquema de color
Photoshop proporciona una buena manera de visualizar y experimentar con diferentes colores, pero también hay una gran cantidad de recursos de esquema de color gratuitos en la web. En mi opinión, el mejor de estos es Adobe Kuler. Kuler no solo proporciona la mejor interfaz para crear hermosos esquemas de colores sobre la marcha, sino que también le brinda acceso a una enorme biblioteca de esquemas de colores prefabricados y con capacidad de búsqueda. ¿Quieres darle a tu sitio web un look de otoño? Sólo tienes que escribir? Caer? y tienes más de 2,600 esquemas para elegir. Kuler hace que sea muy fácil crear un increíble esquema de colores que puedes colocar directamente en tu CSS (lo que a su vez hace que sea fácil de cambiar y experimentar sobre la marcha).
Recursos:
Para obtener más herramientas de color ordenadas, consulte nuestro artículo sobre 25 herramientas impresionantes para elegir un esquema de color de sitio web.
Consejo 7: Gradientes de texto
Si eres astuto, puedes aplicar un degradado a texto en vivo en el navegador. ¿Qué extraño vudú es este que preguntas? Navega por WebDesignerWall para ver su tutorial sobre el tema. Esencialmente, coloca un espacio alrededor del texto al que desea aplicar el degradado y luego establece el fondo del intervalo a un PNG repetido del degradado. Por supuesto, para hacer el PNG, tendrás que usar un editor de imágenes (sí, sabías que tendrías que recurrir al viejo y viejo Photoshop de vez en cuando).
Consejo 8: Usar RGBA para proyectar colores
CSS3 implementa una nueva característica llamada RGBA ("A" significa alfa). Usando el? A? Valor, puede establecer la opacidad de un relleno. Esta práctica característica no solo le permite crear fácilmente esquemas de color utilizando un solo color con diferentes valores alfa, sino que también le permite crear elementos transparentes que revelan la ilustración detrás de ellos de manera similar a la reducción de la opacidad de una capa en Photoshop.
Recursos:
Vea el artículo de Oncemade sobre El camino correcto para declarar los colores RGBA.
Consejo 9: conoce tus fuentes web
No caiga en la trampa de usar las mismas dos fuentes en cada sitio que diseñe. Cambie las cosas aprovechando la gama completa de fuentes seguras para la Web. Typetester es una gran herramienta para hacer precisamente eso. Le permite previsualizar bloques de texto en varias fuentes y configuraciones (tamaño, alineación, seguimiento, etc.) directamente en su navegador. La mejor parte es que cuando encuentre la configuración que le gusta, Typetester exportará el CSS por usted.
Consejo 10: Obtener fuentes incluso mejores
La creación de texto como una imagen en Photoshop le da la libertad de usar cualquier fuente que desee sin preocuparse por la compatibilidad. Desafortunadamente, este método da como resultado un texto que no se puede seleccionar ni buscar. Sin embargo, no es tan difícil solucionar este problema. En estos días, hay varias soluciones para instalar fuentes personalizadas con texto en vivo y seleccionable en su sitio usando el comando @ font-face.
Recursos:
Obtenga increíbles fuentes en su sitio en minutos con nuestro tutorial paso a paso de TypeKit.
Consejo 11: Stock Art es tu amigo
A menudo es el caso, especialmente con las maquetas iniciales, que necesita un botón rápido, un ícono u otro gráfico que no necesariamente desea crear desde cero. Los sitios de stock de arte como GraphicRiver están llenos de elementos web que están listos para ingresar a un sitio, ¡muchos de ellos sin cambios de Photoshop requeridos! Incluso si puedes construir fácilmente los artículos en una hora, tirar un dólar en una gran obra de arte y tenerlo listo en 2-3 minutos es bastante atractivo.
Consejo 12: Use las herramientas de prueba del navegador
Sé que muchos de ustedes simplemente no pueden esperar para escribir un comentario mordaz sobre cómo varias de las técnicas anteriores (sombras, esquinas redondeadas, etc.) solo funcionan en ciertos navegadores y, por lo tanto, son inutilizables. Es exactamente por eso que siempre busco presentar ambos lados de una discusión. Las personas que están a favor del desarrollo en el navegador presentan estas técnicas como evidencia de que puede lograr mucho fuera de Photoshop, pero tal vez esté demasiado ansioso por descartar el hecho de que varios navegadores recibirán una experiencia drásticamente diferente debido a la falta de soporte.
El punto es que, sin importar cómo vaya desarrollando un sitio web, siempre debe saber exactamente cómo los principales navegadores representarán su sitio. Luego, puede tomar una decisión informada sobre qué navegadores, si los hay, son aceptables dejar atrás. Para lograr esta hazaña, echa un vistazo a Adobe Browserlab. Esta utilidad increíblemente útil le permite obtener una vista previa de un sitio en varios navegadores y sistemas operativos en tiempo real. El único inconveniente es que realmente puede darse cuenta de lo mal que se ven sus sitios en ciertos navegadores, lo que inevitablemente conduce a horas de maldición y de rascarse la cabeza.
Conclusión
¿Pues, qué piensas? ¿Estás listo para cruzar y comenzar a crear composiciones armadas solo con un editor de texto y un navegador? ¿O eres como yo, confiando en que un forense tendrá que sacar una caja de software de Photoshop de tus dedos fríos y muertos antes de que te sueltes? Obviamente, no hay absolutos aquí. Pocos diseñadores profesionales crean maquetas sin ninguna ayuda de un editor de imágenes. La pregunta entonces se convierte, en el borrador inicial, ¿dónde crees que es mejor dedicar la mayor parte de tu tiempo? Nos encantaría saberlo. Siéntase libre de usar los comentarios para tomar una posición y defender su posición hasta la muerte. En cuanto a mí, esta conclusión parece ser cada vez más macabra, así que mejor me detengo aquí.