Gloobs, diseño web profesional.
Gloobs.com es mi página personal, en la que ofrezco mis servicios como diseñador web freelance. Con esta será posiblemente la 6ª vez que la rediseño y seguro que no es la última.
En este post de diseño web, voy a intentar destripar la nueva web para contar cómo está hecha, tanto estructural como funcionalmente. Espero vuestros comentarios y críticas. Gracias.
DISEÑO WEB
Gloobs Diseño Web
A diferencia de la anterior versión, optimizada para 800px de ancho, esta nueva web está diseñada para 1024 (mayor resolución usada por los usuarios de la web). Para que la web no quedase «perdida» en resoluciones mayores, decidí colocar un background llamativo, de ese modo pretendo además de solucionar este factor, hacer que la web destaque más en ese tipo de resoluciones.
CABECERA – Como podéis comprobar se trata de una cabecera grande y muy llamativa. El diseño fue pensado en un principio para un juego de un cliente, el proyecto al final no fraguó y como me gustaba el resultado, decidí que debería ser el principio de la nueva versión de www.gloobs.com.
Una isla en medio del suelo, el faro, la catarata,… Todo tiene un simbolismo, pero prefiero que sea el usuario el que dé el suyo propio.
He de reconocer que lo que más me costó fue hacer la catarata y el choque del agua contra el suelo. Si queréis ver el original, podéis verlo aquí: http://www.flickr.com/photos/gloobs/3507176908/
Es evidente que toda la web tiene gran influencia Vintage, es un estilo atemporal que siempre intento dar a mis diseños.
Otro distintivo de este diseño es el pie, un gran pie que ocupa el 100% de la pantalla, destinado a facilitar la navegación al usuario.
AJAX. LIGERO Y MUY ÚTIL.
Presupuesto de Páginas Web. Contact@
Al pulsar sobre la pin up «contact@» o sobre la flecha que aparece bajo el menú, podemos ver como se despliega «con aceleración» una capa negra translúcida que da paso al formulario de contacto.
Con esto, además de vistosidad, conseguimos tener una página de contacto por cada una de las páginas que componen la web, no haciendo necesario el perder la navegación para ir a una página destinada a tal efecto y además conseguimos no tener que recargar de nuevo una página.
También he utilizado Ajax para mostrar la galería de tipos de web que aparece en la home o el porfolio en «Diseño Web Gloobs«.
Si os fijáis en el menú, podréis ver cómo el color se diluye para dar otro, este efecto que parece flash (como los demás), también está realizado con Ajax.
Todos estos efectos flash podéis encontrarlos en este blog de diseño web.
PÁGINAS WEB PROFESIONALES
Diseño de Páginas Web Profesionales
Gloobs ofrece varios tipos de web profesional. Todos ellos con un diseño exclusivo, huyendo de las monótonas e inútiles plantillas, y pensando únicamente en el usuario destinatario, tanto en diseño como en programación y usabilidad.
- Páginas Web para Casas Rurales – se trata de una web dirigida a la gestión de pequeños establecimientos hoteleros, con la posibilidad de ver la disponibilidad del establecimiento y hacer una reserva online.
- Página web personal – destinada a aquellos profesionales que quieren anunciarse en la red (artistas, profesiones liberales,…)
- Páginas web para PYIMES – para todas aquellas empresas que o bien todavía no tienen su sitio en Internet, o no han conseguido sus propósitos con su actual web.
- Tienda virtual – 24 horas 365 días al año. Una forma de vender tus productos con el mínimo esfuerzo. Pago seguro con tarjeta, fichas de producto,…
- Páginas Web para Móviles – está dejando de ser anecdótico para ser una obligación, páginas web adaptadas especialmente para su descarga y uso en terminales telefónicos, tanto para iPhone como para demás dispositivos.
MAQUETACIÓN Y PROGRAMACIÓN
La web está programada en asp, simplemente porque así empecé en su día y se trata de páginas que ya están posicionadas en Google, por lo que no quiero modificarlas. De todos modos se trata de un simple gestor de contenidos.
La web está maquetada en capas, con una hoja CSS principal para los estilos comunes y dos adicionales para aquellas páginas que lo requieren. Lo mismo sucede con los js, separados en función de si son necesarios o no en cada página. De este modo conseguimos no cargar archivos innecesarios.
La web ha sido optimizada para poder ser vista en firefox (principalmente), explorer y safari.
Entre los tags de la cabecera, hay uno que detecta si el usuario viene navegando con un iPhone, en ese caso se le redirige a la web preparada para móviles: http://www.gloobs.com/iphone/#_Inicio
Y eso es todo, espero que la nueva web me ayude a conseguir más trabajo y espero vuestros comentarios, críticas y preguntas.
Gracias por el artículo. Me ha sido de gran utilidad.
Estaría bien que todos los redactores escribieran un post tan bien escrito como el suyo.
De nuevo, Felicidades. Saludos 🙂
gracias por responder mi formulario.
Hola Vanessa,
espero poder ayudarte en algo, ahí van las respuestas.
1.- Procuro estar a la última en tendencias y nuevas tecnologías que pueden ayudarme a hacer diseños más usables, como por ejemplo el Ajax.
Cada vez que me enfrento a un nuevo proyecto, primero estudio la competencia de mi cliente, veo lo bueno que aportan y las carencias que tienen, luego en función al público al que va dirigido, elijo un estilo u otro, procurando siempre que lo que diseñe no afecte a la usabilidad de la web, un buen diseño jamás ha de ser explicado para usarse. También es importante hablar con el cliente y ver qué es lo que le atrae, asesorandole en todo momento y cogiendo todas aquellas ideas que como profesionales valoremos como positivas para el proyecto.
2.- En esta pregunta, supongo que te refieres al proceso que existe entre la primera idea y la final.
Existen dos tipos de proyectos, el primero es aquel en el que el cliente nos deja trabajar y nos deja que le asesoremos, en este tipo de proyectos, el diseño original del final no difiere mucho, se suman ideas y se amplian otras, pero todas sobre la misma base.
El segundo tipo de proyecto es aquel en el que el cliente está convencido de lo que quiere y aún equivocado, pretende manternerlo hasta el final. Este tipo de proyectos es una larga batalla en la que el proyecto o idea original va cambiando hasta muchas veces quedar irreconocible. Lo malo es que una vez subida la web y pasado un año, vuelve a llamarte para quejarse de que los resultados no son buenos, cosa que tu ya sabías y por eso intentaste avisarle una y otra vez …
3.- Yo no hablaría de arte web, me parece demasiado pedante, lo que si que es cierto es que a todo aquel que le guste esto, debe de empaparse de lo que hacen los demás, ver galerías, ver libros, revistas, anuncios de tv… Intentar siempre ponerse del lado del usuario. El diseño web a diferencia de otros diseños, está condicionado por ser un servicio que van a usar en ocasiones miles y miles de usuarios, con la disparidad que esto supone. Tenemos que diseñar siempre teniendo en cuenta las reglas del juego (un botón en un formulario va a la derecha, cuidado con el espacio vertical para que lo importante se vea en el primer pantallazo, etc etc).
Y sobre todo lo que aconsejo es poner mucha pasión, como todo en la vida, de ese modo ya tendremos un gran camino andado 😉
Vanessa, espero haberte ayudado en algo, si necesitas algo más, no dudes en contactarme, aquí o desde el formulario de mi web (www.gloobs.com).
Mucha suerte !!!
hola, mi nombre es Vanessa soy estudiante de la universidad ICESI y estoy en tercer semestre de Diseño de Medios Interactivos. estoy viendo una materia que se llama diagramación y tipografia y mi profeso puso como final hacer una revista sobre diseño web e ilustración, que debe ser entregada el 27 de noviembre. estuve viendo tus trabajos, me gustaron mucho y quisiera incluir en mi revista una entrevista contigo, claro, si tu no tienes ningun inconveniente en hacerla.
son pocas preguntas estare esperando tus respuesta si deseas contribuir a mi noble causa, gracias por tu colaboración.
1. ¿En qué basas tus ideas?
2. ¿Cuánto han atravesado por llegar hasta donde están?
3. ¿que consejos le darias a todos aquellos que desean hacer arte web?
atentamente
VANESSA MOSQUERA
ESTUDIANTE: TERCER SEMESTRE DISEÑO DE MEDIOS INTERACTIVOS
Universidad ICESI – SANTIAGO DE CALI
VALLE DEL CAUCA – COLOMBIA
Gracias Rubén, si, lo sé, el caso es que es un formulario que me llega directamente al correo y cuando se trata de caracteres raros cae siempre en la carpeta spam, pero tienes razón, debo sacar tiempo y arreglarlo 😉
Omar, el diseño de tu sitio esta muy bueno, como acotación, debes validar el formulario de contacto, ya que apreté enviar sin rellenar campos y se envió.
El día 11 de noviembre tendrá lugar la jornada Locos por el Hipertexto, una mirada hacia el diseño interactivo y el procomún. La cita será en el Auditorio Víctor Villegas de Murcia, desde las 9.00 a las 14.00 horas.
El evento contará con la presencia de tres interesantes ponentes del mundo del diseño e internet: Antonio Lafuente, del que podríamos destacar entre otras cosas su labor en el MediaLap-Prado dentro del taller El laboratorio del Procomún, Javier Candeira, co-fundador y creador de Barrapunto, el sitio web pionero en noticias sobre política digital y software libre y Álvaro Rey, fundador del estudio Waskman, embajador de la interactividad en la web.
La jornada se completará con una mesa redonda en la que participan los tres ponentes invitados junto a José María Ortín, Director de Firma Proyectos y Formación; Mercedes Fernández Morote, Responsable de Marketing de Marvimundo Perfumerías y Teresa Jular, de XL internet.
Nos gustaría contar con tu presencia.
Si deseas más información puedes visitar http://www.obsmurcia.es
Hola:
Excelente !!! me gusto mucho, tienes grandes dones. Me gustaria recibir un curso de diseno y por curiosidad… Que programas utilizas ??? o mejor dicho que software y hardware se necesita para crear este tipo de maravillas.
gracias.
Pues me alegro de que la casualidad te trajese y de que te sirva de algo este blog, muchas gracias a ti por seguirme.
Hola! ^^
la verdad es que hoy llegué a esta web por casualidad, pero he visto muchos artículos muy interesantes, y seguro que haré de esta página una de mis asiduas.
Con respecto al diseño, es genial, la verdad es que me gusta mucho, sobre todo como tienes la parte de las páginas web profesionales.
Y gracias a tí se que todas esas cosas que no conseguía hacer con css se hacen con ajax!! =D! Gracias!
Saludos! y espero que te de mucho trabajo ;D
Hola Eleklektiko 😉
Como dice aquel «cada maestrillo tiene su librillo», creo que es algo muy personal y es mejor usar un programa en el que te sientas agusto que no usar el mejor y no controlarlo como es debido…
Para mi, es imprescindible controlar photoshop y Html con CSS.
Te cuento, después de tener claro lo que voy a diseñar, me pongo directamente con photoshop, le doy mil vueltas y procuro no pensar en que luego hay que maquetarlo (si lo pienso no sigo), una vez aprobado el psd, maqueto con Dreamweaver pero directamente en modo código, sin utilizar las ayudas, es decir, maquete directamente en código, porque lo controlo mejor y porque me evito que me meta código basura. Según voy encontrando la forma de maquetar más óptima, voy cortando las imágenes y montando a la vez.
Este es mi método, pero seguro que hay mil más tan válidos o mejores.
Hola Omar, me gustaría saber cuál es el mejor Framework desde tu punto de vista para comenzar a diseñar… Gracias.
Hola Wolf.
Lo único que tienes que hacer es subir todo tu proyecto al hosting que has contratado, mediante cualquier programa cliente de ftp o bien mediante algún proceso que tenga la web de la empresa que te proporciona el hosting.
Luego lo único que tienes que tener en cuenta es que tu página inicial tenga el nombre default o index, que es el nombre por defecto que suelen tener los servidores y como no, asegurarte de que todas las rutas que has puesto en tu web no hacen referencia a tu equipo ni a tu localhost, si no que son relativas para que se pueda navegar sin error.
Suerte
Hola Amigos
Soy bastante nuevo en este tema del diseño web, de hecho, compre un programita que me ayudo a crear una pagina muy sencilla pra mi empresa, la cualdespues de algunos intentos al parecer quedo bien, ahora mi problem es como subirla a mi web hosting, bueno de hecho encontre que tenia que subirla a una crpeta dentro del administrador de archios de mi dominio que se llama HTTPDOCS, ya lo hice, subi el archivo del diseño de mi pagina web, pero estoy haciendo algo mal por que no se carga o mejor dicho, al teclear la direccion de la pagina de mi empresa sigue apareciendo en blanco, ya aneriormente me habian pasado eldato de como subir estearchivo a mi dminio , erocomo les digo, lo subi y no pasa nada, que estoy haciendo mal?
Gracias
Muchas gracias Krlos25, un abrazo 😉
Hola…realmente muy buen diseño ,sigo el blog ya de tiempo y es uno de mis favoritos espero que sigas posteando…saludos desde Perú
Muchas gracias Gabriel, me alegra que te guste.
En cuanto a portfolio o portafolio, aquí al menos (España) y creo que en toda Europa, el nombre correcto es «portfolio», seguramente «prestada» de los anglosajones, como si no tuviésemos palabras para definirlo en español 😉
Un abrazo a Colombia y muchas gracias por tu comentario.
Hola:
Bueno te felicito, la web ha quedado muy bonita y muy ingeniosa.
Lei el post sobre tu web y medio le he dado uan miarada al home y al formulario de contacto. Ya en estos dias le dare una mirada al resto de la web, pero en esencia «aguanta resto» como dicen. Osea muy bonita.
Solo un detalle que me fije Omar, en el menu del home esta escrito «PORTFOLIO» en ves de «PORTAFOLIO». No se si la intención es precisamente que vaya sin la A y que la T sea por descarte como el complemento. Si es asi te agradezco me comentes ya que soy de Colombia.
Bueno hombre te debo el resto del comentario de la web, pero mientras tanto va muy bien, felicidades.
Bye
Muchísimas gracias Carazo, un placer que sigas este blog 😉
Sencillamente genial. La verdad que te sigo desde hace tiempo y sigo creyendo que tus diseños son los mejores, o de los mejores, tanto como tecnológicamente como por diseño.
Enhorabuena por la nueva imagen.