Abschlussprojekt
Diseño web responsive en varios dispositivos
von Francisco Aveledo @fad
- 6,345
- 55
- 19
Este es el proyecto que he realizado para el curso de Diseño Web Responsive (visual). Se trata del rediseño de mi portafolio digital. A lo largo del curso explico el proceso desde la concepción de la idea hasta la preparación de los ficheros para ser usados por un programador.
Desktop design
Tablet design
Mobile design
+19 Kommentare
Enhorabuena Francisco, me encantan tus trabajos. La experiencia visual como usuario es buenissima con el grafismo.
Hola Luis,
Gracias por tus comentarios, se agradece!.
Guapo guapo!
Que chulo el proyecto @fad ¡Enhorabuena!
Gracias chicos! La he hecho de manera simple para que se entienda bien el proceso. Será interesante ver los proyectos de los alumnos.
Quisiera aprender a programar este tipo de website, que programa recomiendan usar?
Hola Juan,
Depende del lenguaje de programación que uses. Hay muchas aplicaciones visuales para programar, aunque un programador puro y duro suele usar un editor de texto y poco mas.
También hay programas con los que no necesitas saber mucho de código, como son el Adobe Muse, Macaw, Webflow y recientemente(aun en periodo de pruebas) Adobe Edge Reflow. Son programas visuales con los que puedes montar una web sin saber de programación.
Felicidades por el proyecto @fad
Siguiendo el hilo de los comentarios anteriores... ¿qué programa usas tu para maquetar las webs? ¿o las preparas con photoshop para que las programe otra persona?
¿Es photoshop realmente el programa más adecuado para diseñar webs? ¿Qué me dices de sketch3, fireworks (sabiendo que desparece), illustrator...o alguno de los que mencionas anteriormente?
Ya sé que todo son preguntas :)
Hola @edusaenz ,
Yo dejé de maquetar(montar) webs hace mucho tiempo, solía usar Dreamweaver y hoy en día lo sigo usando para hacer algunas modificaciones en el código, CSS y cosas así. Creo que este tema te lo puede contestar mejor un programador.
Photoshop es una opción típica para aquellos que venimos del mundo del diseño visual, pero cada vez se usa menos para diseñar webs*. Lo que pasa es que cada vez es más común que el diseñador web venga de una enseñanza técnica, de desarrollo, por lo cual muchos diseñadores webs actuales están diseñando directamente en la aplicación donde montan, incluso esa etapa previa del diseño visual aveces es suprimida de alguna manera y por eso vemos tantas webs parecidas y con estructuras muy similares. Es aquí donde yo defiendo que hace falta profundizar más en la parte del diseño puro, antes de entrar en la parte técnica. Esto lo hacen muchos, otros no tanto, también depende de cada proyecto.
Sketch es una opción, aunque tenía entendido que estaba más enfocada para apps, pero para ser sincero no la conozco bien. Muchos diseñadores ahora están diseñando webs en Illustrator porque con el HTML5 se pueden usar elementos de formato SVG, que es formato vectorial y por lo tanto los elementos se pueden escalar a cualquier tamaño sin perder calidad. Creo que esto es una buena opción.
En principio Fireworks es más práctico que Photoshop ya que está diseñada para hacer web. Si desaparece alguna otra la remplazará. Hay que pensar que Photoshop a todas estas no es una aplicación para diseñar, pero ha sido tan importante en el mundo del diseño que se ha utilizado para un montón de áreas que no le corresponde, como por ejemplo hacer logos. Una vez conocí a un diseñador que había montado toda una revista en Photoshop, puff! :)
*La razón por la cual se escogió Photoshop para este curso era para facilitar el proceso a muchos diseñadores gráficos que ya conocen esta aplicación, pero no es vital hacer webs con PS, tampoco tiene nada de malo usarlo, al final es simplemente la herramienta que usamos para plasmar una idea visual que luego será montada de otra manera.
Hola @edusaenz ,
¿y que te parece Indesign para diseñar una web? Personalmente me siento muy cómodo con el, pero no suelo encontrar tan facilmente grids como para photoshop.
Me preguntaba si es correcto trabajar con indesign para diseñar una web y si sabes de algún sitio donde existan Grids para Indesign.
Gracias y felicidades por el curso, creo que, me ayudara mucho.
Hola @unmedia
He escuchado que algunas personas usan el InDesign para webs, ya que este además tiene opciones de salida para HTML y CSS, pero tengo entendido que estas funciones no son fiables.
Lo bueno de InDesign es que tienes una serie de recursos prácticos a la hora de crear página maestras y objetos que puedes repetir con facilidad a través de las librerías. Esto puede ayudarte a realizar el boceto de toda una web de manera práctica y fácil de re-editar. Puede ser una buena herramienta para hacer wireframes digitales, o el boceto previo de una web a montar.
Yo creo que cualquier opción que sea práctica para cada uno es válida. Al fin y al cabo hoy en día las webs no se montan cortando todos los elementos desde otra aplicación, por lo que da igual que la montes en Photoshop, InDesign, Illustrator, etc. Lo que hagas en esos programas siempre será un boceto previo al montaje, lo importante es seguir una estructura lógica que sea fácil de desarrollar tomando en cuenta los principios técnicos de las webs.
Aquí te dejo algunos vínculos de artículos(en inglés) sobre el tema de InDesign para webs:
https://www.oss-usa.com/blog/best-web-design-tool-indesign-vs-photoshop
http://www.creativebloq.com/indesign/build-websites-61412106
http://dingdigital.co.uk/building-a-web-page-from-an-indesign-file
http://indesignsecrets.com/indesign-create-uxui-designs.php
Hola @unmedia y @fad, perdonar por no haber contestado antes, pero entre las fiestas... Etc etc...
Yo personalmente uso illustrator para diseñar webs, en el estudio hacemos webs muy a medida del cliente, wireframes en balsamiq, landings a medida, contenido muy enfocado al seo, etc. Pero no se hasta que punto es rentable, hoy en día puedes modificar plantillas ya hechas y quedan muy vistosas la verdad.
No veo en photoshop una herramienta óptima para hacer webs, por lo menos no webs que tengan muchas páginas, si que esta bien para webs (one page). Indesign es buena opción para poder crear paginas maestras, libreria de iconos, etc.
En fin, cada maestrillo tiene su librillo.
De todas formas, sigo buscando el programa que me permita diseñar agilmente webs con su version responsive, etc.
Gracias por responder a los dos y por la info enviada.
@danielpechugas Muchas gracias por tu comentario Daniel! Saludos
Hola Francisco, recien me intergo a todo lo que es Domestika, estoy interesada en este curso, y me gustaria saber si esto me sirve para hacer paginas webs? aparte de generar el porfolio...Muchas gracias!!
@ortega-natalia-b Hola, si, en este curso enseño los principios básicos para diseñar webs. El proyecto que realizo para el curso es un portafolio pero los principios te servirán para afrontar webs en general. Toma en cuenta que el curso cubre la fase del diseño visual únicamente, no toco programación. La idea de este curso es que cualquier diseñador tenga la capacidad de desarrollar el diseño visual de una web, pero esta tendrá que ser montada por un programador, al menos que tengas conocimientos técnicos.
Probablemente Domestika sacará un curso sobre programación o modificación de plantillas WordPress en los próximos meses. Esos cursos serán una perfecta complementación para este de la parte visual.
Si tienes más dudas o quieres preguntarme alguna otra cosa, me puedes escribir a: design@fa-d.com
Saludos!
fa
Hola @fad,
Me parece interesante tu proyecto para el curso de Diseño Web Responsive (los pantallazos que muestras aquí, en Domestika) aunque no los veo aplicados online. Es decir, he ido a tu portfolio online (www.fa-d.com) pero no veo que sea responsive... ¿es así?
Saludos.
@la_m Hola Marta, así es! lamentablemente he estado tan ocupado con otras cosas que no he tenido tiempo de montar mi propia web, en casa de herrero... La web que tengo ahora la diseñé hace 5 años y no la he actualizado en mucho tiempo.
En principio quería hacerlo yo con una aplicación de montaje sin saber de código, como Webflow o Adobe Muse. La idea era probar estas aplicaciones para ver qué tan sencillas son y así poder hacer una reseña para mis alumnos, pero me ha sido imposible ponerme con eso y quizá tenga que contratar a un programador para montarla.
De todas formas tengo que tener mi web pronto, posiblemente para enero o febrero.
Hola, vengo por aquí porque estoy buscando un curso sobre diseño web puro, es decir, dejando de lado la parte de desarrollo ya que esta la estoy trabajando en otros talleres. Pero me preguntaba, dada ya cierta antigüedad del curso, si tendría un actualización en cuanto a la herramienta utilizada, es decir PS. Estoy empezando en este mundo de la Web y al menos en donde he consultado, usar PS esta mal visto. Se considera un desgaste de tiempo porque (dicen) el verdadero diseño de la web comienza en su desarrollo, esto es sin más ni menos, código. Cada vez que me animo a sacar el tema, la solución parece ser o aprender código hasta niveles avanzados para conseguir los resultados que se quieren, o maquetar la Web usando programas que en trabajo interno escriban el código como Muse, o diseñar sólo bocetos muy rápidos para enseguida pasar a código. De repente, me hago un lío.
Hola @jonna,
El curso lo hago usando el Photoshop, no hay ninguna actualización al respecto. Es cierto que en los últimos años el Photoshop se ha ido suprimiendo y que la parte de desarrollo de una web ha abarcado el proceso entero desde el principio. Pero el mismo Photoshop se ha ido actualizado para seguir siendo útil en el diseño web. También es cierto que ese protagonismo del código ha llevado al diseño web a su etapa más aburrida y simple, donde la inmensa mayoría de las webs hoy en día son prácticamente iguales. Es difícil encontrar un buen programador que diseñe bien o vice-versa.
Lo ideal es dominar ambas áreas, pero la programación no es algo que cualquier diseñador visual quiera dominar o apreciar, son dos disciplinas distintas y la programación es un área bastante compleja si se quiere dominar bien. Esto también depende de cómo trabajes, yo siempre ofrezco el diseño visual sin programación y siempre habrán clientes que les va bien de esa manera. Toma en cuenta que encontrar un buen diseñador visual es más complicado que un buen programador, por eso muchas empresas suelen buscar el diseño visual aparte y resuelven la programación internamente o saben que será mas fácil conseguir a un programador. Valoran más la parte visual.
Yo te recomendaría la utilización de programas como el Muse o Webflow. Para mi son la verdadera herramienta actual de un diseñador visual, ya que te permite montar webs sin tener que hacerte experto en programación. Al menos con estos programas puedes crear maquetas funcionales para que los clientes tengan una mejor idea del proyecto, y si necesitan programación más compleja entonces podrán contratar a un experto en esa área. De tu proceso de diseño dependerá si puedes comenzar los proyectos directamente en esas aplicaciones o comenzar bocetando en Photoshop. A mi me va mejor comenzar por Photoshop porque lo domino y allí puedo hacer muchos cambios. Esto es personal, a cada uno le irá diferente. Yo prefiero concentrarme puramente en lo visual y que luego el código de adapte al diseño, y no al revés, que es lo que está sucediendo mucho actualmente.
Mi curso intenta enseñar los principios del diseño visual y de cómo crear una web portafolio (algo sencillo) en su etapa visual. Es un curso simple para iniciados en el diseño web y ayuda a visualizar esa etapa del diseño. En este sentido te irá bien y podrás complementarlo aprendiendo Muse o cualquier programa parecido.
Para cualquier otra duda me puedes enviar un mensaje.
Saludos!
Francisco
Melden Sie sich an oder melden Sie sich kostenlos an, um zu kommentieren