Estudio de caso: LAB Anti-mall
Greg Douglas comparte su experiencia trabajando con nuestro tema Buro para el proyecto de un cliente y cómo diseñó un sitio visual completamente personalizado basado en él.
Mi nombre es Greg Douglas. Soy el Director de Arte en Domestic Equity Studio. Un estudio de diseño gráfico y medios digitales con sede en el sur de California. Y este es un estudio de caso para el sitio web anti-mall de The LAB.
“The LAB” es un centro comercial al aire libre único en Costa Mesa CA. El LAB se destaca en su visión de lo que puede ser un espacio comercial en el Condado de Orange al incorporar una colección ecléctica de expresión artística e integrarla directamente en el diseño de las tiendas y las áreas comunes. El desafío para nosotros fue diseñar una presencia en línea igualmente única para este destino de compras. Cuando The LAB se acercó a Domestic Equity Studio para rediseñar su presencia en línea, tenían dos objetivos principales. En cuanto al diseño, querían que el sitio capturara la esencia de una sensación casera, en el garaje y evitar una apariencia corporativa tradicional. Y, técnicamente, querían un sitio web que integrara mejor sus redes sociales y que estuviera diseñado con un backend que pudieran actualizar fácilmente internamente.
Desde una perspectiva de diseño, teníamos algunas ideas que nos guiaron. La primera era que sabíamos que queríamos que el diseño se sintiera como si se hubiera salido de la «cuadrícula» y la segunda era que queríamos que el sitio se sintiera en capas como si las cosas se hubieran arrojado una encima de la otra de manera desordenada. Pensamos que si podíamos diseñar el sitio teniendo en cuenta estas cosas, el sitio se sentiría informal y «no corporativo». Entonces, en este punto, antes de tomar cualquier decisión técnica, planificamos y diseñamos el sitio en Adobe Photoshop e Illustrator para establecer el aspecto y obtener la ubicación para todo el contenido y la integración de redes sociales justo donde queríamos.
Desde un punto de vista técnico, ya habíamos hecho el cambio a WordPress como nuestro sistema de administración de contenido favorito y en ese momento habíamos estado experimentando con diferentes temas premium en nuestro otro trabajo de diseño de sitios web. Como acabábamos de terminar nuestro propio sitio web con el tema Kaboodle de WooThemes y nos gustó esa experiencia, decidimos buscar otro tema que pudiera satisfacer las necesidades de este nuevo sitio pero con un tratamiento de tema de back-end similar al que teníamos con nuestro sitio anterior de Woo Theme. . Resulta que Buro se acababa de lanzar el mes anterior y respondimos a la simplicidad del diseño de Buro. Y pensamos que era genial que las tres publicaciones de blog más recientes aparecieran en la página de inicio. Así que descargué Buro principalmente para probar qué tan flexible era y para ver si Buro iba a ser lo suficientemente flexible como para permitirme agregar mi propia navegación gráfica y permitirme agregar un montón de imágenes de fondo en el diseño del tema y controlar el espaciado del manera que quería a través de mi archivo custom.css. Y bajo y he aquí, lo hizo. De hecho, pude manipular el css y mover las cosas con tanta facilidad que seguí trabajando en Buro y no me molesté en probar ningún otro tema.
El resultado en nuestra opinión es mágico. Un sitio web que no se parece ni remotamente a una plantilla de WordPress «lista para usar» con todas las ventajas de un backend de WordPress. Un CMS, un blog de eventos, páginas de tienda personalizadas, así como una integración completa de las redes sociales, incluidos los feeds de Twitter y Flickr. El tema original era Buro (enlace aquí) de WooThemes y la personalización final del sitio web se puede encontrar aquí www.thelab.com.
Y ahora la parte donde levantamos el capó y revelamos cómo logro algunos de los efectos que creo en las personalizaciones de mi tema. Una de las razones principales por las que me gusta trabajar con WooThemes es por lo mucho que puedo entrar en el CSS y jugar con él… Para empujar la plantilla a veces hasta el punto de que no se parece en nada a la plantilla inicial. Claves de mi estilo de desarrollo…
- Las imágenes de fondo son mi mejor amigo. Los utilizo con poca o ninguna restricción. Uno puede crear todo tipo de efectos geniales superponiendo archivos .png transparentes
- Siempre diseño una GUI que me asusta un poco. Lo que quiero decir es que miro la plantilla y luego trato de diseñar mi diseño en Photoshop para que se ajuste principalmente a la estructura del tema original, pero eso definitivamente está fuera de mi zona de confort para codificar. Muchas veces hay partes de mi diseño en las que no tengo idea de cómo voy a trabajar en el momento en que las diseño.
Dicho esto, veamos un poco más de cerca un área de la personalización de mi tema que destaca mi enfoque.
Cuando llegó el momento de desarrollar la navegación principal para thelab.com, luché por saber cómo iba a reemplazar la navegación actual de Buro con mis propios botones de rollover gráficos personalizados. Así que comencé usando «inspeccionar elemento» en el área de navegación principal usando el navegador Safari para averiguar cuál era el nombre de cada uno de los botones de navegación. Indique los nombres de cada uno de sus principales enlaces de texto de navegación en su tema, se verá así… «menu-item-500″… Luego, escribiendo mi propio CSS en el archivo custom.css para sobrescribir el estilo.css, controlé la apariencia de cada uno de los botones de navegación en la navegación principal del tema Buro.
Entonces, para lograr la navegación gráfica que usé en thelab.com, el código que escribí y pegué en custom.css se veía así…
header .nav a {
background: none;
}
header .nav li:first-child a { }
header .nav .menu-item-503 a {
text-indent: -9999px;
background: url(http://...url path to image.../images/nav_503.png);
width: 168px;
height: 75px;
}
header .nav .menu-item-503 a:hover {
background-position: 0 -75px;
}
header .nav .menu-item-502 a {
text-indent: -9999px;
background: url(http://...url path to image.../images/nav_502.png);
width: 144px;
height: 75px;
}
header .nav .menu-item-502 a:hover {
background-position: 0 -75px;
}
header .nav .menu-item-501 a {
text-indent: -9999px;
background: url(http://...url path to image.../images/nav_501.png);
width: 170px;
height: 75px;
}
header .nav .menu-item-501 a:hover {
background-position: 0 -75px;
}
header .nav .menu-item-500 a {
background: url(http://...url path to image.../images/nav_500.png);
width: 189px;
height: 75px;
}
header .nav .menu-item-500 a:hover {
background-position: 0 -75px;
}Si desea crear este estilo de navegación, aquí hay algunos trucos a los que debe prestar atención. El primero es prestar atención a la ruta completa de cómo controlar el elemento del menú. Para el tema Buro, la ruta que necesitaba para controlar los elementos del menú era «header .nav .menu-item-# a», pero si usa un tema diferente, la ruta podría verse un poco diferente en su CSS. El siguiente es usar “text-indent: -9999px;” para hacer que desaparezca la navegación de texto anterior para que su nueva imagen de fondo sea lo único que vean. Y finalmente, para crear el ingenioso efecto de rollover, todo lo que se necesita es mover la posición de la imagen del botón a la altura del botón. Como puede ver en mi código anterior, el código para cada uno de mis cuatro botones tiene un estado de desplazamiento, «a: pasar el mouse» y lo único que cambia es la posición de fondo a «-75px;». En la imagen a continuación, verá una de mis imágenes de botones que ilustra cómo el estado de rollover está directamente debajo del estado normal…
La altura total de esta imagen .png es de 150 px, por lo que la visibilidad de la imagen de fondo se establece en 75 px y cuando el usuario pasa el cursor sobre la imagen, la imagen de fondo se mueve -75 px para revelar el estado de rollover.
La segunda cosa que me gustaría compartir en mi estilo de diseño/desarrollo es una técnica muy simple que se puede usar para disfrazar lo que de otro modo parecería un complemento normal. Uno de mis complementos favoritos es el complemento NextGEN Photo Gallery y una de las formas en que hago que mis galerías parezcan personalizadas es simplemente agregando una imagen de fondo. A continuación, verá una captura de pantalla de ejemplo de una de mis páginas donde utilizo esta técnica…
Realmente, lo que está viendo arriba es una imagen de fondo .png que va detrás de una galería NextGEN y algún contenido de texto controlado por un CSS simple en mi archivo custom.css. El código en la página individual se ve así…
… And the CSS in the custom.css file that controls this page looks like this…
/*Special Header For Shops*/
#headerSpecial {
background-image: url('images/shops_featured_bg.png');
margin: 0 0 0 -110px;
width: 1047px;
height: 497px;
}
.hs_positioning {
float: left;
width:609px;
height:81px;
margin: 0 0 0 67px;
padding: 38px 0 0 0;
}
.hs_text {
float: right;
width:290px;
height:120px;
font-size:18px;
margin: 65px 40px 0 0;
padding: 0;
}
.hs_text p {
font-size:11px;
}En este caso, el verdadero desafío aquí fue mantener la paciencia mientras marcaba los márgenes para que la imagen de fondo se alineara correctamente con la galería Next GEN y el contenido del texto, pero una vez que lo logré, tengo una cuadrícula realmente genial. diseño. Y como puede ver, este es realmente un enfoque simple y directo para agregar un toque de diseño original a los diseños de su sitio.
Una de las cosas que realmente me encantan de WooThemes es la gran flexibilidad en su plataforma de temas y el hecho de que sé que estoy comenzando con una base sólida antes de comenzar a personalizar.
Me gustaría agradecer a todo el equipo de Woo Ninja por responder a mis preguntas en el foro y ser pacientes conmigo mientras formaba mi enfoque para personalizar el tema. Disfruté escribiendo este artículo y compartiendo un poco de mi enfoque de diseño con usted y espero que este breve estudio de caso también haya sido una inspiración para usted en su WooTheme, diseño de sitio de WordPress.
Si está interesado en ver más de mis personalizaciones de WooTheme, puede visitar el sitio de mi cartera en http://www.domesticequity.com y si tiene preguntas, puede comunicarse conmigo allí y haré todo lo posible para responder cualquier pregunta que pueda tener. .
