Para realizar este artículo me voy a centrar básicamente en plantear preguntas y respuestas que me han surgido con el tiempo, a ver que os parece esta otra manera de escribir información, espero que os sirva.

Empecemos pues

- Quiero un blog de wordpress, ¿Me cobras barato no? Es muy fácil:
Si es tan fácil debería hacerlo él, muchas veces pasa que hay gente que sabe que tener un wordpress es bajarlo e instalarlo en un host pero no es solo eso, has de entender lo que haces, como lo haces y lo que es más importante saber como funciona, yo siempre digo que si te piden que lo hagas es porque no saben o no quieren por lo tanto el precio que tu creas será el conveniente y nunca menos.

- Una plantilla wordress, así ¿Sencillita?:
Primero tendrás que aclarar si es solo la plantilla o también va a querer que tu le pases todo lo necesario para que él solo suba la carpeta, active la plantilla y funcione todo, es muy importante aclararlo ya que la segunda cosa requiere bastante más trabajo.

- Quiero un logo:
¿Un logo? Yo siempre explico que puedo hacer varios tipos, de barato a más caro: Un logo simple, un logo 3D, un logo para impresión etc.. ya que no es lo mismo un logo vectorizado que un logo en imagen normal.

- Necesito un cartel, para mañana, que tenga esto, eso y aquello:
En este caso, personalmente intento conseguir el objetivo para el cliente ya que has de dar el mejor servicio posible pero, como es lógico y en cualquier servicio de cualquier cosa se aplica, estás haciendo un servicio “de urgencia” y se ha de explicar como tal.

- Me gustaría un diseño web para mi página:
Igual que en el caso de wordpress hay que saber que será si un diseño o si va a necesitarlo ya en código y hoja de estilos.

-Pero.. ¿Cómo te voy a pagar eso si estas en tercero de carrera?:
No es algo que se pueda generalizar y quizá pienso eso porqué yo soy estudiante, pero es mi opinión y la voy a dar.
Tanto en diseño como en programación basta con tener una poca formación teórica (no de google, TEORICA)  y luego practicar mucho mucho mucho, la experiencia es tan importante como la teoría aprendida, considero que es mucho más profesional una persona en segundo de diseño (no es mi caso) que lleva 3 o 4 años programando y diseñando por su cuenta, que además después de cursar lo que ha cursado no solo ha aprendido, ha perfeccionado sus técnicas anteriores. Que una persona que tiene muchos cursos de diseños y programación pero nunca ha trabajado o ha hecho trabajos libres fuera de el ámbito lectivo.

En resumen

Lo que quiero expresar como llevo ya tiempo haciendo, es que no hemos de menospreciar lo que hacemos, nadie puede hacer un diseño de lo que sea como lo vas ha hacer tu igual que no hay dos panaderos que hagan el mismo pan y porque un día el panadero esté inspirado y haga el pan mejor y más rápido te lo va a dejar más barato.

Quiero acabar con una frase que me dijo una vez un gran abogado: “Una cliente va a su abogado y le dice que quiere que le ayude con una ley fiscal que necesita para su empresa, el abogado se gira y tiene una estantería con un montón de libros coge uno lo abre y muy rápido le dice lo que necesita, solo han pasado 5 minutos y le ha costado 50 euros al cliente, este sorprendido dice: ¿En 5 minutos 50 euros?,  a lo que le contesta, para mi han sido 5 minutos porque me conozco los libros, se donde está cada cosa y donde he de buscar, es mas entiendo lo que pone, si fuera tan fácil podrías hacerlo tu mismo y no nos encontraríamos aquí, yo he estudiado y trabajado muchísimo para poder hacer esto tan rápido, de manera que tu salgas ganando.”

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

Invitación al servicio Basekit

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Ideas para mostrar trabajos antes del pago a un cliente

• ¿Cuánto vale tu diseño? La importancia de valorar tu trabajo

• ¿Cómo inspirarse para el diseño web?

La estructura HTML

La estructura HTML consistirá en un div que contendrá la superposición y la lista desordenada de elementos que forman el menú. El menú tendrá un enlace y un elemento div como submenu dentro de la lista de elementos. Cada submenu contendrá listas para las columnas del submenu donde estará cuando tengamos el elemento que encabeza la lista:

<div class="oe_wrapper">
    <div id="oe_overlay" class="oe_overlay"></div>
    <ul id="oe_menu" class="oe_menu">
        <li>
            <a href="">Collections</a>
            <div>
                <ul>
                    <li class="oe_heading">
                        Summer 2011
                    </li>
                    <li><a href="#">Milano</a></li>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
                <ul>
                    ...
                </ul>
            </div>
        </li>
        <li>
            <a href="">Projects</a>
            <div style="left:-111px;">
                ...
            </div>
        </li>
        <li>
            <a href="">Fragrances</a>
            <div style="left:-223px;">
                <ul class="oe_full">
                    <li class="oe_heading">
                        Fashion Fragrances
                    </li>
                    <li><a href="#">Deálure</a></li>
                    <li><a href="#">Violet Woman</a></li>
                    <li><a href="#">Deep Blue for Men</a></li>
                    <li><a href="#">New York, New York</a></li>
                    <li><a href="#">Illusion</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Events</a>
            <div style="left:-335px;">
                ...
            </div>
        </li>
        <li><a href="">Stores</a>
            <div style="left:-447px;">
                ...
            </div>
        </li>
    </ul>
</div>

Los divs del submenú tendrán cada uno una estilo de lista inline para la posición left. Tenemos que insertar estos valores porque queremos que el submenú esté en una posición absoluta pero entre un contenedor (div) posicionado relativamente. Así que, para posicionar todos los div del submenú al principio del menú principal debemos empujar cada div más a la izquierda, hasta que tengamos un valor negativo para cada div (decrementándolo 112px).

Código CSS

Primero tendremos que resetear los estilos. Luego empezaremos por la superposición del body (cuerpo), que es un div con una opacidad inicial de valor 0. La posición estará en fixed, porque queremos que el menú permanezca fijado en la parte superior izquierda de la pantalla.

.oe_overlay{
    background:#000;
    opacity:0;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

El menú principal tendrá el siguiente estilo:

ul.oe_menu{
    list-style:none;
    position:relative;
    margin:30px 0px 0px 40px;
    width:560px;
    float:left;
    clear:both;
}

La lista de los elementos del menú tendrá posición relativa:

ul.oe_menu > li{
    width:112px;
    height:101px;
    padding-bottom:2px;
    float:left;
    position:relative;
}

El anchor de la capa superior del menú tendrá este estilo, formando lo que es la caja del menú:

ul.oe_menu > li > a{
    display:block;
    background-color:#101010;
    color:#aaa;
    text-decoration:none;
    font-weight:bold;
    font-size:12px;
    width:90px;
    height:80px;
    padding:10px;
    margin:1px;
    text-shadow:0px 0px 1px #000;
    opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
    background:#fff;
    color:#101010;
    opacity:1.0;
}

En el código Javascript añadiremos la clase “hovered” al principal ul, así que al mover el cursor encima del menú cambiaremos todos los anchores (enlaces) al color blanco.

.oe_wrapper ul.hovered > li > a{
    background:#fff;
    text-shadow:0px 0px 1px #FFF;
}

El submenú no será visible al principio, sólo se deslizará cuando nos ubiquemos encima de un elemento de capa de lista superior:

ul.oe_menu div{
    position:absolute;
    top:103px;
    left:1px;
    background:#fff;
    width:498px;
    height:180px;
    padding:30px;
    display:none;
}

El estilo de los enlaces dentro de las listas del submenú:

ul.oe_menu div ul li a{
    text-decoration:none;
    color:#222;
    padding:2px 2px 2px 4px;
    margin:2px;
    display:block;
    font-size:12px;
}
ul.oe_menu div ul li a:hover{
    background:#000;
    color:#fff;
}

Una de las listas del submenú estará solo, así que le daremos todo el espacio:

ul.oe_menu div ul.oe_full{
    width:100%;
}

Si no está solo le daremos un espacio de 150px, así tendremos 3 flotando cada uno al lado del otro.

ul.oe_menu li ul{
    list-style:none;
    float:left;
    width: 150px;
    margin-right:10px;
}

Finalmente, queremos que el encabezado de la lista del submenú destaque:

li.oe_heading{
    color:#aaa;
    font-size:16px;
    margin-bottom:10px;
    padding-bottom:6px;
    border-bottom:1px solid #ddd;
}

Código JQuery

La idea principal es que la superposición haga que todo se vuelva oscuro excepto el menú, garantizando que dicha superposición esté debajo del menú porque será colocada antes de este en la estructura HTML.

Primero cachearemos algunos elementos:

var $oe_menu        = $('#oe_menu');
var $oe_menu_items  = $oe_menu.children('li');
var $oe_overlay     = $('#oe_overlay');

Cuando pongamos el curos encima de cualquier item del menú, le daremos la clase slided y selected. El correspondiente div submenú será deslizado y los otros estarán ocultos. También le daremos un valor z-index alto al actual submenú (el que estemos viendo). Cuando movamos el cursor fuera e él, se eliminará la clase “selected”:

$oe_menu_items.bind('mouseenter',function(){
    var $this = $(this);
    $this.addClass('slided selected');
    $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
        $oe_menu_items.not('.slided').children('div').hide();
        $this.removeClass('slided');
    });
}).bind('mouseleave',function(){
    var $this = $(this);
    $this.removeClass('selected').children('div').css('z-index','1');
});

La clase “selected” es necesaria para el estilo, mientras que la clase “slided” es una clase que ayuda a identificar cuál item está en uso.

Ahora nos concentraremos en la superposición definiendo que ocurre cuando nosotros nos posicionamos encima de lo que es el menú en general. La superposición se devanecerá, dandole una opacidad de 0,6 y se añadirá la clase “hovered”, así que los enlaces permanecerán blancos:

$oe_menu.bind('mouseenter',function(){
    var $this = $(this);
    $oe_overlay.stop(true,true).fadeTo(200, 0.6);
    $this.addClass('hovered');
}).bind('mouseleave',function(){
    var $this = $(this);
    $this.removeClass('hovered');
    $oe_overlay.stop(true,true).fadeTo(200, 0);
    $oe_menu_items.children('div').hide();
})

Y eso es todo, espero que os haya gustado, si tenéis alguna duda ya sabéis, a los comentarios!!!

Vía | Tympanus

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Bonito menú realizado con CSS & JQuery

• Crear un menú animado con CSS y JQuery

• Efecto de despliege con CSS y JQuery

Maneras de cobrar un trabajo:

Una de las cosas que creo que se debe hacer para proteger nuestro trabajo es, primero de todo, no dar el trabajo y luego esperar a que nos paguen (muchas veces no habrá ningún problema, pero a veces lo tendrás y no habrá vuelta atrás).

Yo recomiendo cobrar de una de estas dos maneras:
a) 30% antes del inicio del trabajo y después de haber acordado un presupuesto cerrado.

30% durante la realización del trabajo, es decir cuando vas por la mitad más o menos.

40% al haber terminado el trabajo y listo para la entrega o ya entregado.

b) 50% antes del inicio del trabajo y después de haber acordado un presupuesto cerrado.

50% al haber terminado el trabajo y listo para la entrega o ya entregado.

De estas dos, yo utilizo la primera básicamente porque me gustaría que fuera la que me aplicaran a mi teniendo en cuenta que soy joven y mi presupuesto nunca es muy grande.

La manera correcta de proteger un diseño gráfico

Más que la manera correcta, es la manera que yo encuentro más adecuada para presentar un diseño gráfico sin ser “robado” antes del pago correspondiente, ya que es dudable que alguien te pague todo antes de ver el producto o alguna parte del producto.

Pues es manera es una sencilla marca de agua en la imagen que toque partes fundamentales del flyer, logo, etc. además de enviarlo en formato pequeño por ejemplo 500px * 400px y a unos 72 ppp de manera que no sea posible imprimirlo correctamente.

¡Ojo! Si te lo quieren robar lo harán de hecho pueden coger esa imagen, dársela a otro “”"”diseñador”"”" para que la copie, pero bueno un poco de fe en el cliente tampoco viene mal.

Cómo deberías proteger un diseño web

Estoy hablando de un diseño web sin estar en código es decir un .psd donde el cliente lo pasa a alguien que se encargue de pasarlo a código para su posterior inserción en una web.

Creo que la mejor forma es poner la marca de agua en todos los elementos posibles y muchas veces, de manera que sea difícil coger trozos, de hecho nunca pasaría un .psd para enseñar el diseño, envía siempre un .png o si puedes un .jpg con menos calidad (aunque quizá se ve más feo), otro detalle a veces útil es reducir esta imagen del 100% al 90% de manera que se ve el diseño igual de bien pero no es exacto y por mucho que copien algún trozo nunca podrán ponerlo a tamaño real sin pixelar.

Si en cambio ya vas a mandar un diseño en .html .css y quizá algo de .js yo creo que la manera justa de mostrarlo antes de ser pagado puede ser, usar el método anterior y además enviar fotos de la mitad del .css la mitad del .html  y la mitad del .js, quizá piensan anda que listo este chico solo ha hecho la mitad y me quiere timar, han de tener un poco de confianza en ti igual que tu la tienes mostrando la mitad de todo el código.

Evitar que te roben una web completa

Para mi una web completa es aquella en que tiene lo mencionado en el apartado anterior y además tiene php etc.. si es sin programación ni nada más creo que es viable usar el apartado anterior.

Bueno una manera que por suerte no he llegado a usar nunca, pero es totalmente viable es esta:
Crear un archivo que este “escondido” de manera que al acceder a el se borren dos archivos: index.php y estilos.css (doy por hecho que todo el mundo ve que son esos archivos) y que este alojado por ejemplo en /multimedia/img/prueba.php?pagado=moroso
No voy a decir como funciona porque eso es php (pero esta relacionado con $_GET y unlink();) de esta manera si entregamos la web y el cliente no paga le podemos ir recordando que pague, si finalmente no lo hace le puedes decir que tendrás que cerrar la web, en ese momento pueden pasar dos cosas:
- Que pague, entras por ftp y borras el archivo prueba.php
- Que no pague y además cambie los datos del ftp, pones la url indicada y no tendrá web.

Conclusiones

Las conclusiones que creo se pueden extraer son:
- Te has de fiar de los clientes pero tampoco mostrar exceso de confianza en ellos (vamos que si les das la mano no te cojan el brazo).
- Has de hacer que los clientes se fíen de ti  ya que tu te fías de ellos y así poder trabajar todos en armonía y felicidad.

_____________

Por último os quiero comentar una cosa, que no tiene que ver con el artículo, hace unos días varias personas que nos dedicamos al diseño gráfico y la programación hemos creado un foro solo para profesionales y estudiantes del diseño gráfico y/o la programación web el enlace es http://foro.disgram.com/ como no quiero hacer spam no os dejo aquí la invitación ya que para registrarse es necesaria un invitación que podéis pedirme por facebook, twitter o con un comentario en este artículo, solo necesito nombre y email.

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Justificando los precios de tus diseños al cliente

• La navegación de los sitios de antes y de ahora

• ¿Cómo inspirarse para el diseño web?

¿Pero esto necesita inspiración?

Por desgracia para mucha gente el diseño web es solo una herramienta necesaria (y no digo imprescindible) en el momento de crear la web.
Por contra yo estoy convencido que se puede ir mucho más allá y siempre lo he considerado una especie de arte.
Cara diseño que hacemos debería ser único y cada uno de nosotros deberíamos tener nuestro propio estilo.
Por eso, como ya he mencionado alguna vez, te paguen lo que te paguen has de tener derecho a estampar tu firma y poder decir ¡Eh que eso lo he hecho yo y estoy orgulloso de ello!
Volviendo al tema, el arte si se quiere hacer un buen trabajo no puede venir de repente sin hacer una preparación previa, sin buscar una buena inspiración.

Preparándote para un diseño

Es cierto que muchas veces por falta de tiempo no se pueden hacer cosas como las que propondré, ni yo mismo, pero es cierto que cuando las hago todo sale mejor.

•  Mira libros de ejemplos web, hay en la mayoría de bibliotecas o puedes comprarlos baratos, ya he escrito un artículo entero sobre eso.
•  Busca diseños que se adapten al estilo que quieres hacer en ese momento, por suerte hay muchas webs en google que recopilan diseños que son verdaderas obras de arte, los cuales te pueden inspirar (inspirar no es sinónimo de copiar).
•  Coge una hoja y un papel, haz varios bocetos lo más diferentes los unos de los otros, quizá saques algún elemento bueno de ellos.
• La última cosa os va a parecer una tontería seguramente pero a mi me sienta bien, sal a la calle date una vuelta y carga las pilas con el sol, siempre después de mucho pensar o usar el ordenador necesitas recargarte un poco.

Es una reflexión

Habrás comprobado que más que un artículo esto ha sido una pequeña reflexión, a mi me parece interesante aunque quizá hay gente que no, espero de verdad que te haya sido útil y lo tomes en serio.

Con los estudios y el trabajo cada vez tengo menos tiempo de escribir pero quiero seguir haciéndolo porque me encanta ver esos comentarios que ponéis opinando y/o corrigiendo los artículos, también me estoy dando cuenta que se me empiezan a acabar los temas de diseño en general así que agradezco cualquier sugerencia en mi twitter (@ckgrafico) o en la página de facebook (la de CKgrafico). De todas formas, si no estoy yo siempre estará Pedro Corchero Murga (el creador de este blog) para ofreceros artículos de altísima calidad.

Compartir/Guardar

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Sitios E-Commerce para inspirarse

• Cómo elegir la mejor tipografía para tu diseño

• ¿Cuánto vale tu diseño? La importancia de valorar tu trabajo